From 9d1e6c62966c08ebc8e27af5b829014540d266c8 Mon Sep 17 00:00:00 2001 From: Ronald Tse Date: Thu, 16 Jul 2026 13:55:20 +0800 Subject: [PATCH 1/4] fix(design): prose dark-mode + editorial typography overhaul Headings on content pages (about, concepts, blog, library, specs, adopt) were invisible in dark mode because templates applied "prose prose-pubid" but prose-pubid was never defined as a custom typography theme. Tailwind's default prose tokens (light-mode-only) were used, leaving h1/h2/h3 with dark text on a dark background. Fix by overriding .prose directly with semantic color tokens that already swap correctly under [data-theme=dark]. Drop the dead prose-pubid class from all content templates. Design polish (technical-editorial aesthetic): - Newsreader Variable for serif body, JetBrains Mono Variable for code - Deeper dark palette (#0b0d12 bg, #eceef2 text) for richer contrast - Atmospheric gradient mesh + subtle noise texture on body - Display-serif headings with balanced text-wrap - Refined blockquotes, code chips, hairline tables - Eyebrow label on all content pages for editorial structure - Header: top accent strip, logo hover glow, brand-colored ID - Remove duplicate h1 from concepts template (markdown already has one) --- package-lock.json | 20 +++ package.json | 2 + src/components/Header.astro | 30 ++-- src/pages/about.astro | 3 +- src/pages/adopt/[...slug].astro | 3 +- src/pages/adopt/index.astro | 3 +- src/pages/blog/[...slug].astro | 16 +- src/pages/concepts/[slug].astro | 4 +- src/pages/library/[...slug].astro | 3 +- src/pages/library/index.astro | 3 +- src/pages/specs/[...slug].astro | 3 +- src/pages/specs/index.astro | 3 +- src/styles/global.css | 238 +++++++++++++++++++++++++++++- 13 files changed, 296 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index df7a2c8..f1f1513 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,8 @@ "@astrojs/vue": "^7.0.1", "@fontsource-variable/fraunces": "^5.2.9", "@fontsource-variable/inter-tight": "^5.2.7", + "@fontsource-variable/jetbrains-mono": "^5.2.8", + "@fontsource-variable/newsreader": "^5.2.10", "@tailwindcss/typography": "^0.5.20", "@tailwindcss/vite": "^4.3.2", "astro": "^7.0.7", @@ -1721,6 +1723,24 @@ "url": "https://github.com/sponsors/ayuhito" } }, + "node_modules/@fontsource-variable/jetbrains-mono": { + "version": "5.2.8", + "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz", + "integrity": "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, + "node_modules/@fontsource-variable/newsreader": { + "version": "5.2.10", + "resolved": "https://registry.npmjs.org/@fontsource-variable/newsreader/-/newsreader-5.2.10.tgz", + "integrity": "sha512-MdI2iRwrqWpMOU/2aV2BgfZ4dJNlj/XlYaY8Zb7t87mWqHskYW0XiUANkt1cyOCiEfW2VQ0bQ5vZgGPp6B2B4w==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@img/colour": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz", diff --git a/package.json b/package.json index 521967b..90ed089 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,8 @@ "@astrojs/vue": "^7.0.1", "@fontsource-variable/fraunces": "^5.2.9", "@fontsource-variable/inter-tight": "^5.2.7", + "@fontsource-variable/jetbrains-mono": "^5.2.8", + "@fontsource-variable/newsreader": "^5.2.10", "@tailwindcss/typography": "^0.5.20", "@tailwindcss/vite": "^4.3.2", "astro": "^7.0.7", diff --git a/src/components/Header.astro b/src/components/Header.astro index 26416d6..198f1e3 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -13,22 +13,30 @@ const nav = [ ] --- -
-
- - PubID - PubID +
+ +
+ +
+ + + PubID + + + + PubID + -