Vertically center index page

src/components/layout.js

@@ -7,7 +7,7 @@ import Footer from "./footer"
 import { Helmet } from "react-helmet"
 import styles from "../styles/layout.module.scss"
 
-const Layout = ({ children, title, author}) => {
+const Layout = ({ children, title, author, vertical}) => {
 
   const data = useStaticQuery(graphql`
   query SiteTitleQuery {
@@ -17,8 +17,9 @@ const Layout = ({ children, title, author}) => {
         hostname
       }
     }
-  }
-`)
+  }`)
+
+  const classes = vertical ? `${styles.content} ${styles.vertical}` : styles.content
 
   return (
     <div className={styles.flexWrapper}>
@@ -30,7 +31,7 @@ const Layout = ({ children, title, author}) => {
       <Header
         user={data.site.siteMetadata.user}
         hostname={data.site.siteMetadata.hostname} />
-      <div className={styles.content}>
+      <div className={classes}>
         <main className={styles.main}>{children}</main>
       </div>
       <Footer authorName={author}/>
@@ -40,6 +41,7 @@ const Layout = ({ children, title, author}) => {
 
 Layout.propTypes = {
   children: PropTypes.node.isRequired,
+  vertical: PropTypes.bool
 }
 
 export default Layout

src/pages/index.js

@@ -4,6 +4,7 @@ import { useStaticQuery, graphql } from "gatsby"
 import Layout from "../components/layout"
 
 import "../styles/global.scss"
+import Index from "../components"
 
 const IndexPage = () => {
 
@@ -24,8 +25,8 @@ const IndexPage = () => {
   `)
 
   return (
-    <Layout title="Home" author={data.site.siteMetadata.author} >
-      <h1>Hello</h1>
+    <Layout title="Home" author={data.site.siteMetadata.author} vertical={true} >
+      <Index author={data.site.siteMetadata.author} social={data.site.siteMetadata.social} email={data.site.siteMetadata.email}/>
     </Layout>
   )
 }

src/styles/layout.module.scss

@@ -11,6 +11,12 @@
   }
 }
 
+.vertical {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
 .flexWrapper {
   display: flex;
   flex-direction: column;
@@ -20,4 +26,5 @@
 
 .main {
   width: 100%;
+  height: 100%;
 }

src/styles/social.module.scss

@@ -2,12 +2,9 @@
 
 
 .socialNavbar {
-
-  float: right;
-  vertical-align: bottom;
-
   ul {
     list-style: none;
+    padding: 0;
     li {
       display: inline;
     }