Vertically center index page

This commit is contained in:
LordMathis 2020-10-02 18:54:53 +02:00
parent ca7d9f7c81
commit 21d0f12bb4
4 changed files with 17 additions and 10 deletions

View File

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

View File

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

View File

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

View File

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