Repository navigation
fix(website): prevent hero headline overlapping the film frame - #899
Merged
Merged
Conversation
Reserve headline space and slightly scale down the hero title and film on wide layouts.
🦋 Changeset detectedLatest commit: 7a37cbc The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Ferryx349
temporarily deployed
to
website-preview
October 18, 2026 18:30 — with 
GitHub Actions
Inactive
GitHub Actions
Inactive
Contributor
|
🧹 Site preview for this PR was deleted (PR closed). |
cameri
approved these changes
Oct 18, 2026
cameri
had a problem deploying
to
website-preview
October 18, 2026 18:31 — with
GitHub Actions
Error
GitHub Actions
Error
cameri
temporarily deployed
to
website-preview
October 18, 2026 18:32 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
 [Low impact] The PR appears safe to merge; no actionable issues were found.
|
cameri
added a commit
that referenced
this pull request
Nov 5, 2026
Closes #876 ### What changed `website/site/public/media/hero-poster.webp` is encoded at **1440×810** instead of 1920×1080, and `scripts/build-media.mjs` resizes to 1440 so the next `pnpm run media` keeps the size instead of restoring 1920. 1440 covers the box the film actually paints in: `Hero.astro` caps it at `min(1180px, 80vw, film-h * 16/9)`, so at most 1180×664 CSS px — 1440 is **1.22×** that, enough for a 1.25× display, and no `devicePixelRatio` branch is needed. The 1359×764 in #876 was the layout before that cap landed in #899, two days after the audit; the issue's numbers describe a box the site no longer has. ### Before / after | | bytes | dimensions | |---|---|---| | before | 42,926 | 1920 × 1080 | | after | **30,878** | 1440 × 810 | **−12,048 B, −28.1%.** Both below the issue's ≤ 45 KB bound. Note the source file was already smaller than the 73,916 B the 2026-10-17 audit measured — it was re-encoded during the #858 rebrand — so the absolute saving is smaller than the audit's 36.9 KiB estimate, while the resolution waste it reported is removed. ### Visual check SSIM of the new file against the old one, both scaled with lanczos to the comparison size: | comparison size | SSIM | |---|---| | 1180 × 664 (the film's CSS cap today) | 0.9968 | | 1359 × 764 (the layout #876 measured) | 0.9964 | | 2718 × 1528 (2× device pixels) | 0.9932 | ### `og:image` was never this file The issue's second consumer no longer exists: `Base.astro` defaults `ogImage` to `/media/social-card.png`, generated at 1200×630 by `build-social-card.mjs` (#884). Nothing overrides it — `grep -rn "ogImage=" website/site/src` returns only the default and the prop declaration. So the "must stay 1920×1080" constraint does not apply, and no second 1920 file is kept. Built output confirms both: ``` dist/media/hero-poster.webp 30,878 B 1440,810 poster="/media/hero-poster.webp" property="og:image" content="https://nostream.dev/media/social-card.png" ``` ### Verification - `pnpm build` in `website/site` succeeds (prebuild's brand + hero-NIP checks included); the asset in `dist/media/` is the new one at 30,878 B. - CLS: the film keeps `aspect-ratio: 16/9` on the `<video>`, unchanged by this PR, so the poster's intrinsic size does not enter layout. ### Out of scope `admin-poster.webp` and `peering-poster.webp` are encoded by the same script at 1920 and have the same geometry mismatch. They are not measured by this issue's audit and are left alone; the fix is one `resize()` call each when someone measures them. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> <!-- coderabbit-ai-generated:v1 --> ## Summary by CodeRabbit * **Performance** * Reduced the landing page hero image width from 1920 to 1440 pixels, lowering the image’s download size while preserving visual quality. * Social preview imagery remains unchanged. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This branch was previously deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
On wide viewports, the home hero headline (“Nostr runs on relays…”) could sit under the top-left of the hero film frame, making the copy hard to read. This change reserves a headline band above the film and slightly scales down the title and frame so they stay visually separated without shrinking the hero much.
Related Issue
Motivation and Context
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes
Checklist: