Close the empty red strip above the breaking-news headline - #106
Merged
Conversation
The banner rendered as a 72px band with the headline sitting low in it: 36px of red above the text against 12px below. The 24px of that gap was padding the box carries deliberately, on the theory that #scrollnav above covers the top of the banner and the padding keeps the text below the covered strip. The nav covers nothing. Measured on the live homepage, the nav's bottom and the banner's top are both at y=207 -- a gap of exactly 0. The nav carries mb-[24px] and the banner mt-[-24px], and as adjacent siblings those margins COLLAPSE to 24 + -24 = 0. The pull-up never moves the banner under the nav; it just closes the nav's margin so the red sits flush, which is the same thing the hero does when it is the first block after the nav (see Banner.astro). So all 72px were visible and the padding showed as an empty strip. Drop the padding and size the box at the 48px it was always meant to be. The pull-up stays -- the nav's margin still needs closing. `items-center` now centres in the real band: 12px above the headline and 12px below. The link overlay goes back to inset-0 for the same reason. It was pinned to the bottom 48px to stay clear of the strip the nav was believed to cover; with no such strip that is simply the whole box. Verified in headless Chromium: the band is 48px, still flush with the nav, the headline is centred, and elementFromPoint returns the article link at the band's centre and both edges but not above it, so the overlay covers the banner without reaching into the nav. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ES8gPZxe6sb5xSLrBZ7AGk
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The banner renders as a 72px band with the headline sitting low in it — an empty red strip above the text, visible on the live homepage now that a real breaking story is up.
Why it happened
24px of that gap is padding the box carries deliberately, on the theory that
#scrollnavcovers the top of the banner and the padding keeps the text below the covered strip.The nav covers nothing. Measured on the live homepage:
The nav carries
mb-[24px]and the bannermt-[-24px], and as adjacent siblings those margins collapse to24 + -24 = 0. The pull-up never moves the banner under the nav — it just closes the nav's margin so the red sits flush, exactly what the hero does when it is the first block after the nav (see the comment inBanner.astro). So all 72px rendered and the padding showed as an empty strip.The fix
Drop the padding and size the box at the 48px it was always meant to be. The pull-up stays: the nav's margin still needs closing.
The link overlay goes back to
inset-0for the same reason. I had pinned it to the bottom 48px to stay clear of the strip the nav was believed to cover; with no such strip, that is simply the whole box.Testing
Measured in headless Chromium against a stubbed
/v1/homepage: band is 48px, still flush with the nav, headline centred 12/12.elementFromPointreturns the article link at the band's centre and at both edges, and returns something else 5px above the band — so the overlay covers the banner without reaching into the nav.That also closes the caveat I left on #105: the click target is now verified by hit-testing in a real browser, not just from the markup and generated CSS.
astro check(0 errors) andnpm run buildpass.🤖 Generated with Claude Code
https://claude.ai/code/session_01ES8gPZxe6sb5xSLrBZ7AGk