Skip to content

feat(docs): add the hero background glyph#284

Merged
btravers merged 1 commit into
mainfrom
chore/hero-glyph
Jul 3, 2026
Merged

feat(docs): add the hero background glyph#284
btravers merged 1 commit into
mainfrom
chore/hero-glyph

Conversation

@btravers

@btravers btravers commented Jul 3, 2026

Copy link
Copy Markdown
Collaborator

Adds the project-specific line-art motif behind the home hero from the Claude Design docs mockup, in the site accent (self-contained data-URI in custom.css, hidden on mobile).

Note: this was meant to ride along with the 1.5.0 PR but got stranded when that merged first — hence this follow-up.

🤖 Generated with Claude Code

Copilot AI review requested due to automatic review settings July 3, 2026 11:55

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a home-page hero background “glyph” (an SVG line-art motif) to the VitePress docs theme via a CSS pseudo-element, intended to sit behind the hero content and be hidden on mobile.

Changes:

  • Introduces a .VPHome::after pseudo-element with an inline SVG background image positioned top-right.
  • Adds responsive behavior to hide the glyph on smaller screens.

Comment thread docs/.vitepress/theme/custom.css Outdated
Comment thread docs/.vitepress/theme/custom.css
A faint, project-specific line-art motif behind the home hero (from the
Claude Design docs mockup), in the site accent. Self-contained data-URI in
custom.css; hidden on mobile.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@btravers btravers force-pushed the chore/hero-glyph branch from dae9e28 to 30133a0 Compare July 3, 2026 12:10
@btravers

btravers commented Jul 3, 2026

Copy link
Copy Markdown
Collaborator Author

Addressed all of the above in the latest push — reworked the glyph so it's robust and accent-driven:

  • Encoding: the SVG is now base64-encoded, so no CSS parser/minifier can mangle the raw </>/spaces.
  • Follows --accent: switched from background-image to a mask filled with background-color: var(--accent). (currentColor doesn't propagate into a background-image SVG, so a mask is the correct way to make the glyph track the accent token — and it also resolves the amqp #ff6d1f vs --accent mismatch.)
  • Aspect ratio: replaced the fixed height with aspect-ratio: 500 / 300 so it scales proportionally with max-width (no letterboxing).
  • Comment: reworded so it no longer implies the shared theme is the only thing setting .VPHome positioning.

Verified rendering locally (accent-colored glyph, incl. the text labels in unthrown's).

@btravers btravers merged commit 5fbcdfd into main Jul 3, 2026
9 checks passed
@btravers btravers deleted the chore/hero-glyph branch July 3, 2026 12:27
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