Repository navigation
Fill the hero badge so the grid stops crossing it - #692
Merged
hansmartensdev merged 1 commit intoSep 18, 2026
Merged
Conversation
The pill on a gridded hero is Badge variant="brand", which fills at bg-brand-500/10, and the hero behind it draws a 56px lattice. A 1px line read straight through the pill and cut it in half. Both colour modes carry a grid, from two different components: HeroGrid in light, hero-beam__grid inside HeroBeam in dark. What differs is how much of it shows. The line sits at a far lower contrast against near-black than against white, so in dark mode it was close to invisible before it ever reached the pill. The fix mixes the same 10% of the brand into the section's own ground, which the hero paints as bg-background in both modes. That gives the colour the pill already renders as, with nothing left to see through, and it reads the brand and background tokens, so one rule covers all eight colour themes and both modes with no second value to keep in step. Checked on the built pages: eight distinct pill colours across the eight themes, in both modes. In sRGB, not OKLCH. --color-background in light is oklch(100% 0 0), whose hue is powerless, so mixing toward it in OKLCH pulls the hue away from the brand and the pill comes out the wrong colour. sRGB is also what the browser composites the translucent fill in, so the result lands on the pill's current colour. Scoped by showHeroHalo, which already gates both grid layers, so it names exactly the heroes that need this. Verified against the built HTML in both modes: /about/, /blog/, /contact/ and /projects/ carry it; the home and components heroes draw no grid and are untouched, as are the badges elsewhere that use the same variant away from a grid. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BwJB1u6U3vdEZ9LrHRebST
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
hansmartensdev
deleted the
claude/hansmartens-market-positioning-mlt89z
branch
September 18, 2026 13:03
This branch was successfully 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.
The pill on a gridded hero is Badge variant="brand", which fills at bg-brand-500/10, and the hero behind it draws a 56px lattice. A 1px line read straight through the pill and cut it in half.
Both colour modes carry a grid, from two different components: HeroGrid in light, hero-beam__grid inside HeroBeam in dark. What differs is how much of it shows. The line sits at a far lower contrast against near-black than against white, so in dark mode it was close to invisible before it ever reached the pill.
The fix mixes the same 10% of the brand into the section's own ground, which the hero paints as bg-background in both modes. That gives the colour the pill already renders as, with nothing left to see through, and it reads the brand and background tokens, so one rule covers all eight colour themes and both modes with no second value to keep in step. Checked on the built pages: eight distinct pill colours across the eight themes, in both modes.
In sRGB, not OKLCH. --color-background in light is oklch(100% 0 0), whose hue is powerless, so mixing toward it in OKLCH pulls the hue away from the brand and the pill comes out the wrong colour. sRGB is also what the browser composites the translucent fill in, so the result lands on the pill's current colour.
Scoped by showHeroHalo, which already gates both grid layers, so it names exactly the heroes that need this. Verified against the built HTML in both modes: /about/, /blog/, /contact/ and /projects/ carry it; the home and components heroes draw no grid and are untouched, as are the badges elsewhere that use the same variant away from a grid.
Claude-Session: https://claude.ai/code/session_01BwJB1u6U3vdEZ9LrHRebST
What does this PR do?
A clear description of the change and why it was made.
Fixes # (issue number, if applicable)
Type of change
Checklist
pnpm lintpasses with 0 errorspnpm checkpasses with 0 errorspnpm buildcompletes successfullyScreenshots (if relevant)
Add before/after screenshots for visual changes.