Repository navigation
fix(tools): drop the hover gate on tool cards - #47
Merged
Merged
Conversation
Gating `.tool-item:hover` behind `@media (hover: hover)` silences the card's hover reaction wherever the browser reports `hover: none` — touch devices, and desktop browsers in device emulation. There the accent wash, the border tint and the arrow nudge never appear at all, so the cards read as inert. The gate was meant to stop the wash sticking after a tap on touch, but it costs the reaction in every environment that reports `hover: none`, which is the common case for a mouse user in device emulation. Take the rules back out of the media query so the hover reaction is ungated again, and keep `:focus-visible` on the arrow so keyboard focus still moves it.
✅ PR Checks passedTypecheck ( |
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.
Reverts the hover gate added to the tool cards in #44.
What was wrong
Gating
.tool-item:hoverbehind@media (hover: hover)silences the card's hover reaction wherever the browser reportshover: none— touch devices, and desktop browsers in device emulation. There the accent wash, the border tint and the arrow nudge never appear at all, so the cards read as inert.The gate was meant to stop the wash sticking after a tap on touch, but it costs the reaction in every environment that reports
hover: none, which is the common case for a mouse user in device emulation.What changed
src/styles/tool.css— the hover rules come back out of the media query, so the reaction is ungated again.:focus-visiblestays on the arrow so keyboard focus still moves it.The tool card CSS ends up identical to
mainbefore #44 landed, apart from PR #44's own token and header changes.Testing
npx astro check— 0 errorsnpm run build— 12 pages, cleanhover:hovergate left;.tool-item:hoverand.tool-item:hover .tool-item-arroware ungated.tool-item:focus-visible .tool-item-arrowstill moves the arrowNote
This gives up #45's "stop sticky card hover on touch" protection. If that is wanted back, it needs a check that does not depend on the
hovermedia query — apointerTypecheck in JS would distinguish a real mouse in device emulation from a genuine touch, which the media query cannot.Built with minimax-m3.1-flash-free in the OpenCode harness.