setup basic layout

frontend/src/components/footer.js

+import React from "react"
+
+const Footer = () => (
+  <footer>
+    {`© ${new Date().getFullYear()}, Built by `}
+    <a href="https://waag.org">Waag</a>
+  </footer>
+)
+
+export default Footer

frontend/src/components/layout.js

@@ -5,6 +5,7 @@ import { useStaticQuery, graphql } from "gatsby"
 import "../styles/styles.scss"
 
 import Header from "./header"
+import Footer from "./footer"
 
 
 const Layout = ({ children }) => {
@@ -19,23 +20,11 @@ const Layout = ({ children }) => {
   `)
 
   return (
-    <>
+    <div id="page">
       <Header siteTitle={data.site.siteMetadata.title} />
-      <div
-        style={{
-          margin: `0 auto`,
-          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>
-    </>
+      <main>{children}</main>
+      <Footer />
+    </div>
   )
 }
 

frontend/src/styles/_footer.scss

+footer {
+  text-align: center;
+  font-size: 0.8rem;
+}
\ No newline at end of file

frontend/src/styles/_layout.scss

+#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

frontend/src/styles/styles.scss

 @import "reset";
+@import "layout";
 @import "typography";
 @import "header";
+@import "footer";