From 5c2433b766116401de5ef04622b6c5ce22e82d2e Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Thu, 27 Aug 2026 00:15:47 +0000
Subject: [PATCH] Correct font scaling by x size. Fix code receiving twice a
 smaller font size.

---
 docs/themes-and-assets.md           |  2 +-
 frontend/src/assets/pagerite.css    | 23 ++++++++++++++---------
 pagerite/themes/corporate/theme.css |  1 +
 pagerite/themes/nitro/theme.css     |  1 +
 pagerite/themes/purple/theme.css    |  1 +
 pagerite/themes/summer/theme.css    |  1 +
 6 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/docs/themes-and-assets.md b/docs/themes-and-assets.md
index 3aa9ee4..69cd60f 100644
--- a/docs/themes-and-assets.md
+++ b/docs/themes-and-assets.md
@@ -34,4 +34,4 @@ The banner artwork has scroll parallax: pagerite.js sets the `--pry` scroll para
 
 ## Stylesheet order
 
-The backend emits the stylesheets in a fixed order — base (Vite build), theme, banner design, entry sheets, custom CSS last — each with a stable id so fetch-navigation and the site editor can sync them in place. In dev they are `<link>`s (the base is Vite-injected from JS instead); in production they are inlined as `<style>` elements. The base stylesheet's `--font-brand` defaults to `var(--font-heading)`.
+The backend emits the stylesheets in a fixed order — base (Vite build), theme, banner design, entry sheets, custom CSS last — each with a stable id so fetch-navigation and the site editor can sync them in place. In dev they are `<link>`s (the base is Vite-injected from JS instead); in production they are inlined as `<style>` elements. The base stylesheet's `--font-brand` defaults to `var(--font-heading)`. Code text (Fira Code by default) is optically matched to the body font by x-height: `font-size-adjust: ex-height var(--code-x-height)` scales whatever code font is in use, so a theme that switches its body font sets `--code-x-height` to that font's x-height ratio (base: 0.478 for Source Sans 3; themes ship values for Inter, Montserrat, Literata and Cause).
diff --git a/frontend/src/assets/pagerite.css b/frontend/src/assets/pagerite.css
index f833883..3da56f5 100644
--- a/frontend/src/assets/pagerite.css
+++ b/frontend/src/assets/pagerite.css
@@ -56,6 +56,11 @@
   /* The brand follows the heading font unless overridden separately. */
   --font-brand: var(--font-heading);
   --font-code: var(--font-fira-code);
+  /* Target x-height ratio for code text: set to the body font's ratio
+     (here Source Sans 3's 0.478) so font-size-adjust can scale the code
+     font to the same optical height. Themes retune it to their body font
+     (measured: Literata 0.507, Inter 0.546, Montserrat 0.517, Cause 0.5). */
+  --code-x-height: 0.478;
   /* Width of the docked editor panel (used both here for shifting the page
      and in the Vue editor's own styles). */
   --editor-w: min(46rem, 50vw);
@@ -762,10 +767,15 @@ pre {
   position: relative;
 }
 
-/* Inline code integrates with the text, no box of its own */
-p code,
-li code {
-  font-size: 0.85em;
+/* Inline code integrates with the text, no box of its own. Instead of a
+   fixed em shrink (which can't fit every body/code font pairing — Fira
+   Code's x-height ratio 0.525 is taller than Source Sans 3's 0.478 yet
+   shorter than Inter's 0.546), font-size-adjust scales whatever code font
+   is in use so its x-height matches the body font's ratio. Browsers
+   without font-size-adjust get unadjusted 1em code, which is fine. */
+code {
+  font-family: var(--font-code);
+  font-size-adjust: ex-height var(--code-x-height);
 }
 
 /* Click-to-copy button (added by pagerite.js) */
@@ -794,11 +804,6 @@ pre:hover .copy,
   color: var(--accent);
 }
 
-code {
-  font-family: var(--font-code);
-  font-size: 0.88em;
-}
-
 /* Tables separate by color, not lines: the header is a soft vertical
    gradient tinted with the theme's accent (themes can override the
    --table-head-* stops outright), body cells carry a very faint diagonal
diff --git a/pagerite/themes/corporate/theme.css b/pagerite/themes/corporate/theme.css
index 5e26562..34a8326 100644
--- a/pagerite/themes/corporate/theme.css
+++ b/pagerite/themes/corporate/theme.css
@@ -16,6 +16,7 @@
   --line: #12203f14;
   --font-body: var(--font-inter);
   --font-heading: var(--font-montserrat);
+  --code-x-height: 0.546; /* Inter's x-height ratio */
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/pagerite/themes/nitro/theme.css b/pagerite/themes/nitro/theme.css
index e7d4c3d..60f301b 100644
--- a/pagerite/themes/nitro/theme.css
+++ b/pagerite/themes/nitro/theme.css
@@ -41,6 +41,7 @@
 
   --font-body: var(--font-montserrat);
   --font-heading: var(--font-literata);
+  --code-x-height: 0.517; /* Montserrat's x-height ratio */
 }
 
 /* Dark scheme: same identity, but the page goes deep violet (never muddy
diff --git a/pagerite/themes/purple/theme.css b/pagerite/themes/purple/theme.css
index 6f09af0..69eedf2 100644
--- a/pagerite/themes/purple/theme.css
+++ b/pagerite/themes/purple/theme.css
@@ -17,6 +17,7 @@
   --line: #ffffff1c;
   --font-body: var(--font-literata);
   --font-heading: var(--font-fraunces);
+  --code-x-height: 0.507; /* Literata's x-height ratio */
 }
 
 /* Oversized tilted brand in the sky→violet gradient. */
diff --git a/pagerite/themes/summer/theme.css b/pagerite/themes/summer/theme.css
index 8507b37..cb7493f 100644
--- a/pagerite/themes/summer/theme.css
+++ b/pagerite/themes/summer/theme.css
@@ -29,6 +29,7 @@
   --font-body: var(--font-cause);
   --font-heading: var(--font-new-rocker);
   --font-brand: var(--font-cause);
+  --code-x-height: 0.5; /* Cause's x-height ratio */
 }
 
 /* The page is the same landscape the banner paints: hazy sky light up top