From 1c0d328c98c2e624a90eb834b6d12fa562b7715b Mon Sep 17 00:00:00 2001
From: Gerard Kavanagh <gerard161@gmail.com>
Date: Sat, 15 Aug 2026 16:42:15 +0100
Subject: [PATCH] =?UTF-8?q?fix(blog):=20real=20article=20typography=20?=
 =?UTF-8?q?=E2=80=94=20the=20prose-*=20classes=20were=20inert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The post body carried a long list of @tailwindcss/typography prose-* classes,
but that plugin is not installed. Every one of them did nothing: preflight had
stripped heading sizes and paragraph margins, and nothing put them back, so
headings rendered at body size and paragraphs ran together with no gaps.

Adds .bs-article to globals.css and swaps the inert classes for it - direct tag
styling in the bs-* design system, no new dependency:
- h2/h3 in the Cormorant display serif at 1.875rem/1.5rem with real top and
  bottom margins, so sections are visibly sections
- 1.25em paragraph rhythm, 1.75 line-height, 68ch measure (the container above
  stays wide for the header and cover image; the text column constrains itself)
- lists, blockquote, inline code, strong/em, links with green markers

Scoped to .bs-article so it cannot leak into app chrome.
---
 nextjs_space/app/blog/[slug]/page.tsx |  2 +-
 nextjs_space/app/globals.css          | 67 +++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/nextjs_space/app/blog/[slug]/page.tsx b/nextjs_space/app/blog/[slug]/page.tsx
index 7c993e4a..a12bd30f 100644
--- a/nextjs_space/app/blog/[slug]/page.tsx
+++ b/nextjs_space/app/blog/[slug]/page.tsx
@@ -268,7 +268,7 @@ export default async function BlogPostPage({ params }: PageProps) {
 
                         {/* Article content */}
                         <div
-                            className="prose prose-invert prose-lg max-w-none prose-headings:font-display prose-headings:font-bold prose-headings:text-bs-fg prose-p:text-bs-fg-body prose-a:text-bs-green-soft hover:prose-a:text-bs-green prose-strong:text-bs-fg prose-ul:text-bs-fg-body prose-li:marker:text-bs-green prose-code:bg-bs-card-2 prose-code:border prose-code:border-bs-border prose-pre:bg-bs-input prose-pre:border prose-pre:border-bs-border"
+                            className="bs-article"
                             dangerouslySetInnerHTML={{
                                 __html: sanitizeHtml(post.content || ""),
                             }}
diff --git a/nextjs_space/app/globals.css b/nextjs_space/app/globals.css
index 910106ba..bb07da0f 100644
--- a/nextjs_space/app/globals.css
+++ b/nextjs_space/app/globals.css
@@ -1365,6 +1365,73 @@ html {
   .bs-toast-rail-success { @apply border-l-4 border-l-bs-green; }
   .bs-toast-rail-warn    { @apply border-l-4 border-l-bs-warn; }
   .bs-toast-rail-danger  { @apply border-l-4 border-l-bs-danger; }
+
+  /* Long-form article body — blog posts, rendered from sanitised HTML via
+     dangerouslySetInnerHTML.
+
+     These pages previously carried @tailwindcss/typography `prose-*` classes,
+     but that plugin is not installed, so every one of them was inert: preflight
+     had stripped heading sizes and paragraph margins and nothing put them back.
+     Styling the tags directly keeps the design system in charge and adds no
+     dependency. Scoped to .bs-article so it can never leak into app chrome. */
+  .bs-article {
+    @apply text-bs-fg-body;
+    /* ~68 characters is the readable measure; the container above is wider for
+       the header and cover image, so the text column constrains itself. */
+    max-width: 68ch;
+    font-size: 1.0625rem;
+    line-height: 1.75;
+  }
+  .bs-article > * + * { margin-top: 1.25em; }
+
+  .bs-article h2 {
+    @apply text-bs-fg;
+    font-family: var(--bs-font-display, 'Cormorant Garamond', serif);
+    font-size: 1.875rem;
+    line-height: 1.2;
+    font-weight: 500;
+    margin-top: 2.25em;
+    margin-bottom: 0.6em;
+    letter-spacing: -0.01em;
+  }
+  .bs-article h3 {
+    @apply text-bs-fg;
+    font-family: var(--bs-font-display, 'Cormorant Garamond', serif);
+    font-size: 1.5rem;
+    line-height: 1.25;
+    font-weight: 500;
+    margin-top: 1.9em;
+    margin-bottom: 0.5em;
+  }
+  /* A heading opening the article should not push it down the page. */
+  .bs-article > h2:first-child,
+  .bs-article > h3:first-child { margin-top: 0; }
+
+  .bs-article p { margin-bottom: 1.25em; }
+  .bs-article strong { @apply text-bs-fg; font-weight: 600; }
+  .bs-article em { font-style: italic; }
+  .bs-article a { @apply text-bs-green-soft underline underline-offset-2; }
+  .bs-article a:hover { @apply text-bs-green; }
+
+  .bs-article ul,
+  .bs-article ol { margin: 1.4em 0; padding-left: 1.4em; }
+  .bs-article ul { list-style: disc; }
+  .bs-article ol { list-style: decimal; }
+  .bs-article li { margin-bottom: 0.6em; padding-left: 0.25em; }
+  .bs-article li::marker { @apply text-bs-green; }
+
+  .bs-article blockquote {
+    @apply border-l-2 border-bs-green text-bs-fg-muted;
+    padding-left: 1.15em;
+    margin: 1.75em 0;
+    font-style: italic;
+  }
+  .bs-article code {
+    @apply bg-bs-card-2 border border-bs-border text-bs-fg rounded;
+    padding: 0.15em 0.4em;
+    font-size: 0.9em;
+  }
+  .bs-article hr { @apply border-bs-border; margin: 2.5em 0; }
 }
 
 /* ===========================================================================