From b2b488da0971787b2650f4dc0de194e02625b5f7 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Tue, 3 Dec 2024 23:10:38 +0800
Subject: [PATCH] Improve footnote format

---
 src/_config/markdown-it.js | 11 +++++++++--
 src/assets/css/plugins.css |  4 +++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/_config/markdown-it.js b/src/_config/markdown-it.js
index 7c859490..cc7c7c96 100644
--- a/src/_config/markdown-it.js
+++ b/src/_config/markdown-it.js
@@ -80,11 +80,18 @@ export default function(eleventyConfig) {
         if (tokens[idx].meta.subId > 0) id += `:${tokens[idx].meta.subId}`;
 
         /* ↩ with escape code to prevent display as Apple Emoji on iOS */
-        return ` <a aria-label="Back to reference #${id}" href="#fnref${id}" class="footnote-backref">\u21a9\uFE0E</a>`;
+        return `
+            <p class="footnote-item__back">
+                <a href="#fnref${id}" class="footnote-backref">
+                    <span aria-hidden="true">\u21a9\uFE0E</span>
+                    Back to reference ${id}
+                </a>
+            </p>
+        `;
     };
 
     const renderRules = {
-        footnote_caption: ['[', '[<span class="visually-hidden">Footnote #</span>'],
+        footnote_caption: ['[', '[Note '],
         footnote_block_close: ['section', 'footer'],
     };
     Object.keys(renderRules).map(rule => {
diff --git a/src/assets/css/plugins.css b/src/assets/css/plugins.css
index 6c80b835..868726ca 100644
--- a/src/assets/css/plugins.css
+++ b/src/assets/css/plugins.css
@@ -39,10 +39,12 @@
 
 .footnotes-list {
     display: grid;
-    gap: 0.3em;
+    gap: 1em;
 }
 
 .footnotes-list :target {
     background-color: var(--clr-quote-bg);
     outline: 0.1em dashed var(--clr-title-border);
+    outline-offset: 0.1em;
 }
+*:not([class]) + .footnote-item__back { margin-top: 0.5em; }
\ No newline at end of file