4 ms·
Oh, those look nice... how did you pull that off? Pure CSS?
by cryzinger 1y ago
Oh, those look nice... how did you pull that off? Pure CSS?
- paradox460 1y agoSadly not quite yet. With CSS Anchor positioning, something like this is possible, but cross-browser support isn't really there yet. Firefox, and current versions of Safari, don't support it, but they're tracking it, so maybe soon But the actual Javascript isn't all that complex. It basically just checks that the site satisfies a min-width media query, then calculates the top position of the superscript links, and sets a css custom property to store that value. The CSS then uses a mix of media queries, js-controlled data- properties, and absolute positioning to move the body of the footnotes out of the footer and into the sidebar. If JS doesn't load, then nothing happens, and they remain at the bottom of the site. The JS involved is at https://github.com/paradox460/pdx.su/blob/main/assets/js/sidebar_footnotes.ts https://github.com/paradox460/pdx.su/blob/main/assets/js/sid... The CSS that affects them is https://github.com/paradox460/pdx.su/blob/main/assets/css/general/_prose.scss#L135-L219 https://github.com/paradox460/pdx.su/blob/main/assets/css/ge... (there's also a small query that makes the parent paragraph of a superscript flash when you return to it, using has queries)
- cryzinger 1y agoThanks for sharing! I'm far from a JS expert but might have to try something similar... so the snippets you shared are super helpful :)