feat(homepage): rebuild the theme on canonical Australis tokens
The predecessor theme was ugly for two structural reasons, not one. It did not use the design system's colours. It built a parallel OKLCH palette "derived from the Australis philosophy" and swapped the canonical typeface for Supreme -- a fork, not a theme. Every hex here is now copied verbatim from ~/.claude/skills/australis-design/colors_and_type.css, and build.py re-checks all 19 against that file at build time and warns on drift so it cannot quietly fork again. Type is the canonical stack: Space Grotesk / Inter / JetBrains Mono, vendored as latin-subset VARIABLE woff2 (one file per family, 102 KB total against 56 KB for three static Supreme cuts, and no Google Fonts request at page load). It also carried a generated full-bleed aurora image behind the entire dashboard. Canon forbids exactly that -- "solid fills only on chrome, no full-bleed photography, no decorative gradients", and the aurora motif "never as a background fill behind text". The predecessor knew, said so in its own header, and dialled the opacity down rather than dropping it. The image is gone; the aurora survives as a 1px accent edge under the tab bar, which is where canon sanctions it. The asset stays in images/ in case it is ever revisited. Direction is instrument panel. Group headings become the Australis mono eyebrow with a hairline to the right edge -- canon calls the eyebrow a system signature, and it turns the groups into register bands instead of headings floating over a grid. Status stops shouting: the filled emerald chips read louder than the service names they annotated, so they are now a semantic dot plus a mono micro-label at tertiary contrast. Cards are bordered and opaque, per canon's border-over-shadow rule for chrome. Alignment, per operator feedback that pills and cards did not line up: - The status cluster is centred on the service name's line rather than parked in the card's top-right corner, where Homepage's `absolute top-0` left it floating ~7px above the title's optical centre. The offsets reconstruct the title line box and are documented as moving together. - Descriptions get a two-line minimum, so the common one-line/two-line mix bottom-aligns across a row. This is what made the grid look ragged. useEqualHeights stays false: it inflated short cards to match a widget card twice their height, which was the worse failure. - The status dot is flex-centred rather than nudged with vertical-align, so it stays centred if the type scale changes. Retires the Skyfall sources and the Supreme faces; theme/ now has one source of truth.
This commit is contained in:
+472
-636
File diff suppressed because one or more lines are too long
@@ -3,31 +3,26 @@
|
||||
title: ... all my base ...
|
||||
theme: dark
|
||||
# `color:` only accepts Homepage's built-in Tailwind ramps, and none of them is
|
||||
# the Skyfall Sea ramp. slate is the nearest cool neutral and acts as the base
|
||||
# under conf/custom.css, which is where the real palette lives.
|
||||
# the Australis Sea ramp. slate is the nearest cool neutral and acts as the
|
||||
# base under conf/custom.css, which is where the real palette lives.
|
||||
color: slate
|
||||
|
||||
# Background — generated locally, not stock art. Arbo (irv-ml1:8201) rendered
|
||||
# it from the `t2i-ui-background` workflow: abstract full-bleed, no subject,
|
||||
# aurora blue->cyan->green on near-black, which is the one decorative motif
|
||||
# Australis Skyfall permits and its "cool temperature always" imagery rule.
|
||||
# Job 13f0891f4e42, seed 26, flux2-klein-9b, 2048x1152.
|
||||
# NO `background:` BLOCK — DELIBERATE, DO NOT RE-ADD WITHOUT ASKING.
|
||||
#
|
||||
# Served from /app/public/images via the read-only mount in compose.yaml —
|
||||
# NOT from the config dir, which Homepage will not serve static files out of.
|
||||
# This carried a generated full-bleed aurora image (Arbo job 13f0891f4e42,
|
||||
# seed 26, flux2-klein-9b) at opacity 30. It went in on an explicit request
|
||||
# for an Arbo-generated background and came out on 2026-08-19 when the
|
||||
# operator called the result ugly.
|
||||
#
|
||||
# ⚠️ opacity is the load-bearing number, not decoration. Skyfall's rule is that
|
||||
# the aurora motif never sits behind body text; this dashboard breaks that on
|
||||
# purpose, so the image has to stay far enough back that card contrast never
|
||||
# suffers. The render is considerably brighter than the "mostly empty" brief,
|
||||
# which is exactly what this dials out. Raise it and the cards start fighting
|
||||
# the ribbon.
|
||||
background:
|
||||
image: /images/skyfall-aurora.webp
|
||||
blur: sm
|
||||
saturate: 90
|
||||
brightness: 90
|
||||
opacity: 30
|
||||
# The image was also against canon on its own terms: Australis says "solid
|
||||
# fills only on chrome — no full-bleed photography, no decorative gradients",
|
||||
# and permits the aurora motif "never as a background fill behind text". A
|
||||
# whole dashboard is text. The predecessor knew and dialled the opacity down
|
||||
# instead of dropping it, which is how you end up with a quiet version of the
|
||||
# wrong thing. The asset is still in `images/` if this is ever revisited.
|
||||
#
|
||||
# The aurora now appears exactly where canon sanctions it: a 1px accent edge
|
||||
# under the tab bar, in conf/custom.css.
|
||||
headerStyle: boxedWidgets
|
||||
|
||||
providers:
|
||||
@@ -43,10 +38,13 @@ quicklaunch:
|
||||
showStats: false
|
||||
statusStyle: ""
|
||||
|
||||
# Force all cards in a row to match the tallest card's height. Without
|
||||
# this, widget-bearing cards (Plex stats, Traefik metrics) stand taller
|
||||
# than plain link cards and the grid looks ragged.
|
||||
useEqualHeights: true
|
||||
# Cards size to their own content. This was `true` to stop widget-bearing
|
||||
# cards (Uptime Kuma's stat strip, Paperless's counts) standing taller than
|
||||
# plain link cards and leaving the grid ragged — but the cure was worse than
|
||||
# the disease: every short card in the row inflated into a hollow box to match
|
||||
# the tall one. A ragged bottom edge reads as content; a stretched empty card
|
||||
# reads as a rendering fault.
|
||||
useEqualHeights: false
|
||||
|
||||
# Function-first layout, four-tab split:
|
||||
# Main - daily-use apps, media, bookmarks, monitoring
|
||||
|
||||
Reference in New Issue
Block a user