/* Shared "floating nav" component: a fixed pill bar of jump/tab links, used
on the projects page (Pinned/Popular/Gists) and the Discord reference
pages (Formats/Limits' section chips). One component so all three read as
the same pattern instead of three near-identical bespoke implementations.
Structure (see components/floating_nav.html.jinja2):
`position: fixed` rather than `sticky` on purpose: `.site-shell` (and
similar page shells) lay out their rows as CSS Grid items, and a sticky
element inside a grid item only stays stuck for the height of its own row
track - it unsticks and scrolls away almost immediately. Fixed positioning
takes it out of grid flow entirely and anchors it to the viewport. */
.floating-nav {
position: fixed;
inset-inline: 0;
z-index: 40;
padding-inline: var(--space-4);
pointer-events: none;
}
.floating-nav--top {
top: calc(var(--navbar-height, 72px) + var(--space-4));
}
.floating-nav--bottom {
bottom: max(var(--space-4), env(safe-area-inset-bottom));
}
/* When the site navbar is permanently docked at the bottom of the viewport
(sticky position "bottom") it occupies the same fixed-position real
estate this bar rests in by default - stack this bar above it instead of
letting the two overlap. --navbar-live-h is the navbar's real current
height, kept in sync by a ResizeObserver in navbar.ts. */
html[data-navbar-sticky="on"][data-navbar-position="bottom"] .floating-nav--bottom {
bottom: calc(var(--navbar-live-h, 0px) + var(--space-4) + max(var(--space-4), env(safe-area-inset-bottom)));
}
/* "bottom-on-scroll" only docks at the bottom once scrolled - continuously,
in step with --nav-p (0 at rest, 1 once fully compacted/docked; also
published on , not just .navbar, by navbar.ts's scroll handler for
exactly this kind of sibling read). Scaling the offset by --nav-p instead
of applying it flatly means this bar only moves out of the way as much as
the navbar has actually encroached on its space - at rest (--nav-p: 0,
navbar still at the top) it's a no-op, exactly matching the navbar's own
`top:` formula in navbar.css. */
html[data-navbar-sticky="on"][data-navbar-position="bottom-on-scroll"] .floating-nav--bottom {
bottom: calc(
max(var(--space-4), env(safe-area-inset-bottom)) +
(var(--navbar-live-h, 0px) + var(--space-4)) * var(--nav-p, 0)
);
}
/* ── Bottom-bar clearance ──
A fixed bottom bar is out of flow, so it sits *over* whatever the page ends
with (the projects page's gists paginator was landing underneath it). The
component reserves that room itself rather than relying on each consuming
page to remember bottom padding: any page whose body contains a bottom bar
gets the room reserved on .
Written as `body:has(...)` so it follows the component wherever it is used -
add a bottom bar to a new page and the clearance comes with it. */
/* Applied to rather than the page's shell on purpose. A shell often
sets its own `padding-block` (e.g. .profile-shell), which would overwrite a
`padding-bottom` set here from a stylesheet that loads earlier; scrolling
room is a property of the document anyway, not of one shell element.
--floating-nav-bar-height is written onto at runtime by navbar.ts,
which measures the bar. It cannot be computed in CSS: the bar's height
depends on whether it has a header row, how its pills wrap, and the current
font - an earlier hardcoded guess (62px) was off by nearly half against a
real two-row bar (113px). The fallback only has to cover the first paint. */
body:has(.floating-nav--bottom) {
padding-bottom: calc(var(--floating-nav-bar-height, 120px) + var(--space-8) + env(safe-area-inset-bottom));
}
/* Stack on top of (not replace) the reserve above - the floating-nav bar's
own clearance, plus room for the site navbar now sitting below it too,
when the navbar is permanently docked at the bottom (see the `bottom:`
offset rule above). */
html[data-navbar-sticky="on"][data-navbar-position="bottom"] body:has(.floating-nav--bottom) {
padding-bottom: calc(
var(--floating-nav-bar-height, 120px) + var(--space-8) + env(safe-area-inset-bottom) +
var(--navbar-live-h, 0px) + var(--space-4)
);
}
/* Same stacking, scaled by --nav-p (0 at rest, 1 once fully docked) to
match the "bottom-on-scroll" .floating-nav--bottom `bottom:` offset rule
above - the extra room this bar needs only grows as the navbar actually
encroaches on it while scrolling. */
html[data-navbar-sticky="on"][data-navbar-position="bottom-on-scroll"] body:has(.floating-nav--bottom) {
padding-bottom: calc(
var(--floating-nav-bar-height, 120px) + var(--space-8) + env(safe-area-inset-bottom) +
(var(--navbar-live-h, 0px) + var(--space-4)) * var(--nav-p, 0)
);
}
/* The 'inline' variant: the same pill bar, but laid out as an ordinary row of
the page (a section header above the content) instead of floating over it.
Used by the logged-in Discord account tabbar.
Deliberately `position: static`, not sticky. Unlike the single opaque element
this replaced, the inline bar is a transparent