Revert the last two glass iterations

The colourful blob wash (92fe685) and the flat "straight ice" pass
(5d05592) both missed. Reverting both to get back to the icon-driven
navy palette before rebuilding the look as a proper frosted ice glass
design.
This commit is contained in:
Martin Dvořák 2026-10-08 09:27:42 +00:00
commit 586e4b5a40
2 changed files with 122 additions and 87 deletions

View file

@ -112,11 +112,10 @@ no database, no data leaving your machine except the requests you send to Ollama
list with per-folder counts, Settings/Dark mode pinned to the bottom). It **collapses** to a 68px
icon rail (remembered in `localStorage`) and becomes a slide-in **drawer** behind a hamburger on
phones; mobile also keeps the frosted header + iOS tab bar
- **One palette pulled from the app icon, both themes**: light page `#eef3fa` (pale ice) /
sidebar and cards frosted white / border `#dce4f1`; dark page `#121a2c` / sidebar `#0c1322` /
surfaces `#1a2337` / border `rgba(255,255,255,.1)`. Surfaces are frosted glass — translucent with
`backdrop-blur`, a bright 1px edge and a light-from-above sheen — over a flat backdrop with a
single faint highlight.
- **One navy palette pulled from the app icon, both themes**: light page `#f4f7fd` / sidebar
`#e9eff9` / border `#dce4f1`; dark page `#0e1424` / sidebar `#0a0f1c` / surfaces `#171f33` /
border `rgba(255,255,255,.12)`. Surfaces are frosted glass (translucent + `backdrop-blur`) over
the icon's navy backdrop.
Text tiers are documented AA ratios (see below), and the cards fill the row with
`repeat(auto-fill, minmax(280px, 1fr))` — no stranded cards, no dead space
- Deck cards: title → muted metadata → neutral tags (difficulty carries the only colour:
@ -728,11 +727,10 @@ Things I chose while building, with the reasoning:
have no `folderId`), deleting a folder re-homes its decks instead of deleting them, and folder
names travel in exports so an imported deck lands where it came from. 13 browser checks cover
create → freeze → move → rename → delete → reload → import.
18. **The visual language is frosted ice, with restraint.** The icon's blue is the one accent
colour driving buttons and highlights; the backdrop is flat with a single faint top highlight,
and surfaces — sidebar, cards, chrome, sheets — are translucent glass with a bright edge and a
soft sheen. Colour appears in activity tints and semantic feedback only — pretty, but still
readable and quiet.
18. **The visual language is glassmorphism, with restraint.** The icon's blue is the one accent
colour driving buttons and highlights; the backdrop is a navy wash; surfaces — sidebar, cards,
chrome, sheets — are frosted and translucent. Colour appears in activity tints and semantic
feedback only — pretty, but still readable and quiet.
19. **Custom CSS lives in `@layer components`, and glass uses Tailwind's backdrop utilities.**
Two build-level traps, both found by looking at real screenshots: unlayered rules beat Tailwind
utilities (which silently broke `fixed` on the feed), and a hand-written `backdrop-filter` gets
@ -752,11 +750,10 @@ Things I chose while building, with the reasoning:
pill CTAs, 18px radii and restrained shadows; the sidebar, cards and chrome are translucent
glass over the backdrop. Deck cards got real hierarchy: title → muted metadata → tags → summary
→ secondary Study CTA, with secondary actions behind a quiet menu.
23. **One fixed backdrop layer, deliberately almost flat.** The decorative wash used to be
23. **One fixed backdrop layer instead of per-page blobs.** The decorative wash used to be
rendered inside the content column, so on wide screens it was clipped into a visible hard edge.
It now lives in a single `position: fixed` layer (`.app-backdrop`, `z-index: -10`): a flat ice
or navy base plus one faint highlight at the top — just enough for the glass to catch, without
turning into a gradient soup. `body`'s colour matches it so mobile overscroll shows no seam.
It now lives in a single `position: fixed` layer (`.app-backdrop`, `z-index: -10`) in the
icon's navy and blue, and `body`'s colour matches its bottom so mobile overscroll shows no seam.
24. **The UI was deliberately made quieter.** One accent colour (`accent-*`), a desaturated
`frost-*` scale, hairline borders and flat surfaces replaced the saturated gradients and the
seven-colour activity badges. Semantic colours (green/amber/red) survive only where they carry
@ -792,8 +789,9 @@ Things I chose while building, with the reasoning:
Desktop keeps the designed 12–14px field sizes.
31. **The app icon drives the palette.** The navy rounded-square artwork in
`assets/app-icon-source.jpeg` is the source of truth: `frost-*` is navy-tinted, the accent is
the snowflake blue, the primary CTA is the icon blue (deep in light mode, bright in dark), and
every icon/splash/favicon is rendered from it by `scripts/make-icons.mjs`. The sidebar, header, key gate, empty state and install sheet all show
the snowflake blue, the backdrop is the same navy wash, the primary CTA is the icon blue (deep
in light mode, bright in dark), and every icon/splash/favicon is rendered from it by
`scripts/make-icons.mjs`. The sidebar, header, key gate, empty state and install sheet all show
the real artwork instead of the old monochrome snowflake tile.
14. **`gpt-oss:120b` does all content work — but it cannot read images** (`this model does not
support image input`), so `VISION_MODEL` has to stay a multimodal model (`gemma4:31b-cloud`).