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.5 kB · 97 lines
Svelte
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798<section aria-labelledby="spec-heading" class="spec-section"> <h2 id="spec-heading" class="section-title">Spec Guarantees</h2> <div class="spec-grid"> <article class="spec-card"> <h3>Priority Stack</h3> <ul> <li> Error scopes override everything with <span class="error-inline" >Amber Alert</span > </li> <li> Warnings inherit <span class="warning-inline">Stack Overglow</span> with wavy underline </li> <li>Semantic tokens fall back to TextMate colors when absent</li> </ul> </article> <article class="spec-card"> <h3>Language Coverage</h3> <ul> <li>TypeScript · Python · Rust · Markdown · JSON/TOML</li> <li>HTML/CSS · SQL · Shell · Diff/SCM views</li> <li>Template + decorator scopes, regex, interpolation</li> </ul> </article> <article class="spec-card"> <h3>Editor & UI</h3> <ul> <li>Tabs, gutter, minimap, status bar, panels</li> <li>Diagnostics + git markers reuse ANSI cues</li> <li>Focus rings + disabled states meet contrast rules</li> </ul> </article> <article class="spec-card"> <h3>Accessibility</h3> <ul> <li>Solid vs. wavy underline separates links/errors</li> <li>Color-blind safe via redundant icons + patterns</li> <li>Documented contrast pairs for auditing</li> </ul> </article> </div></section>
<style> .spec-section { margin-top: var(--dr-space-xl); }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--dr-space-lg); }
.spec-card { background: var(--dr-surface-elevated); border: var(--dr-border); border-radius: var(--dr-radius); padding: var(--dr-space-lg); box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-highlight); transition: transform var(--dr-transition-fast), box-shadow var(--dr-transition-fast); }
.spec-card:hover { transform: translate(-2px, -2px); box-shadow: var(--dr-shadow-hover-md); }
.spec-card:active { transform: translate(2px, 2px); box-shadow: var(--dr-shadow-active); }
.spec-card h3 { color: var(--dr-heading); margin-bottom: var(--dr-space-sm); font-size: var(--dr-text-sm); letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--dr-font-heading); }
.spec-card ul { list-style: none; padding-left: 0; color: var(--dr-text-primary); line-height: 1.5; font-size: var(--dr-text-sm); }
.spec-card li { margin-bottom: 0.35rem; }</style>