Finish layout

src/components/layout.js

@@ -37,10 +37,12 @@ const Layout = ({ children, title }) => {
         socialNames={data.site.siteMetadata.social.names}
         socialLinks={data.site.siteMetadata.social.links}
         email={data.site.siteMetadata.email} />
-      <div className={styles.content}>
+      <div className={styles.flexWrapper}>
-        <main>{children}</main>
+        <div className={styles.content}>
+          <main>{children}</main>
+        </div>
+        <Footer authorName={data.site.siteMetadata.author}/>
       </div>
-      <Footer authorName={data.site.siteMetadata.author}/>
     </>
   )
 }

src/styles/footer.module.scss

@@ -3,6 +3,7 @@
 .footer {
   padding: 10px;
   text-align: center;
+  border-top: 1px solid $blue;
 }
 
 .link {

src/styles/header.module.scss

@@ -2,6 +2,9 @@
 
 .header {
   overflow: auto;
+  border-bottom: 1px solid $blue;
+  height: 70px;
+  box-sizing: border-box;
 }
 
 .links {

src/styles/layout.module.scss

@@ -9,3 +9,10 @@
     display: flex;
   }
 }
+
+.flexWrapper {
+  display: flex;
+  min-height: calc(100vh - 70px);
+  flex-direction: column;
+  justify-content: space-between;
+}