Skip to content

Close the empty red strip above the breaking-news headline #106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ssavutu merged 1 commit into from
Sep 3, 2026
Merged

Close the empty red strip above the breaking-news headline #106

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 15 additions & 12 deletions src/components/BreakingNewsBanner.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,17 @@ const repeats = 6
<!-- No vertical padding here: the box is a fixed 48px tall, so py-[16px] left
only 16px of content height for 24px text and forced it to overflow.
`items-center` handles the centring instead. -->
<!-- Height is 24px taller than the visible band, with a matching pt-[24px].
#scrollnav above is `sticky top-0 z-[99]` with an opaque white background,
so the 24px this pulls up is painted over -- making the red flush with the
nav while the padding keeps the text inside the visible 48px. A bare
mt-[-24px] without the padding hides the text itself, and raising z-index
above 99 is not an option (the banner would then cover the nav on scroll).
`items-center` centres within the 48px content box. -->
<div id="bn-grandparent" class="relative flex items-center mb-[12px] sm:mb-[0px] mt-[-24px] pt-[24px] h-[72px] w-[100%] text-white font-libre text-[24px] text-center font-bold bg-triangleDanger">
<!-- mt-[-24px] cancels the nav's mb-[24px] so the red sits flush beneath it,
the same trick the hero uses when it is the first block (see Banner.astro).
These are adjacent siblings, so the two margins COLLAPSE to 24 + -24 = 0 --
the banner never overlaps the nav, and nothing of it is painted over.

This box was 72px tall with a matching pt-[24px], on the theory that the
nav covered the top 24px. It does not: the measured gap between them is 0,
so all 72px rendered and the padding showed as an empty red strip above the
headline -- 36px of clearance over it against 12px under. 48px with no
padding is the band as designed, with `items-center` centring in it. -->
<div id="bn-grandparent" class="relative flex items-center mb-[12px] sm:mb-[0px] mt-[-24px] h-[48px] w-[100%] text-white font-libre text-[24px] text-center font-bold bg-triangleDanger">
<div id="bn-parent">
<h1 id="bn">
{Array.from({length: repeats}).map((_, i) => (
Expand All @@ -28,14 +31,14 @@ const repeats = 6
slides out from under the cursor, six times over. This is one stable
target covering the band.

Bottom-anchored at the visible 48px, not inset-0, so it does not extend
into the 24px the nav paints over and start swallowing clicks meant for
the nav. -->
inset-0 now that the box is exactly the visible band. 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 just the whole box. -->
{href && (
<a
href={href}
aria-label={`Breaking news: ${text}`}
class="absolute left-0 right-0 bottom-0 h-[48px] z-[1]"
class="absolute inset-0 z-[1]"
></a>
)}
</div>
Loading