Commit 654469db authored by alain's avatar alain 🐙
Browse files

setup basic layout

parent 3605c781
import React from "react"
const Footer = () => (
<footer>
{${new Date().getFullYear()}, Built by `}
<a href="https://waag.org">Waag</a>
</footer>
)
export default Footer
...@@ -5,6 +5,7 @@ import { useStaticQuery, graphql } from "gatsby" ...@@ -5,6 +5,7 @@ import { useStaticQuery, graphql } from "gatsby"
import "../styles/styles.scss" import "../styles/styles.scss"
import Header from "./header" import Header from "./header"
import Footer from "./footer"
const Layout = ({ children }) => { const Layout = ({ children }) => {
...@@ -19,23 +20,11 @@ const Layout = ({ children }) => { ...@@ -19,23 +20,11 @@ const Layout = ({ children }) => {
`) `)
return ( return (
<> <div id="page">
<Header siteTitle={data.site.siteMetadata.title} /> <Header siteTitle={data.site.siteMetadata.title} />
<div <main>{children}</main>
style={{ <Footer />
margin: `0 auto`, </div>
maxWidth: 960,
padding: `0 1.0875rem 1.45rem`,
}}
>
<main>{children}</main>
<footer>
© {new Date().getFullYear()}, Built by
{` `}
<a href="https://waag.org">Waag</a>
</footer>
</div>
</>
) )
} }
......
footer {
text-align: center;
font-size: 0.8rem;
}
\ No newline at end of file
#page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1 0 auto;
width: 100%;
max-width: 960px;
margin: 3rem auto;
padding: 0 1rem;
}
footer {
flex-shrink: 0;
}
\ No newline at end of file
@import "reset"; @import "reset";
@import "layout";
@import "typography"; @import "typography";
@import "header"; @import "header";
@import "footer";
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment