fabi/EventSnap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
v0.18.1
EventSnap/frontend/src/tailwind-theme.css
MechaCat02 eb0e405562 fix: gate uploads on keepsake headroom, and close five unattended-event gaps 
The box is 2 vCPU / 4 GB / 40 GB, not the 4 vCPU / 8 GB / 80 GB that the audit,
the committed comments and README's sizing section all assumed. That correction
is what the first change is about; the rest are the remaining pre-event items.

THE ARCHIVE COULD BECOME UNBUILDABLE WHILE UPLOADS KEPT SUCCEEDING

`required_free_bytes` is `media × 1.1 × 2` — the ZIP and the HTML viewer are each
gallery-sized — and the export preflight also wants DISK_RESERVE_BYTES on top. The
upload gate, though, only refused below a FLAT 10 GB reserve. On 40 GB that let
uploads run to ~25 GB of media while a release needed `2.2 × 25 + 10` = 65 GB free.
Every upload in that band succeeded and the keepsake could then never be built: the
product's entire promise, failing silently at the end of the night with nobody there.

The gate now enforces the invariant that actually matters — never accept an upload
that would make the keepsake unbuildable — sharing `required_free_bytes` with the
preflight so the two cannot drift into disagreeing about the same question. Uploads
stop at ~8 GB of media on this disk, with a German message naming the cause.
Refusing the 1001st photo beats losing all 1000.

`media_total.rs` backs it: SUM(user.total_upload_bytes) over ~100 rows, cached 5s,
rather than `estimate_export_bytes`'s join across every upload. It counts hidden and
banned users' bytes, which the export excludes — skew in the SAFE direction, so the
gate closes marginally early rather than late. Fails open on a query error.

A test pins the gate against the preflight across the whole gallery-size range, and
a second asserts the per-user floor alone would over-commit the volume — i.e. that
the global gate is what must bind.

THE WATCHDOG ABORTED HEALTHY UPLOADS EVERY TIME A PHONE WAS POCKETED

`Date.now()` advances while a backgrounded phone is frozen but `setInterval` does
not, so the first tick after a screen lock read the whole sleep as silence and
aborted — re-sending a video from byte zero and burning one of five PERMANENT
auto-attempts. The interval is now its own suspension detector: a tick that arrives
125s late for a 5s schedule credits that window back, because a period the watchdog
could not observe is not evidence of silence.

Chosen over a `visibilitychange` listener, which only covers causes that fire that
event — a throttled-but-visible tab, a closed lid and an occluded window all freeze
timers without one — and which would have needed module state, an SSR guard and a
teardown for strictly less coverage. `performance.now()` was rejected because Safari
pauses it across system sleep on some paths and Chrome does not.

The credit buys one fresh window, not immunity: a socket iOS reaped while
backgrounded still aborts ~90s after resume rather than hanging for `xhr.timeout`
(5-60 min) with the queue's `processing` latch held.

Two latent leaks found while in there: `xhr.abort()` on a request already in
readyState DONE emits no `abort` event, so `settle()` never ran and the interval
re-aborted every 5s forever while `activeUploads` kept a stale entry (the ✕ button
silently stopped working); and a synchronous throw from `xhr.send` — a blob whose
backing store the OS purged — leaked the same way. Both closed.

OKLCH MADE THE DELETE BUTTON INVISIBLE ON SAMSUNG'S DEFAULT BROWSER

red/amber/green were never in the @theme block and fell through to Tailwind v4's
`oklch()` defaults, which Safari <15.4, Chrome <111 and Samsung Internet <22 cannot
parse: `var(--color-red-600)` is then invalid at computed-value time, `background-color`
falls back to transparent, and `.btn-danger` renders white text on nothing. Pinned to
Tailwind's own defaults gamut-mapped to sRGB by Lightning CSS — the converter already
in this pipeline — so modern browsers render exactly what they render today. Verified
against seven hex fallbacks it had already emitted for the /alpha forms. rose and teal
(avatar chips) had the same leak. The app CSS goes from 40 oklch declarations to 0.

Also fixes `--color-purple-950`, which was simply missing: `dark:bg-purple-950/50` on
the host dashboard was rendering default violet on EVERY browser, off-brand.

The keepsake viewer only picks this up on a rebuild, so its committed artefact is
rebuilt here too — still single-file, still zero external references.

A BRICKED BOOT LOOKED LIKE A SPINNER FOREVER

With `ssr = false` the page is empty until the bundle mounts, so a chunk 404 after a
redeploy or a dead uplink left the guest on the boot spinner with no message, no
reload control, and in a standalone PWA no URL bar. A 15s timeout in the existing
nonce'd IIFE (no CSP change) swaps in German copy and a reload button. Deliberately a
timeout rather than feature detection: a SyntaxError in the bundle is invisible to any
capability check. Plus a <noscript>, since there was nothing at all to see without JS.

EVERY 4xx WAS INVISIBLE AT ANY LOG LEVEL

tower_http counts 4xx as a success, so it logs at DEBUG while production runs at info.
If guests spend the evening hitting 429s or 413s, the post-event logs said nothing.
Now one WARN per client error; 5xx excluded because Internal already logs its source
chain and the pool-exhaustion 503 logs at construction.

A DEAD FRONTEND SERVED A BLANK 502

`handle_errors 5xx` with an inline German page (the caddy service mounts only the
Caddyfile, so there is no volume to ship a static file through). Verified empirically
against this config, not from documentation: an upstream 404 through `reverse_proxy`
still arrives as untouched `application/json`, and only a dial failure renders the
page. That mattered — the keepsake download navigates a hidden iframe and DEPENDS on a
real 404/429 arriving, and swallowing those would have been worse than the blank 502.

CONFIG CORRECTIONS FOR THE REAL HARDWARE

DATABASE_MAX_CONNECTIONS 30 → 15: sized to 2 vCPU rather than to the guest count.
Since migration 024 a feed page costs well under a millisecond, so connections are no
longer spent waiting, and 30 backends crowd the db container's 1 GB on a 4 GB host.
COMPRESSION_WORKER_CONCURRENCY stays at 2 — the merged heavy-image permit already
serialises anything over 150 MiB, so the "two 48 MP photos" worst case that number was
sized against is unreachable; dropping to 1 would halve light-path throughput and push
more feed tiles onto full-size originals. README's sizing section rewritten for the
actual disk.

Verified: 149/149 backend tests against a live Postgres, clippy clean, 57/57 vitest,
svelte-check 0 errors, eslint clean, vite build, export-viewer rebuild, caddy validate,
compose YAML parse.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-08 22:07:56 +02:00

235 lines
10 KiB
CSS
Raw Permalink Blame History

/* Shared design tokens for the live app and the offline HTML-viewer export.
* Both `frontend/src/app.css` and `frontend/export-viewer/src/app.css` import this file
* so the keepsake stays visually in sync with the live app. Edit tokens here, rebuild
* the export-viewer, and re-commit `backend/static/export-viewer/`.
*
* Tailwind v4 reads `@theme` blocks to populate utility classes; everything declared
* here becomes a `bg-primary`, `text-accent`, `rounded-card`, etc.
*
* ── DESIGN LANGUAGE: "Warm & celebratory" ──────────────────────────────────
* The whole product exists to relive an event together, so the palette is a
* wedding-invitation one: warm ivory paper, warm-charcoal ink, a dusty-rose
* brand and champagne-gold accent. Headings are set in Fraunces (an elegant
* display serif); body copy in Inter. Both are self-hosted (see @font-face
* below) because the CSP is `font-src: 'self'` and the keepsake runs offline.
*
* The bulk of the app was authored in raw Tailwind classes (`bg-gray-900`,
* `text-blue-600`, …). Rather than touch 900+ class usages, we REMAP the
* underlying Tailwind ramps here so the warmth cascades everywhere:
* gray → warm "sand" neutrals
* blue → dusty-rose brand
* purple → champagne gold (hashtag chips / accents)
* Semantic red / green / amber keep their meaning and stay close to default.
*/
@import 'tailwindcss';
/* Class-based dark variant. Tailwind v4 defaults to `prefers-color-scheme`; we want
* the user's explicit selection (saved in `theme-store.ts`) to win, so we re-bind
* the `dark:` variant to apply whenever `<html>` has the `dark` class.
* `:where(...)` keeps the specificity low so existing utilities still override. */
@custom-variant dark (&:where(.dark, .dark *));
/* ── Self-hosted fonts (variable woff2, latin subset covers German umlauts) ── */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/Inter.woff2') format('woff2');
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/Fraunces.woff2') format('woff2');
}
@theme {
/* ── Type ─────────────────────────────────────────────────────────────── */
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', 'Courier New', monospace;
/* ── Brand: champagne / antique gold — the "signal" colour (remaps `blue-*`)
* Wedding research: treat gold as the signal (brand, primary CTA, active
* state, key highlights); let silver/greys carry the system. `600` is a deep
* antique gold so white button text clears WCAG AA. */
--color-blue-50: #faf6ea;
--color-blue-100: #f3ead0;
--color-blue-200: #e8d6a3;
--color-blue-300: #d8bd73;
--color-blue-400: #c6a24a;
--color-blue-500: #ab8433;
--color-blue-600: #8a6a2b; /* primary buttons / FAB / active tab — white text passes AA */
--color-blue-700: #6f5523;
--color-blue-800: #59441e;
--color-blue-900: #493819;
--color-blue-950: #29200d;
/* Semantic aliases so new work can use `bg-primary` intentionally. Full ramp
* (mirrors the gold `blue-*` values) so `@apply` in the component layer can
* reference any shade — a partial ramp hard-fails `@apply bg-primary-900`. */
--color-primary-50: #faf6ea;
--color-primary-100: #f3ead0;
--color-primary-200: #e8d6a3;
--color-primary-300: #d8bd73;
--color-primary-400: #c6a24a;
--color-primary-500: #ab8433;
--color-primary-600: #8a6a2b;
--color-primary-700: #6f5523;
--color-primary-800: #59441e;
--color-primary-900: #493819;
--color-primary-950: #29200d;
/* ── Accent: same champagne gold (remaps `purple-*` / `violet-*`) so hashtag
* chips + badges share the one signal colour rather than a competing hue. */
--color-purple-50: #faf6ea;
--color-purple-100: #f3ead0;
--color-purple-200: #e8d6a3;
--color-purple-300: #d8bd73;
--color-purple-400: #c6a24a;
--color-purple-500: #ab8433;
--color-purple-600: #8a6a2b;
--color-purple-700: #6f5523;
--color-purple-800: #59441e;
--color-purple-900: #493819;
/* The ramp stopped at 900 while blue/primary both run to 950, so
* `dark:bg-purple-950/50` (routes/host/+page.svelte) fell through to Tailwind's default
* violet — off-brand on every browser, modern ones included. Mirrors `--color-blue-950`. */
--color-purple-950: #29200d;
--color-violet-500: #ab8433;
--color-violet-600: #8a6a2b;
--color-accent-500: #ab8433;
--color-accent-600: #8a6a2b;
/* ── Semantic: red / amber / green ───────────────────────────────────────────
* PINNED TO HEX rather than inherited. Tailwind v4 ships these families as
* `oklch()`, which Safari <15.4, Chrome <111 and Samsung Internet <22 (the default
* browser on Samsung phones) cannot parse. The declaration is accepted but
* `var(--color-red-600)` is then invalid at computed-value time, so `background-color`
* falls back to `initial` — transparent — and `.btn-danger` in the component layer
* renders white text on nothing. An invisible delete-confirm button.
*
* Note this is NOT the `@apply` hard-fail described for `primary` above: these families
* have Tailwind defaults, so an unpinned stop does not break the build, it silently
* reverts to oklch. Full 50-950 ramps are therefore about closing that silent-leak class
* permanently, not about compiling.
*
* Values are Tailwind 4.2.2's own defaults gamut-mapped to sRGB by Lightning CSS — the
* same converter already in this build pipeline, which is why they match the hex
* fallbacks it emits for the `/alpha` opacity forms (verified against `#bf000f`,
* `#460809`, `#461901`, `#032e15`, `#82181a`, `#ffa3a3`, `#0d542b` in the shipped CSS).
* Naive channel clipping gives different, wrong values for the out-of-gamut stops.
* Modern browsers therefore render exactly what they render today. */
--color-red-50: #fef2f2;
--color-red-100: #ffe2e2;
--color-red-200: #ffcaca;
--color-red-300: #ffa3a3;
--color-red-400: #ff6568;
--color-red-500: #fb2c36;
--color-red-600: #e40014;
--color-red-700: #bf000f;
--color-red-800: #9f0712;
--color-red-900: #82181a;
--color-red-950: #460809;
--color-amber-50: #fffbeb;
--color-amber-100: #fef3c6;
--color-amber-200: #fee685;
--color-amber-300: #ffd236;
--color-amber-400: #fcbb00;
--color-amber-500: #f99c00;
--color-amber-600: #dd7400;
--color-amber-700: #b75000;
--color-amber-800: #953d00;
--color-amber-900: #7b3306;
--color-amber-950: #461901;
--color-green-50: #f0fdf4;
--color-green-100: #dcfce7;
--color-green-200: #b9f8cf;
--color-green-300: #7bf1a8;
--color-green-400: #05df72;
--color-green-500: #00c758;
--color-green-600: #00a544;
--color-green-700: #008138;
--color-green-800: #016630;
--color-green-900: #0d542b;
--color-green-950: #032e15;
/* Avatar chips (lib/avatar.ts) — same oklch problem, same fix. Only the stops those
* chips actually use; nothing else in the app references rose or teal. */
--color-rose-100: #ffe4e6;
--color-rose-200: #ffccd3;
--color-rose-700: #c20039;
--color-rose-900: #8b0836;
--color-teal-100: #cbfbf1;
--color-teal-200: #96f7e4;
--color-teal-700: #00776e;
--color-teal-900: #0b4f4a;
/* ── Neutrals: pearl → silver → graphite (remaps `gray-*`). Whisper-warm
* pearl at the light end (research: "warm pearl, not stark white"), turning
* neutral-cool through the mids/darks so structure reads as silver, not sand. */
--color-gray-50: #faf9f7; /* soft pearl — light page background */
--color-gray-100: #f2f1ef; /* light silver — muted surfaces */
--color-gray-200: #e5e4e1; /* silver borders / dividers */
--color-gray-300: #d1cfcc;
--color-gray-400: #a6a4a1; /* silver — placeholder / disabled icon */
--color-gray-500: #767471; /* secondary text (AA on pearl) */
--color-gray-600: #545350;
--color-gray-700: #3b3a38; /* graphite — dark-mode borders */
--color-gray-800: #262524; /* dark-mode cards */
--color-gray-900: #1a1918; /* ink (light) / dark surface */
--color-gray-950: #100f0f; /* darkest — dark-mode page background */
/* Surface aliases (kept from the original tokens for the export viewer). */
--color-surface-0: #ffffff;
--color-surface-50: #faf9f7;
--color-surface-100: #f2f1ef;
--color-surface-200: #e5e4e1;
/* ── Radii — softer, keepsake-y corners ───────────────────────────────── */
--radius-card: 1rem; /* rounded-card */
--radius-sheet: 1.5rem; /* rounded-sheet */
/* ── Elevation — soft, cool-neutral shadows (remaps Tailwind shadow ramp) ─ */
--shadow-2xs: 0 1px 2px 0 rgba(28, 28, 35, 0.05);
--shadow-xs: 0 1px 3px 0 rgba(28, 28, 35, 0.06);
--shadow-sm: 0 2px 6px -1px rgba(28, 28, 35, 0.07), 0 1px 2px -1px rgba(28, 28, 35, 0.05);
--shadow-md: 0 6px 16px -4px rgba(28, 28, 35, 0.09), 0 2px 6px -2px rgba(28, 28, 35, 0.06);
--shadow-lg: 0 12px 28px -6px rgba(28, 28, 35, 0.1), 0 4px 10px -4px rgba(28, 28, 35, 0.07);
--shadow-xl: 0 24px 48px -12px rgba(28, 28, 35, 0.16), 0 8px 16px -8px rgba(28, 28, 35, 0.09);
}
/* Baseline body background + text colour so pages that haven't been re-themed yet
* at least don't render light-on-light or dark-on-dark. Pages and cards still set
* their own backgrounds via `bg-*` utilities, but this catches any gaps. */
@layer base {
html {
background-color: #faf9f7; /* soft pearl (bg-gray-50) */
color: #1a1918; /* ink (text-gray-900) */
color-scheme: light;
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
html.dark {
background-color: #100f0f; /* graphite near-black (bg-gray-950) */
color: #f2f1ef; /* light silver (text-gray-100) */
color-scheme: dark;
}
/* Headings wear the display serif by default. Individual headings can still
* opt out with `font-sans`; the brand wordmark opts in via `.font-display`. */
h1,
h2,
h3 {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.015em;
}
}
Reference in New Issue View Git Blame Copy Permalink