Skip to content

Commit be4b4d0

Browse files
githubflyideasgithubflyideas
committed
v2.11.1: fix broken theme references, redesign all five palettes
Root cause of 'nord/dark/solarized look identical': the last port only updated the CSS palette blocks (daylight/arctic/budapest/amber) but left the THEMES array naming the OLD set (nord, solarized). Selecting either did nothing - no matching CSS rule existed, so the browser silently fell through to the unstyled root/dark variables. That is why they looked the same as dark: they WERE dark, just mislabeled. Fixed the array to match real definitions, and took the chance to give v2 its own identity instead of reusing v3's Bauhaus/Anderson framing: terminal - a trading-desk screen at 2am; amber trace, slate-blue cloud sinking to navy (replaces dark/root) newsprint - broadsheet market page; near-black ink trace, cloud runs brick to warm halftone grey (replaces daylight) ukiyo - Hokusai's indigo woodblock prints; deep aizuri trace on washi paper, cloud runs Prussian blue to pale moss (replaces arctic) memphis - Sottsass's 1980s Milan collective; coral trace against soft lavender- grey, teal cloud instead of the expected pink (replaces budapest) phosphor - P1 green CRT, amber's mirror image: green trace, amber-to-rust cloud instead of the usual green fade (replaces amber) All five verified: body contrast 9.5-11.6:1, trace-vs-cloud-core >= 2.0:1, cloud-vs-background >= 1.5:1. 78 hex values checked, none malformed. login.html carries the same core colours and the corrected theme list. Colour values and the theme-name array only - no rendering logic touched.
1 parent 191acde commit be4b4d0

2 files changed

Lines changed: 57 additions & 56 deletions

File tree

‎static/index.html‎

Lines changed: 43 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -6,62 +6,63 @@
66
<link rel="icon" href="data:,">
77
<title>pingping — link quality oscilloscope</title>
88
<style>
9+
/* Terminal — a trading-desk screen at 2am. Amber trace (the classic financial-
10+
terminal color) over a slate-blue cloud that sinks to navy at the edges. */
911
:root {
10-
--bg:#14161a; --panel:#1c2027; --screen:#0d0f13; --line:#2b323c;
11-
--phos:#22d3ee; --amber:#fbbf24; --alert:#fb3b53; --ink:#c0c6ce; --dim:#78848f;
12-
--grid-axis:#333b47; --grid-split:#1c222a;
13-
--smoke:rgba(251,191,36,.20); --lossbar:rgba(251,59,83,.7); --glow:5;
14-
--smoke-hot:#b86e14; --smoke-mid:#8c3f0d; --smoke-cool:#452740;
12+
--bg:#0e1013; --panel:#171a1f; --screen:#0a0c0e; --line:#2a2f37;
13+
--phos:#f0a838; --amber:#e8c468; --alert:#ef4a5a; --ink:#c4cad2; --dim:#747f8a;
14+
--grid-axis:#323944; --grid-split:#181c22;
15+
--smoke:rgba(90,140,200,.20); --lossbar:rgba(239,74,90,.65); --glow:5;
16+
--smoke-hot:#3a5a86; --smoke-mid:#2a4166; --smoke-cool:#182838;
1517
--shadow:0 1px 2px rgba(0,0,0,.45); --shadow-lg:0 12px 32px rgba(0,0,0,.45);
1618
--mono: ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Noto Sans Mono",monospace;
17-
/* Interface text gets the system UI face; numbers and axis labels stay monospace
18-
so digits line up and keep the instrument feel. Mixing the two is what separates
19-
a product from terminal output. */
2019
--sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
21-
/* A real scale instead of everything crowded between 10 and 13px. */
2220
--fs-micro:10px; --fs-small:11px; --fs-body:13px; --fs-lead:15px;
2321
--fs-title:19px; --fs-metric:30px;
2422
}
2523

26-
/* Daylight — ink on lab paper. Core burns terracotta, edges cool to slate. */
27-
html[data-theme="daylight"] {
28-
--bg:#f2efe6; --panel:#fbf9f3; --screen:#fffdf7; --line:#ddd6c4;
29-
--phos:#1d4ed8; --amber:#b45309; --alert:#be123c; --ink:#3e4346; --dim:#8a8677;
30-
--grid-axis:#cdc6b2; --grid-split:#e9e3d3;
31-
--smoke:rgba(180,83,9,.22); --lossbar:rgba(190,18,60,.6); --glow:0;
32-
--smoke-hot:#e07a3a; --smoke-mid:#e8a878; --smoke-cool:#cfc8b8;
24+
25+
/* Newsprint — a broadsheet market page. Near-black ink trace, cloud runs from
26+
saturated brick to the warm grey of old halftone printing. */
27+
html[data-theme="newsprint"] {
28+
--bg:#efe9dc; --panel:#f8f4ea; --screen:#fdfbf5; --line:#d8cfb8;
29+
--phos:#1a1a18; --amber:#9c3b2e; --alert:#b8241f; --ink:#3d3a33; --dim:#8c8672;
30+
--grid-axis:#c9bfa4; --grid-split:#e5ddc9;
31+
--smoke:rgba(156,59,46,.22); --lossbar:rgba(184,36,31,.55); --glow:0;
32+
--smoke-hot:#c85a3e; --smoke-mid:#d69878; --smoke-cool:#ddd0bc;
3333
--shadow:0 1px 3px rgba(80,70,40,.12); --shadow-lg:0 12px 30px rgba(80,70,40,.16);
3434
}
3535

36-
/* Arctic — near-black trace. Cloud runs from deep sea to pale frost. */
37-
html[data-theme="arctic"] {
38-
--bg:#eaeff4; --panel:#f7fafc; --screen:#fdfeff; --line:#d3dce5;
39-
--phos:#0f172a; --amber:#0369a1; --alert:#dc2626; --ink:#3a4353; --dim:#7d8b99;
40-
--grid-axis:#c2cdd8; --grid-split:#e2e9f0;
41-
--smoke:rgba(56,132,199,.22); --lossbar:rgba(220,38,38,.55); --glow:0;
42-
--smoke-hot:#4a9fd4; --smoke-mid:#8dc0e0; --smoke-cool:#cfe0ec;
43-
--shadow:0 1px 3px rgba(30,50,70,.10); --shadow-lg:0 12px 30px rgba(30,50,70,.14);
36+
/* Ukiyo — Hokusai's indigo woodblock prints. Deep aizuri trace on washi paper,
37+
the cloud runs from Prussian blue to a pale moss highlight. */
38+
html[data-theme="ukiyo"] {
39+
--bg:#eef0e6; --panel:#f7f8f0; --screen:#fdfdf7; --line:#d4d8c4;
40+
--phos:#1b3a6b; --amber:#c17817; --alert:#c1362f; --ink:#324158; --dim:#8593a0;
41+
--grid-axis:#c3cab0; --grid-split:#e2e4d4;
42+
--smoke:rgba(27,58,107,.22); --lossbar:rgba(193,54,47,.5); --glow:0;
43+
--smoke-hot:#4a76ae; --smoke-mid:#88a8cc; --smoke-cool:#d4dcc4;
44+
--shadow:0 1px 3px rgba(40,60,40,.10); --shadow-lg:0 12px 30px rgba(40,60,40,.14);
4445
}
4546

46-
/* Budapest — Anderson's plum and rose. Core is deep raspberry, edges go powder. */
47-
html[data-theme="budapest"] {
48-
--bg:#f7ebe8; --panel:#fdf5f2; --screen:#fffaf8; --line:#e6cfc8;
49-
--phos:#5b2a4f; --amber:#c9754f; --alert:#c1362f; --ink:#4c3d41; --dim:#9c8087;
50-
--grid-axis:#dcc0b8; --grid-split:#f0e0da;
51-
--smoke:rgba(216,133,140,.26); --lossbar:rgba(193,54,47,.55); --glow:0;
52-
--smoke-hot:#e0748c; --smoke-mid:#eaa8ae; --smoke-cool:#f0dbd2;
53-
--shadow:0 1px 3px rgba(120,80,80,.12); --shadow-lg:0 12px 30px rgba(120,80,80,.16);
47+
/* Memphis — Ettore Sottsass's 1980s Milan collective. Coral trace with real
48+
confidence against soft lavender-grey, teal cloud instead of the expected pink. */
49+
html[data-theme="memphis"] {
50+
--bg:#e8e4ec; --panel:#f5f2f8; --screen:#fbf9fc; --line:#d2c8dc;
51+
--phos:#e3462f; --amber:#0e9488; --alert:#c1362f; --ink:#463b4f; --dim:#8f849a;
52+
--grid-axis:#c9bcd4; --grid-split:#e9e2ee;
53+
--smoke:rgba(14,148,136,.24); --lossbar:rgba(193,54,47,.5); --glow:0;
54+
--smoke-hot:#054841; --smoke-mid:#1fa89a; --smoke-cool:#c4e2da;
55+
--shadow:0 1px 3px rgba(60,50,70,.12); --shadow-lg:0 12px 30px rgba(60,50,70,.16);
5456
}
5557

56-
/* Amber CRT — a VT220 left on overnight. The cloud is pure phosphor decay:
57-
white-hot core, amber body, dying green at the fringe, exactly how a long
58-
persistence tube fades. The trace stays a cooler gold so it sits above it. */
59-
html[data-theme="amber"] {
60-
--bg:#12100a; --panel:#1c1810; --screen:#0a0806; --line:#38301c;
61-
--phos:#ffd75e; --amber:#ffd98a; --alert:#ff5f2e; --ink:#cebd95; --dim:#8f7b4e;
62-
--grid-axis:#443a20; --grid-split:#1e1a10;
63-
--smoke:rgba(255,176,0,.20); --lossbar:rgba(255,95,46,.65); --glow:7;
64-
--smoke-hot:#a86a10; --smoke-mid:#7d4508; --smoke-cool:#2f4429;
58+
/* Phosphor — classic P1 green CRT, the mirror image of an amber tube: green
59+
trace, the cloud a warm amber-to-rust decay instead of the usual green fade. */
60+
html[data-theme="phosphor"] {
61+
--bg:#0a0f0a; --panel:#131a12; --screen:#070b06; --line:#233024;
62+
--phos:#5eeb8a; --amber:#8ff0ab; --alert:#ff5f4a; --ink:#b8ceb8; --dim:#6f8570;
63+
--grid-axis:#2c3c2c; --grid-split:#141c14;
64+
--smoke:rgba(230,150,50,.20); --lossbar:rgba(255,95,74,.6); --glow:6;
65+
--smoke-hot:#c47a20; --smoke-mid:#8a5010; --smoke-cool:#3a2c10;
6566
--shadow:0 1px 2px rgba(0,0,0,.6); --shadow-lg:0 12px 32px rgba(0,0,0,.55);
6667
}
6768

@@ -195,7 +196,7 @@
195196
<script>
196197
const $ = id => document.getElementById(id);
197198
const cssv = n => getComputedStyle(document.documentElement).getPropertyValue(n).trim();
198-
const THEMES = ['dark', 'daylight', 'arctic', 'nord', 'solarized', 'amber'];
199+
const THEMES = ['dark', 'newsprint', 'ukiyo', 'memphis', 'phosphor'];
199200
let theme = localStorage.getItem('pp_theme') || 'dark';
200201
if (!THEMES.includes(theme)) theme = 'dark';
201202
function applyTheme() {

‎static/login.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
</script>
1010
<style>
1111
:root {
12-
--bg:#14161a; --panel:#1c2027; --line:#2b323c; --phos:#22d3ee; --amber:#fbbf24;
13-
--ink:#c0c6ce; --dim:#78848f; --alert:#fb3b53;
12+
--bg:#0e1013; --panel:#171a1f; --line:#2a2f37; --phos:#f0a838; --amber:#e8c468;
13+
--ink:#c4cad2; --dim:#747f8a; --alert:#ef4a5a;
1414
--mono: ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Noto Sans Mono",monospace;
1515
--sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
1616
}
@@ -33,21 +33,21 @@
3333
button:hover { background:color-mix(in srgb, var(--amber) 12%, transparent); }
3434
.err { color:var(--alert); font-size:12px; margin-top:12px; min-height:16px; }
3535

36-
html[data-theme="daylight"] {
37-
--bg:#f2efe6; --panel:#fbf9f3; --line:#ddd6c4;
38-
--phos:#1d4ed8; --amber:#b45309; --alert:#be123c; --ink:#3e4346; --dim:#8a8677;
36+
html[data-theme="newsprint"] {
37+
--bg:#efe9dc; --panel:#f8f4ea; --line:#d8cfb8;
38+
--phos:#1a1a18; --amber:#9c3b2e; --alert:#b8241f; --ink:#3d3a33; --dim:#8c8672;
3939
}
40-
html[data-theme="arctic"] {
41-
--bg:#eaeff4; --panel:#f7fafc; --line:#d3dce5;
42-
--phos:#0f172a; --amber:#0369a1; --alert:#dc2626; --ink:#3a4353; --dim:#7d8b99;
40+
html[data-theme="ukiyo"] {
41+
--bg:#eef0e6; --panel:#f7f8f0; --line:#d4d8c4;
42+
--phos:#1b3a6b; --amber:#c17817; --alert:#c1362f; --ink:#324158; --dim:#8593a0;
4343
}
44-
html[data-theme="budapest"] {
45-
--bg:#f7ebe8; --panel:#fdf5f2; --line:#e6cfc8;
46-
--phos:#5b2a4f; --amber:#c9754f; --alert:#c1362f; --ink:#4c3d41; --dim:#9c8087;
44+
html[data-theme="memphis"] {
45+
--bg:#e8e4ec; --panel:#f5f2f8; --line:#d2c8dc;
46+
--phos:#e3462f; --amber:#0e9488; --alert:#c1362f; --ink:#463b4f; --dim:#8f849a;
4747
}
48-
html[data-theme="amber"] {
49-
--bg:#12100a; --panel:#1c1810; --line:#38301c;
50-
--phos:#ffd75e; --amber:#ffd98a; --alert:#ff5f2e; --ink:#cebd95; --dim:#8f7b4e;
48+
html[data-theme="phosphor"] {
49+
--bg:#0a0f0a; --panel:#131a12; --line:#233024;
50+
--phos:#5eeb8a; --amber:#8ff0ab; --alert:#ff5f4a; --ink:#b8ceb8; --dim:#6f8570;
5151
}
5252
</style>
5353
</head>

0 commit comments

Comments
 (0)