From 53e38e34edaf7173136862013f244cce10787bbc Mon Sep 17 00:00:00 2001 From: RisingOrange Date: Sat, 21 Feb 2026 19:10:33 +0100 Subject: [PATCH 1/5] Fix hero image layout: use media query and object-fit cover - Replace JS isMobile/resize listener with + so the browser picks mobile vs desktop image natively, eliminating the SSR hydration flash - Change mobile breakpoint from (max-width: 850px), (orientation: portrait) to (max-width: 850px) and (orientation: portrait) so large portrait windows (e.g. half-screen 4K) don't get the mobile layout - Switch object-fit from contain to cover to eliminate the letterbox gap that exposed the CSS background color (fixes Dark Reader two-tone artifact) - Remove transform: scale(0.95) which was adding extra exposed background --- src/lib/components/Hero.svelte | 53 ++++++++++++++++++---------------- 1 file changed, 28 insertions(+), 25 deletions(-) diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte index 9e0da07b..74f77711 100644 --- a/src/lib/components/Hero.svelte +++ b/src/lib/components/Hero.svelte @@ -6,34 +6,39 @@ import Link from '$lib/components/Link.svelte' - let isMobile = false let tagline: HTMLDivElement - const checkMobile = () => { - isMobile = window.innerWidth <= 850 || window.innerHeight > window.innerWidth - } - onMount(() => { - checkMobile() - window.addEventListener('resize', checkMobile) - const cleanupCqwEmulation = emulateCqwIfNeeded(tagline) return () => { - window.removeEventListener('resize', checkMobile) cleanupCqwEmulation?.() } })
- {#if isMobile} - - {:else} - - {/if} + + {#each Object.entries(homeHeroMobile.sources) as [format, srcset]} + + {/each} + {#each Object.entries(homeHeroDesktop.sources) as [format, srcset]} + + {/each} + +
-

Don’t let AI companies
gamble away our future

+

Don't let AI companies
gamble away our future

Get involved Donate @@ -66,15 +71,20 @@ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } + .hero :global(picture) { + display: block; + width: 100%; + height: 100%; + } + .hero :global(img) { width: 100%; height: 100%; - object-fit: contain; + object-fit: cover; object-position: center bottom; - transform-origin: center bottom; } - @media (max-width: 850px), (orientation: portrait) { + @media (max-width: 850px) and (orientation: portrait) { .hero :global(img) { position: absolute !important; bottom: var(--mobile-hero-img-pos, 0px) !important; @@ -82,7 +92,6 @@ width: 100% !important; height: auto !important; object-fit: initial !important; - transform: none !important; } .content { @@ -114,12 +123,6 @@ } } - @media (min-width: 851px) and (orientation: landscape) { - .hero :global(img) { - transform: scale(0.95); - } - } - .hero { display: block; height: 100vh; From df84dd7b099aeef62296a025837c080585b29720 Mon Sep 17 00:00:00 2001 From: RisingOrange Date: Sat, 21 Feb 2026 19:30:50 +0100 Subject: [PATCH 2/5] Revert to object-fit contain and restore scale(0.95) - Revert object-fit back to contain (cover was hiding intentional orange background above the image) - Restore transform: scale(0.95) with transform-origin: center bottom - Update scale media query to complement the new mobile condition: (min-width: 851px), (orientation: landscape) instead of the old (min-width: 851px) and (orientation: landscape) --- src/lib/components/Hero.svelte | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte index 74f77711..54e678c1 100644 --- a/src/lib/components/Hero.svelte +++ b/src/lib/components/Hero.svelte @@ -80,8 +80,15 @@ .hero :global(img) { width: 100%; height: 100%; - object-fit: cover; + object-fit: contain; object-position: center bottom; + transform-origin: center bottom; + } + + @media (min-width: 851px), (orientation: landscape) { + .hero :global(img) { + transform: scale(0.95); + } } @media (max-width: 850px) and (orientation: portrait) { From 99430ee27a9079c88316a3c065ff2150e8a797f1 Mon Sep 17 00:00:00 2001 From: RisingOrange Date: Sat, 21 Feb 2026 22:26:54 +0100 Subject: [PATCH 3/5] Use width-only breakpoints, remove orientation checks --- src/lib/components/Hero.svelte | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte index 54e678c1..cee74864 100644 --- a/src/lib/components/Hero.svelte +++ b/src/lib/components/Hero.svelte @@ -20,12 +20,7 @@
{#each Object.entries(homeHeroMobile.sources) as [format, srcset]} - + {/each} {#each Object.entries(homeHeroDesktop.sources) as [format, srcset]} @@ -85,13 +80,13 @@ transform-origin: center bottom; } - @media (min-width: 851px), (orientation: landscape) { + @media (min-width: 851px) { .hero :global(img) { transform: scale(0.95); } } - @media (max-width: 850px) and (orientation: portrait) { + @media (max-width: 850px) { .hero :global(img) { position: absolute !important; bottom: var(--mobile-hero-img-pos, 0px) !important; From 3d1f7cda02fe174e82dfa4a9cad78e934dd0c4db Mon Sep 17 00:00:00 2001 From: RisingOrange Date: Mon, 23 Feb 2026 12:35:52 +0100 Subject: [PATCH 4/5] Remove misleading width/height from picture fallback img --- src/lib/components/Hero.svelte | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte index cee74864..b12a1ac6 100644 --- a/src/lib/components/Hero.svelte +++ b/src/lib/components/Hero.svelte @@ -25,12 +25,7 @@ {#each Object.entries(homeHeroDesktop.sources) as [format, srcset]} {/each} - +

Don't let AI companies
gamble away our future

From 63f48306749d16c93ae1c0df45d3f1cf58f0c562 Mon Sep 17 00:00:00 2001 From: RisingOrange Date: Mon, 23 Feb 2026 12:39:22 +0100 Subject: [PATCH 5/5] Remove redundant picture CSS rule --- src/lib/components/Hero.svelte | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte index b12a1ac6..fc9097b0 100644 --- a/src/lib/components/Hero.svelte +++ b/src/lib/components/Hero.svelte @@ -61,12 +61,6 @@ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } - .hero :global(picture) { - display: block; - width: 100%; - height: 100%; - } - .hero :global(img) { width: 100%; height: 100%;