rays/ipx
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Modern in the logo's colours, and the logo in the page's mode (#63)

Browse Source 
Modern's palette was sampled from the 2004 iPodderX icon: a neutral navy,
its screen blue and amber EQ bars. It now takes the new logo's colours,
the dark half from logo-dark.svg (navy ground, #8fc2ea scale, #ff6a1a
needle) and the light half from logo.svg (sky ground, #2f6aa0 scale, the
needle taken down to #c43e00 so white on it clears AA). The pending amber
and the error red moved apart from the needle's orange, and the sign-in
page's copy of the palette follows.

The pages always showed logo.svg, the light variant, even in a dark
theme; logo-dark.svg was never served. It is now, and the app and admin
pages show whichever matches data-mode, dark until the script says light,
as the palette is. The sign-in page, which has no account's theme, picks
by the system's with <picture>.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-09-28 18:05:44 +00:00
parent 3cb36ab8b7
commit f9c9c2b7cc
8 changed files with 99 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/admin.html
View File

@@ -13,7 +13,7 @@
<!-- The server sends this page, and its script, to admins only. -->
<header id="topbar">
<a class="btn ico" href="/" title="Back to iPX" aria-label="Back to iPX" data-icon="left"></a>
<img class="logo" src="/logo.svg" alt="" width="26">
<img class="logo onlight" src="/logo.svg" alt="" width="26"><img class="logo ondark" src="/logo-dark.svg" alt="" width="26">
<h1>Admin</h1>
<span class="grow"></span>
<nav class="tabs" id="atabs">

64
web/app.css
View File

@@ -2,44 +2,44 @@
anyone else. One variable file covers every weight used here; italics are synthesized. Classic
keeps Lucida Grande, the 2004 app's face. */
@font-face{font-family:Inter;src:url(/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* Palette taken from the 2004 iPodderX icon: the silver device body, the blue
screen, and the amber EQ bars. Hex values in comments are sampled straight from it. */
/* Palette taken from the logo (web/logo.svg, logo-dark.svg): its navy ground, the tuning scale's
blue and the orange needle. The dark half follows logo-dark.svg. */
:root {
--bg:#0e131b; /* the screen's navy (#314B74), taken right down */
--panel:#151c27;
--panel2:#1c2431;
--raise:#25303f;
--line:#2c3849;
--fg:#f5f5f5; /* #F5F5F5 device highlight */
--dim:#95a0b1; /* #95A0B1 straight from the icon's blue-grey */
--faint:#7e8b9c; /* lifted from the icon ramp until it clears AA at small sizes */
--accent:#92b2e6; /* #92B2E6 the screen blue */
--accent2:#f49e2c; /* #F49E2C the EQ bars */
--ink:#0e131b; /* text on an accent fill */
--bg:#0a1726; /* the dark logo's navy (#0c2238), taken down */
--panel:#0f1f31;
--panel2:#15283d;
--raise:#1d3450;
--line:#264060;
--fg:#f3f7fb;
--dim:#a3b6ca;
--faint:#8a9fb5;
--accent:#8fc2ea; /* #8FC2EA the dark logo's scale */
--accent2:#ff6a1a; /* #FF6A1A the dark logo's needle */
--ink:#0a1726; /* text on an accent fill */
--good:#6fbf8b;
--warn:#f49e2c; /* the amber doubles as the pending colour */
--bad:#e2705f;
--shadow:0 8px 28px rgba(6,10,16,.55);
--warn:#f5a524; /* amber, apart from the needle's orange, for pending */
--bad:#ff6b7a; /* pushed towards pink, apart from the needle */
--shadow:0 8px 28px rgba(4,10,20,.55);
}
/* Every other theme overrides the same variables, under data-theme and data-mode. The page's
script sets data-mode to light or dark, working Auto out from the system, so each theme has
one block per variant here and none needs repeating under a media query. */
:root[data-theme="modern"][data-mode="light"] {
--bg:#f2f4f7;
--panel:#ffffff; /* #FFFFFF device body */
--panel2:#e9edf3;
--raise:#dde3ec;
--line:#d6d6d6; /* #D6D6D6 device edge */
--fg:#1a1a1a; /* #1A1A1A icon outline */
--dim:#606060; /* #606060 */
--faint:#6b6b6b; /* between the icon's #929292 and #606060, to clear AA on the page ground */
--accent:#2d5391; /* #2D5391 the deep screen blue reads better on white */
--accent2:#985e0a; /* the EQ amber, taken down until white on it clears AA */
--bg:#eef5fb; /* the light logo's sky (#DFF0FB), paler */
--panel:#ffffff;
--panel2:#e4eff9;
--raise:#d5e6f5;
--line:#c6d9ea;
--fg:#10233a;
--dim:#46596e;
--faint:#56697e;
--accent:#2f6aa0; /* #2F6AA0 the logo's scale */
--accent2:#c43e00; /* the needle (#FF5500), taken down until white on it clears AA */
--ink:#ffffff;
--good:#2f7d4f;
--warn:#985e0a; /* the same amber; the lighter one failed AA as text */
--bad:#b3402f;
--shadow:0 8px 28px rgba(45,83,145,.14);
--warn:#985e0a; /* amber, apart from the needle's orange; lighter failed AA as text */
--bad:#b3263a; /* pushed towards crimson, apart from the needle */
--shadow:0 8px 28px rgba(47,106,160,.14);
}
/* Dracula, and Alucard, its light half, from draculatheme.com/spec. The spec's comment colour
(#6272A4, #6C664B) is too faint for small text on its own background, so --faint is lifted. */
@@ -493,7 +493,11 @@ a{color:var(--accent)}
background:var(--panel);border-right:1px solid var(--line);
display:flex;flex-direction:column;min-height:0;
}
#applogo{width:28px;height:28px;flex:none;border-radius:7px}
#applogo{display:flex;flex:none}
#applogo img{width:28px;height:28px;border-radius:7px}
/* The logo in the mode's own variant. Dark unless the page says light, as the palette is: with
Auto, data-mode arrives with the script, and until then the page is drawn dark. */
:root[data-mode="light"] .logo.ondark,:root:not([data-mode="light"]) .logo.onlight{display:none}
.iconbtn{
width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
color:var(--dim);flex:none;

2
web/build.mjs
View File

@@ -75,7 +75,7 @@ export function buildPage(name, { minify = true } = {}) {
// The icons are named by their contents too. They are kept a day under a fixed name, and a new
// logo went unseen for that day, in browsers and at Cloudflare's edge. The server ignores the
// query; /favicon.ico, which a browser asks for on its own, cannot carry one.
out = out.replace(/(href|src)="\/(favicon\.png|apple-touch-icon\.png|logo\.svg)"/g,
out = out.replace(/(href|src|srcset)="\/(favicon\.png|apple-touch-icon\.png|logo\.svg|logo-dark\.svg)"/g,
(_, attr, file) => `${attr}="/${file}?v=${hash(fs.readFileSync(path.join(here, file)))}"`);
if (!minify) return { html: out, js, script };
const r = html.minifySync(out, { minifyJs: false, minifyCss: true, removeComments: true });

2
web/index.html
View File

@@ -14,7 +14,7 @@
<button class="iconbtn" id="burger" title="Feeds" aria-label="Feeds" data-icon="menu"></button>
<!-- One group per thing acted on, in the order the panes read: feeds, then the selected item.
A phone hides the item group, which it has no table for. -->
<img class="logo" id="applogo" src="/logo.svg" alt="iPX" title="iPX {version}">
<span id="applogo" title="iPX {version}"><img class="logo onlight" src="/logo.svg" alt="iPX"><img class="logo ondark" src="/logo-dark.svg" alt="iPX"></span>
<div class="tgroup">
<button id="addFeed" title="Add a feed" aria-label="Add a feed" data-icon="plus"></button>
<button id="tbRemove" title="Unsubscribe from this feed" aria-label="Unsubscribe from this feed" data-icon="circleMinus" disabled></button>

59
web/login.html
View File

@@ -10,40 +10,41 @@
/* Inter, from ipx itself; see the same rule in index.html. */
@font-face{font-family:Inter;src:url(/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root {
--bg:#0e131b; /* the screen's navy (#314B74), taken right down */
--panel:#151c27;
--panel2:#1c2431;
--raise:#25303f;
--line:#2c3849;
--fg:#f5f5f5; /* #F5F5F5 device highlight */
--dim:#95a0b1; /* #95A0B1 straight from the icon's blue-grey */
--faint:#7e8b9c; /* lifted from the icon ramp until it clears AA at small sizes */
--accent:#92b2e6; /* #92B2E6 the screen blue */
--accent2:#f49e2c; /* #F49E2C the EQ bars */
--ink:#0e131b; /* text on an accent fill */
--bg:#0a1726; /* the dark logo's navy (#0c2238), taken down */
--panel:#0f1f31;
--panel2:#15283d;
--raise:#1d3450;
--line:#264060;
--fg:#f3f7fb;
--dim:#a3b6ca;
--faint:#8a9fb5;
--accent:#8fc2ea; /* #8FC2EA the dark logo's scale */
--accent2:#ff6a1a; /* #FF6A1A the dark logo's needle */
--ink:#0a1726; /* text on an accent fill */
--good:#6fbf8b;
--warn:#f49e2c; /* the amber doubles as the pending colour */
--bad:#e2705f;
--shadow:0 8px 28px rgba(6,10,16,.55);
--warn:#f5a524; /* amber, apart from the needle's orange, for pending */
--bad:#ff6b7a; /* pushed towards pink, apart from the needle */
--shadow:0 8px 28px rgba(4,10,20,.55);
--r:10px;
}
/* Signed out, there is no account to take a theme from, so this follows the system. */
/* Modern, as app.css has it. Signed out, there is no account to take a theme from, so this follows
the system. */
@media (prefers-color-scheme:light){:root {
--bg:#f2f4f7;
--panel:#ffffff; /* #FFFFFF device body */
--panel2:#e9edf3;
--raise:#dde3ec;
--line:#d6d6d6; /* #D6D6D6 device edge */
--fg:#1a1a1a; /* #1A1A1A icon outline */
--dim:#606060; /* #606060 */
--faint:#6b6b6b;
--accent:#2d5391; /* #2D5391 the deep screen blue reads better on white */
--accent2:#985e0a;
--bg:#eef5fb; /* the light logo's sky (#DFF0FB), paler */
--panel:#ffffff;
--panel2:#e4eff9;
--raise:#d5e6f5;
--line:#c6d9ea;
--fg:#10233a;
--dim:#46596e;
--faint:#56697e;
--accent:#2f6aa0; /* #2F6AA0 the logo's scale */
--accent2:#c43e00; /* the needle (#FF5500), taken down until white on it clears AA */
--ink:#ffffff;
--good:#2f7d4f;
--warn:#985e0a;
--bad:#b3402f;
--shadow:0 8px 28px rgba(45,83,145,.14);
--warn:#985e0a; /* amber, apart from the needle's orange; lighter failed AA as text */
--bad:#b3263a; /* pushed towards crimson, apart from the needle */
--shadow:0 8px 28px rgba(47,106,160,.14);
}}
*{box-sizing:border-box}
html,body{height:100%}
@@ -74,7 +75,7 @@ button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
</style>
<form id="f">
<div class="brand"><img src="/logo.svg" alt=""><h1>iPX</h1></div>
<div class="brand"><picture><source media="(prefers-color-scheme:light)" srcset="/logo.svg"><img src="/logo-dark.svg" alt=""></picture><h1>iPX</h1></div>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="username" autofocus required>
<label for="pw">Password</label>