From 49f22eb8c39c5809e4c8ea129b84e37d92d79709 Mon Sep 17 00:00:00 2001
From: arne <hi@arnes.space>
Date: Thu, 3 Mar 2022 12:21:59 +0100
Subject: [PATCH] Slight improvements to `aside` in post layout on mobile`

---
 src/assets/style.scss | 113 +++++++++++++++++++++++++++---------------
 1 file changed, 73 insertions(+), 40 deletions(-)

diff --git a/src/assets/style.scss b/src/assets/style.scss
index 331a080..c43352e 100644
--- a/src/assets/style.scss
+++ b/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 {
+    dl {
+      dt, dd {
+        flex: 1 1 auto;
+        flex-basis: 50%;
+      }
 
-aside {
-  grid-area: aside;
+      dt {
+        flex-shrink: 1;
+        flex-gorw: 0;
+      }
 
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  dl {
-    margin: 0;
-    padding-bottom: 22px;
-
-    dt, dd {
-      display: inline-block;
-    }
-
-    dd {
-      margin: 0;
+      dd {
+        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;