Center AboveFold

- widen main to fit title on one line on 15" mbp
- keep max width so text isn't too wide under the 980px breakpoint

Author: lorensr

src/components/landing/AboveFold.css

@@ -2,7 +2,7 @@
   width: 100vw;
   height: 100vh;
   background-image: linear-gradient(345deg, white, var(--gray200));
-  --main-size: 57vw;
+  --main-size: 60vw;
 }
 
 .AboveFold-container {
@@ -54,13 +54,15 @@
 .AboveFold-title {
   color: var(--cover-black) !important;
   font-weight: 500 !important;
+  text-align: center;
 }
 
 .AboveFold-subtitle {
   font-size: 1.3rem !important;
   margin: 25px 0 70px !important;
   color: var(--gray700) !important;
   font-weight: 300 !important;
+  text-align: center;
 }
 
 .AboveFold-buttons > button {
@@ -105,12 +107,12 @@
   .AboveFold-container {
     width: 85vw;
     height: auto;
+    justify-content: center;
   }
 
   .AboveFold-main-container {
     width: auto;
     flex-direction: column;
-    max-width: none;
     height: auto;
     margin: 0;
     margin-top: 60px;

src/components/landing/AboveFold.js

@@ -23,7 +23,7 @@ const AboveFold = () => (
         <div className="AboveFold-main">
           <div className="AboveFold-text">
             <Typography className="AboveFold-title" variant="display3">
-              GraphQL is the new REST
+              GraphQL is the <span className="-nowrap">new REST</span>
             </Typography>
             <Typography className="AboveFold-subtitle" variant="body1">
               GraphQL is the best way to fetch data for your app, and the