luna/catacomb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web UI: "cinematheque" reskin — embedded editorial fonts + atmosphere + motion

Browse source 
A presentational redesign of the web SPA, appended as a design layer so it
overrides by source order while every colour still flows through the existing
7 per-theme CSS variables — so all 10 themes inherit it and no element
id/class the JS relies on changes.

- Typography: embed Instrument Serif (display) + Hanken Grotesk (body) as
  base64 woff2 (SIL OFL) — offline-safe, no CDN, no privacy leak. Serif
  wordmark/headers/empty-state; clean grotesque for UI.
- Identity: a glowing crimson "recording" dot before the wordmark; a soft
  accent aurora + fine SVG film-grain fixed behind content (negative z, so
  it never sits under text).
- Depth & motion: translucent blurred masthead with a hairline accent
  underglow; cinematic card hover (lift + accent ring + thumbnail zoom +
  shadow); one-time staggered shell reveal; themed focus rings; thin themed
  scrollbars; restrained button hover (no full crimson flood). Honours
  prefers-reduced-motion.

Verified: JS still passes node --check, release builds clean, and a headless
chromium screenshot of the live 8081 server confirms it renders (fonts +
atmosphere + masthead) without breaking the existing layout.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Luna 2026-06-16 16:34:57 -07:00
parent 983864f421
commit c8cb700f7e
1 changed files with 120 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

120
src/web_ui/index.html
View file

File diff suppressed because one or more lines are too long