feat(homepage): Australis Skyfall theme + Arbo-generated aurora background
Replaces the previous theme attempt, which was built on a misread: the ask was to use Arbo as an IMAGE-GEN ENGINE for the background, with the operator's Australis Skyfall design system supplying the palette. theme/ holds the source — colors/layout/typography vendored verbatim from the Skyfall handoff bundle, Supreme 400/500/700 woff2, the Homepage bindings in skyfall.css.in, and build.py which inlines fonts + tokens into conf/custom.css. custom.css is GENERATED; edit the .in file and rebuild. The build exists because Homepage serves only custom.css and custom.js out of its config dir, so a @font-face pointing at a vendored woff2 would 404 — the face has to arrive as a data: URI. The background image takes the other route: /app/public/images is a real static route, so compose.yaml now mounts images/ there read-only and settings.yaml points at /images/. Bindings map Skyfall's semantic layer onto Homepage's DOM: Sea surfaces, the depth recipe (hairline AND two-layer shadow, never one alone), uppercase eyebrow group headers, the sanctioned accent-rail on the active tab rather than a glow, and semantic status colour so a green pill means the service is actually serving. Background generated by Arbo (irv-ml1:8201) workflow t2i-ui-background, job 13f0891f4e42, seed 26, flux2-klein-9b, 2048x1152 — abstract, no subject, cool-temperature aurora. 1.6 MB PNG -> 22 KB WebP. Two deviations are documented rather than hidden: Skyfall forbids imagery behind body text (held at opacity 30 as mitigation), and service icons stay full-colour vendor logos. NOT DEPLOYED — live still runs the old theme. Prototype on :5199.
This commit is contained in:
@@ -0,0 +1,238 @@
|
||||
/* Homepage — Australis Skyfall theme.
|
||||
*
|
||||
* SOURCE OF TRUTH: this file plus `theme/colors.css`, `theme/layout.css` and
|
||||
* `theme/typography.css`, which are vendored VERBATIM from the Australis
|
||||
* Skyfall handoff bundle. Do not hand-edit `conf/custom.css` — it is
|
||||
* generated. Run `theme/build.py` after changing anything here.
|
||||
*
|
||||
* WHY A BUILD STEP AT ALL: Homepage serves exactly two files out of its
|
||||
* config directory, `/api/config/custom.css` and `/api/config/custom.js`.
|
||||
* There is no static route for anything else, so a `@font-face` pointing at
|
||||
* `theme/fonts/Supreme-400.woff2` would 404 — the face has to arrive inside
|
||||
* the stylesheet as a data: URI. The build inlines it.
|
||||
*
|
||||
* WHICH FACES, AND WHY NOT ALL THREE: Skyfall specifies Bespoke Sans
|
||||
* (display), Supreme (body/UI) and Victor Mono (code/data). Only Supreme is
|
||||
* embedded. A link dashboard has no display type — nothing here is a headline
|
||||
* or a hero number — and Victor Mono ships as 2.4 MB TTF statics per cut,
|
||||
* which is 30x this whole stylesheet for the handful of latency figures on
|
||||
* the cards. Both are named in the stacks below so they resolve if they ever
|
||||
* get vendored.
|
||||
*
|
||||
* DEVIATIONS FROM THE SYSTEM, STATED PLAINLY:
|
||||
*
|
||||
* 1. Skyfall says "no photography, no textures" for backgrounds, and permits
|
||||
* exactly one decorative motif: a subtle aurora gradient, on hero and
|
||||
* empty-state areas ONLY, "never behind body text blocks". This dashboard
|
||||
* IS a body-text block, and it carries a generated aurora image behind it.
|
||||
* That is a real departure, taken on the operator's explicit instruction
|
||||
* to generate a background with Arbo. It is mitigated, not waved away:
|
||||
* the image is abstract with no subject (Arbo's `t2i-ui-background`
|
||||
* workflow), strictly cool-temperature per the imagery rule, and pinned
|
||||
* to low opacity so card contrast is never the thing that suffers.
|
||||
* If it still reads as busy, the honest fix is to drop the image and let
|
||||
* `--surface-sunken` be the canvas, which is what the system actually asks
|
||||
* for.
|
||||
*
|
||||
* 2. Homepage renders service icons as full-colour vendor logos. Skyfall
|
||||
* wants one cool, technical icon family. Not fixable from CSS without
|
||||
* desaturating every logo into illegibility, so the icons stay as they
|
||||
* are.
|
||||
*
|
||||
* SPECIFICITY: Homepage is Tailwind-generated, so utilities win on equal
|
||||
* specificity. Every `!important` here is load-bearing; removing one silently
|
||||
* reverts that rule to the stock theme.
|
||||
*/
|
||||
|
||||
/* @@FONTS@@ */
|
||||
|
||||
/* ============================================================
|
||||
Skyfall tokens — vendored verbatim from the handoff bundle.
|
||||
============================================================ */
|
||||
|
||||
/* @@TOKENS@@ */
|
||||
|
||||
/* ============================================================
|
||||
Homepage bindings — the only part of this file that is ours.
|
||||
Everything above is Skyfall; everything below maps Skyfall's
|
||||
semantic layer onto Homepage's DOM. Never hardcode a hex here:
|
||||
the system's rule is that UI consumes --surface-*/--text-*/
|
||||
--border-*/--accent*/status tokens, not raw values.
|
||||
============================================================ */
|
||||
|
||||
body,
|
||||
#page_wrapper,
|
||||
#page_container {
|
||||
background-color: var(--surface-sunken) !important;
|
||||
color: var(--text-body) !important;
|
||||
font-family: var(--font-body) !important;
|
||||
font-size: var(--text-base) !important;
|
||||
line-height: var(--leading-normal) !important;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--selection-bg);
|
||||
color: var(--selection-fg);
|
||||
}
|
||||
|
||||
/* ---------- header chrome ----------
|
||||
Compact chrome per the negative-space rule: --pad-chrome, not --pad-content. */
|
||||
#information-widgets .widget-container,
|
||||
#information-widgets .information-widget-search {
|
||||
background: var(--surface-card) !important;
|
||||
border: 1px solid var(--border-subtle) !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
box-shadow: var(--shadow-sm) !important;
|
||||
padding: var(--pad-chrome) !important;
|
||||
}
|
||||
|
||||
#information-widgets .information-widget-search input {
|
||||
background: transparent !important;
|
||||
color: var(--text-body) !important;
|
||||
font-family: var(--font-body) !important;
|
||||
}
|
||||
|
||||
#information-widgets .information-widget-search input::placeholder {
|
||||
color: var(--text-faint) !important;
|
||||
}
|
||||
|
||||
/* Telemetry is data — the system says data is always mono. */
|
||||
.information-widget-resource .resource-value,
|
||||
.service-block,
|
||||
.service-stats {
|
||||
font-family: var(--font-mono) !important;
|
||||
font-variant-numeric: tabular-nums !important;
|
||||
}
|
||||
|
||||
/* ---------- tabs ----------
|
||||
The active rail is one of only two sanctioned accent expressions:
|
||||
a 2px accent bar plus an --accent-soft fill. No glow — glows are
|
||||
reserved for hero moments, and a tab is not one. */
|
||||
#myTab li button {
|
||||
color: var(--text-muted) !important;
|
||||
font-family: var(--font-body) !important;
|
||||
font-weight: var(--weight-medium) !important;
|
||||
border-radius: var(--radius-md) !important;
|
||||
transition: color var(--duration-fast) var(--ease-out),
|
||||
background var(--duration-fast) var(--ease-out) !important;
|
||||
}
|
||||
|
||||
#myTab li button:hover {
|
||||
color: var(--text-body) !important;
|
||||
background: var(--accent-soft) !important;
|
||||
}
|
||||
|
||||
#myTab li button[aria-selected="true"] {
|
||||
background: var(--accent-soft) !important;
|
||||
color: var(--text-heading) !important;
|
||||
box-shadow: var(--rail-active) !important;
|
||||
}
|
||||
|
||||
/* ---------- group headers ----------
|
||||
ALL-CAPS is permitted only for tiny eyebrow labels — this is that case. */
|
||||
.service-group-name,
|
||||
.bookmark-group-name {
|
||||
color: var(--text-faint) !important;
|
||||
font-family: var(--font-body) !important;
|
||||
font-size: var(--text-xs) !important;
|
||||
font-weight: var(--weight-semibold) !important;
|
||||
letter-spacing: var(--tracking-caps) !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
/* ---------- cards ----------
|
||||
The depth recipe, and it is not optional: crisp 1px hairline AND a
|
||||
two-layer soft shadow. Never one without the other on a floating
|
||||
surface — a card with only a border reads flat, one with only a
|
||||
shadow reads smudged. */
|
||||
.service-card,
|
||||
.bookmark-list li > a {
|
||||
background: var(--surface-card) !important;
|
||||
border: 1px solid var(--border-subtle) !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
box-shadow: var(--shadow-sm) !important;
|
||||
transition: background var(--duration-fast) var(--ease-out),
|
||||
border-color var(--duration-fast) var(--ease-out),
|
||||
box-shadow var(--duration-base) var(--ease-out) !important;
|
||||
}
|
||||
|
||||
/* Hover: surfaces lighten one step, interactive cards lift sm -> md. */
|
||||
.service-card:hover,
|
||||
.bookmark-list li > a:hover {
|
||||
background: var(--surface-raised) !important;
|
||||
border-color: var(--border-default) !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
}
|
||||
|
||||
.service-name,
|
||||
.bookmark-name {
|
||||
color: var(--text-heading) !important;
|
||||
font-weight: var(--weight-semibold) !important;
|
||||
letter-spacing: var(--tracking-normal) !important;
|
||||
}
|
||||
|
||||
.service-description,
|
||||
.bookmark-description {
|
||||
color: var(--text-muted) !important;
|
||||
font-size: var(--text-sm) !important;
|
||||
line-height: var(--leading-snug) !important;
|
||||
}
|
||||
|
||||
/* ---------- status ----------
|
||||
Semantic colour is the whole point: the system communicates status with
|
||||
colour and icons, never emoji, and accents are semantic-ONLY. Stock
|
||||
Homepage paints every pill the same slate, which throws away the signal. */
|
||||
.service-tag,
|
||||
.service-block,
|
||||
.service-stats {
|
||||
background: var(--surface-raised) !important;
|
||||
border: 1px solid var(--border-subtle) !important;
|
||||
border-radius: var(--radius-md) !important;
|
||||
color: var(--text-muted) !important;
|
||||
font-size: var(--text-2xs) !important;
|
||||
}
|
||||
|
||||
.status-online,
|
||||
.status-healthy,
|
||||
.status-running,
|
||||
.status-started {
|
||||
color: var(--success-text) !important;
|
||||
background: var(--success-soft) !important;
|
||||
}
|
||||
|
||||
.status-offline,
|
||||
.status-unhealthy,
|
||||
.status-dead,
|
||||
.status-error {
|
||||
color: var(--danger-text) !important;
|
||||
background: var(--danger-soft) !important;
|
||||
}
|
||||
|
||||
.status-exited,
|
||||
.status-paused,
|
||||
.status-partial,
|
||||
.status-unknown,
|
||||
.status-not-found {
|
||||
color: var(--warning-text) !important;
|
||||
background: var(--warning-soft) !important;
|
||||
}
|
||||
|
||||
/* ---------- focus ---------- */
|
||||
a:focus-visible,
|
||||
button:focus-visible,
|
||||
input:focus-visible {
|
||||
outline: none !important;
|
||||
box-shadow: var(--focus-ring) !important;
|
||||
border-radius: var(--radius-sm) !important;
|
||||
}
|
||||
|
||||
/* ---------- motion ----------
|
||||
"Respect reduced-motion" is in the system's motion rule, not an extra. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
transition-duration: 0.01ms !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user