Don't show header or footer for css reference

docs/pages/index.js

@@ -12,10 +12,7 @@ export default () => (
   <Layout>
     <section className="bg-black-0125 w-100">
       <article>
-        <Nav />
-        <Hero version={version} />
-        <GettingStarted version={version} />
-        <StartUsing />
+        <H1>Hello, world!</H1>
       </article>
     </section>
   </Layout>

docs/pages/reference.js

@@ -13,9 +13,9 @@ class Reference extends Component {
     const module = modules[this.props.module]
 
     return (
-      <Layout skipFooter={true} fixed={true}>
-        <Flex className='bt b--black-10'>
-          <div className='fixed bg-near-white w5 h-100 overflow-container br b--black-10 flex-shrink-0 pt5'>
+      <Layout skipFooter={true} skipHeader={true}>
+        <Flex>
+          <div className='fixed bg-near-white w5 h-100 overflow-container br b--black-10 flex-shrink-0'>
             <nav
               className='pv2'
               children={Object.keys(modules).map(k => {
@@ -33,10 +33,10 @@ class Reference extends Component {
             />
           </div>
           <Flex className='ml6 pl6 w-100 mh-100'>
-            <div className='flex-1 nt4 br b--black-10'>
+            <div className='flex-1'>
             description of stuff
             </div>
-            <div className='flex-1 pt4 mt2'>
+            <div className='flex-1'>
               <SrcReference {...module} />
             </div>
           </Flex>

docs/ui/Header.js

@@ -46,9 +46,9 @@ class Header extends Component {
     const icon = this.state.mobileMenuOpen ? <TimesIcon /> : <HamburgerIcon />
 
     return (
-      <header className="fixed z-max bg-white w-100 bb b--black-10">
+      <header className="bg-white w-100 bb b--black-10">
         <div className="pv3">
-          <div>
+          <Container padding={true}>
             <Flex justify="between" alignItems="center">
               <TitleLink
                 href="/"
@@ -67,7 +67,7 @@ class Header extends Component {
               </div>
               <div className="dn flex-m">{this.navigation('desktop')}</div>
             </Flex>
-          </div>
+          </Container>
         </div>
         {this.state.mobileMenuOpen && (
           <nav className="bg-near-white pv1 dn-m">

docs/ui/Layout.js

@@ -7,8 +7,8 @@ import Footer from './Footer'
 export default ({
   title = 'TACHYONS - Css Toolkit',
   className = '',
+  skipHeader,
   skipFooter,
-  fixed,
   children
 }) => {
   console.log(`
@@ -30,7 +30,7 @@ export default ({
       <link rel="stylesheet" href="https://file-jyzsebnxow.now.sh" />
       <link rel="stylesheet" href="https://file-zlngimivyb.now.sh" />
 
-      <Header version={version} />
+      {skipHeader ? null : <Header version={version} />}
       <main className={className} children={children} />
       <Footer />
       {skipFooter ? null : <Footer />}