Skip to content

Homepage hero: fix SSR hydration flash and portrait desktop layout #667

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
Wituareard merged 5 commits into from
Feb 23, 2026
+17 −23
Merged

Homepage hero: fix SSR hydration flash and portrait desktop layout #667

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
53e38e3
Fix hero image layout: use <picture> media query and object-fit cover
RisingOrange Feb 21, 2026
df84dd7
Revert to object-fit contain and restore scale(0.95)
RisingOrange Feb 21, 2026
99430ee
Use width-only breakpoints, remove orientation checks
RisingOrange Feb 21, 2026
3d1f7cd
Remove misleading width/height from picture fallback img
RisingOrange Feb 23, 2026
63f4830
Remove redundant picture CSS rule
RisingOrange Feb 23, 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
40 changes: 17 additions & 23 deletions src/lib/components/Hero.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,29 @@

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?.()
}
})
</script>

<div class="hero">
{#if isMobile}
<enhanced:img src={homeHeroMobile} sizes="100vw" alt="" />
{:else}
<enhanced:img src={homeHeroDesktop} sizes="100vw" alt="" />
{/if}
<picture>
{#each Object.entries(homeHeroMobile.sources) as [format, srcset]}
<source media="(max-width: 850px)" {srcset} sizes="100vw" type={'image/' + format} />
{/each}
{#each Object.entries(homeHeroDesktop.sources) as [format, srcset]}
<source {srcset} sizes="100vw" type={'image/' + format} />
{/each}
<img src={homeHeroDesktop.img.src} alt="" />
</picture>
<div class="content" bind:this={tagline}>
<h2>Don’t let AI companies<br />gamble away our future</h2>
<h2>Don't let AI companies<br />gamble away our future</h2>
<div class="actions">
<Link href="/join" class="btn-primary">Get involved</Link>
<Link href="/donate" class="btn-secondary">Donate</Link>
Expand Down Expand Up @@ -74,15 +69,20 @@
transform-origin: center bottom;
}

@media (max-width: 850px), (orientation: portrait) {
@media (min-width: 851px) {
.hero :global(img) {
transform: scale(0.95);
}
}

@media (max-width: 850px) {
.hero :global(img) {
position: absolute !important;
bottom: var(--mobile-hero-img-pos, 0px) !important;
left: 0 !important;
width: 100% !important;
height: auto !important;
object-fit: initial !important;
transform: none !important;
}

.content {
Expand Down Expand Up @@ -114,12 +114,6 @@
}
}

@media (min-width: 851px) and (orientation: landscape) {
.hero :global(img) {
transform: scale(0.95);
}
}

.hero {
display: block;
height: 100vh;
Expand Down
Loading