dvorakmortonxd/freezmo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Thin frosted Aero glass, boot-theme fix, latest background revision

Browse source 
The white surfaces were reading as a milky white panel (a card top was
~71% white). The frosted recipes now use a 14% base veil plus the gloss
over the pre-blurred wallpaper, small chrome (rows, chips, segments,
buttons) keeps a touch more veil, and nothing nested inside a sheet or
dialog uses the viewport-aligned layer (it showed the raw dark water
under the settings theme labels at 1.5:1 — nested chrome falls back to
the flat fills over the genuinely blurred sheet).

The first-load text bug was the boot script: its dark test was
`s && !a ? s === 'dark' : matchMedia(...)`, which for a stored aero fell
through to the OS preference, so a dark-preferring machine loaded with
both `dark` and `aero` classes and every `.dark` rule painted over the
wallpaper until a theme toggle re-applied the classes. The stored value
now decides alone; a dark-colorScheme check pins it in the mobile suite
(123 checks).

Background: the user's latest Gemini scene (1280x714) re-encoded to
public/aero/background.webp (206 kB) with a fresh pre-blurred sibling.

Contrast: 0 below-minimum findings, 0 axe violations, all three themes.
Version 0.3.1, SW -> freezmo-v62.
This commit is contained in:
Martin Dvořák 2026-10-13 09:38:29 +00:00
commit c88ad2865a
9 changed files with 122 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

18
README.md
View file

@ -1398,6 +1398,20 @@ Things I chose while building, with the reasoning:
phase-1 suite (43 checks, including the real route mapping against a stub Ollama returning a
monthly-limit body, a two-device sync round-trip, and the generation guards below).
66. **Aero's glass is thin, and the OS dark preference can't leak into it.** Two fixes from one
report ("the white UI should be blurry and transparent; some text is hard to read on first
load, until the theme is toggled"). The text bug was at boot: the inline script's dark test
was `s && !a ? s === 'dark' : matchMedia(...)`, which for a stored `aero` fell through to the
OS preference — so on a dark-preferring machine the page loaded with **both** `dark` and
`aero` classes and every `.dark` rule (starting with `body`'s colour and the segment labels)
painted the dark palette over the bright wallpaper, until a theme toggle re-applied the
classes. The stored value now decides alone and the class is toggled explicitly;
`tests/mobile-test.mjs` pins it with a dark-`colorScheme` browser context. And the surfaces
drop their thick white veils (a card top measured ~71% white) for a 14% base veil plus the
gloss over the pre-blurred wallpaper — the scene is clearly visible through the glass, small
chrome (rows, chips, segments, buttons) keeps slightly more veil, and the pixel-contrast scan
that re-runs in the deploy e2e gate still passes.
65. **Slide content never flex-shrinks, and the AI note appears once.** A long typed answer in a
short-answer activity shrank the textarea inside the slide's flex column (58px instead of its
~82px), clipping the user's text mid-line on a phone; every direct child of a study/review/guide
@ -1415,14 +1429,14 @@ Things I chose while building, with the reasoning:
63. **Frutiger Aero is the third theme.** Settings → Theme offers Light, Dark and Frutiger Aero.
Aero is not a dark/light variant — it replaces the palette and the scene: the wallpaper is a
Frutiger Aero scene made with Gemini (re-encoded to WebP in `public/aero/`), with ten drawn
Frutiger Aero scene made with Gemini (latest 1280x714 revision re-encoded to WebP in `public/aero/`), with ten drawn
bubbles rising over it (`.ice-bubble` — `display: none`
outside aero so they cost nothing elsewhere, still under reduced motion). Buttons and segments
are **liquid glass** — transparent, glossed, with a bright rim — and every surface shows a
**pre-blurred copy of the wallpaper** (`public/aero/background-blur.webp`, 3 kB, glued to the
viewport with `background-attachment: fixed`) instead of blurring the live scene: the bubbles
move behind every surface, so a real `backdrop-filter` re-runs ~60 times a second (measured
66ms/frame at 2x throttle vs 17ms with nothing blurring). The tint and the gloss ride on top of
66ms/frame at 2x throttle vs 17ms with nothing blurring). A thin veil and the gloss ride on top of
that layer, so the look is identical at zero per-frame cost. The helper lines that sit straight
on the wallpaper (the keyboard tip, the AI note) get a small glass chip — dark text on grass
measured 2.5:1. The light/dark