From cd96169ec6c4ad0c10a559699dc6dba34caca224 Mon Sep 17 00:00:00 2001 From: Julkar Naen Nahian Date: Wed, 9 Sep 2026 18:48:29 +0600 Subject: [PATCH 1/2] refactor(web): give every card a .frost class, and make the blur work again MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The blur was already applied, as a hand-maintained selector list in global.css. A new card had to be added to that list to get frosted, which is how .cta__panel, .step and .clog__cta ended up without it, and how .arch__card, .req__card and .scut__row stayed on it long after the rules they named were deleted. Replace the list with a .frost class carried in the markup. .btn, .pill and .cta__code stay on the rule: they always frost and are not cards, so tagging every call site would be noise. Faq.astro's hand-rolled copy of the same two declarations goes away with it. Finding the cards by name missed two of them — .step and .clog__cta are card-shaped but named neither *card* nor *panel*, and .clog__cta is gradient-backed so it does not match on `background: var(--surface)` either. They were found by shape instead: border-radius plus a 1px border. The blur itself had stopped rendering outside Safari. esbuild's CSS minifier treats backdrop-filter and -webkit-backdrop-filter as one property and keeps whichever is written last; every declaration here was written standard-first, so the build shipped only the prefixed form — which Chrome has since removed and Firefox never had. The built CSS carried 0 unprefixed declarations against 5 prefixed, and Chrome's parser dropped them all, taking the nav glass, .filter and .qa-list with it. Swap all five pairs to prefix-first so the standard property survives. Safari <18 loses the blur, where before everyone but Safari had. The order reads like a typo, so it is commented where it lives and noted in web/CLAUDE.md for the two scoped blocks far from that comment. Verified in Chrome 152 against the built output: nav is back to blur(18px) saturate(1.6), every card computes blur(2px), and a diff of the built HTML against main shows no card lost the class and three gained it. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01WqUXC6nL5bayNL1cTrnFzw --- web/CLAUDE.md | 9 +++++++- web/src/components/ChangelogEntry.astro | 2 +- web/src/components/DocsNav.astro | 2 +- web/src/components/Faq.astro | 4 +--- web/src/components/FeatureGrid.astro | 2 +- web/src/components/FinalCta.astro | 2 +- web/src/components/Nav.astro | 2 +- web/src/components/RelatedDocs.astro | 2 +- web/src/components/RemoteShowcase.astro | 2 +- web/src/components/RenderShowcase.astro | 2 +- web/src/pages/changelog.astro | 2 +- web/src/pages/docs.astro | 6 ++--- web/src/styles/global.css | 29 ++++++++++++++----------- 13 files changed, 37 insertions(+), 29 deletions(-) diff --git a/web/CLAUDE.md b/web/CLAUDE.md index e4ab446..553f5d7 100644 --- a/web/CLAUDE.md +++ b/web/CLAUDE.md @@ -88,7 +88,14 @@ shipped belongs in the app's `CHANGELOG.md` only. blocks over the custom properties in `src/styles/global.css`. Don't reach for Tailwind, a component library, or a client-side framework — there is no client-side JS framework here on purpose, and shared patterns (`.card`, - `.pill`, `.btn`, `.tok`) already exist in `global.css`. + `.frost`, `.pill`, `.btn`, `.tok`) already exist in `global.css` — `.frost` is + the blur every card carries, so reach for it rather than hand-rolling another + `backdrop-filter`. +- **Write `-webkit-backdrop-filter` before the unprefixed property**, here and in + `Nav.astro` / `DocsNav.astro`. esbuild's minifier treats the pair as one + property and keeps the one written last, so standard-first ships only the + prefix — which Chrome has removed and Firefox never had, silently killing the + blur outside Safari. `global.css` carries the long version of this note. - **Colours, radii, and spacing come from tokens**, so a change lands in one place. A hard-coded hex in a component is a mistake. - **Motion is optional.** Scroll-reveal, parallax, and typing effects must stay diff --git a/web/src/components/ChangelogEntry.astro b/web/src/components/ChangelogEntry.astro index 9f7efb9..c5df636 100644 --- a/web/src/components/ChangelogEntry.astro +++ b/web/src/components/ChangelogEntry.astro @@ -16,7 +16,7 @@ const dot = featured ? "var(--green)" : dots[index] ?? "rgba(255,255,255,0.4)"; style={`--dot:${dot};--reveal-delay:${Math.min(index, 4) * 0.05}s`} > -
+

{release.version}

{release.badge && {release.badge}} diff --git a/web/src/components/DocsNav.astro b/web/src/components/DocsNav.astro index 9eb475f..a74da6d 100644 --- a/web/src/components/DocsNav.astro +++ b/web/src/components/DocsNav.astro @@ -211,8 +211,8 @@ const currentTitle = pages.find((p) => p.id === current)?.data.title ?? "Docs"; /* Nearly opaque, not glass: it parks over screenshots and code blocks, and a light backdrop showed straight through a lower alpha. */ background: rgba(10, 11, 14, 0.95); - backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); + backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); color: var(--muted); font-family: inherit; diff --git a/web/src/components/Faq.astro b/web/src/components/Faq.astro index 5ff3cb2..2647422 100644 --- a/web/src/components/Faq.astro +++ b/web/src/components/Faq.astro @@ -13,7 +13,7 @@ import { faqsHighlight } from "../data/content";

Before you download.

-
+
{ faqsHighlight.map((f) => (
@@ -55,8 +55,6 @@ import { faqsHighlight } from "../data/content"; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); - backdrop-filter: blur(2px); - -webkit-backdrop-filter: blur(2px); overflow: hidden; } .faq__item + .faq__item { diff --git a/web/src/components/FeatureGrid.astro b/web/src/components/FeatureGrid.astro index bf4425d..4873b82 100644 --- a/web/src/components/FeatureGrid.astro +++ b/web/src/components/FeatureGrid.astro @@ -11,7 +11,7 @@ import { highlights } from "../data/content"; { highlights.map((c, i) => (
{c.glyph}
diff --git a/web/src/components/FinalCta.astro b/web/src/components/FinalCta.astro index 301d102..bfeed31 100644 --- a/web/src/components/FinalCta.astro +++ b/web/src/components/FinalCta.astro @@ -4,7 +4,7 @@ import Icon from "./Icon.astro"; ---
-
+

Free, open source,
and unmistakably Mac.

diff --git a/web/src/components/Nav.astro b/web/src/components/Nav.astro index c1df868..2b4e78d 100644 --- a/web/src/components/Nav.astro +++ b/web/src/components/Nav.astro @@ -111,8 +111,8 @@ const linkIcon: Record = { right: 0; z-index: 50; padding-block: 14px; - backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); + backdrop-filter: blur(18px) saturate(160%); background: rgba(10, 11, 14, 0); border-bottom: 1px solid rgba(255, 255, 255, 0); transition: background 0.35s ease, border-color 0.35s ease; diff --git a/web/src/components/RelatedDocs.astro b/web/src/components/RelatedDocs.astro index 9f429f7..2e08c8d 100644 --- a/web/src/components/RelatedDocs.astro +++ b/web/src/components/RelatedDocs.astro @@ -35,7 +35,7 @@ const pages = (related ?? []).map((id) => {

Where to go next

{pages.map((p) => ( - + {p.data.title} {p.data.summary} diff --git a/web/src/components/RemoteShowcase.astro b/web/src/components/RemoteShowcase.astro index e97485d..8d2b3dd 100644 --- a/web/src/components/RemoteShowcase.astro +++ b/web/src/components/RemoteShowcase.astro @@ -3,7 +3,7 @@ ---
-
+
REMOTE FOLDERS

Your server's docs, on your desktop.

diff --git a/web/src/components/RenderShowcase.astro b/web/src/components/RenderShowcase.astro index 7df289e..ce0e4f0 100644 --- a/web/src/components/RenderShowcase.astro +++ b/web/src/components/RenderShowcase.astro @@ -4,7 +4,7 @@ const tags = ["Code copy buttons", "Image lightbox", "Heading anchors"]; ---
-
+
)}
-
+

Update from within the app

Sparkle checks for and installs new releases automatically — or grab the latest build diff --git a/web/src/pages/docs.astro b/web/src/pages/docs.astro index 1d02c23..b1cef53 100644 --- a/web/src/pages/docs.astro +++ b/web/src/pages/docs.astro @@ -75,7 +75,7 @@ const steps = [

-
+
New to Reader.md?
@@ -85,7 +85,7 @@ const steps = [
    {steps.map((s, i) => ( -
  1. +
  2. {i + 1}
    {s.title}

    @@ -103,7 +103,7 @@ const steps = [ {pages.map((p) => ( diff --git a/web/src/styles/global.css b/web/src/styles/global.css index e84fdf3..f674857 100644 --- a/web/src/styles/global.css +++ b/web/src/styles/global.css @@ -147,19 +147,22 @@ pre { border: 1px solid var(--border); } -/* Frost every card-like surface so text stays readable over the dot grid. */ -.card, -.fcard, -.entry__card, -.arch__card, -.req__card, -.showcase__panel, -.cta__code, -.scut__row, +/* Frosts a surface so text stays readable over the dot grid. Cards carry + .frost as a class in the markup; .btn, .pill and .cta__code always frost, so + they take it here rather than repeating the class at every call site. + + The -webkit- line comes FIRST here and at every other backdrop-filter in this + site, and the order is load-bearing: esbuild's CSS minifier treats the two as + one property and keeps whichever is written last. Standard-first therefore + ships only the prefix, which Chrome has since removed and Firefox never had — + the blur silently dies everywhere but Safari. Prefix-first keeps the standard + property, and Safari <18 loses the blur rather than everyone else. */ +.frost, .btn, -.pill { - backdrop-filter: blur(2px); +.pill, +.cta__code { -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); } /* Pills / badges */ @@ -548,8 +551,8 @@ pre { border-radius: 18px; border: 1px solid var(--border); background: var(--surface); - backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); overflow: hidden; } @@ -630,8 +633,8 @@ pre { border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); - backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); } .filter:focus-within { From 6af963b25f3787388a652313aad6ea191a0622e5 Mon Sep 17 00:00:00 2001 From: Julkar Naen Nahian Date: Wed, 9 Sep 2026 19:50:35 +0600 Subject: [PATCH 2/2] feat(web): wrap the docs rail in a card MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The rail was the one navigation surface on the site drawn as bare text on the page background, while everything beside it — the hub's page grid, the changelog entries, the FAQ — sat on a card. It reuses the shared patterns rather than restating them: .card carries the radius, surface and border, .frost the blur, and the only new declaration is the rail's own padding. The card goes on .docsnav rather than on .docsnav__panel inside it. .docsnav is the sticky scroll container, so the frame stays put while a long index scrolls within it; on the panel the borders would have scrolled out of view with the content. Below 900px it is undone. There the rail collapses to a single control and .docsnav__toggle already carries its own deliberately opaque surface, so a card would frame a button that is one already. The blur has to be undone by hand with it: .frost is a class, not a media query, and over a transparent box it would smear a band of the article behind the toggle. Checked in Chrome at three states — desktop, mobile collapsed, mobile open — plus a short viewport where the index overflows and scrolls inside the frame. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01WqUXC6nL5bayNL1cTrnFzw --- web/src/components/DocsNav.astro | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/web/src/components/DocsNav.astro b/web/src/components/DocsNav.astro index a74da6d..d99e6ad 100644 --- a/web/src/components/DocsNav.astro +++ b/web/src/components/DocsNav.astro @@ -32,7 +32,7 @@ const currentTitle = pages.find((p) => p.id === current)?.data.title ?? "Docs"; {/* Below 900px the rail is a stacked block, and every page opened with a fourteen-page index plus this page's own sections above the first paragraph. There it collapses into one sticky control instead. */} -