Slight improvements to aside in post layout on mobile`

src/assets/style.scss

@@ -102,6 +102,60 @@ main {
   }
 }
 
+header {
+  grid-area: header;
+}
+
+aside {
+  grid-area: aside;
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  dl {
+    margin: 0;
+    padding-bottom: 22px;
+    display: flex;
+    flex-wrap: wrap;
+
+    dt, dd {
+      display: inline-block;
+    }
+
+    dd {
+      margin: 0;
+    }
+  }
+
+  a {
+    padding-left: 0;
+    padidng-right: 0;
+  }
+}
+
+article {
+  grid-area: content;
+
+  h2 {
+    padding: 16px 0
+  }
+
+  ul {
+    padding: 0 0 0 16px;
+    margin: 0 0 32px;
+  }
+}
+
+footer {
+  grid-area: footer;
+  padding-top: 48px;
+  border-top: 1px dotted #aaa;
+}
+
+
 @media screen and (max-width: 768px) {
   body {
     font-size: 14px;
@@ -127,53 +181,27 @@ main {
       "content"
       "footer";
   }
-}
-
-header {
-  grid-area: header;
-}
 
   aside {
-  grid-area: aside;
+    dl {
-
+      dt, dd {
-  ul {
+        flex: 1 1 auto;
-    list-style: none;
+        flex-basis: 50%;
-    margin: 0;
-    padding: 0;
       }
 
-  dl {
+      dt {
-    margin: 0;
+        flex-shrink: 1;
-    padding-bottom: 22px;
+        flex-gorw: 0;
-
-    dt, dd {
-      display: inline-block;
       }
 
       dd {
-      margin: 0;
+        flex-shrink: 0;
+        flex-grow: 1;
+      }
     }
   }
 }
 
-article {
-  grid-area: content;
-
-  h2 {
-    padding: 16px 0
-  }
-
-  ul {
-    padding: 0 0 0 16px;
-    margin: 0 0 32px;
-  }
-}
-
-footer {
-  grid-area: footer;
-  padding-top: 48px;
-  border-top: 1px dotted #aaa;
-}
 
 // special page styling
 
@@ -188,6 +216,11 @@ footer {
       padding-bottom: 16px;
     }
 
+    a {
+      padding-left: .3em;
+      padding-right: .3em;
+    }
+
     ul {
       list-style: inside;
       padding: 0 0 0 16px;