fix(og): give the share card's text its own surface - #810
Open
smmariquit wants to merge 1 commit into
Open
Conversation
The campus photo has near-white 'UP LOS BAÑOS' lettering exactly where the title renders, so white-on-white happened whatever the text shadow did. A flat tint over the whole image cannot fix that, and a bottom gradient silently does nothing: satori does not reliably honour backgroundImage gradients, so two attempts rendered unchanged. Put the title and subtitle on their own dark panel instead. White on it is about 13:1 no matter what the photo does.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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.
Reported: text on the share card does not contrast properly.
Cause
The background photo has near-white "UP LOS BAÑOS" concrete lettering sitting exactly where the title renders, so white title text landed on a near-white background. The existing flat
rgba(28, 8, 7, 0.48)tint dims the whole image uniformly, which cannot rescue a spot that bright, and the title's soft shadow was not enough either.What I tried first, and why it failed
A bottom-weighted gradient scrim, which is the usual fix. Satori does not reliably honour
backgroundImagegradients, so the card rendered visually unchanged twice. Only rendering the real endpoint caught this; the CSS looked correct.Fix
The title and subtitle now sit on their own solid panel (
rgba(24, 7, 6, 0.82), rounded, padded). White on that is roughly 13:1 regardless of the photo behind it, and it keeps working if the background image is ever swapped per building.The overall tint drops back to 0.42 since the panel now carries the contrast.
Verified
Rendered the real route with the exact reported content (
t=PSLH A, subtitlePhysical Sciences Building · 5 classes · AY 2025-2026 Midyear, kickerRoom at UPLB) at each step. Before: title illegible over the concrete letters. After: both lines clearly readable. Badge and kicker unchanged.bun run build:e2egreen, biome clean.