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.
3.8 kB · 182 lines
Svelte
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183<script lang="ts"> import type { Snippet } from 'svelte'; import { specVersion } from '#lib/spec/meta.js'; import SchemeToggle from '#lib/components/SchemeToggle.svelte';
interface LinkGroup { label: string; links: { href: string; label: string }[]; }
let { title, subtitle, tagline, groups }: { title: string; subtitle: string; tagline: string | Snippet; groups: LinkGroup[]; } = $props();</script>
<header> <h1>{title}</h1> <span class="version-badge">Spec {specVersion}</span> <SchemeToggle /> <div class="subtitle">{subtitle}</div> <div class="tagline"> {#if typeof tagline === 'string'} {tagline} {:else} {@render tagline()} {/if} </div> <nav class="lead-links" aria-label="Site links"> {#each groups as group (group.label)} <div class="link-group"> <span class="link-group-label">{group.label}</span> <ul> {#each group.links as link (link.href)} <li><a href={link.href}>{link.label}</a></li> {/each} </ul> </div> {/each} </nav></header>
<style> header { margin-bottom: var(--dr-space-2xl); border-bottom: var(--dr-border-thick); padding-bottom: var(--dr-space-xl); position: relative; }
header::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 60%, var(--dr-vignette) 100%); pointer-events: none; z-index: 0; }
h1 { font-family: var(--dr-font-heading); font-size: clamp(2rem, 5vw, var(--dr-text-3xl)); color: var(--dr-heading); text-shadow: 0 0 24px color-mix(in srgb, var(--dr-glow-accent) 70%, transparent), -1px 1px var(--dr-accent), 1px -1px var(--dr-syntax-type); margin-bottom: var(--dr-space-sm); font-weight: 700; letter-spacing: 0.15em; display: inline-block; position: relative; z-index: 2; }
.version-badge { display: inline-block; background: var(--dr-accent); color: var(--dr-text-on-accent); padding: var(--dr-space-xs) var(--dr-space-md); border-radius: var(--dr-radius); font-size: var(--dr-text-sm); margin-left: var(--dr-space-md); font-weight: 700; vertical-align: middle; border: var(--dr-border); box-shadow: var(--dr-shadow-offset-sm); position: relative; z-index: 2; }
.subtitle { color: var(--dr-text-quiet); font-size: var(--dr-text-lg); margin-bottom: var(--dr-space-md); font-family: var(--dr-font-heading); letter-spacing: 0.05em; position: relative; z-index: 2; }
.tagline { color: var(--dr-heading); font-size: var(--dr-text-base); font-style: italic; opacity: 0.8; position: relative; z-index: 2; }
.lead-links { color: var(--dr-text-secondary); margin-top: var(--dr-space-md); position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--dr-space-sm) var(--dr-space-xl); line-height: 2; }
.link-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--dr-space-xs) var(--dr-space-sm); }
.link-group-label { font-family: var(--dr-font-heading); font-size: var(--dr-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dr-heading); margin-right: var(--dr-space-xs); }
.link-group-label::after { content: '»'; margin-left: var(--dr-space-xs); color: var(--dr-accent); }
.link-group ul { display: flex; flex-wrap: wrap; gap: var(--dr-space-xs) var(--dr-space-sm); list-style: none; padding: 0; margin: 0; }
.link-group li { display: inline; }
.link-group li::after { content: '·'; margin-left: var(--dr-space-sm); color: var(--dr-text-secondary); opacity: 0.5; }
.link-group li:last-child::after { content: none; }
@media (max-width: 480px) { h1 { font-size: clamp(1.75rem, 10vw, 2.5rem); letter-spacing: 0.05em; } }</style>