Repaint theme blue with larger typography

Swap the cherry-red primary for the logo's blue, bump body 13→15px
and h1 32→40px, and add semantic tokens (--bg-*, --accent-*, --text-*)
so future palette shifts are a single-file edit. Cherry-red survives
only for danger states and the brand cherry mark.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-09-12 12:29:02 -04:00
co-authored by Claude Opus 4.7
parent c3c799a409
commit 47051dc79a
15 changed files with 499 additions and 447 deletions
+20 -20
View File
@@ -51,38 +51,38 @@
<style>
.diff {
background: var(--cherry-975);
border: 1px solid var(--cherry-700);
background: var(--bg-page);
border: 1px solid var(--border);
border-radius: var(--r-sm);
margin: 8px 0;
margin: 10px 0;
overflow: hidden;
}
header {
display: flex;
gap: 10px;
padding: 8px 12px;
background: var(--cherry-925);
border-bottom: 1px solid var(--cherry-700);
font-size: 12px;
gap: 12px;
padding: 10px 14px;
background: var(--bg-nav);
border-bottom: 1px solid var(--border);
font-size: var(--text-sm);
align-items: center;
}
.verb {
padding: 2px 8px;
padding: 3px 10px;
border-radius: var(--r-sm);
font-family: var(--font-mono);
font-size: 10px;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.8px;
border: 1px solid transparent;
}
.verb-added {
background: rgba(34, 224, 255, 0.1);
border-color: rgba(34, 224, 255, 0.3);
background: rgba(124, 212, 255, 0.10);
border-color: rgba(124, 212, 255, 0.3);
color: var(--spark-500);
}
.verb-updated {
background: rgba(242, 230, 200, 0.08);
border-color: rgba(242, 230, 200, 0.25);
background: rgba(124, 192, 245, 0.10);
border-color: rgba(124, 192, 245, 0.28);
color: var(--cream);
}
.verb-removed {
@@ -95,18 +95,18 @@
border-color: rgba(255, 176, 32, 0.3);
color: var(--amber-500);
}
.path { color: var(--ink-100); font-family: var(--font-mono); font-size: 12px; }
.path { color: var(--ink-100); font-family: var(--font-mono); font-size: var(--text-mono); }
pre {
margin: 0;
padding: 10px 12px;
padding: 14px 16px;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.55;
font-size: var(--text-mono);
line-height: var(--leading-mono);
color: var(--ink-300);
max-height: 500px;
max-height: 540px;
overflow: auto;
}
.ln { display: block; }
.ln-add { background: rgba(34, 224, 255, 0.08); color: var(--spark-400); }
.ln-add { background: rgba(124, 212, 255, 0.08); color: var(--spark-400); }
.ln-del { background: rgba(255, 48, 80, 0.08); color: #ff8a9a; }
</style>