From d996a6fdf87f3312e08777c804ed0fdb200c43da Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Mon, 17 Feb 2025 21:19:57 +0800
Subject: [PATCH] Improve footnote region markup

---
 src/_config/markdown-it.js | 6 +++---
 src/assets/css/plugins.css | 8 ++------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/_config/markdown-it.js b/src/_config/markdown-it.js
index cc7c7c96..61a78b0a 100644
--- a/src/_config/markdown-it.js
+++ b/src/_config/markdown-it.js
@@ -66,7 +66,8 @@ export default function(eleventyConfig) {
 
     // Configure markdown-it-footnote
     markdownLibrary.renderer.rules.footnote_block_open = () => (
-        '<footer class="footnotes">\n' +
+        '<hr class="footnotes-sep">\n' +
+        '<section class="footnotes" aria-labelledby="footnotes">\n' +
         `<div class="heading-wrapper h2">
             <h2 id="footnotes" class="footnotes__title">Footnotes</h2>
             <a class="heading-anchor" href="#footnotes" aria-labelledby="footnotes"><span hidden="">#</span></a>
@@ -91,8 +92,7 @@ export default function(eleventyConfig) {
     };
 
     const renderRules = {
-        footnote_caption: ['[', '[Note '],
-        footnote_block_close: ['section', 'footer'],
+        footnote_caption: ['[', '[Note ']
     };
     Object.keys(renderRules).map(rule => {
         let defaultRender = markdownLibrary.renderer.rules[rule];
diff --git a/src/assets/css/plugins.css b/src/assets/css/plugins.css
index 868726ca..e8513d52 100644
--- a/src/assets/css/plugins.css
+++ b/src/assets/css/plugins.css
@@ -30,12 +30,8 @@
 /* FOOTNOTES */
 .footnote-ref { margin-left: 0.2em; }
 .footnote-ref a:target { scroll-margin-block: calc(var(--sz-navbar-ht) + 5ex); }
-
-.footnotes {
-    margin-top: 3em;
-    border-top: 0.15em solid var(--clr-title-border);
-    padding-top: 1em;
-}
+.footnotes { padding-top: 2em; }
+.footnotes-sep { margin-top: 2.5em; }
 
 .footnotes-list {
     display: grid;