Retarget the theme to the devplace main-branch design (indigo + rust)

The reference design is the devplace Next.js main branch, not the
terminal branch the previous commit tracked. Swap the token values to
that design language: deep indigo page (#271b5b) over near-black indigo
cards (#13112a/#1a1736), #11101f hairlines, purple-tinted text ramp
(#e9e4ff/#c8c3e5/#9b93c9), burnt-orange primary accent (#b73f1e) with
a raspberry hover (#af3050) and a rust-to-plum brand gradient, white
on-accent text, soft rounded radii (8/12/16px), the reference's diffuse
soft/medium/strong shadows, a warm accent glow, and Trebuchet MS as the
UI font (system font - the vendored JetBrains Mono files are removed
along with their base.html link).

Follow-through updated to match: theme-color meta + PWA manifest
(#271b5b), offline page, avatar fallback SVG, statistics chart palette
(brand ramp), chat light-theme overrides, OG image + app icons
regenerated in the new palette, and the /docs/styles-colors guide.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-09 21:22:32 +02:00
co-authored by Claude Fable 5
parent c19ff19de2
commit 2921edd7f3
21 changed files with 101 additions and 148 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

+1 -1
View File
@@ -446,7 +446,7 @@ img {
.btn-primary {
background: var(--accent-gradient);
color: var(--on-accent);
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35);
box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.3);
}
.btn-primary:hover {
+32 -32
View File
@@ -1,42 +1,42 @@
/* retoor <retoor@molodetz.nl> */
:root {
--bg-primary: #0a0a0f;
--bg-secondary: #111118;
--bg-card: #111118;
--bg-card-hover: #1a1a24;
--bg-input: #0a0a0f;
--bg-modal: #111118;
--bg-primary: #271b5b;
--bg-secondary: #1a1736;
--bg-card: #13112a;
--bg-card-hover: #1a1736;
--bg-input: #1a1736;
--bg-modal: #13112a;
--accent: #22c55e;
--accent-rgb: 34, 197, 94;
--accent-hover: #16a34a;
--accent-light: rgba(34, 197, 94, 0.12);
--accent-2: #4ade80;
--accent-gradient: linear-gradient(135deg, #22c55e, #16a34a);
--on-accent: #052e16;
--accent: #b73f1e;
--accent-rgb: 183, 63, 30;
--accent-hover: #af3050;
--accent-light: rgba(183, 63, 30, 0.14);
--accent-2: #af3050;
--accent-gradient: linear-gradient(135deg, #b73f1e, #af3050, #8f3b71);
--on-accent: #fff;
--text-primary: #c8c8d0;
--text-secondary: #8b8b9e;
--text-muted: #6b6b80;
--text-primary: #e9e4ff;
--text-secondary: #c8c3e5;
--text-muted: #9b93c9;
--border: #222233;
--border-light: #2e2e40;
--border: #11101f;
--border-light: #2f2a55;
--success: #22c55e;
--warning: #eab308;
--danger: #ef4444;
--success: #34d399;
--warning: #fbbf24;
--danger: #f87171;
--info: #60a5fa;
--radius: 4px;
--radius-input: 4px;
--radius-lg: 6px;
--radius-xl: 8px;
--radius: 8px;
--radius-input: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--shadow-sm: 0 0 0 1px rgba(34, 34, 51, 0.8);
--shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
--glow-accent: 0 0 0 1px rgba(var(--accent-rgb), 0.35);
--shadow-sm: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
--shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 2px 10px -2px rgba(0, 0, 0, 0.05);
--glow-accent: 0 6px 24px rgba(183, 63, 30, 0.45);
--white: #fff;
--overlay-dark: rgba(0, 0, 0, 0.7);
@@ -49,8 +49,8 @@
--space-xl: 1.5rem;
--space-2xl: 2rem;
--font-sans: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
--font-mono: "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code", monospace;
--font-sans: "Trebuchet MS", "Segoe UI", Tahoma, Verdana, sans-serif;
--font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;
--nav-height: 56px;
--sidebar-width: 240px;
@@ -77,5 +77,5 @@
--topic-fun: #ffab00;
--topic-politics: #00bcd4;
--bg-gradient: linear-gradient(135deg, #0a0a0f 0%, #111118 50%, #0a0a0f 100%);
--bg-gradient: linear-gradient(135deg, #271b5b 0%, #1d1545 50%, #271b5b 100%);
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

+7 -7
View File
@@ -1,14 +1,14 @@
// retoor <retoor@molodetz.nl>
const CHART_COLORS = [
"#22c55e",
"#7c4dff",
"#00bfa5",
"#448aff",
"#b73f1e",
"#8f3b71",
"#34d399",
"#3a4b70",
"#ffab00",
"#ff5252",
"#42a5f5",
"#4ade80",
"#f87171",
"#61477c",
"#af3050",
];
export class StatisticsCharts {
+7 -7
View File
@@ -24,15 +24,15 @@ const SEARCH_DEBOUNCE_MS = 200;
const AUTO_GROW_MAX_HEIGHT_PX = 160;
const LIGHT_THEME_OVERRIDES = {
"--bg-primary": "#f1f5f9",
"--bg-primary": "#f5f3fa",
"--bg-secondary": "#ffffff",
"--bg-card": "#ffffff",
"--bg-card-hover": "#e2e8f0",
"--text-primary": "#0f172a",
"--text-secondary": "#475569",
"--text-muted": "#64748b",
"--border": "#cbd5e1",
"--border-light": "#e2e8f0",
"--bg-card-hover": "#f0edf7",
"--text-primary": "#1a1030",
"--text-secondary": "#4a3f5c",
"--text-muted": "#8b7fa0",
"--border": "rgba(0, 0, 0, 0.1)",
"--border-light": "rgba(0, 0, 0, 0.16)",
};
export class AppChat extends Component {
+2 -2
View File
@@ -9,8 +9,8 @@
"orientation": "any",
"lang": "en",
"dir": "ltr",
"background_color": "#0a0a0f",
"theme_color": "#0a0a0f",
"background_color": "#271b5b",
"theme_color": "#271b5b",
"icons": [
{
"src": "/static/icon-192.png",
+9 -9
View File
@@ -7,11 +7,11 @@
<title>Offline - DevPlace</title>
<style>
:root {
--bg-primary: #0a0a0f;
--bg-card: #111118;
--accent: #22c55e;
--text-primary: #c8c8d0;
--text-muted: #6b6b80;
--bg-primary: #271b5b;
--bg-card: #13112a;
--accent: #b73f1e;
--text-primary: #e9e4ff;
--text-muted: #9b93c9;
}
* { box-sizing: border-box; }
body {
@@ -22,21 +22,21 @@
justify-content: center;
background: var(--bg-primary);
color: var(--text-primary);
font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
font-family: "Trebuchet MS", "Segoe UI", Tahoma, Verdana, sans-serif;
padding: 1.5rem;
}
.offline-card {
max-width: 360px;
text-align: center;
background: var(--bg-card);
border-radius: 6px;
border-radius: 12px;
padding: 2.5rem 2rem;
}
.offline-mark {
width: 72px;
height: 72px;
margin: 0 auto 1.25rem;
border-radius: 6px;
border-radius: 12px;
background: var(--accent);
color: var(--bg-primary);
font-size: 2.75rem;
@@ -49,7 +49,7 @@
background: var(--accent);
color: var(--bg-primary);
border: none;
border-radius: 4px;
border-radius: 8px;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 600;
Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 63 KiB

+7 -7
View File
@@ -1,14 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
<rect width="1200" height="630" fill="#0a0a0f"/>
<rect width="1200" height="630" fill="#271b5b"/>
<rect x="0" y="0" width="1200" height="630" fill="url(#g)"/>
<defs>
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#22c55e" stop-opacity="0.12"/>
<stop offset="100%" stop-color="#111118" stop-opacity="0"/>
<stop offset="0%" stop-color="#b73f1e" stop-opacity="0.18"/>
<stop offset="100%" stop-color="#13112a" stop-opacity="0.6"/>
</linearGradient>
</defs>
<text x="600" y="300" text-anchor="middle" font-family="'JetBrains Mono', 'SF Mono', Menlo, monospace" font-size="104" font-weight="800" fill="#22c55e">DevPlace</text>
<rect x="440" y="334" width="320" height="8" fill="#22c55e"/>
<text x="600" y="412" text-anchor="middle" font-family="'JetBrains Mono', 'SF Mono', Menlo, monospace" font-size="34" fill="#8b8b9e">The Developer Social Network</text>
<circle cx="600" cy="484" r="8" fill="#22c55e"/>
<text x="600" y="290" text-anchor="middle" font-family="'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif" font-size="104" font-weight="800" fill="#e9e4ff">DevPlace</text>
<rect x="430" y="326" width="340" height="8" rx="4" fill="#b73f1e"/>
<text x="600" y="404" text-anchor="middle" font-family="'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif" font-size="36" fill="#c8c3e5">The Developer Social Network</text>
<circle cx="600" cy="478" r="8" fill="#b73f1e"/>
</svg>

Before

Width:  |  Height:  |  Size: 897 B

After

Width:  |  Height:  |  Size: 908 B

-46
View File
@@ -1,46 +0,0 @@
/* JetBrains Mono (latin) - vendored from @fontsource/jetbrains-mono 5.2.5 (SIL OFL 1.1) */
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(./jetbrains-mono-latin-400-normal.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "JetBrains Mono";
font-style: italic;
font-display: swap;
font-weight: 400;
src: url(./jetbrains-mono-latin-400-italic.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(./jetbrains-mono-latin-500-normal.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-display: swap;
font-weight: 600;
src: url(./jetbrains-mono-latin-600-normal.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(./jetbrains-mono-latin-700-normal.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}