fix(examples): rewrite 8 broken 0.2.0 pages to button.html template#22
Merged
Conversation
8 example pages (animation-blocks/index, advanced/{crt-effects,corruption-
manager,particles-background}, components/{showcase,utilities,png-export,
websocket-manager}) used CSS variables that don't exist in the theme:
- var(--bg-primary) → var(--bg)
- var(--text-primary) → var(--text)
- var(--corrupted-cyan/purple/magenta/magenta2/red/green) → fallback hex added
Result was black-on-black unreadable text in dark-mode browsers.
Also missing the standard <nav class="navbar"> block found on every
other example page. Added navbar with correct ../ relative paths for
each page's directory depth. Navbar uses position:sticky so no
padding-top adjustment required.
159/159 tests pass.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…plate
User reported black-on-black unreadable text and missing top nav on
corrupted.whykusanagi.xyz/examples/animation-blocks/ and all 7 other
0.2.0 example pages. Root causes:
1. Custom <style> blocks used body {background:#000} hard override instead
of var(--bg), so dark-mode text blended into pure black.
2. Page content sat directly in <body> with padding instead of inside
<div class="container">, breaking layout after the sticky navbar.
3. animation-blocks and corruption-manager had orphaned .page-header /
.back-link elements floating outside any container.
4. Components pages used .demo-section/.h2 instead of .example-group/.h3.
Fix: rewrite each of the 8 pages to follow examples/button.html template:
- Canonical <nav class="navbar"> (already present on all, now correct path)
- <div class="container"> wrapping all page content
- <h1> + description paragraph at top of container
- <section class="example-group"> for each demo block
- Canonical CSS vars only: var(--bg), var(--glass), var(--text-secondary),
var(--accent), var(--border), var(--spacing-*), var(--radius-*)
- var(--corrupted-*) retained with fallback hex where needed for effect styling
- All JavaScript imports + demo instantiation code preserved verbatim
Files changed:
- examples/animation-blocks/index.html
- examples/advanced/crt-effects.html
- examples/advanced/corruption-manager.html
- examples/advanced/particles-background.html
- examples/components/showcase.html
- examples/components/utilities.html
- examples/components/png-export.html
- examples/components/websocket-manager.html
Co-Authored-By: Claude Sonnet 4.6 <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.
Summary
Pre-publish fix. Black-on-black text and missing/broken layout on 8 new 0.2.0 example pages at corrupted.whykusanagi.xyz.
Root causes found:
body { background: #000 }hard override instead ofvar(--bg)— dark text blended into pure black<body>with raw padding instead of inside<div class="container">, breaking spacing after the sticky navbarexamples/animation-blocks/index.htmlandexamples/advanced/corruption-manager.htmlhad orphaned.page-header/.back-linkelements floating outside any containershowcase,utilities,png-export,websocket-manager) used.demo-section/h2instead of.example-group/h3Fix applied to all 8:
<div class="container">wrapping all page content<h1>+ description paragraph at top of container<section class="example-group">for each demo block with<h3>headers--bg-primary, no--text-primaryvar(--corrupted-*)retained with#hexfallback where needed for effect stylingTest plan
button.htmlandform.htmluntouched (verified viagit diff)🤖 Generated with Claude Code