From 7d530eafbf91faf0c04de3c6588f410f5ff30048 Mon Sep 17 00:00:00 2001 From: Julien Danjou Date: Wed, 20 May 2026 11:26:37 +0200 Subject: [PATCH] feat(code): visual refresh of inline code MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the inline `` styling that pre-dated Pass A: - Add horizontal padding (0.4em) so the bg no longer sits flush against the glyphs - Add a 1px --theme-divider border so the chip has a defined edge against prose - Lift border-radius 3px → 4px (matches Pass A's small-element convention) - Drop the negative-margin hack: with real padding, it's no longer needed to keep the bg from stretching line-height - Inline the 0.2rem value into `a > code`'s text-underline-offset (was passed via a custom prop on the generic `code` rule) `pre > code` (block code via Expressive Code) explicitly resets the new border and radius since the Expressive Code frame already owns that visual. Co-Authored-By: Claude Opus 4.7 Change-Id: I6c9be75b7c04d47a76d3d7718129e8f125dcee95 --- src/styles/index.css | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/styles/index.css b/src/styles/index.css index c00103be46..09cb96ea78 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -224,7 +224,7 @@ article > section iframe { a > code { position: relative; color: var(--theme-link); - text-underline-offset: var(--padding-block); + text-underline-offset: 0.2rem; } strong { @@ -232,15 +232,11 @@ strong { color: inherit; } -/* Supporting Content */ +/* Cross-cutting `code` properties. Inline-vs-block specifics live in + the more-specific selectors below (`pre > code`, + `:not(pre) > code:not([class*="language"])`). */ code { - --border-radius: 3px; - --padding-block: 0.2rem; font-family: var(--font-mono); - font-size: 0.85em; - background-color: var(--theme-code-inline-bg); - margin: calc(var(--padding-block) * -1) 0; - border-radius: var(--border-radius); word-break: break-word; } @@ -833,7 +829,9 @@ pre { /* Inline code */ :not(pre) > code:not([class*="language"]) { background: var(--theme-code-inline-bg); - padding: 0.15rem 0.4rem; + border: 1px solid var(--theme-border); + padding: 0.1em 0.4em; + border-radius: 4px; font-size: 0.85em; }