Add footer

src/assets/style.scss

@@ -26,6 +26,8 @@ body {
   font-family: monospace;
   font-size: 16px;
   line-height: 1.5;
+  display: flex;
+  min-height: 100vh;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -84,14 +86,14 @@ main {
   max-width: 960px;
   margin: 48px;
   grid-gap: 32px;
-  // grid-auto-rows: 1fr;
   grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-rows: auto minmax(0, 1fr) auto; // grow the content area, shrink the other ones
   grid-template-areas:
     "header header header header"
-    "aside content content content";
+    "aside content content content"
+    "footer footer footer footer";
   grid-auto-flow: dense;
 
-
   p {
     text-align: justify
   }
@@ -115,11 +117,12 @@ main {
   main {
     max-width: unset;
     margin: 32px;
-    grid-template-columns: repeat(1, minmax(0, 1fr));
+    grid-template-columns: minmax(0, 1fr);
     grid-template-areas:
       "header"
       "aside"
-      "content";
+      "content"
+      "footer";
   }
 }
 
@@ -168,18 +171,52 @@ article {
   }
 }
 
+footer {
+  grid-area: footer;
+  color: #aaa;
+  padding-top: 48px;
+  border-top: 1px dotted #aaa;
+
+  a {
+    color: #888;
+    background: #88888822;
+    box-shadow: .3em 0 0 #88888822,
+                -.3em 0 0 #88888822;
+
+    &:hover {
+      background: #88888844;
+      box-shadow: .3em 0 0 #88888844,
+                  -.3em 0 0 #88888844;
+    }
+  }
+}
+
 // special page styling
 
 .home {
   grid-template-areas:
     "header header header header"
-    "aside aside aside aside";
+    "aside aside aside aside"
+    "footer footer footer footer";
 
   aside {
+    nav {
+      padding-bottom: 16px;
+    }
+
+    a {
+      // let post titles break
+      display: inline;
+    }
+
     ul {
       list-style: inside;
       padding: 0 0 0 16px;
       margin: 0 0 32px;
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
     }
   }