footnote highlighting on selection #4

New issue

Closed

opened 2023-11-07 22:23:35 +00:00 by Squel · 0 comments

Squel commented

2023-11-07 22:23:35 +00:00

(Migrated from codeberg.org)

footnote highlight

when a footnote is clicked, the background must be highlighted to make clear what footnote is being referenced. the following should do the trick:

<a href=#lorem>footnote 1</a><br>
<a href=#ipsum>footnote 2</a>

<ol>
  <li class="footnote" id="lorem">https://example.com/</li>
  <li class="footnote" id="ipsum">https://example.com/</li>
</ol>

body {
    background-color: black;
    color: white;
}

.footnote:target {
    animation: highlight 0.5s;
}

@keyframes highlight {
    from {
        background-color: white;
    }
    to {
        background-color: black;
    }
}

footnote font/text size

the footnote font/text size is too big, and requires extra room above the line

footnote styling

https://codeberg.org/Squeljur/website/issues/3

- footnote highlight when a footnote is clicked, the background must be highlighted to make clear what footnote is being referenced. the following should do the trick: ```html <a href=#lorem>footnote 1</a><br> <a href=#ipsum>footnote 2</a> <ol> <li class="footnote" id="lorem">https://example.com/</li> <li class="footnote" id="ipsum">https://example.com/</li> </ol> ``` ```css body { background-color: black; color: white; } .footnote:target { animation: highlight 0.5s; } @keyframes highlight { from { background-color: white; } to { background-color: black; } } ``` - footnote font/text size the footnote font/text size is too big, and requires extra room above the line - footnote styling https://codeberg.org/Squeljur/website/issues/3

Commenting is not possible because the repository is archived.