From c4061caadd4d7c946430aa998c616a20b14187ce Mon Sep 17 00:00:00 2001 From: gdamore Date: Sat, 19 Apr 2025 20:10:40 +0000 Subject: deploy: 55925438bc8b8fd243ab995c48c8996ac49a6652 --- ref/css/general.css | 51 ++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 44 insertions(+), 7 deletions(-) (limited to 'ref/css/general.css') diff --git a/ref/css/general.css b/ref/css/general.css index 0862b516..9946cfc0 100644 --- a/ref/css/general.css +++ b/ref/css/general.css @@ -200,16 +200,53 @@ sup { line-height: 0; } -:not(.footnote-definition) + .footnote-definition, -.footnote-definition + :not(.footnote-definition) { - margin-block-start: 2em; -} .footnote-definition { font-size: 0.9em; - margin: 0.5em 0; } -.footnote-definition p { - display: inline; +/* The default spacing for a list is a little too large. */ +.footnote-definition ul, +.footnote-definition ol { + padding-left: 20px; +} +.footnote-definition > li { + /* Required to position the ::before target */ + position: relative; +} +.footnote-definition > li:target { + scroll-margin-top: 50vh; +} +.footnote-reference:target { + scroll-margin-top: 50vh; +} +/* Draws a border around the footnote (including the marker) when it is selected. + TODO: If there are multiple linkbacks, highlight which one you just came + from so you know which one to click. +*/ +.footnote-definition > li:target::before { + border: 2px solid var(--footnote-highlight); + border-radius: 6px; + position: absolute; + top: -8px; + right: -8px; + bottom: -8px; + left: -32px; + pointer-events: none; + content: ""; +} +/* Pulses the footnote reference so you can quickly see where you left off reading. + This could use some improvement. +*/ +@media not (prefers-reduced-motion) { + .footnote-reference:target { + animation: fn-highlight 0.8s; + border-radius: 2px; + } + + @keyframes fn-highlight { + from { + background-color: var(--footnote-highlight); + } + } } .tooltiptext { -- cgit v1.2.3-70-g09d2