style(homepage): tone the stat values down, run the aurora through the page
Two operator corrections in one pass. Stat values overshot: the previous commit took them from font-thin 13px to bold 22px in heading white, which went from whisper to shout. A stat only has to out-rank its own label, not the service name above it — now --text-md at medium weight in cyan, which clears the label but sits below the card title where it belongs. Colour lift, staying inside the system rather than around it: Skyfall names Aurora (blue, cyan, green) the PRIMARY families, 'used generously, in that order', while Dawn (amber, red, violet) is semantic-only. So group markers now cycle blue -> cyan -> green down the page — icons at full strength, names at 0.72 — service icons take a single cool wash, header resource icons go cyan, and latency tags move to the info family so 'how fast' stops looking like 'is it alive'. No Dawn colour is used decoratively anywhere. Also fixes selectors that never bound: Homepage emits docker-status-<state>, not status-<state>, so the green pills up to now were stock colouring rather than this file. Both forms are matched and the trap is commented. README records the iteration loop that would have caught the overshoot: CSS is served per-request, so it needs a reload, not a recreate and not the layout warm-up — and candidate CSS can be injected into the live page for a seconds-long feedback loop instead of a 10-minute one.
This commit is contained in:
@@ -169,6 +169,29 @@ theme/build.py inlines the fonts + tokens -> conf/custom.css
|
||||
**Do not hand-edit `conf/custom.css`.** Change `skyfall.css.in`, run
|
||||
`python3 stacks/homepage/theme/build.py`, then deploy.
|
||||
|
||||
### Iterating on the theme — do NOT recreate the container
|
||||
|
||||
`custom.css` is fetched per request from `/api/config/custom.css`, so a CSS
|
||||
change needs a **browser reload**, nothing more. It does **not** need a
|
||||
container recreate, and it therefore does not owe the multi-minute layout
|
||||
warm-up described below — that penalty only applies to the full tab/layout
|
||||
render. Conflating the two costs an operator-visible 10 minutes per attempt,
|
||||
which is exactly how the first version of this theme shipped overcooked
|
||||
(operator, 2026-08-19).
|
||||
|
||||
Faster still, and the right way to judge a colour change before it touches the
|
||||
live dashboard: **inject the candidate CSS into the running page and
|
||||
screenshot it.** No deploy, no restart, seconds per iteration.
|
||||
|
||||
```js
|
||||
// playwright, against the live dashboard
|
||||
await p.goto('http://10.0.50.45:5100/', { waitUntil: 'networkidle' });
|
||||
await p.addStyleTag({ content: candidateCss });
|
||||
await p.screenshot({ path: 'preview.png', fullPage: true });
|
||||
```
|
||||
|
||||
Only build + deploy once the render looks right.
|
||||
|
||||
The build exists for one reason: Homepage serves exactly two files out of its
|
||||
config directory, `custom.css` and `custom.js`. There is no static route for
|
||||
anything beside them, so a `@font-face` pointing at a vendored `.woff2` would
|
||||
|
||||
Reference in New Issue
Block a user