From eecdfa128ea1a17637dc43cd363af3f3e34b74dc Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Sat, 2 May 2026 22:56:11 -0700
Subject: [PATCH] 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>
---
 site/styles/sub-pages.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/site/styles/sub-pages.css b/site/styles/sub-pages.css
index 8f773cdc0..a28c87f7a 100644
--- a/site/styles/sub-pages.css
+++ b/site/styles/sub-pages.css
@@ -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 {