CSS display fixes

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;
       }

pages/index.js

@@ -58,8 +58,10 @@ class Index extends React.Component {
         <div className="main">
           <Meta />
           <div className="header">
-            <Logo />
+            <div className="header-content">
-            <h1>The easiest way to create images from source code. Start typing, or drag a file into the text area to get started.</h1>
+              <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;
+              flex-direction: column;
-              padding: 64px;
+              align-items: center;
               height: 100vh;
+              min-width: 848px;
             }
 
             .header {
-              margin-top: 56px;
+              margin: 40px 0 32px;
-              width: 776px;
+              width: 704px;
+            }
+
+            .header-content {
               display: flex;
-              flex-direction: row;
               justify-content: space-between;
+              align-items: center;
             }
 
-            h1 {
+            .header-content h1 {
-              max-width: 570px;
+              max-width: 472px;
-              font-size: 24px;
+              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;
             }