Make some minor improvements to the blog CSS

In particular, remove units on `line-height` properties, fix some header
sizes, and add an indicator of which footnote is focused when linked to.

Author: lexi-lambda

gulpfile.coffee

@@ -8,29 +8,29 @@ import compileSass   from 'gulp-sass'
 import uglify        from 'gulp-uglify'
 
 export js = ->
-  gulp.src './coffee/**/*.coffee', sourcemaps: true
+  gulp.src 'coffee/**/*.coffee', sourcemaps: true
     .pipe compileCoffee()
     .pipe concat 'application.js'
     .pipe uglify()
     .pipe rename extname: '.min.js'
-    .pipe gulp.dest './output/js/'
+    .pipe gulp.dest 'output/js/'
 
 export css = ->
-  gulp.src './scss/**/*.scss', sourcemaps: true
+  gulp.src 'scss/**/*.scss', sourcemaps: true
     .pipe compileSass().on 'error', compileSass.logError
     .pipe autoprefixer()
     .pipe rename extname: '.min.css'
-    .pipe gulp.dest './output/css/'
+    .pipe gulp.dest 'output/css/'
 
 export images = ->
-  gulp.src './images/**/*'
-    .pipe gulp.dest './output/img/'
+  gulp.src 'images/**/*'
+    .pipe gulp.dest 'output/img/'
 
 export build = gulp.parallel js, css, images
 
 export watch = ->
-  gulp.watch './coffee/**/*.coffee', js
-  gulp.watch './scss/**/*.scss', css
-  gulp.watch './images/**/*', images
+  gulp.watch 'coffee/**/*.coffee', js
+  gulp.watch 'scss/**/*.scss', css
+  gulp.watch 'images/**/*', images
 
-export default gulp.series build
+export default build

scss/_variables.scss

@@ -7,6 +7,7 @@ $color-primary: #e45b5b;
 $color-disabled: #ac9c9c;
 $color-section-background: #fffafa;
 $color-section-background-border: #fef8f8;
+$color-section-background-highlight: #fff5f5;
 $color-table-border: #fff1f1;
 
 $text-color-light: lighten($color-primary, 30%);

scss/application.scss

@@ -40,34 +40,27 @@ h1, h2, h3, h4, h5, h6 {
 h1 {
   font-size: 2em;
   font-weight: 700;
-  line-height: 1.4em;
+  line-height: 1.4;
   margin-bottom: 0.4em;
 
   @media (min-width: 575px) {
     font-size: 2.3em;
-    line-height: 1.4em;
   }
 }
 
 h2 {
   font-size: 1.75em;
-  line-height: 1.5em;
+  line-height: 1.5;
   margin-top: 2em;
 
   @media (min-width: 800px) {
     font-size: 2em;
   }
 }
 
-h3 {
-  font-size: 1.5em;
-  line-height: 1em;
-}
-
-h4 {
-  font-size: 1.17em;
-  line-height: 1em;
-}
+h3 { font-size: 1.5em; }
+h4 { font-size: 1.17em; }
+h5 { font-size: 1.1em; }
 
 // -----------------------------------------------------------------------------
 
@@ -91,12 +84,11 @@ body > section[role=main] {
   flex: 1;
   font-size: 1.1em;
   font-weight: 300;
-  line-height: 2em;
+  line-height: 2;
   padding: 0 $content-padding;
 
   @media (max-width: 550px) {
     font-size: 0.9em;
-    line-height: 2em;
   }
 
   & > .content {
@@ -188,12 +180,12 @@ body > section[role=main] {
 
     @media (max-width: 700px) {
       font-size: 0.9em;
-      line-height: 1.9em;
+      line-height: 1.9;
     }
 
     @media (max-width: 500px) {
       font-size: 0.8em;
-      line-height: 1.8em;
+      line-height: 1.8;
     }
 
     @media (min-width: 800px) {
@@ -296,8 +288,17 @@ article.inline {
 
 .footnotes {
   font-size: small;
-  line-height: 2em;
+  line-height: 2;
   margin-top: 4em;
+
+  li:target {
+    background-color: $color-section-background-highlight;
+    border-radius: 3px;
+    // We want the background to extend past both the edges of the element and
+    // the list bullet itself, which is easiest to do with two overlapping shadows.
+    box-shadow: -1.5em 0 0 0.5em $color-section-background-highlight,
+                 0.5em 0 0 0.5em $color-section-background-highlight;
+  }
 }
 
 article.main > footer {