From 55b6de2667af1cc2eb4f89e98b0de1a987f17299 Mon Sep 17 00:00:00 2001 From: Dinesh <13635627+HumbleBee14@users.noreply.github.com> Date: Sun, 12 Jul 2026 16:48:42 -0700 Subject: [PATCH 1/4] Fix undefined --ink-1 token, hardcoded editor red, and a tool-tag contrast miss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - editor-theme.css referenced an undefined --ink-1 (7×) — the color-mix hover tint was silently dead; point at the defined --ink - editor error red was hardcoded #c0392b (muddy on the dark editor surface) — use var(--tc-red) with a color-mix tint - playground/[tool].astro .tool-tag-live was #fff on accent (low contrast in dark) — use var(--paper) --- src/pages/playground/[tool].astro | 2 +- src/write/editor/editor-theme.css | 22 +++++++++++----------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/pages/playground/[tool].astro b/src/pages/playground/[tool].astro index 0c1af4f..4f5d821 100644 --- a/src/pages/playground/[tool].astro +++ b/src/pages/playground/[tool].astro @@ -120,7 +120,7 @@ const breadcrumbJsonLd = { border: 1px solid var(--line-2); } .tool-tag-live { - color: #fff; + color: var(--paper); background: var(--accent); border-color: var(--accent); } diff --git a/src/write/editor/editor-theme.css b/src/write/editor/editor-theme.css index 181a6ac..69d3839 100644 --- a/src/write/editor/editor-theme.css +++ b/src/write/editor/editor-theme.css @@ -14,7 +14,7 @@ width: 100%; border: none; background: none; - color: var(--ink-1); + color: var(--ink); font-family: var(--font-sans, 'Geist', sans-serif); font-weight: 700; font-size: clamp(32px, 6vw, 56px); @@ -69,7 +69,7 @@ font-size: 14px; text-transform: none; letter-spacing: normal; - color: var(--ink-1); + color: var(--ink); background: var(--paper-2, var(--paper)); border: 1px solid var(--line-2); border-radius: 6px; @@ -169,7 +169,7 @@ padding: 6px 12px; border: 1px solid var(--line-2); background: var(--paper); - color: var(--ink-1); + color: var(--ink); } .write-ghost, @@ -201,8 +201,8 @@ .write-issues { margin-top: 20px; padding: 14px 18px; - border-left: 3px solid #c0392b; - background: rgba(192, 57, 43, 0.06); + border-left: 3px solid var(--tc-red); + background: color-mix(in srgb, var(--tc-red) 8%, transparent); border-radius: 0 6px 6px 0; font-size: 14px; } @@ -329,7 +329,7 @@ .bn-editor { --bn-font-family: var(--font-read, 'Source Serif 4', serif); background: transparent; - color: var(--ink-body, var(--ink-1)); + color: var(--ink-body, var(--ink)); } .bn-side-menu .mantine-UnstyledButton-root:not(.mantine-Menu-item) svg { @@ -372,7 +372,7 @@ ) { border-radius: 5px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-2) 45%, transparent); - background: color-mix(in srgb, var(--ink-1) 2%, transparent); + background: color-mix(in srgb, var(--ink) 2%, transparent); } .bn-block-content h1, @@ -380,7 +380,7 @@ .bn-block-content h3 { font-family: var(--font-sans, 'Geist', sans-serif); font-weight: 600; - color: var(--ink-1); + color: var(--ink); } .write-block-form, @@ -425,7 +425,7 @@ font-family: inherit; font-size: 14px; background: var(--paper); - color: var(--ink-1); + color: var(--ink); } .write-component textarea, @@ -435,12 +435,12 @@ } .write-input-invalid { - border-color: #c0392b; + border-color: var(--tc-red); } .write-block-error { display: block; - color: #c0392b; + color: var(--tc-red); font-size: 12px; margin-top: 6px; } From c284f7c6eddc9a00c3f790302e2bc3d5046e45dd Mon Sep 17 00:00:00 2001 From: Dinesh <13635627+HumbleBee14@users.noreply.github.com> Date: Sun, 12 Jul 2026 16:52:40 -0700 Subject: [PATCH 2/4] New type system: Fraunces display + Hanken Grotesk UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the Instrument Serif + Geist pairing (the ubiquitous AI-startup default) with a more distinctive, editorial system: - Display/headings: Instrument Serif → Fraunces (characterful old-style serif, optical sizing) - UI/nav/summaries: Geist → Hanken Grotesk (warm humanist grotesque) - Body (articles): Source Serif 4 — kept - Labels/code: JetBrains Mono — kept Updated the font , the --font-* tokens, and the editorial/modern typeset modes. Verified in light + dark on home and blog. Also add a 'First time? See how it works →' link on /write pointing to /contribute, so newcomers get context without cluttering the primary nav. --- src/layouts/BaseLayout.astro | 6 +++--- src/pages/write.astro | 3 +++ src/styles/global.css | 12 ++++++------ src/write/editor/editor-theme.css | 6 +++--- 4 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 02605e6..0fc92bc 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -166,18 +166,18 @@ const siteJsonLd = [ diff --git a/src/pages/write.astro b/src/pages/write.astro index f8821c0..dd801ea 100644 --- a/src/pages/write.astro +++ b/src/pages/write.astro @@ -24,6 +24,9 @@ const repoUrl = SITE.repoUrl;

Write your post, then download it and send it over — by email or pull request.

+

+ First time? See how it works → +

Date: Sun, 12 Jul 2026 16:54:48 -0700 Subject: [PATCH 3/4] Make the topic-tabs scrollbar theme-aware MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The horizontal scrollbar under the homepage topic explorer had an unstyled (white) track. Make the track transparent, theme the thumb with --line-2 (darker --ink-4 on hover), round it, and set scrollbar-color for Firefox — so it reads as a subtle, theme-aware rail instead of a bright white bar. --- src/pages/index.astro | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 195036a..54d8b27 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -328,6 +328,7 @@ const featuredTools = allTools overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; + scrollbar-color: var(--line-2) transparent; -webkit-overflow-scrolling: touch; padding: 4px 0 16px; margin-bottom: 24px; @@ -335,11 +336,17 @@ const featuredTools = allTools scroll-snap-type: x proximity; } .topic-tabs::-webkit-scrollbar { - height: 4px; + height: 6px; + } + .topic-tabs::-webkit-scrollbar-track { + background: transparent; } .topic-tabs::-webkit-scrollbar-thumb { background: var(--line-2); - border-radius: 2px; + border-radius: var(--radius-pill); + } + .topic-tabs:hover::-webkit-scrollbar-thumb { + background: var(--ink-4); } .topic-tab { flex-shrink: 0; From 79bc36f4de36d951db2b2b6b4b395657cd641c72 Mon Sep 17 00:00:00 2001 From: Dinesh <13635627+HumbleBee14@users.noreply.github.com> Date: Sun, 12 Jul 2026 17:18:43 -0700 Subject: [PATCH 4/4] Theme-aware scrollbars on tables/code; OG images use Fraunces - Style the horizontal scrollbars on article tables, KaTeX display math, and code blocks: transparent track (was a bright white default) + token/theme-aware thumb; code blocks get a light low-opacity thumb to suit their fixed-dark background - OG social images now render titles in Fraunces (was Instrument Serif), matching the new site headline font; add @fontsource/fraunces and drop the dead Geist->mono alias in the OG font set --- package-lock.json | 10 ++++++++++ package.json | 1 + src/lib/og.tsx | 25 +++++++++++-------------- src/styles/global.css | 34 ++++++++++++++++++++++++++++++++++ 4 files changed, 56 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index b9a665f..be014f8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@blocknote/core": "^0.51.4", "@blocknote/mantine": "^0.51.4", "@blocknote/react": "^0.51.4", + "@fontsource/fraunces": "^5.2.9", "@fontsource/instrument-serif": "^5.2.8", "@fontsource/jetbrains-mono": "^5.2.8", "@resvg/resvg-js": "^2.6.2", @@ -1617,6 +1618,15 @@ "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==", "license": "MIT" }, + "node_modules/@fontsource/fraunces": { + "version": "5.2.9", + "resolved": "https://registry.npmjs.org/@fontsource/fraunces/-/fraunces-5.2.9.tgz", + "integrity": "sha512-XDzuddBtoC7BZgZdBn6b7hsFZY2+V1hgN7yca5fBTKuHjb/lOd45a0Ji8dTUgFhPoL7RdGupo+bC2BFSt6UH8Q==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@fontsource/instrument-serif": { "version": "5.2.8", "resolved": "https://registry.npmjs.org/@fontsource/instrument-serif/-/instrument-serif-5.2.8.tgz", diff --git a/package.json b/package.json index 1447613..8a79b73 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@blocknote/core": "^0.51.4", "@blocknote/mantine": "^0.51.4", "@blocknote/react": "^0.51.4", + "@fontsource/fraunces": "^5.2.9", "@fontsource/instrument-serif": "^5.2.8", "@fontsource/jetbrains-mono": "^5.2.8", "@resvg/resvg-js": "^2.6.2", diff --git a/src/lib/og.tsx b/src/lib/og.tsx index 2754b4b..a99e540 100644 --- a/src/lib/og.tsx +++ b/src/lib/og.tsx @@ -62,7 +62,7 @@ const SHELL_STYLE: React.CSSProperties = { background: C.paper, padding: '64px 72px', position: 'relative', - fontFamily: 'Geist', + fontFamily: 'Fraunces', }; const BORDER_STYLE: React.CSSProperties = { @@ -111,7 +111,7 @@ function brandBar(): React.ReactElement {
{ try { - const serif = loadFont( - '@fontsource/instrument-serif/files/instrument-serif-latin-400-normal.woff', - ); + const serif = loadFont('@fontsource/fraunces/files/fraunces-latin-400-normal.woff'); const mono = loadFont('@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff'); const svg = await satori(node, { width: 1200, height: 630, fonts: [ - { name: 'Instrument Serif', data: serif, weight: 400, style: 'normal' }, + { name: 'Fraunces', data: serif, weight: 400, style: 'normal' }, { name: 'JetBrains Mono', data: mono, weight: 400, style: 'normal' }, - { name: 'Geist', data: mono, weight: 400, style: 'normal' }, ], }); diff --git a/src/styles/global.css b/src/styles/global.css index efe0eda..757326a 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -2650,3 +2650,37 @@ main { transform: scale(1); } } + +/* Theme-aware scrollbars for horizontal-scroll content (tables, math, code). + The default browser track is bright/white and cheapens the look. */ +.article-body .table-wrap, +.article-body .katex-display { + scrollbar-width: thin; + scrollbar-color: var(--line-2) transparent; +} +.article-body .table-wrap::-webkit-scrollbar, +.article-body .katex-display::-webkit-scrollbar { + height: 8px; +} +.article-body .table-wrap::-webkit-scrollbar-track, +.article-body .katex-display::-webkit-scrollbar-track, +.article-body pre::-webkit-scrollbar-track { + background: transparent; +} +.article-body .table-wrap::-webkit-scrollbar-thumb, +.article-body .katex-display::-webkit-scrollbar-thumb { + background: var(--line-2); + border-radius: var(--radius-pill); +} +/* Code blocks are always dark → a light, low-opacity thumb reads better. */ +.article-body pre { + scrollbar-width: thin; + scrollbar-color: rgba(225, 228, 232, 0.25) transparent; +} +.article-body pre::-webkit-scrollbar { + height: 8px; +} +.article-body pre::-webkit-scrollbar-thumb { + background: rgba(225, 228, 232, 0.25); + border-radius: var(--radius-pill); +}