Improve footnote format

This commit is contained in:
Helen Chong 2024-12-03 23:10:38 +08:00
parent 98f36a96ba
commit b2b488da09
2 changed files with 12 additions and 3 deletions

View File

@ -80,11 +80,18 @@ export default function(eleventyConfig) {
if (tokens[idx].meta.subId > 0) id += `:${tokens[idx].meta.subId}`; if (tokens[idx].meta.subId > 0) id += `:${tokens[idx].meta.subId}`;
/* ↩ with escape code to prevent display as Apple Emoji on iOS */ /* ↩ 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 = { const renderRules = {
footnote_caption: ['[', '[<span class="visually-hidden">Footnote #</span>'], footnote_caption: ['[', '[Note '],
footnote_block_close: ['section', 'footer'], footnote_block_close: ['section', 'footer'],
}; };
Object.keys(renderRules).map(rule => { Object.keys(renderRules).map(rule => {

View File

@ -39,10 +39,12 @@
.footnotes-list { .footnotes-list {
display: grid; display: grid;
gap: 0.3em; gap: 1em;
} }
.footnotes-list :target { .footnotes-list :target {
background-color: var(--clr-quote-bg); background-color: var(--clr-quote-bg);
outline: 0.1em dashed var(--clr-title-border); outline: 0.1em dashed var(--clr-title-border);
outline-offset: 0.1em;
} }
*:not([class]) + .footnote-item__back { margin-top: 0.5em; }