design: terminal-native branding + compact header and goal#38
Open
renzorlive wants to merge 1 commit into
Open
design: terminal-native branding + compact header and goal#38renzorlive wants to merge 1 commit into
renzorlive wants to merge 1 commit into
Conversation
Follow-up to the layout pass, per review: 'cooler branding for nerds and young people' and 'compact the goal and header'. Branding — the header now reads as a terminal: - Shell-prompt prefix (green ❯) before the wordmark - Blinking block caret after it (steps() animation, honors prefers-reduced-motion) - The block-character meter (10/18 ██████░░░░) is promoted to THE progress readout — the nerdiest of the three redundant indicators Compactness: - Header collapses to ONE row (62px, was 112px): wordmark · combo/XP · block meter · streak · actions. The redundant 'Level: x/y' pill, the smooth gradient bar, and the '18 Progressive Levels' chip are hidden via a JS-proof .hidden-by-design class (elements stay in the DOM for script compatibility) - Removed the passive 'Ctrl+/ cheat mode' hint chip — redundant with the injected Cheat Mode button, which is now styled as a hud-action with the shortcut in its tooltip - Goal card is a single line (67px, was ~190px): [GOAL] instruction ····· [cmd] — the focus command became a green keycap chip with 'Type exactly as shown' as its tooltip - Editor now starts 166px from the page top (was ~469px before the design pass began) Content fix surfaced by the new design: 15 lessons shipped a placeholder focusCommand of 'VIM', which the goal chip made visible. All filled with their real commands (cw, 3w, dd, D, dw, :q, /, ?, r, w, x, 0/$, gg/G, yy/p), matching the existing short-key convention. Verified in-browser at 1280px: header centers spread 0px (true single line), caret animates, goal chip shows the correct command, cw lesson solved end-to-end (buffer correct, completion modal fires), console clean. Suites: 35 golden, contract 0/0, unit 38/38, lint 0/0; tailwind.css rebuilt for the new utilities. Note: touches lesson-practice-ex-commands-practice.json focusCommand, which unmerged PR #31 also edits (same value) — trivial overlap. Co-Authored-By: Claude Fable 5 <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 does this PR do?
Second design pass, per review feedback: cooler branding for nerds and young people + compact the goal and header.
Terminal-native branding
❯green shell-prompt prefix before the wordmarkVIM MASTER—steps()animation like a real TTY; honorsprefers-reduced-motion10/18 ██████░░░░block meter promoted to THE progress readout (nerdiest of the three redundant indicators)Compactness (measured at 1280px)
[GOAL] instruction ····· [cw]keycap chipRedundancy removed:
Level: x/ypill, smooth gradient bar, and18 Progressive Levelschip hidden via a JS-proof.hidden-by-design(elements remain in the DOM for script compatibility); the passiveCtrl+/hint chip deleted — the injected Cheat Mode button (nowhud-action-styled, shortcut in tooltip) already covers it.Content fix the design surfaced
15 lessons shipped
focusCommand: "VIM"— a placeholder the old giant display hid, but the new chip put front-and-center. All filled with their real commands (cw,3w,dd,D,dw,:q,/,?,r,w,x,0/$,gg/G,yy/p).How was it verified?
In-browser at 1280px: header single-line confirmed (0px spread), caret animates, goal chip shows the correct command, cw lesson solved end-to-end (buffer →
This is a good example., completion modal fires), zero console errors. Suites: golden 35/35 · contract 0/0 · unit 38/38 · lint 0/0 ·tailwind.cssrebuilt.🤖 Generated with Claude Code