Clean up margin styles

components/Footer.js

@@ -3,22 +3,17 @@ import Link from 'next/link'
 import { PALETTE } from '../lib/constants'
 
 const Footer = (props) => (
-  <div className="footer">
+  <div className="mt3">
-    <div>
+    <div className="mt2">
       <Link href="/about"><a>about</a></Link>
       <a href="mailto:hi@dawnlabs.io?subject=Carbon%20Feedback&anp;body=">send feedback</a>
       <a href="https://github.com/dawnlabs/carbon">source</a>
     </div>
-    <div>a project by <a href="https://twitter.com/dawn_labs">@dawn_labs</a> ¬</div>
+    <div className="mt2">a project by <a href="https://twitter.com/dawn_labs">@dawn_labs</a> ¬</div>
     <style jsx>{`
-      .footer {
+      div > div {
-        margin: 48px 0;
-      }
-
-      div {
         text-align: center;
         font-size: 14px;
-        margin: 16px 0;
         color: ${PALETTE.GRAY};
       }
 

components/Header.js

@@ -2,10 +2,10 @@ import React from 'react'
 import Logo from './svg/Logo'
 
 const Header = ({ enableHeroText }) => (
-  <div className="header mt3 mb4">
+  <div className="header mb4">
     <div className="header-content">
-      <a className="mb3" href="/"><Logo /></a>
+      <a href="/"><Logo /></a>
-      { enableHeroText ? (<h2>The easiest way to create images from source code.<br/> Start typing, or drag a file into the text area to get started.</h2>) : null }
+      { enableHeroText ? (<h2 className="mt3">The easiest way to create images from source code.<br/> Start typing, or drag a file into the text area to get started.</h2>) : null }
     </div>
     <style jsx>{`
       .header {
@@ -24,7 +24,6 @@ const Header = ({ enableHeroText }) => (
 
       h2 {
         text-align: center;
-        margin-top: 0;
       }
     `}</style>
   </div>

components/Page.js

@@ -4,7 +4,7 @@ import Header from './Header'
 import Footer from './Footer'
 
 export default ({ children, enableHeroText }) => (
-  <div className="main">
+  <div className="main mt4 mb4">
     <Meta />
     <Header enableHeroText={enableHeroText} />
     <div className="page">

server.js

@@ -1,4 +1,3 @@
-
 const express = require('express')
 const morgan = require('morgan')
 const bodyParser = require('body-parser')
@@ -22,7 +21,7 @@ app.prepare()
   server.use(morgan('tiny'))
 
   // if root, render webpage from next
-  server.get('*', (req, res) => 
+  server.get('*', (req, res) =>
     app.render(req, res, '/', req.query))
 
   // otherwise, try and get gist