web: the muted text that was never muted, and the stylesheet fetched every time
Every text-[color:var(--ink)]/50, border-[color:var(--ink)]/10 and
bg-[color:var(--ink)]/5 in the templates compiled to nothing. Tailwind v3
cannot put an opacity on an arbitrary var() colour, so all 538 of them were
dropped from output.css without a word. Meta text rendered at full ink, card
borders fell back to Tailwind's default grey (bright white rings at night),
and the washes, backdrops and hover pills simply weren't there, on the news
site, the casino and the adventure pages alike.
The palette is now written once per phase and casino room as bare rgb
channels (--ink-rgb and friends), the plain vars are built from them, and
tailwind.config.js exposes ink, muted, accent, warn and card as real colours.
The classes are text-ink/80, border-ink/10, bg-accent/20 now, and they compile.
Restoring the intended opacities as-is would have traded flat for illegible:
ink at 50% measures 2.7 to 2.9:1 on the lit phases. So secondary text gets
its own colour, --muted, per phase and per casino room, taken as faint as it
can go while still clearing 4.5:1 on both the card and the page. Everything
that was ink at 35 to 70% is text-muted. The 20-30% ones are separators and
empty-cell dashes and stay faint.
The bg-theme-* chips carry white text everywhere they appear, and eight of
them measured 2.5 to 3.2:1. Same hues, taken just dark enough to pass (4.6 to
4.7:1). eu, lego and adventure already passed and are unchanged, and the
underline and border colours keep the old pastels since they carry no text.
Static files came out of the embedded FS with no Last-Modified, no ETag and
no Cache-Control, so every page view downloaded the stylesheet and every
script in full, and the service worker's "cheap 304" never happened. Each
file is hashed once now. Templates link through {{asset}}, which appends
?v=<hash>; a request naming the current hash is served immutable for a year,
and everything else gets the hash as its ETag and revalidates to a 304. The
service worker serves versioned URLs cache-first, drops older versions of the
same file as new ones land, and moves to cache v6.
This commit is contained in:
@@ -23,11 +23,11 @@
|
||||
</header>
|
||||
|
||||
{{if .Standings.Rows}}
|
||||
<div class="mt-6 rounded-3xl bg-[color:var(--card)] border-2 border-[color:var(--ink)]/10 shadow-pete overflow-hidden">
|
||||
<div class="mt-6 rounded-3xl bg-card border-2 border-ink/10 shadow-pete overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="text-[11px] uppercase tracking-wider text-[color:var(--ink)]/45 border-b-2 border-[color:var(--ink)]/10">
|
||||
<tr class="text-[11px] uppercase tracking-wider text-muted border-b-2 border-ink/10">
|
||||
<th class="text-left font-semibold px-4 py-3 w-10">#</th>
|
||||
<th class="text-left font-semibold px-2 py-3">Adventurer</th>
|
||||
<th class="text-right font-semibold px-2 py-3" title="The deepest tier they have actually beaten a boss in">Deepest</th>
|
||||
@@ -40,28 +40,28 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .Standings.Rows}}
|
||||
<tr class="border-b border-[color:var(--ink)]/5 last:border-0 hover:bg-[color:var(--ink)]/[0.03] transition">
|
||||
<td class="px-4 py-3 tabular-nums text-[color:var(--ink)]/35 font-semibold">{{.Rank}}</td>
|
||||
<tr class="border-b border-ink/5 last:border-0 hover:bg-ink/[0.03] transition">
|
||||
<td class="px-4 py-3 tabular-nums text-muted font-semibold">{{.Rank}}</td>
|
||||
<td class="px-2 py-3 min-w-0">
|
||||
{{if .Token}}<a href="/adventure/who/{{.Token}}" class="font-semibold hover:text-theme-adventure transition">{{.Name}}</a>
|
||||
{{else}}<span class="font-semibold">{{.Name}}</span>{{end}}
|
||||
<span class="block text-xs text-[color:var(--ink)]/40">
|
||||
<span class="block text-xs text-muted">
|
||||
lv {{.Level}}{{if .ClassRace}} · {{.ClassRace}}{{end}}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-2 py-3 text-right tabular-nums">
|
||||
{{if .DeepestTier}}<span class="standings-tier standings-tier-{{.DeepestTier}}">T{{.DeepestTier}}</span>
|
||||
{{else}}<span class="text-[color:var(--ink)]/25">—</span>{{end}}
|
||||
{{else}}<span class="text-ink/25">—</span>{{end}}
|
||||
</td>
|
||||
<td class="px-2 py-3 text-right tabular-nums{{if not .Zones}} text-[color:var(--ink)]/25{{end}}">{{if .Zones}}{{.Zones}}{{else}}—{{end}}</td>
|
||||
<td class="px-2 py-3 text-right tabular-nums{{if not .Clears}} text-[color:var(--ink)]/25{{end}}">{{if .Clears}}{{.Clears}}{{else}}—{{end}}</td>
|
||||
<td class="px-2 py-3 text-right tabular-nums{{if not .Zones}} text-ink/25{{end}}">{{if .Zones}}{{.Zones}}{{else}}—{{end}}</td>
|
||||
<td class="px-2 py-3 text-right tabular-nums{{if not .Clears}} text-ink/25{{end}}">{{if .Clears}}{{.Clears}}{{else}}—{{end}}</td>
|
||||
<td class="px-2 py-3 text-right tabular-nums">
|
||||
{{if .Firsts}}<span class="standings-firsts">{{.Firsts}}</span>{{else}}<span class="text-[color:var(--ink)]/25">—</span>{{end}}
|
||||
{{if .Firsts}}<span class="standings-firsts">{{.Firsts}}</span>{{else}}<span class="text-ink/25">—</span>{{end}}
|
||||
</td>
|
||||
<td class="px-2 py-3 text-right tabular-nums{{if not .SiegeDamage}} text-[color:var(--ink)]/25{{end}}">
|
||||
<td class="px-2 py-3 text-right tabular-nums{{if not .SiegeDamage}} text-ink/25{{end}}">
|
||||
{{if .SiegeDamage}}{{.SiegeDamage}}{{else}}—{{end}}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right tabular-nums{{if not .Deaths}} text-[color:var(--ink)]/25{{end}}">{{if .Deaths}}{{.Deaths}}{{else}}—{{end}}</td>
|
||||
<td class="px-4 py-3 text-right tabular-nums{{if not .Deaths}} text-ink/25{{end}}">{{if .Deaths}}{{.Deaths}}{{else}}—{{end}}</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
@@ -69,14 +69,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-3 text-xs text-[color:var(--ink)]/40 px-1">
|
||||
<p class="mt-3 text-xs text-muted px-1">
|
||||
Deepest is the hardest tier they've actually put a boss down in, not the hardest
|
||||
one they've walked into. Deaths is my own count, off the dispatches I've filed.
|
||||
</p>
|
||||
|
||||
{{else}}
|
||||
<div class="mt-6 rounded-3xl bg-[color:var(--card)] border-2 border-[color:var(--ink)]/10 p-6 shadow-pete">
|
||||
<p class="text-sm text-[color:var(--ink)]/60">
|
||||
<div class="mt-6 rounded-3xl bg-card border-2 border-ink/10 p-6 shadow-pete">
|
||||
<p class="text-sm text-muted">
|
||||
{{if .Standings.Known}}
|
||||
Nobody on the board yet. Make a character and it fills up.
|
||||
{{else}}
|
||||
@@ -89,16 +89,16 @@
|
||||
{{/* Pete keeps score on himself. He can be hired onto an expedition and he
|
||||
duels; a paper that ranks everybody else and quietly leaves itself off the
|
||||
table is doing something slightly dishonest. */}}
|
||||
<section class="mt-8 rounded-3xl bg-[color:var(--card)] border-2 border-theme-adventure/30 p-6 shadow-pete">
|
||||
<section class="mt-8 rounded-3xl bg-card border-2 border-theme-adventure/30 p-6 shadow-pete">
|
||||
<h2 class="font-display text-xl font-bold">And my own record, since you asked</h2>
|
||||
{{if .Standings.PeteFought}}
|
||||
<p class="mt-2 text-sm text-[color:var(--ink)]/70">
|
||||
<p class="mt-2 text-sm text-muted">
|
||||
<span class="font-semibold text-theme-adventure tabular-nums text-lg">{{.Standings.PeteWins}}</span> won,
|
||||
<span class="font-semibold tabular-nums text-lg">{{.Standings.PeteLosses}}</span> lost.
|
||||
I file those myself, which you're welcome to hold against me.
|
||||
</p>
|
||||
{{else}}
|
||||
<p class="mt-2 text-sm text-[color:var(--ink)]/60">
|
||||
<p class="mt-2 text-sm text-muted">
|
||||
No bouts yet. I'll report them when there are, wins and the other kind.
|
||||
</p>
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user