Improve footnote region markup

This commit is contained in:
Helen Chong 2025-02-17 21:19:57 +08:00
parent e8fc24aeee
commit d996a6fdf8
2 changed files with 5 additions and 9 deletions

View File

@ -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];

View File

@ -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;