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>
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.9 KiB |
@@ -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 {
|
||||
|
||||
@@ -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%);
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 5.8 KiB |
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 63 KiB |
@@ -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 |
@@ -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;
|
||||
}
|
||||