/* The one site footer. * * Shaun, 2026-09-05: "Footer on EVERY page should be identical to the home * page." Before this file the site carried three different footers on the pages * he was looking at alone: the bookcase said "The bookcase / The room / Absolv", * /fun/design and /fun/writing said "The room / Absolv", and the other fun pages * said "Back to the room / Absolv", none of which is what the home page says. * * The home page's own footer is written in Tailwind utility classes and the fun * section does not load Tailwind, so "identical" could not be done by copying * the markup across. Every value below was MEASURED off the live home page * footer in the browser rather than read off the utility names, which matters * because the site's Tailwind config remaps the neutral scale onto the paper * palette: text-neutral-400, -600 and -700 all resolve to the same #5A5347, so * reading the class names would have given three greys where the page paints * one. Measured 2026-09-05 at 1440px: * * footer padding 32px 64px, border-top 1px solid #1A1A1A * font-size 12px, line-height 16px, colour #5A5347 * row flex, space-between, centre, gap 16px * links flex, wrap, column-gap 20px, row-gap 8px, centred * wordmark 22px tall * * Variables with literal fallbacks throughout, because this file has to paint * correctly on a page that loads assets/tokens.css, on a fun page that gets the * same names from fun/_shared/fun.css, and on any page that loads neither. */ /* A SHORT PAGE MUST NOT LEAVE THE FOOTER IN MID AIR * * The footer this replaces was 46rem wide with an auto margin, so on a short * page it read as a rule under the writing. This one is a full width bar, and * a full width bar halfway down an otherwise empty page reads as the page * having failed to load the rest of itself. /fun/writing is 560px of content * in a 900px viewport and showed exactly that. * * The sticky pair rather than a flex column on , because changing the * body's display would change the layout model for every child on all 81 pages, * including the design wall, which measures its own width in JavaScript to lay * its rows out. This touches nothing but the footer's own position, and on a * page taller than the viewport it does nothing at all, since a sticky element * cannot be pushed above where it already sits. * * Two units for one measurement, in that order. On iOS 100vh is the LARGE * viewport, the height the page would have if the address bar were hidden, so * it stays 100vh while the bar is on screen and a short page ends up taller * than the visible area with the footer pushed just under the fold, which is * the very thing this pair exists to prevent. 100dvh is the height actually on * screen and tracks the bar as it comes and goes. vh is declared FIRST and dvh * second, which is the order that matters: a browser too old to know dvh drops * that second line at parse time and is left reading the vh above it, while a * browser that understands both takes the later one. Reversing the pair would * silently give the old browser nothing. On a desktop with no retracting * browser chrome the two resolve to the same number. * * One precondition, which is satisfied on all 81 pages today and is worth * knowing before this file reaches an eighty second: position sticky is * cancelled without warning or error by any ancestor with overflow set to * anything but visible. The footer is a direct child of body everywhere it * currently lands, so nothing sits between it and the viewport to do that. */ body { min-height: 100vh; min-height: 100dvh; } .absolv-footer { position: sticky; top: 100vh; top: 100dvh; /* Stated rather than left to the cascade. This file lands on pages that each carry their own stylesheet, and any one of them may hold a bare `footer` element rule; such a rule loses to this class on every property the class sets and quietly wins on every property it does not. fun/_shared/fun.css held exactly that, with max-width 46rem and an auto margin, and the shared footer arrived on 81 pages 736px wide and centred in a 1440px page while its colour, padding and type size were all correct. That rule is gone now, and these three lines are what stop the next one mattering. */ max-width: none; width: auto; margin: 0; padding: 2rem 4rem; border-top: 1px solid var(--dark-border, #1A1A1A); font-family: var(--font-sans, 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif); font-size: 12px; line-height: 16px; color: var(--ink-muted, #5A5347); } .absolv-footer-row { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; } .absolv-footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 1.25rem; row-gap: .5rem; } .absolv-footer a { color: var(--ink-muted, #5A5347); text-decoration: none; transition: color .2s; } /* The home page asks for a hover through hover:text-neutral-400 and does not get one, because that step of the remapped scale is the colour the link already is, so its footer links today give no feedback at all. The intent is plainly there in the markup, so it is honoured here rather than copied as broken, and this is the ONE place this file knowingly differs from what the home page currently paints. It shows only under a pointer. */ .absolv-footer a:hover { color: var(--ink, #141414); } .absolv-footer a:focus-visible { outline: 2px solid var(--orange, #DF5911); outline-offset: 2px; } .absolv-footer .footer-wordmark-link { display: inline-flex; } .absolv-footer .footer-wordmark { height: 22px; width: auto; } @media (min-width: 768px) { .absolv-footer-row { flex-direction: row; } } @media (max-width: 767px) { /* px-6 rather than px-16 below the md breakpoint, which is what the home page's own px-6 md:px-16 pair does. */ .absolv-footer { padding: 2rem 1.5rem; } }