feat(examples): overdrive redesign for /examples/ (Tasks 4-8)#54
Merged
johnnichev merged 8 commits intomainfrom Apr 8, 2026
Merged
feat(examples): overdrive redesign for /examples/ (Tasks 4-8)#54johnnichev merged 8 commits intomainfrom
johnnichev merged 8 commits intomainfrom
Conversation
Code quality review of Task 4 flagged that the 56px min-width floor
was being silently defeated by flex-shrink: 17 segments × 56px + 72px
("all" anchor) + 34px (gaps) = 1058px minimum, but the parent
.ct container has only 920px of content width (960px max-width minus
40px padding). Flex-shrink defaults to 1, so segments would compress
below the floor anyway — defeating the whole point of min-width.
Reducing to 44px gives 17×44 + 72 + 34 = 850px, which fits in 920px.
44px is also a reasonable touch target per WCAG 2.5.5 Level AAA.
Spec §2: docs/superpowers/specs/2026-04-08-examples-page-overdrive-design.md
Wraps the search input with a leading ⌕ glyph and a trailing / keyboard shortcut hint. Adds a global keydown listener that focuses the search when / is pressed outside any input. Counter initial text finalized as '# N files match' to match the runtime format that Task 3's flt() already produces. Placeholder text lowered and clarified from 'Search examples…' to 'search by name or keyword…'. Adds autocomplete="off" to suppress browser autofill suggestions on the examples filter. Both the ⌕ glyph span and the / kbd hint are marked aria-hidden="true" per the decorative-atom convention. Spec §3: docs/superpowers/specs/2026-04-08-examples-page-overdrive-design.md
Replaces the flex-row .eh card header with a 7-column CSS Grid that mimics 'ls -la' output: number, permissions, size, key badge, filename (with NN_ prefix stripped), description, chevron. The first 30 rows get a 14ms-staggered fade-up enter animation via the .ex-row--enter class. Rows past index 29 render immediately to avoid a cascade-of-88 effect. Mobile collapses to 2-line layout with permissions column hidden. Rows are keyboard-accessible (Enter/Space) with aria-expanded synced via a surgical single-line addition to the existing toggle() function. Spec §4: docs/superpowers/specs/2026-04-08-examples-page-overdrive-design.md
When a card is expanded, a one-line monospace '\$ cat examples/NN_name.py' prefix renders above the existing tag links and source pane. Visually frames the source as the output of a real shell command. Uses the full filename (with NN_ prefix) since that is the real path you would type in a shell. The \$ glyph is aria-hidden; the path text is left visible to AT as contextual file-path information. Spec §5: docs/superpowers/specs/2026-04-08-examples-page-overdrive-design.md
…hidden - Add :focus-visible outlines for .ex-rail__seg and .ex-row (WCAG 2.1 AA) - Fix generator f-string missing trailing newline (silences end-of-file-fixer) - Add aria-hidden="true" to nav .exec-dot (decorative atom convention from Task 2) - All @Keyframes verified to have prefers-reduced-motion fallbacks - Dead-code audit: all .cb/.cr/.eh legacy rules confirmed absent Spec: docs/superpowers/specs/2026-04-08-examples-page-overdrive-design.md
Replace proportional flex-weight sizing with flex:0 0 auto so each segment sizes to its content. Switch rail from overflow:hidden to overflow-x:auto with scroll-snap so all categories are reachable. Proportional widths made low-count categories too narrow to read.
Replace plain text / SVG icon logos on examples, simulations, and docs pages with the same 3-row box-drawing wordmark used on the landing page (.wm.wm--3). Each page gets the cyan neon glow and the correct sublabel (examples / simulations / page title on scroll). - examples: generator now emits .nav-logo + .wm--3__banner - simulations: .nav-brand replaced with wordmark + sublabel - docs (MkDocs): custom_dir override injects logo.html partial; extra.css adds wordmark styles and hides redundant site-name text
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.
Summary
/examples/page (Tasks 4–8 from the original plan)Commits
53baf45— fix: min-width 56→44px on category rail segmentsffb88d7— feat: search ⌕ glyph, kbd hint, counter0a010fd— feat: ls-la card rows64e7cff— feat: $ cat prefix on card expansion (mislabeled commit)8eef934— feat: $ cat prefix generator changes65fa6e3— chore: focus rings, trailing newline, aria-hiddene2dbfde— fix(examples): make category rail scrollable so labels are readable20a2d99— feat(brand): terminal box-drawing wordmark logo across all pagesTest plan
/examples/— category rail scrolls horizontally, all labels readable/examples/— nav shows neon wordmark with "examples" sublabel/simulations/— nav shows neon wordmark with "simulations" sublabel