Skip to content

fix: banner pushing hero below viewport fold #662

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

Open
RisingOrange wants to merge 10 commits into
base: main
Choose a base branch
from
+74 −48
Open

fix: banner pushing hero below viewport fold #662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2e03a7c
Fix banner pushing hero below viewport fold
RisingOrange Feb 21, 2026
1e70221
Fix nav layout after hero-section moved out of .layout
RisingOrange Feb 21, 2026
33917cf
Fix nav width formula: use content-box model correctly
RisingOrange Feb 21, 2026
f8c4143
Remove verbose comment on nav width
RisingOrange Feb 21, 2026
4aeab4d
Rename with-hero to hero-page for clarity
RisingOrange Feb 21, 2026
547d1fa
Fix hero flex overflow squishing banners on wide viewports
RisingOrange Feb 23, 2026
50d65d4
Modify navbar margin to be less aggressive
Wituareard Feb 24, 2026
a535b64
Simplify hero height
Wituareard Feb 24, 2026
9bbdd41
Revert "Modify navbar margin to be less aggressive"
Wituareard Feb 24, 2026
4755e47
Revert "Simplify hero height"
Wituareard Feb 24, 2026
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
4 changes: 2 additions & 2 deletions src/lib/components/Hero.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,8 +116,8 @@

.hero {
display: block;
height: 100vh;
min-height: var(--hero-min-height);
height: 100%;
min-height: min(var(--hero-min-height), 100%);
Comment on lines +119 to +120
Copy link
Collaborator

@Wituareard Wituareard Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't this effectively cause the minimum height to be ignored?

overflow: hidden;
position: relative;
width: 100vw;
Expand Down
118 changes: 72 additions & 46 deletions src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,64 +51,68 @@
Top
</h2>

<!-- Make sure we only show one banner at a time-->
{#if data.localeAlert}
<Banner
contrast={data.localeAlert.isDev}
id={data.localeAlert.isDev ? undefined : 'locale-switch'}
>
<!-- eslint-disable-next-line svelte/no-at-html-tags not vulnerable against XSS -->
{@html data.localeAlert.message}
</Banner>
{:else if geo?.country?.code === 'GB'}
<Banner contrast={hero}>
<b
>PauseAI's largest ever protest will be on Saturday February 28th in London. <Link
href="https://luma.com/o0p4htmk">Sign up now!</Link
></b
<div class="page-top" class:hero-page={hero}>
<!-- Make sure we only show one banner at a time-->
{#if data.localeAlert}
<Banner
contrast={data.localeAlert.isDev}
id={data.localeAlert.isDev ? undefined : 'locale-switch'}
>
</Banner>
{:else}
<NearbyEvent contrast={hero} bind:eventFound {geo} />
{#if !eventFound}
{#if geo?.country?.code === 'US' && false}
<Banner contrast={hero}>
<b
>HELP US PROTECT STATE SOVEREIGNTY ON AI REGULATION | <Link
href="https://mstr.app/b09fa92b-1899-43a0-9d95-99cd99c9dfb2">ACT NOW »</Link
></b
>
</Banner>
{:else if false}
<Banner contrast={hero} target="/littlehelpers">
<strong>🎄 Holiday Matching Campaign!</strong> Help fund volunteer stipends for PauseAI
advocates. <Link href="/littlehelpers">Join the Little Helpers campaign →</Link>
</Banner>
<!-- eslint-disable-next-line svelte/no-at-html-tags not vulnerable against XSS -->
{@html data.localeAlert.message}
</Banner>
{:else if geo?.country?.code === 'GB'}
<Banner contrast={hero}>
<b
>PauseAI's largest ever protest will be on Saturday February 28th in London. <Link
href="https://luma.com/o0p4htmk">Sign up now!</Link
></b
>
</Banner>
{:else}
<NearbyEvent contrast={hero} bind:eventFound {geo} />
{#if !eventFound}
{#if geo?.country?.code === 'US' && false}
<Banner contrast={hero}>
<b
>HELP US PROTECT STATE SOVEREIGNTY ON AI REGULATION | <Link
href="https://mstr.app/b09fa92b-1899-43a0-9d95-99cd99c9dfb2">ACT NOW »</Link
></b
>
</Banner>
{:else if false}
<Banner contrast={hero} target="/littlehelpers">
<strong>🎄 Holiday Matching Campaign!</strong> Help fund volunteer stipends for PauseAI
advocates. <Link href="/littlehelpers">Join the Little Helpers campaign →</Link>
</Banner>
{/if}
{/if}
{/if}
{/if}

{#if deLocalizeHref($page.url.pathname) !== '/brussels-ep-protest-2026'}
<CampaignBanner href="/brussels-ep-protest-2026" id="brussels-ep-protest-2026">
<strong>Brussels, Feb 23</strong> - Join us outside the European Parliament to call for a global treaty
to pause frontier AI development.
</CampaignBanner>
{/if}
{#if deLocalizeHref($page.url.pathname) !== '/brussels-ep-protest-2026'}
<CampaignBanner href="/brussels-ep-protest-2026" id="brussels-ep-protest-2026">
<strong>Brussels, Feb 23</strong> - Join us outside the European Parliament to call for a global
treaty to pause frontier AI development.
</CampaignBanner>
{/if}

{#if hero}
<div class="hero-section">
<Hero />
<Header inverted />
</div>
{/if}
</div>

<div class="layout" class:with-hero={hero}>
<div class="layout" class:hero-page={hero}>
{#if $page.route.id === '/sayno'}
<!-- Dynamic import and render the selfie UX component -->
{#await import('./sayno/SelfieUX.svelte') then module}
<svelte:component this={module.default} />
{/await}
{/if}

{#if hero}
<div class="hero-section">
<Hero />
<Header inverted />
</div>
{:else}
{#if !hero}
<Header />
{/if}

Expand Down Expand Up @@ -147,6 +151,22 @@
margin: auto;
} */
.page-top.hero-page {
display: flex;
flex-direction: column;
height: 100dvh;
}
.page-top.hero-page > :global(.banner),
.page-top.hero-page > :global(.campaign-banner) {
flex-shrink: 0;
}
.page-top.hero-page .hero-section {
flex: 1;
min-height: 0;
}
.hero-section {
position: relative;
}
Expand All @@ -156,6 +176,8 @@
top: 0;
left: 0;
right: 0;
width: min(var(--page-width), 100vw - 6rem);
margin-inline: auto;
Comment on lines +179 to +180
Copy link
Collaborator

@Wituareard Wituareard Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This causes inconsistencies when navigating between pages for me

z-index: 1;
}
Expand All @@ -172,6 +194,10 @@
padding: 0 var(--padding-wide) 0 var(--padding-wide);
}
.layout.hero-page {
grid-template-rows: 1fr auto;
}
Comment on lines +197 to +199
Copy link
Collaborator

@Wituareard Wituareard Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't strictly necessary right?

/* Transition to narrower padding at narrow viewports (matches navbar 600px breakpoint) */
@media (max-width: 600px) {
.layout {
Expand Down
Loading