Edit docs landing page

docs/_app.js

@@ -1,8 +1,39 @@
 import React from 'react'
-import { Provider } from 'rebass'
+import {
+  Provider,
+  Flex,
+  Box,
+  Text,
+  Caps,
+  BlockLink,
+} from 'rebass'
+import { Link } from 'react-router-dom'
+import { Logo } from '@compositor/logo'
 import theme from './theme'
 
 export default ({ render }) =>
   <Provider theme={theme}>
+    <Flex alignItems='center'>
+      <BlockLink
+        href='https://compositor.io'>
+        <Flex px={1} py={2} alignItems='center'>
+          <Logo size={32} />
+          <Caps fontWeight='bold'>
+            Compositor
+          </Caps>
+        </Flex>
+      </BlockLink>
+      <Box mx='auto' />
+      <BlockLink px={3} is={Link} to='/'>
+        <Caps fontWeight='bold'>
+          x0
+        </Caps>
+      </BlockLink>
+      <BlockLink px={3} href='https://github.com/c8r/x0'>
+        <Caps fontWeight='bold'>
+          GitHub
+        </Caps>
+      </BlockLink>
+    </Flex>
     {render()}
   </Provider>

docs/_scope.js

@@ -22,6 +22,7 @@ export default {
       is='h2'
       fontSize={5}
       mt={3}
+      mb={2}
     />),
   h3: heading(props =>
     <Rebass.Heading
@@ -39,6 +40,7 @@ export default {
     <Pre
       {...props}
       p={3}
-      bg='#f6f6f6'
+      mb={3}
+      bg='#f6f6fc'
     />
 }

docs/docs.js

@@ -10,7 +10,10 @@ const Prose = styled.div([], {
   '& img': {
     display: 'block',
     maxWidth: '100%',
-    height: 'auto'
+    height: 'auto',
+  },
+  '& .demo-image, & a[href="LICENSE/"]': {
+    display: 'none'
   }
 })
 

docs/index.js

@@ -28,25 +28,14 @@ export default class extends React.Component {
     return (
       <React.Fragment>
         <Container py={5}>
-          <Flex
-            mb={4}
-            alignItems='center'>
-            <Logo size={32} />
-            <Caps fontWeight='bold'>
-              Compositor
-            </Caps>
-          </Flex>
-          <Heading is='h1'
-            mb={2}
-            fontSize={[ 5, 6, 7 ]}>
-            x0
-          </Heading>
-          <Text
+          <Heading
+            is='h1'
             mb={4}
+            lineHeight={1.125}
             fontWeight='bold'
-            fontSize={4}>
-            Zero-config React development environment & static site generator
-          </Text>
+            fontSize={[ 4, 5, 6 ]}>
+            x0: Zero-config React development environment & static site generator
+          </Heading>
           <Box mb={4}>
             <Video
               autoPlay