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

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>