feat(keymap): align rows like a physical board and recolor shift cue - #22
Merged
Conversation
The on-screen keymap had three issues. Rows overflowed the fixed-width container, so flex-shrink resized keys per-row (home row stayed wide while the 13- and 12-key rows shrank), making columns drift out of alignment. The bottom row also led with an oversized SHIFT cap, pushing its keys past the natural half-key stagger. And the shift highlight reused the orange "achievement" accent that's reserved for the drill-climax Net WPM readout. - Size the board as a container and derive key width in cqw, so every key is identical across rows at any viewport and columns never drift. - Add placeholder Tab / Caps Lock / Enter caps and let all side caps flex-grow equally, so both edges line up and the modifier widths produce a true physical-keyboard stagger (top->home 0.25u, home->bottom half-pitch). - Introduce a dedicated violet --shift color (+ .glow-shift) for the shift highlight, freeing the orange accent for its intended climax role. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The shift caps now use the natural-case label "Shift" (uppercased via CSS) instead of the literal "SHIFT", so the indicator assertion was failing. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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.
What
Polishes the on-screen Manoonchai keymap so it reads like a real staggered keyboard, and gives the Shift cue its own color.
cqwoff the board width, so keys are identical across all three rows at every viewport.flex-growequally so both the left and right edges line up and the Shift keys are stretched.0.25uoffset and home→bottom an exact half-key pitch.--accent; it uses a dedicated violet--shiftcolor (+ a.glow-shiftutility) in both light and dark themes.Why
flex-shrinkresized keys per-row — the 11-key home row stayed wide while the 13- and 12-key rows shrank. The unequal widths accumulated drift, so e.g.กsat overาinstead of่.ุwasn't centered betweenงandเ).--accentis the terracotta "achievement" color reserved for the drill-climax Net WPM readout (number + chart line); reusing it for Shift muddied that meaning.Reviewer notes
16.25is chosen so that, with the side caps flex-growing equally to fill each row, the top→home stagger lands at exactly0.25u(home→bottom is half-pitch regardless of the divisor). See the comment inKeymap.svelte.--shiftis a new semantic token;--accentis intentionally left in place forWpmChartandDrillSummary.ุ/ูcentered on their home-row midpoints, no horizontal overflow, and the shift highlight renders violet in both themes.🤖 Generated with Claude Code