fix(site): style Astro-rendered <pre> blocks in prose bodies (#133)

The Astro migration switched fenced code blocks from the hand-written
`<div class="code-block-wrap"><pre class="code-block">` wrapper to
Astro+Shiki's auto-generated `<pre class="astro-code">`. The existing
CSS only targeted the legacy class names, so docs and tutorial code
blocks rendered with no padding, no border-radius, and no margin.
On top of that, the inner `<code>` inherited `.prose code`'s cream
pill styling and showed it through Shiki's dark theme.

Extends `.prose .code-block` rules to cover `.prose pre`, adds the
missing margin and max-width, and resets `.prose pre code` to drop
the inline-code background and border. Shiki's inline background
color still wins on `.astro-code`, so the box keeps its dark theme;
hand-written `.code-block` blocks on the case-study page get the
warmer oklch palette as before.

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-05-02 22:56:11 -07:00
committed by GitHub
co-authored by Claude
parent ccf3573579
commit eecdfa128e
+9
View File
@@ -2291,7 +2291,13 @@ main#main {
margin: 0;
}
/* Fenced code blocks: covers Astro+Shiki's auto-generated <pre class="astro-code">
in markdown bodies and the legacy hand-written <pre class="code-block"> still
used by the case-study pages. Shiki sets background/color inline, so its theme
wins on .astro-code; the CSS values here apply to .code-block. */
.prose pre,
.prose .code-block {
margin: 1.25em 0;
padding: var(--spacing-md);
background: oklch(12% 0.005 350);
color: oklch(92% 0.005 350);
@@ -2301,6 +2307,7 @@ main#main {
font-size: 0.8125rem;
line-height: 1.55;
border: 1px solid oklch(20% 0.005 350);
max-width: 100%;
}
.code-block-copy {
@@ -2352,12 +2359,14 @@ main#main {
content: "Copied";
}
.prose pre code,
.prose .code-block code {
background: transparent;
border: none;
padding: 0;
color: inherit;
font-size: inherit;
border-radius: 0;
}
.prose blockquote {