Use underlines to highlight links

src/assets/style.scss

@@ -55,19 +55,16 @@ a {
   color: $highlight;
   text-decoration: none;
   position: relative;
-  padding: .1em 0;
-  transition: background .2s ease-in, box-shadow .2s ease-in;
+  padding: .1em .2em;
 
   // multi-line padded background
   box-decoration-break: clone;
-  background: $highlight-1;
-  box-shadow: .3em 0 0 $highlight-1,
-              -.3em 0 0 $highlight-1;
+  border-bottom: 1px dotted $highlight;
+
+  transition: .2s ease-in background;
 
   &:hover {
-    background: $highlight-2;
-    box-shadow: .3em 0 0 $highlight-2,
-                -.3em 0 0 $highlight-2;
+    background: $highlight-1;
   }
 }
 
@@ -184,17 +181,10 @@ footer {
 
   a {
     color: #888;
-
-    // multi-line padded background
-    background: #88888822;
-    box-shadow: .3em 0 0 #88888822,
-                -.3em 0 0 #88888822;
-    box-decoration-break: clone;
+    border-bottom: 1px dotted #888;
 
     &:hover {
-      background: #88888844;
-      box-shadow: .3em 0 0 #88888844,
-                  -.3em 0 0 #88888844;
+      background: #88888822;
     }
   }
 }