Something went wrong. Try again.
A warm, tech-dystopian color scheme inspired by corrupted hardware and failing systems. digitalrust.katsuricata.com
theme color-scheme color-theme warm color
Something went wrong. Try again.
2.7 kB · 113 lines
Svelte
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114<section class="accessibility-panel" aria-labelledby="access-heading"> <h2 id="access-heading" class="section-title">Accessibility & Testing</h2> <div class="access-grid"> <div> <h3>Contrast Benchmarks</h3> <table class="contrast-table"> <thead> <tr> <th>Pair</th> <th>Ratio</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>Ghost Pixel on Event Horizon</td> <td>17.17:1</td> <td>Pass</td> </tr> <tr> <td>Dim Thermal Throttle on Event Horizon</td> <td>4.84:1</td> <td>Pass</td> </tr> <tr> <td>Bad Sector on Core Meltdown</td> <td>Decorative only</td> <td>⚠</td> </tr> </tbody> </table> </div> <div> <h3>Non-Color Cues</h3> <ul class="cue-list"> <li><span class="badge add">Links</span> Solid underline + Phantom Current</li> <li><span class="badge del">Errors</span> Amber Alert + wavy underline + icon</li> <li><span class="badge warning">Warnings</span> Stack Overglow wavy underline</li> <li> <span class="badge del">Spelling</span> Amber Alert dotted underline variant </li> </ul> </div> <div> <h3>Test Checklist</h3> <ul class="cue-list"> <li>☑ Five programming languages rendered</li> <li>☑ Markdown, JSON, diff, terminal verified</li> <li>☑ ANSI 16 + UI chrome demonstrated</li> <li>☑ Motion honors user <code>prefers-reduced-motion</code></li> </ul> </div> </div></section>
<style> .accessibility-panel { margin-top: var(--dr-space-2xl); padding: var(--dr-space-lg); border: var(--dr-border); border-radius: var(--dr-radius); background: var(--dr-surface-elevated); box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); }
.accessibility-panel .section-title { margin-top: 0; }
.access-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--dr-space-lg); }
.contrast-table { width: 100%; border-collapse: collapse; font-size: var(--dr-text-sm); }
.contrast-table th, .contrast-table td { border-bottom: var(--dr-border-subtle); padding: var(--dr-space-sm); text-align: left; }
.contrast-table th { background: var(--dr-surface-elevated); font-family: var(--dr-font-heading); font-weight: 700; font-size: var(--dr-text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--dr-heading); border-bottom: var(--dr-border); }
.contrast-table tbody tr:last-child td { border-bottom: none; }
.contrast-table tbody tr:hover { background: var(--dr-surface-highlight); }
.cue-list { list-style: none; padding: 0; line-height: 1.6; }</style>