From 2e03a7ca8c95b27c35e2dd1d34982d9657532c8b Mon Sep 17 00:00:00 2001 From: RisingOrange Date: Sat, 21 Feb 2026 16:14:44 +0100 Subject: [PATCH 01/11] Fix banner pushing hero below viewport fold Wrap banners and hero-section in a flex column container (page-top) with height: 100dvh on hero pages, so the hero fills whatever vertical space remains after banners. Change Hero height from 100vh to 100% to fill the flex child. Fix layout grid rows for hero pages (main + footer only). --- src/lib/components/Hero.svelte | 2 +- src/routes/+layout.svelte | 108 +++++++++++++++++++-------------- 2 files changed, 64 insertions(+), 46 deletions(-) diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte index fc9097b0..eb855032 100644 --- a/src/lib/components/Hero.svelte +++ b/src/lib/components/Hero.svelte @@ -116,7 +116,7 @@ .hero { display: block; - height: 100vh; + height: 100%; min-height: var(--hero-min-height); overflow: hidden; position: relative; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 8a9965d0..4f669778 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -51,49 +51,58 @@ Top - -{#if data.localeAlert} - - - {@html data.localeAlert.message} - -{:else if geo?.country?.code === 'GB'} - - PauseAI's largest ever protest will be on Saturday February 28th in London. Sign up now! + + {#if data.localeAlert} + - -{:else} - - {#if !eventFound} - {#if geo?.country?.code === 'US' && false} - - HELP US PROTECT STATE SOVEREIGNTY ON AI REGULATION | ACT NOW ยป - - {:else if false} - - ๐ŸŽ„ Holiday Matching Campaign! Help fund volunteer stipends for PauseAI - advocates. Join the Little Helpers campaign โ†’ - + + {@html data.localeAlert.message} + + {:else if geo?.country?.code === 'GB'} + + PauseAI's largest ever protest will be on Saturday February 28th in London. Sign up now! + + {:else} + + {#if !eventFound} + {#if geo?.country?.code === 'US' && false} + + HELP US PROTECT STATE SOVEREIGNTY ON AI REGULATION | ACT NOW ยป + + {:else if false} + + ๐ŸŽ„ Holiday Matching Campaign! Help fund volunteer stipends for PauseAI + advocates. Join the Little Helpers campaign โ†’ + + {/if} {/if} {/if} -{/if} -{#if deLocalizeHref($page.url.pathname) !== '/brussels-ep-protest-2026'} - - Brussels, Feb 23 - Join us outside the European Parliament to call for a global treaty - to pause frontier AI development. - -{/if} + {#if deLocalizeHref($page.url.pathname) !== '/brussels-ep-protest-2026'} + + Brussels, Feb 23 - Join us outside the European Parliament to call for a global + treaty to pause frontier AI development. + + {/if} + + {#if hero} +
+ +
+
+ {/if} +
{#if $page.route.id === '/sayno'} @@ -103,12 +112,7 @@ {/await} {/if} - {#if hero} -
- -
-
- {:else} + {#if !hero}
{/if} @@ -147,6 +151,16 @@ margin: auto; } */ + .page-top.with-hero { + display: flex; + flex-direction: column; + height: 100dvh; + } + + .page-top.with-hero .hero-section { + flex: 1; + } + .hero-section { position: relative; } @@ -172,6 +186,10 @@ padding: 0 var(--padding-wide) 0 var(--padding-wide); } + .layout.with-hero { + grid-template-rows: 1fr auto; + } + /* Transition to narrower padding at narrow viewports (matches navbar 600px breakpoint) */ @media (max-width: 600px) { .layout { From 1e70221841bbc0fbb974c079bb18cbd7ca94560b Mon Sep 17 00:00:00 2001 From: RisingOrange Date: Sat, 21 Feb 2026 16:25:48 +0100 Subject: [PATCH 02/11] Fix nav layout after hero-section moved out of .layout The nav (position: absolute, left: 0, right: 0) now lives in page-top (full viewport width) instead of inside .layout (40rem max, 3rem padding). This caused --cqw container-query values to change, breaking logo positioning and link spacing. Fix: constrain the nav's absolute position to the same width as .layout's content area (min(100%, page-width) - 6rem), centered via margin-inline: auto. --- src/routes/+layout.svelte | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 4f669778..8f9fe34c 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -170,6 +170,10 @@ top: 0; left: 0; right: 0; + /* Replicate .layout constraints: constrain to page-width minus its 3rem padding on each side, + then center. This keeps --cqw container-query calculations identical to before. */ + width: calc(min(100%, var(--page-width)) - 2 * 3rem); + margin-inline: auto; z-index: 1; } From 33917cf94d4b87d3866402ce5a66f9cb626d9cce Mon Sep 17 00:00:00 2001 From: RisingOrange Date: Sat, 21 Feb 2026 16:31:41 +0100 Subject: [PATCH 03/11] Fix nav width formula: use content-box model correctly MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previous fix wrongly applied: min(100vw, page-width) - 6rem With box-sizing: content-box, .layout's content area (where hero-section lives) is min(page-width, 100vw - 6rem) โ€” the padding is subtracted from the viewport, not from the max-inline-size. The correct formula matches the actual content-box width of .layout. Previously gave 544px at 800px viewport; correct is 640px. --- src/routes/+layout.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 8f9fe34c..21dbdd81 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -170,9 +170,9 @@ top: 0; left: 0; right: 0; - /* Replicate .layout constraints: constrain to page-width minus its 3rem padding on each side, - then center. This keeps --cqw container-query calculations identical to before. */ - width: calc(min(100%, var(--page-width)) - 2 * 3rem); + /* Replicate the content-box width of .layout (box-sizing: content-box, max-inline-size: 40rem, + padding: 0 3rem): content-box = min(page-width, viewport - 2*padding) */ + width: min(var(--page-width), 100vw - 6rem); margin-inline: auto; z-index: 1; } From f8c41437722e589d03c3718ea073c668966840bd Mon Sep 17 00:00:00 2001 From: RisingOrange Date: Sat, 21 Feb 2026 16:33:21 +0100 Subject: [PATCH 04/11] Remove verbose comment on nav width --- src/routes/+layout.svelte | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 21dbdd81..6f6b4e99 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -170,8 +170,6 @@ top: 0; left: 0; right: 0; - /* Replicate the content-box width of .layout (box-sizing: content-box, max-inline-size: 40rem, - padding: 0 3rem): content-box = min(page-width, viewport - 2*padding) */ width: min(var(--page-width), 100vw - 6rem); margin-inline: auto; z-index: 1; From 4aeab4d50d69cfcdaed8e0f2e00a1229082bba5a Mon Sep 17 00:00:00 2001 From: RisingOrange Date: Sat, 21 Feb 2026 17:21:26 +0100 Subject: [PATCH 05/11] Rename with-hero to hero-page for clarity --- src/routes/+layout.svelte | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 6f6b4e99..0c57b53b 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -51,7 +51,7 @@ Top -
+
{#if data.localeAlert} -
+
{#if $page.route.id === '/sayno'} {#await import('./sayno/SelfieUX.svelte') then module} @@ -151,13 +151,13 @@ margin: auto; } */ - .page-top.with-hero { + .page-top.hero-page { display: flex; flex-direction: column; height: 100dvh; } - .page-top.with-hero .hero-section { + .page-top.hero-page .hero-section { flex: 1; } @@ -188,7 +188,7 @@ padding: 0 var(--padding-wide) 0 var(--padding-wide); } - .layout.with-hero { + .layout.hero-page { grid-template-rows: 1fr auto; } From 547d1fadd20ddc3ea4b57e4b12c2de531bf4cc75 Mon Sep 17 00:00:00 2001 From: RisingOrange Date: Tue, 24 Feb 2026 00:30:05 +0100 Subject: [PATCH 06/11] Fix hero flex overflow squishing banners on wide viewports On wide viewports (2560px+), the hero image's intrinsic aspect ratio inflated the hero-section flex item via min-height: auto, overflowing the 100dvh container and collapsing banners to zero height. - Add min-height: 0 on .hero-section to override flex min-height: auto - Add flex-shrink: 0 on banner flex items to prevent future shrinkage - Cap .hero min-height with min() so it can't exceed parent on short viewports --- src/lib/components/Hero.svelte | 2 +- src/routes/+layout.svelte | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte index eb855032..c22cbb1f 100644 --- a/src/lib/components/Hero.svelte +++ b/src/lib/components/Hero.svelte @@ -117,7 +117,7 @@ .hero { display: block; height: 100%; - min-height: var(--hero-min-height); + min-height: min(var(--hero-min-height), 100%); overflow: hidden; position: relative; width: 100vw; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 0c57b53b..8b503f3c 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -157,8 +157,14 @@ 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 { From 50d65d4f6b7512626010f3abf21b8e4db8ad0713 Mon Sep 17 00:00:00 2001 From: Wituareard <87208350+Wituareard@users.noreply.github.com> Date: Tue, 24 Feb 2026 17:35:30 +0100 Subject: [PATCH 07/11] Modify navbar margin to be less aggressive --- src/routes/+layout.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 8b503f3c..de420433 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -176,7 +176,7 @@ top: 0; left: 0; right: 0; - width: min(var(--page-width), 100vw - 6rem); + width: min(var(--page-width), 100vw - 4rem); margin-inline: auto; z-index: 1; } From a535b640d0d952c2d54598356d6e09d92600cbae Mon Sep 17 00:00:00 2001 From: Wituareard <87208350+Wituareard@users.noreply.github.com> Date: Tue, 24 Feb 2026 17:37:20 +0100 Subject: [PATCH 08/11] Simplify hero height --- src/lib/components/Hero.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte index c22cbb1f..a98ceb21 100644 --- a/src/lib/components/Hero.svelte +++ b/src/lib/components/Hero.svelte @@ -116,8 +116,9 @@ .hero { display: block; - height: 100%; - min-height: min(var(--hero-min-height), 100%); + height: 100vh; + min-height: var(--hero-min-height); + max-height: 100%; overflow: hidden; position: relative; width: 100vw; From 9bbdd412ea7dbe4ede8df7ef822e70d9d9cbbd38 Mon Sep 17 00:00:00 2001 From: Wituareard <87208350+Wituareard@users.noreply.github.com> Date: Tue, 24 Feb 2026 18:14:26 +0100 Subject: [PATCH 09/11] Revert "Modify navbar margin to be less aggressive" This reverts commit 50d65d4f6b7512626010f3abf21b8e4db8ad0713. --- src/routes/+layout.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index de420433..8b503f3c 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -176,7 +176,7 @@ top: 0; left: 0; right: 0; - width: min(var(--page-width), 100vw - 4rem); + width: min(var(--page-width), 100vw - 6rem); margin-inline: auto; z-index: 1; } From 4755e47a6c4f3fbd3cd98be5d86d9971241317d3 Mon Sep 17 00:00:00 2001 From: Wituareard <87208350+Wituareard@users.noreply.github.com> Date: Tue, 24 Feb 2026 18:44:08 +0100 Subject: [PATCH 10/11] Revert "Simplify hero height" This reverts commit a535b640d0d952c2d54598356d6e09d92600cbae. --- src/lib/components/Hero.svelte | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte index a98ceb21..c22cbb1f 100644 --- a/src/lib/components/Hero.svelte +++ b/src/lib/components/Hero.svelte @@ -116,9 +116,8 @@ .hero { display: block; - height: 100vh; - min-height: var(--hero-min-height); - max-height: 100%; + height: 100%; + min-height: min(var(--hero-min-height), 100%); overflow: hidden; position: relative; width: 100vw; From 6d716882c7f783d140f0625bc94a54990574c27b Mon Sep 17 00:00:00 2001 From: RisingOrange Date: Tue, 24 Feb 2026 19:14:26 +0100 Subject: [PATCH 11/11] Remove redundant min-height from .hero --- src/lib/components/Hero.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte index c22cbb1f..630e7fbc 100644 --- a/src/lib/components/Hero.svelte +++ b/src/lib/components/Hero.svelte @@ -117,7 +117,6 @@ .hero { display: block; height: 100%; - min-height: min(var(--hero-min-height), 100%); overflow: hidden; position: relative; width: 100vw;