Improve spacing in the sidebar of posts' pages

src/_includes/posts.njk

@@ -2,7 +2,7 @@
 
 {% block sidebar %}
 <dl>
-<dt>Last change</dt>
+<dt>Last updated on</dt>
 <dd><time datetime="{{page.date}}">{{page.date | toISODate}}</time></dd>
 </dl>
 <a href="{{ "/" | url }}">← Home</a>

src/assets/style.scss

@@ -51,24 +51,18 @@ p {
 
 a {
   color: $highlight;
-  display: inline-block;
-  position: relative;
   text-decoration: none;
+  position: relative;
+  background: $highlight-1;
+  box-shadow: .3em 0 0 $highlight-1,
+              -.3em 0 0 $highlight-1;
+  padding: .1em 0;
+  transition: background .2s ease-in, box-shadow .2s ease-in;
 
-  &:before {
+  &:hover {
-    content: '';
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    bottom: 0;
-    left: -.3em;
-    right: -.3em;
-    background: $highlight-1;
-    transition: .2s background ease-in;
-  }
-
-  &:hover:before {
     background: $highlight-2;
+    box-shadow: .3em 0 0 $highlight-2,
+                -.3em 0 0 $highlight-2;
   }
 }
 
@@ -144,15 +138,21 @@ aside {
 
   dl {
     margin: 0;
+    padding-bottom: 22px;
 
     dt, dd {
       display: inline-block;
     }
 
     dd {
-      margin: 0
+      margin: 0;
     }
   }
+
+  a {
+    display: inline-block;
+    margin-left: .3em;
+  }
 }
 
 article {
@@ -170,7 +170,7 @@ article {
 
 // special page styling
 
-.home { // == main
+.home {
   grid-template-areas:
     "header header header header"
     "aside aside aside aside";