Repository navigation
Fill hero controls so the grid stops crossing them - #693
Merged
hansmartensdev merged 1 commit intoSep 19, 2026
Merged
Conversation
A hero with showHeroHalo paints a 56px lattice behind its content — HeroGrid in light mode, hero-beam__grid in dark. Controls filled with bg-transparent let a 1px line read straight through them, which cuts the control in half. This affected the tag pills in the article and project heroes across 26 pages in both colour modes, the project hero's repository button, and the three jump buttons in the services hero. Every affected hero paints bg-background, so filling with that token gives the colour the transparent control already shows and leaves nothing to see through. On plain ground the controls are unchanged. Applied at the call site rather than in the Button variants or the tag list components. Both are used away from a hero as well, and several of those usages sit on bg-background-secondary, where this fill would leave a pale patch. Two button classes, because the outline variants hover differently. `outline` hovers to --secondary, which is opaque already and is restated so the base fill cannot win the cascade against it. `brand-outline` hovers to bg-brand-500/10, which is translucent and would let the line back in, so the hover mixes that same 10% into the same ground. The tag pills need no hover rule: they change only their border. The mix is in sRGB rather than OKLCH. --color-background is oklch(100% 0 0) in light mode, whose hue is powerless, so mixing toward it in OKLCH drags the hue off the brand; sRGB is also what the browser composites a translucent fill in. Verified across all 88 built pages in both colour modes: no control without an opaque fill of its own now sits inside a painted lattice. The tag lists on the blog and project index and tag pages keep their transparent fill, and the selected pill keeps bg-brand-500. 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 19, 2026 01:17
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.
A hero with showHeroHalo paints a 56px lattice behind its content — HeroGrid in light mode, hero-beam__grid in dark. Controls filled with bg-transparent let a 1px line read straight through them, which cuts the control in half. This affected the tag pills in the article and project heroes across 26 pages in both colour modes, the project hero's repository button, and the three jump buttons in the services hero.
Every affected hero paints bg-background, so filling with that token gives the colour the transparent control already shows and leaves nothing to see through. On plain ground the controls are unchanged.
Applied at the call site rather than in the Button variants or the tag list components. Both are used away from a hero as well, and several of those usages sit on bg-background-secondary, where this fill would leave a pale patch.
Two button classes, because the outline variants hover differently.
outlinehovers to --secondary, which is opaque already and is restated so the base fill cannot win the cascade against it.brand-outlinehovers to bg-brand-500/10, which is translucent and would let the line back in, so the hover mixes that same 10% into the same ground. The tag pills need no hover rule: they change only their border.The mix is in sRGB rather than OKLCH. --color-background is oklch(100% 0 0) in light mode, whose hue is powerless, so mixing toward it in OKLCH drags the hue off the brand; sRGB is also what the browser composites a translucent fill in.
Verified across all 88 built pages in both colour modes: no control without an opaque fill of its own now sits inside a painted lattice. The tag lists on the blog and project index and tag pages keep their transparent fill, and the selected pill keeps bg-brand-500.
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.