feat(web): redesign site UI with dark-first Tesla-premium theme - #79
Merged
Conversation
Overhaul the browsable site presentation (no change to the JSON catalog API, baseurl, collections, or content — the companion-app contract is untouched). - Design system in _layouts/default.html: dark-first identity, electric-cyan accent (full RGB spectrum reserved for light-show visuals), Saira Condensed / Saira / Chakra Petch type, complete light + dark token sets, sticky blurred header, multi-column footer. - New _includes/item-card.html renders animated equalizer "thumbnails" that replace the old emoji placeholders on the four audio categories; wraps keep their real images. Static by default, animate on hover/for focal elements. - Rebuilt landing (index.md): hero + spectrum equalizer rail, spec ticker, 5-category showcase, a "How it works" (browse to download to USB to drive) section, featured drops, and a companion-app band marked "in development". - Redesigned category/item/tag/tags layouts; restyled nav and a now category-scoped tag filter. Fixed a pre-existing tag.html thumbnail path (was missing the /content/ segment). - SEO: stop duplicating OpenGraph/Twitter tags jekyll-seo-tag already emits; only add the per-item image it cannot derive. - Accessibility: skip-to-content link, :focus-visible states, a dedicated --accent-text token and tuned --text-mute for WCAG-AA in both themes, and readable file-type download badges. - Add an explicit "not affiliated with Tesla, Inc." footer disclaimer. 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.
Overhauls the browsable site presentation. No change to the JSON catalog API, baseurl, collections, or content — the companion-app contract is untouched (verified).
Highlights
_layouts/default.html): dark-first Tesla-premium identity, electric-cyan accent (RGB spectrum reserved for light-show visuals), Saira Condensed / Saira / Chakra Petch type, full light + dark themes, sticky blurred header, multi-column footer._includes/item-card.html, new): animated CSS equalizers replace the emoji placeholders on the four audio categories; wraps keep real images. Static by default, animate on hover / for focal elements.index.md): hero + spectrum equalizer rail, spec ticker, 5-category showcase, a How it works (browse → download → USB → drive) section, featured drops, and a companion-app band marked in development.tag.htmlbug (thumbnail path missing/content/).Correctness / a11y
jekyll-seo-tag, only add the per-item image it can't derive).:focus-visiblestates, AA-contrast tokens (--accent-text, tuned--text-mute) in both themes, readable file-type download badges.Verification
Clean
jekyll build; all page types return 200; verified on desktop + mobile + light + dark; passed a multi-agent adversarial review (all findings fixed).🤖 Generated with Claude Code