New type system (Fraunces + Hanken Grotesk) + defect fixes - #8
Merged
Conversation
…trast miss - 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)
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 <link>, 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.
Deploying mlsystems with
|
| Latest commit: |
79bc36f
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://2477e674.mlsystems.pages.dev |
| Branch Preview URL: | https://feature-fonts-and-polish.mlsystems.pages.dev |
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.
- 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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Refreshes the type system to look like an editorial publication instead of a generated template, plus two small fixes. Build + type-check pass; verified in the browser in light and dark on the home and blog pages.
New type system
The old pairing — Instrument Serif + Geist — is the ubiquitous 2024–25 AI-startup default (Geist is Vercel's font), which is exactly why it read "generated." Replaced with a more distinctive, editorial system:
Changed in one place each: the font
<link>in BaseLayout, the--font-*tokens, and theeditorial/moderntypeset modes. Because it's all tokens, swapping again later is a one-line change.Also
--ink-1token (7× in editor CSS →--ink), hardcoded#c0392beditor red (→var(--tc-red)), and a.tool-tag-livewhite-on-accent contrast miss (→var(--paper))./writenewcomer link: a small "First time? See how it works →" pointing to/contribute, so a first-timer gets context at the blank editor — without adding Contribute to the primary nav (kept minimal).Follow-up (not in this PR)
lib/og.tsx) embed@fontsource/instrument-serif, so social previews won't match the new Fraunces headline until that's swapped (needs@fontsource/fraunces). Small, separate task.Best judged on the Cloudflare preview — look at the homepage hero and the blog archive titles in both themes.