Add metadata layout section

src/assets/style.scss

@@ -88,11 +88,12 @@ main {
   width: 100%;
   max-width: 960px;
   padding: 48px;
-  grid-gap: 32px;
+  row-gap: 48px;
+  column-gap: 32px;
   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 empty empty empty"
+    "header metadata metadata metadata"
     "aside content content content"
     "footer footer footer footer";
   grid-auto-flow: dense;
@@ -107,13 +108,28 @@ header {
 
   a {
     border: none;
+    display: block;
+
     &:hover {
       background: none;
     }
   }
 }
 
-aside {
+aside.metadata {
+  grid-area: metadata;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-end;
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+}
+
+aside.navigation {
   grid-area: aside;
 
   ul {
@@ -162,7 +178,6 @@ footer {
   border-top: 1px dotted #aaa;
 }
 
-
 @media screen and (max-width: 768px) {
   body {
     font-size: 14px;
@@ -181,10 +196,12 @@ footer {
   main {
     max-width: unset;
     padding: 32px;
+    row-gap: 32px;
     grid-template-columns: minmax(0, 1fr);
     grid-template-areas:
       "header"
       "aside"
+      "metadata"
       "content"
       "footer";
   }
@@ -209,34 +226,19 @@ footer {
   }
 }
 
-
 // special page styling
 
 .home {
   grid-template-areas:
-    "header empty empty empty"
+    "header metadata metadata metadata"
     "aside aside aside aside"
     "footer footer footer footer";
 
   aside {
-    nav {
-      padding-bottom: 16px;
-    }
-
     a {
       padding-left: .3em;
       padding-right: .3em;
     }
-
-    ul {
-      list-style: inside;
-      padding: 0 0 0 16px;
-      margin: 0 0 32px;
-
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-    }
   }
 
   article { display: none; }