mess around with splash

Author: leebyron

site/_core/HeaderLinks.js

@@ -10,10 +10,10 @@ var React = require('react');
 
 var HeaderLinks = React.createClass({
   linksInternal: [
-    {section: 'docs', text: 'Docs', href: '/docs/getting-started/' },
-    {section: 'blog', text: 'Blog', href: '/blog/' },
-    {section: 'help', text: 'Help', href: '/help/' },
+    {section: 'docs', text: 'Learn', href: '/docs/getting-started/' },
     {section: 'code', text: 'Code', href: '/code/' },
+    {section: 'help', text: 'Community', href: '/help/' },
+    {section: 'blog', text: 'Blog', href: '/blog/' },
   ],
   linksExternal: [
     {section: 'spec', text: 'Spec', href: 'http://facebook.github.io/graphql/' },

site/css/graphql.css

@@ -285,9 +285,21 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
 
 .hero {
   background: #2d2d2d;
-  padding: 50px 0;
   color: #f8f8f8;
-  font-weight: 300;
+  height: 80vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.hero .content {
+  margin: 30px;
+}
+
+.hero .main-logo {
+  margin: 0 auto;
+  display: block;
 }
 
 .hero .text {

site/index.html.js

@@ -8,7 +8,8 @@ var index = React.createClass({
     return (
       <Site>
         <div className="hero">
-          <div className="wrap">
+          <div className="content">
+            <img className="main-logo" src={'/img/logo.svg'} width="240" height="240" />
             <h1 className="text"><strong>GraphQL</strong></h1>
             <h2 className="minitext">
               {SiteData.description}