josh
a2d4a38925
Restraint-first design language: neutral gray surfaces + one blue accent (cyan/amber/red reserved for state), 8pt spacing, softer radii, one ambient + one raised shadow, standardized motion tokens. Alfa Slab One demoted to BrandMark only; Inter carries all page copy. New primitives (Button, Card, Badge, Stat, SectionHeader, Skeleton, EmptyState, Tabs, Breadcrumbs, StatusPip, Field, Input, Select, Textarea) plus motion utilities (tweenNumber, viewTransition) and a global toast system. All eight route surfaces rewritten on top: Fleet gains an overview hero, Server detail restructures into tabs, Deployments gets a collapsible drift summary + per-server pipeline visual, and the scripts/configs/plugins/betas flows adopt the new form primitives. Sticky translucent nav with backdrop blur, view-transition cross-fades between routes, staggered card entrance on Fleet, breathing status pip halo, tabular-numeric player counts. Gmail-style g-key nav shortcuts. Mobile stacks below 720px; prefers-reduced-motion neutralizes durations. Legacy tokens preserved as aliases so any un-migrated code still renders.
42 lines
1.2 KiB
Svelte
42 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
// Alfa Slab One is imported *here*, not globally, so the rest of the
|
|
// product doesn't pay for a display face it never uses.
|
|
import '@fontsource/alfa-slab-one/400.css';
|
|
|
|
interface Props {
|
|
size?: 'sm' | 'md' | 'lg';
|
|
}
|
|
let { size = 'md' }: Props = $props();
|
|
</script>
|
|
|
|
<span class="mark mark-{size}">
|
|
<svg class="bolt" viewBox="0 0 12 20" aria-hidden="true">
|
|
<path d="M7 0 L1 11 L5 11 L4 20 L11 8 L7 8 Z" />
|
|
</svg>
|
|
<span class="word">ELECTRIC CHERRY</span>
|
|
</span>
|
|
|
|
<style>
|
|
.mark {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-family: var(--font-display);
|
|
color: var(--cream);
|
|
letter-spacing: var(--tracking-display);
|
|
line-height: 1;
|
|
animation: cherry-fizz 6s ease-in-out infinite;
|
|
}
|
|
.mark-sm .word { font-size: 14px; letter-spacing: 1.5px; }
|
|
.mark-md .word { font-size: 18px; }
|
|
.mark-lg .word { font-size: 32px; letter-spacing: 3px; }
|
|
|
|
.bolt {
|
|
fill: var(--spark-500);
|
|
filter: drop-shadow(0 0 5px rgba(124, 212, 255, 0.75));
|
|
}
|
|
.mark-sm .bolt { width: 12px; height: 20px; }
|
|
.mark-md .bolt { width: 14px; height: 24px; }
|
|
.mark-lg .bolt { width: 22px; height: 36px; }
|
|
</style>
|