Skip to content

Homepage: muted card accents, dial-style timeline toggle, reworked hero rhythm#1356

Merged
anderdc merged 6 commits into
testfrom
ui/mute-homepage-card-chrome
Jul 12, 2026
Merged

Homepage: muted card accents, dial-style timeline toggle, reworked hero rhythm#1356
anderdc merged 6 commits into
testfrom
ui/mute-homepage-card-chrome

Conversation

@e35ventura

@e35ventura e35ventura commented Jul 11, 2026

Copy link
Copy Markdown
Collaborator

Redesigns the homepage header into a quiet, dial-driven masthead and mutes the card accents so color only appears on interaction:

  • Owner pfps are grayscale until the card is hovered, matching the existing preview treatment (same repo-card-preview hover rule and 0.25s transition).
  • Removed the green "live site" dot from the top-right of cards with verified embeds; the host label in the bottom-right stays.
  • Dial-style timeline toggle: the badge-outline toggle is replaced by a single word ("repositories" / "dashboard") flanked by arrows. Only the active word shows; turning the dial slides the old word out and the new word in, both moving in the direction of travel, like a horizontal odometer. The arrow pointing at the view you're already on is grayed out and inert. Keyboard accessible (Tab + Enter/Space).
  • Hero rhythm reworked: the dial + tagline now form a tight cluster under the title and the largest gap moved to the header→grid boundary (was three near-uniform gaps). Hierarchy fixed so the interactive dial word (0.72rem) outranks the descriptive tagline (0.66rem, dimmer); both timelines share identical header spacing.

Before

before

After

after

Card hovered

Hovering a card restores full color to its preview and pfp together:

after hover

Dial mid-turn

Both words move in the direction of travel:

dial mid-turn

Dashboard timeline

Left arrow becomes the active direction, right arrow grays out:

dashboard

Validated with npm run build and lint-staged.

🤖 Generated with Claude Code

e35ventura and others added 6 commits July 11, 2026 11:16
…only toggle

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
One word shows at a time flanked by left/right arrows; turning the dial
slides the words in the direction of travel. Hero spacing regrouped:
dial + tagline cluster under the title, largest gap before the grid.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@e35ventura e35ventura changed the title Mute homepage card chrome: grayscale pfps until hover, no live dots, text-only toggle Homepage: muted card accents, dial-style timeline toggle, reworked hero rhythm Jul 11, 2026
@anderdc
anderdc merged commit a0ba328 into test Jul 12, 2026
2 checks passed
@anderdc
anderdc deleted the ui/mute-homepage-card-chrome branch July 12, 2026 00:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants