Michel de Graaf
c2dd227cee
Removes every comment introduced on this branch: website/ in full, pages.yml in full, and only the blocks added to ci.yml and release.yml — their pre-existing comments are untouched. Two directives survive because they are load-bearing rather than prose: the triple-slash vite/client reference, and nothing else. Two comments were carrying behaviour that the code did not state, so the code now states it. useCopy's rejection handler clears the copied flag instead of sitting empty, and writeTheme returns whether the write actually landed instead of swallowing the failure in a bare catch. isExternal drops its regex for two startsWith calls, which reads the same and no longer hides a `//` inside a literal.
235 lines
5.0 KiB
CSS
235 lines
5.0 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@custom-variant light (&:where([data-theme='light'], [data-theme='light'] *));
|
|
|
|
@theme {
|
|
--color-sleeve: #14110f;
|
|
--color-vinyl: #1e1a17;
|
|
--color-vinyl-2: #26211d;
|
|
--color-dust: #8a8178;
|
|
--color-paper: #e8e1d6;
|
|
--color-paper-dim: #c9c1b4;
|
|
|
|
--color-oxide: #c1502e;
|
|
--color-tape: #d8a657;
|
|
--color-phosphor: #7fb685;
|
|
--color-signal: #6e9dc9;
|
|
--color-alarm: #b33a3a;
|
|
|
|
--color-manila: #f2ede4;
|
|
--color-manila-2: #e8e1d6;
|
|
--color-manila-3: #ded5c7;
|
|
|
|
--color-base: var(--bg-base);
|
|
--color-panel: var(--bg-panel);
|
|
--color-raised: var(--bg-raised);
|
|
|
|
--color-primary: var(--text-primary);
|
|
--color-secondary: var(--text-secondary);
|
|
--color-muted: var(--text-muted);
|
|
|
|
--color-hairline: var(--border-hairline);
|
|
--color-line: var(--border-default);
|
|
--color-line-strong: var(--border-strong);
|
|
|
|
--color-accent: var(--accent);
|
|
--color-accent-text: var(--accent-text);
|
|
--color-accent-hover: var(--accent-hover);
|
|
|
|
--color-success: var(--status-success);
|
|
--color-warning: var(--status-warning);
|
|
--color-info: var(--status-info);
|
|
|
|
--color-link: var(--link);
|
|
--color-link-hover: var(--link-hover);
|
|
|
|
--font-mono:
|
|
'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
|
|
|
--font-forum: Verdana, Tahoma, sans-serif;
|
|
|
|
--text-display: 48px;
|
|
--text-display--line-height: 56px;
|
|
--text-title: 32px;
|
|
--text-title--line-height: 40px;
|
|
--text-heading: 20px;
|
|
--text-heading--line-height: 28px;
|
|
--text-body: 14px;
|
|
--text-body--line-height: 22px;
|
|
--text-label: 11px;
|
|
--text-label--line-height: 14px;
|
|
|
|
--tracking-label: 0.06em;
|
|
|
|
--radius-md: 8px;
|
|
|
|
--animate-cursor-blink: ss-cursor-blink 1.06s steps(1) infinite;
|
|
|
|
@keyframes ss-cursor-blink {
|
|
0%,
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
50.01%,
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--bg-base: var(--color-sleeve);
|
|
--bg-panel: var(--color-vinyl);
|
|
--bg-raised: var(--color-vinyl-2);
|
|
--bg-selection: rgb(110 157 201 / 0.22);
|
|
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #e4dfd8;
|
|
--text-muted: #bdb4a9;
|
|
|
|
--border-hairline: rgb(138 129 120 / 0.35);
|
|
--border-default: rgb(138 129 120 / 0.7);
|
|
--border-strong: var(--color-dust);
|
|
|
|
--accent: var(--color-oxide);
|
|
|
|
--accent-text: #cd7155;
|
|
--accent-hover: #d05f3c;
|
|
|
|
--status-warning: var(--color-tape);
|
|
--status-success: var(--color-phosphor);
|
|
--status-info: var(--color-signal);
|
|
|
|
--link: var(--color-signal);
|
|
--link-hover: #8bb4dc;
|
|
|
|
--tm-bg: #1e1a17;
|
|
--tm-hd: #181513;
|
|
--tm-fg: #ffffff;
|
|
--tm-dim: #bdb4a9;
|
|
--tm-bd: rgb(138 129 120 / 0.32);
|
|
--tm-bd2: rgb(138 129 120 / 0.22);
|
|
--tm-bd3: rgb(138 129 120 / 0.6);
|
|
--tm-pr: #c1502e;
|
|
--tm-cm: #aba298;
|
|
--tm-ok: #7fb685;
|
|
--cmd-bg: #0e0c0a;
|
|
--tui-track: #2a2622;
|
|
--tui-bezel: #000000;
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
[data-theme='light'] {
|
|
--bg-base: var(--color-manila);
|
|
--bg-panel: var(--color-manila-2);
|
|
--bg-raised: var(--color-manila-3);
|
|
--bg-selection: rgb(76 127 174 / 0.2);
|
|
|
|
--text-primary: var(--color-sleeve);
|
|
--text-secondary: #574e45;
|
|
--text-muted: #645b52;
|
|
|
|
--border-hairline: rgb(20 17 15 / 0.15);
|
|
--border-default: rgb(20 17 15 / 0.28);
|
|
--border-strong: #6b6259;
|
|
|
|
--accent: #ae4728;
|
|
--accent-text: #9c3f23;
|
|
--accent-hover: #c1502e;
|
|
|
|
--status-warning: #755725;
|
|
--status-success: #3e6543;
|
|
--status-info: #395f82;
|
|
|
|
--link: #395f82;
|
|
--link-hover: #24486a;
|
|
|
|
--tm-bg: #e9e2d7;
|
|
--tm-hd: #dcd3c4;
|
|
--tm-fg: #14110f;
|
|
--tm-dim: #574e45;
|
|
--tm-bd: rgb(20 17 15 / 0.2);
|
|
--tm-bd2: rgb(20 17 15 / 0.13);
|
|
--tm-bd3: rgb(20 17 15 / 0.42);
|
|
--tm-pr: #9e3f22;
|
|
--tm-cm: #6b6259;
|
|
--tm-ok: #3f7147;
|
|
--cmd-bg: #dcd3c4;
|
|
--tui-track: #cfc5b5;
|
|
--tui-bezel: rgb(20 17 15 / 0.28);
|
|
|
|
color-scheme: light;
|
|
}
|
|
|
|
.logo-mark {
|
|
background-image: url('/logo-ink.svg');
|
|
}
|
|
|
|
[data-theme='light'] .logo-mark {
|
|
background-image: url('/logo-light.svg');
|
|
}
|
|
|
|
.tui-content {
|
|
--color-alarm: #c26060;
|
|
--color-oxide: #c65f40;
|
|
}
|
|
|
|
[data-theme='light'] .tui-content {
|
|
--color-paper: #14110f;
|
|
--color-paper-dim: #3a332c;
|
|
--color-dust: #645b52;
|
|
--color-oxide: #9e3f22;
|
|
--color-tape: #8d621f;
|
|
--color-phosphor: #3f7147;
|
|
--color-signal: #35648f;
|
|
--color-alarm: #8f2626;
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
scroll-behavior: smooth;
|
|
|
|
scroll-padding-top: 5rem;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg-base);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-body);
|
|
line-height: var(--text-body--line-height);
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--bg-selection);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 80ms !important;
|
|
}
|
|
|
|
[class*='animate-'] {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
}
|