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.
4.3 kB · 176 lines
Svelte
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177<script lang="ts"> const legend = [ { label: 'Keywords & control', colorId: 'fatal-error' }, { label: 'Functions', colorId: 'stack-overglow' }, { label: 'Types', colorId: 'dead-thread' }, { label: 'Strings', colorId: 'memory-leek' }, { label: 'Signals & numbers', colorId: 'thermal-throttle' } ];</script>
<div class="spec-live-demo" aria-label="Digital Rust live preview"> <div> <div class="demo-heading"> <span>Live Snippet</span> <span class="demo-status">Spec OK</span> </div> <pre aria-label="Sample code styled with Digital Rust"><code ><span class="token-comment">// signal: digital rust boot sequence</span><span class="token-keyword">fn</span> <span class="token-function">boot_sequence</span >() -> <span class="token-type">Result</span><<span class="token-type" >SystemState</span >, <span class="token-type">KernelPanic</span>> { <span class="token-keyword">let</span> checksum = <span class="token-function">hash</span>(<span class="token-string">"ghost-pixel"</span >)?; <span class="token-keyword">if</span> checksum < <span class="token-number">0xAF2E1A</span > { <span class="token-keyword">return</span> <span class="token-constant">Err</span>(<span class="token-type">KernelPanic</span >::<span class="token-constant">CorruptedCache</span>); } <span class="token-keyword">Ok</span>(<span class="token-type">SystemState</span>::<span class="token-constant">Operational</span >)}</code ></pre> </div> <div class="demo-legend" aria-label="Token legend"> {#each legend as item (item.colorId)} <div class="legend-item"> <span>{item.label}</span> <span class="legend-chip" style:background="var(--{item.colorId})"></span> </div> {/each} </div></div>
<style> .spec-live-demo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--dr-space-lg); margin: var(--dr-space-xl) 0 var(--dr-space-2xl); padding: var(--dr-space-lg); background: var(--dr-surface-elevated); border: var(--dr-border); border-radius: var(--dr-radius-lg); box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); }
.spec-live-demo > div { min-width: 0; }
.demo-heading { display: flex; align-items: center; justify-content: space-between; font-size: var(--dr-text-xs); text-transform: uppercase; letter-spacing: 0.2em; color: var(--dr-text-secondary); margin-bottom: var(--dr-space-sm); }
.demo-status { display: inline-flex; align-items: center; gap: var(--dr-space-sm); }
.demo-status::before { content: ''; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--dr-success); box-shadow: 0 0 12px var(--dr-glow-success); }
pre { margin: 0; padding: var(--dr-space-lg); background: var(--dr-surface-base); color: var(--dr-term-green); border-radius: var(--dr-radius); overflow: auto; font-family: var(--dr-font-mono); font-size: var(--dr-text-sm); line-height: 1.5; border: var(--dr-border); border-left: var(--dr-border-thick); border-left-color: var(--dr-border-color-warm); hyphens: none; }
code { font-family: inherit; white-space: pre; }
.demo-legend { display: flex; flex-direction: column; gap: var(--dr-space-sm); }
.legend-item { display: flex; justify-content: space-between; align-items: center; padding: var(--dr-space-sm) var(--dr-space-md); font-size: var(--dr-text-sm); border: var(--dr-border-subtle); background: var(--dr-surface-secondary); border-radius: var(--dr-radius); }
.legend-chip { width: 0.85rem; height: 0.85rem; border-radius: var(--dr-radius-sm); }
.token-keyword { color: var(--dr-syntax-keyword); font-weight: bold; }
.token-function { color: var(--dr-syntax-function); }
.token-type { color: var(--dr-syntax-type); }
.token-string { color: var(--dr-syntax-string); }
.token-constant { color: var(--dr-syntax-constant); }
.token-number { color: var(--dr-syntax-number); }
.token-comment { color: var(--dr-syntax-comment); font-style: italic; }
@media (max-width: 1100px) { .spec-live-demo { grid-template-columns: 1fr; } }
@media (max-width: 640px) { pre { font-size: var(--dr-text-xs); } }</style>