From 0c872f69fc8584d3f4ced0d2734ae4025d8a5817 Mon Sep 17 00:00:00 2001
From: Jake Dexheimer <jakedex@gmail.com>
Date: Sun, 18 Jun 2017 21:57:05 -0700
Subject: [PATCH] CSS display fixes

---
 components/Toolbar.js |  2 +-
 pages/index.js        | 36 ++++++++++++++++++------------------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/components/Toolbar.js b/components/Toolbar.js
index 6ac068f..dc4dfd0 100644
--- a/components/Toolbar.js
+++ b/components/Toolbar.js
@@ -30,7 +30,7 @@ const Toolbar = (props) => (
         margin-bottom: 16px;
         display: flex;
         position: relative;
-        z-index: 1;
+        z-index: 3;
         font-size: 14px;
         color: #4F6875;
       }
diff --git a/pages/index.js b/pages/index.js
index 09a84a1..1b95c22 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -58,8 +58,10 @@ class Index extends React.Component {
         <div className="main">
           <Meta />
           <div className="header">
-            <Logo />
-            <h1>The easiest way to create images from source code. Start typing, or drag a file into the text area to get started.</h1>
+            <div className="header-content">
+              <Logo />
+              <h1>The easiest way to create images from source code. Start typing, or drag a file into the text area to get started.</h1>
+            </div>
           </div>
           <div id="editor">
             <Toolbar
@@ -80,40 +82,38 @@ class Index extends React.Component {
           <style jsx>{`
             .main {
               display: flex;
-              justify-content: space-between;
-              padding: 64px;
+              flex-direction: column;
+              align-items: center;
               height: 100vh;
+              min-width: 848px;
             }
 
             .header {
-              margin-top: 56px;
-              width: 776px;
+              margin: 40px 0 32px;
+              width: 704px;
+            }
+
+            .header-content {
               display: flex;
-              flex-direction: row;
               justify-content: space-between;
+              align-items: center;
             }
 
-            h1 {
-              max-width: 570px;
-              font-size: 24px;
+            .header-content h1 {
+              max-width: 472px;
+              font-size: 20px;
               line-height: 1.5;
               color: #fff;
             }
 
-            div {
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              align-items: center;
-            }
-
             #editor {
-              height: 460px;
               background: #151515;
               padding: 16px;
             }
 
             .footer {
+              font-size: 14px;
+              margin: 32px 0;
               color: #506874;
             }