css: distinguish multi-line entries in nav bar

Previously the nav bar did not have any visual distinction between two
different entries vs one entry with multiple lines - they all ran
together.

Now there is slightly more whitespace between entries and slightly less
whitespace between lines within an entry, with all other spacing being
*almost* pixel equivalent.

Note: 0fa8c9d did this for the TOC, without being as careful about pixel
equivalence.

Signed-off-by: Mark Lodato <[email protected]>

docs/_sass/minima/_custom.scss

@@ -656,27 +656,39 @@ html {
 }
 
 .site-nav {
+    // We want spacing between elements to *look* like line-height 1.7 but have
+    // reduced spacing within an element so it looks like a single element.
+    // To achieve this, we set line-height to 1.3 and add the remainder to the
+    // padding top/bottom. That is:
+    //    line-height 1.7 = line-height 1.3 + padding-top 0.2em + padding-bottom 0.2em
+    // This is *almost* correct, except:
+    // -  The baseline gets shifted up by one pixel, so we compensate by adding
+    //    +1/-1 padding to the top/bottom.
+    // -  The actual height is 0.02px smaller with the padding trick, which
+    //    results in random elements shifting by a pixel.
+    // (It is unclear why either of the above are true.)
+    line-height: 1.3;
+    font-family: "Prodigy";
+
     li li {
         padding-left: $spacer-l;
     }
 
-    li,
-    a[href] {
-        color: $text-color-light;
+    li > span {
         display: block;
-        font-family: "Prodigy";
-    }
-
-    li {
-        line-height: $base-line-height;
-        text-indent: 8px;
+        // For some reason, the simulated line-height 1.7 (see above) has a
+        // baseline that is 1px higher than a real line-height 1.7. To fix this,
+        // offset the line by one pixel via padding.
+        padding: calc(0.2em + 1px) 8px calc(0.2em - 1px);
     }
 
     a[href] {
+        color: $text-color-light;
+        display: block;
         font-weight: $base-font-weight;
-        padding: 2px 8px 4px;
+        // Add a little extra vertical padding to space elements out.
+        padding: calc(0.2em + 1px + 2px) 8px calc(0.2em - 1px + 4px);
         text-decoration: none;
-        text-indent: 0;
 
         &.is-active {
             background: $green-light;