feat: better inline footnotes

- smaller line height
- smaller font
- smaller opacity unless hovered
- highlight ref link when targeted

2 files changed, 11 insertions, 1 deletions

diff --git a/assets/css/_markdown.scss b/assets/css/_markdown.scss
index 6252c210..09089996 100644
--- a/assets/css/_markdown.scss
+++ b/assets/css/_markdown.scss
@@ -203,6 +203,16 @@
         }
     }
   }
+
+  /* footnotes */
+
+  .inline-footnote {
+    p { margin: 0 }
+  }
+
+  sup[id*="fnref"]:target {
+    background-color: rgba(255, 235, 0, .25);
+  }
 }
 
 /* gallery shortcode */
diff --git a/layouts/_partials/utils/inject-footnotes.html b/layouts/_partials/utils/inject-footnotes.html
index d95d668b..31fdae82 100644
--- a/layouts/_partials/utils/inject-footnotes.html
+++ b/layouts/_partials/utils/inject-footnotes.html
@@ -32,7 +32,7 @@
     {{ $noteContent := index $footnoteMap $refId }}
 
     {{ if $noteContent }}
-      {{ $inlineFootnote := printf `<div class="inline-footnote text-sm text-secondary flex gap-2 ml-4 mt-2 mb-2" id="fn:%s"><span>%s.</span><div>%s</div></div>` $refId $refId $noteContent }}
+      {{ $inlineFootnote := printf `<div class="inline-footnote text-xs text-secondary flex gap-2 ml-2 my-1 opacity-50 hover:opacity-100 transition-opacity" id="fn:%s"><span>%s.</span><div>%s</div></div>` $refId $refId $noteContent }}
 
       {{ $blockTags := slice "p" "li" "td" "th" "blockquote" "h1" "h2" "h3" "h4" "h5" "h6" "figcaption" "dt" "dd" }}