Fix target offset for footnotes

src/assets/stylesheets/extensions/_footnotes.scss

@@ -27,12 +27,6 @@
 // Scoped in typesetted content to match specificity of regular content
 .md-typeset {
 
-  // Remove pseudo elements inserted by permalinks extension
-  html & [id^="fn:"]::before,
-  html & [id^="fnref:"]::before {
-    display: none;
-  }
-
   // Footnotes extension
   .footnote {
     color: $md-color-black--light;
@@ -43,8 +37,32 @@
       margin-left: 0;
     }
 
-    // Single footnote
+    // Footnote
     li {
+      transition: color 0.25s;
+
+      // Un-targeted footnote
+      &::before {
+        display: block;
+        height: 0;
+      }
+
+      // Darken color for targete footnote
+      &:target {
+        color: $md-color-black;
+      }
+
+      // Targeted footnote
+      &:target::before {
+        margin-top: -(5.6rem + 2.4rem + 1rem);
+        padding-top: (5.6rem + 2.4rem + 1rem);
+        pointer-events: none;
+      }
+
+      // Remove spacing on first element
+      :first-child {
+        margin-top: 0;
+      }
 
       // Make back references visible on hover
       &:hover  .footnote-backref,
@@ -61,15 +79,6 @@
     }
   }
 
-  // Footnote reference with corrected anchor offset
-  .footnote-ref::before {
-    position: absolute;
-    margin-top: -(5.6rem + 2.4rem);
-    padding-top: (5.6rem + 2.4rem);
-    content: "";
-    pointer-events: none;
-  }
-
   // Footnote back-reference
   .footnote-backref {
     @extend %md-icon;

src/assets/stylesheets/extensions/_permalinks.scss

@@ -54,10 +54,16 @@
 
     // Add spacing to anchor for offset
     &::before {
-      display: block;
+      display: inline-block;
       content: "";
     }
 
+    // Targeted anchor
+    &:target::before {
+      margin-top: -(5.6rem + 2.4rem + 1.8rem);
+      padding-top: (5.6rem + 2.4rem + 1.8rem);
+    }
+
     // Make permalink visible on hover
     &:hover  .headerlink,
     &:target .headerlink,
@@ -90,6 +96,7 @@
 
     // Un-targeted anchor
     #{$level}[id]::before {
+      display: block;
       margin-top: -$delta;
       padding-top: $delta;
     }