From 63f6f846583f78b6819abe34260155ed6ecd2e87 Mon Sep 17 00:00:00 2001 From: Magnus Madsen Date: Sun, 9 Aug 2026 21:44:26 +0200 Subject: [PATCH] fix: stop the GitHub ribbon covering the theme toggle The ribbon is 149px wide and pinned to the top-right of the viewport at z-index 9999, which is also where the navbar ends. It was shown from lg up, but it only clears the theme toggle once the margin beside the page card exceeds 149px less the 28px of padding the toggle already sits inside -- from a viewport of container + 242px, or 1382px against the 1140px container. Below that the whole 149px square, all of it inside the link, sat on top of the toggle and took its clicks; below 1200px it reached Internships as well. Showing it from xxl instead is the first breakpoint past that threshold. Co-Authored-By: Claude Opus 5 (1M context) --- src/layouts/Layout.astro | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 233ac09..8ac6d51 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -167,10 +167,19 @@ import '../styles/global.css';
{/* The ribbon is absolutely positioned against the viewport, so its place in the DOM only affects the reading order, not the layout. - Hidden below the navbar's breakpoint, where it would claim the same - 149px of top-right corner that the collapsed navbar puts its - toggler in. */} - + What it does claim is the top-right corner, which is also where the + navbar ends, and the whole 149px square is inside the link - so + wherever the two meet, the ribbon swallows the clicks meant for the + theme toggle rather than merely sitting over it. + + They stop meeting once the margin beside the card, (viewport - + container) / 2, clears the ribbon's 149px less the 28px of navbar + and container padding the toggle already sits inside: 121px, so + from viewport = container + 242px up. The container is held at + 1140px above, which puts that at 1382px and makes xxl the first + breakpoint where the ribbon fits - by 9px, and by more from there + on, since that cap stops the container growing to meet it. */} + Fork me on GitHub