Improve markdown footnotes

src/components/Markdown.svelte

@@ -313,10 +313,22 @@
     font-weight: var(--font-weight-semibold);
   }
 
-  .markdown :global(.footnote-ref > a),
-  .markdown :global(a.ref-arrow) {
-    border-bottom: none;
-    color: unset;
+  .markdown :global(.footnote-ref) {
+    vertical-align: top;
+    position: relative;
+    top: -0.4rem;
+  }
+  .markdown :global(.footnote-ref),
+  .markdown :global(.footnote > .marker),
+  .markdown :global(.footnote > .ref-arrow) {
+    color: var(--color-foreground-dim);
+  }
+  .markdown :global(.footnote-ref:hover),
+  .markdown :global(.footnote .ref-arrow:hover) {
+    color: var(--color-foreground);
+  }
+  .markdown :global(.footnote) {
+    margin-bottom: 0;
   }
 
   .markdown :global(img) {
@@ -361,11 +373,10 @@
     padding: 0;
   }
   .markdown :global(a) {
-    text-decoration: none;
-    border-bottom: 1px solid currentColor;
+    text-decoration: underline;
   }
   .markdown :global(a.no-underline) {
-    border-bottom: none;
+    text-decoration: none;
   }
 
   .markdown :global(hr) {

src/lib/markdown.ts

@@ -51,7 +51,7 @@ const footnoteReferenceMarkedExtension = {
     }
   },
   renderer: (token: Tokens.Generic): string =>
-    `<sup class="footnote-ref" id="${referencePrefix}:${token.text}"><a href="#${footnotePrefix}:${token.text}">[${token.text}]</a></sup>`,
+    `<sup class="txt-tiny footnote-ref" id="${referencePrefix}:${token.text}"><a href="#${footnotePrefix}:${token.text}">[${token.text}]</a></sup>`,
 };
 const footnoteMatch = /^\[\^([^\]]+)\]:\s([\S]*)/;
 const footnoteMarkedExtension = {
@@ -70,13 +70,13 @@ const footnoteMarkedExtension = {
     }
   },
   renderer: (token: Tokens.Generic): string =>
-    `${
-      token.reference === "0" ? "<hr />" : ""
-    }<p class="txt-small" id="${footnotePrefix}:${token.reference}">${
+    `<p class="txt-small footnote" id="${footnotePrefix}:${
       token.reference
-    }. ${markedInstance.parseInline(
+    }"><span class="marker">${
+      token.reference
+    }.</span> ${markedInstance.parseInline(
       token.text,
-    )} <a class="txt-tiny ref-arrow" href="#${referencePrefix}:${
+    )} <a class="txt-tiny ref-arrow no-underline" href="#${referencePrefix}:${
       token.reference
     }">↩</a></p>`,
 };