From 21d0f12bb46bac75b296010f5ae20c09f4d12c7a Mon Sep 17 00:00:00 2001
From: LordMathis <matus@namesny.com>
Date: Fri, 2 Oct 2020 18:54:53 +0200
Subject: [PATCH] Vertically center index page

---
 src/components/layout.js      | 10 ++++++----
 src/pages/index.js            |  5 +++--
 src/styles/layout.module.scss |  7 +++++++
 src/styles/social.module.scss |  5 +----
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/layout.js b/src/components/layout.js
index c413d3f..637190e 100644
--- a/src/components/layout.js
+++ b/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
diff --git a/src/pages/index.js b/src/pages/index.js
index 4408f46..2fb476f 100644
--- a/src/pages/index.js
+++ b/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>
   )
 }
diff --git a/src/styles/layout.module.scss b/src/styles/layout.module.scss
index f2d885a..3418fbc 100644
--- a/src/styles/layout.module.scss
+++ b/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%;
 }
\ No newline at end of file
diff --git a/src/styles/social.module.scss b/src/styles/social.module.scss
index 8945741..3ae47de 100644
--- a/src/styles/social.module.scss
+++ b/src/styles/social.module.scss
@@ -2,12 +2,9 @@
 
 
 .socialNavbar {
-
-  float: right;
-  vertical-align: bottom;
-
   ul {
     list-style: none;
+    padding: 0;
     li {
       display: inline;
     }