Move post detail styling to boostlook

post-detail__body carries the boostlook class and pulls rich-text
styling from the vendored boostlook-v3.css. post-detail.css keeps only
layout and chrome, rich-text rules left as a pointer. Depends on the
matching boostlook commit.

Author: julioest

static/css/v3/boostlook-v3.css

@@ -5745,3 +5745,71 @@ html.v3 .boostlook {
   border: none;
   border-radius: 0;
 }
+
+/* Post detail (news article body) — #2491. The container keeps its layout
+   (flex/gap/border) in post-detail.css; the rich-text typography lives here.
+   Body copy is intentionally secondary grey (overrides the non-doc primary
+   default above); headings and bold use primary. */
+.boostlook.post-detail__body {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-loose);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+.boostlook.post-detail__body a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.boostlook.post-detail__body img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--border-radius-m);
+}
+
+.boostlook.post-detail__body :is(pre, code) {
+  font-family: var(--font-code);
+  font-size: var(--font-size-small);
+}
+
+.boostlook.post-detail__body pre {
+  padding: var(--space-medium);
+  border-radius: var(--border-radius-m);
+  background: var(--color-surface-mid);
+  overflow-x: auto;
+}
+
+/* Rhythm between blocks comes from the container's flex `gap`, so strip the
+   block margins boostlook's bare-markdown layer adds; otherwise they stack on
+   the gap and the spacing doubles. Lists stay tight (as v2 had them). */
+.boostlook.post-detail__body :is(p, ul, ol, li, pre, h1, h2, h3, h4, h5, h6) {
+  margin: 0;
+}
+
+.boostlook.post-detail__body :is(ul, ol) {
+  padding-left: var(--space-large);
+  list-style-position: outside;
+}
+
+.boostlook.post-detail__body ul { list-style-type: disc; }
+.boostlook.post-detail__body ol { list-style-type: decimal; }
+.boostlook.post-detail__body ul ul { list-style-type: circle; }
+.boostlook.post-detail__body :is(ol ol, ul ol) { list-style-type: lower-alpha; }
+
+.boostlook.post-detail__body :is(h1, h2, h3, h4, h5, h6) {
+  color: var(--color-text-primary);
+  font-family: var(--font-display);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-tight);
+}
+
+.boostlook.post-detail__body h1 { font-size: var(--font-size-xl); }
+.boostlook.post-detail__body h2 { font-size: var(--font-size-large); }
+.boostlook.post-detail__body h3 { font-size: var(--font-size-medium); }
+.boostlook.post-detail__body :is(h4, h5, h6) { font-size: var(--font-size-base); }
+
+.boostlook.post-detail__body :is(b, strong) {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}

static/css/v3/post-detail.css

@@ -66,111 +66,31 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-large);
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-loose);
-  letter-spacing: var(--letter-spacing-tight);
-  color: var(--color-text-secondary);
   padding-top: var(--space-xl);
   border-top: 1px solid var(--color-stroke-weak);
 }
 
-/* Copy the body styling to markdown blocks for wagtail styling. */
+/* Wagtail wraps markdown blocks; keep the flex layout so block rhythm
+   matches the body. Typography comes from Boostlook via the `boostlook`
+   class on .post-detail__body. */
 .post-detail__body .block-markdown {
   display: flex;
   flex-direction: column;
   gap: var(--space-large);
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-loose);
-  letter-spacing: var(--letter-spacing-tight);
-  color: var(--color-text-secondary);
-}
-
-/* Reset the site-wide `p { @apply py-5 }` from frontend/styles.css
-   so paragraph rhythm comes from the body's flex `gap`, not from
-   each <p> contributing its own 1.25rem of top/bottom padding. */
-.post-detail__body p {
-  padding-top: 0;
-  padding-bottom: 0;
 }
 
-.post-detail__body a {
-  color: inherit;
-  text-decoration: underline;
-}
+/* The article body's markdown/rich-text styling (body copy color/size,
+   links, images, code, lists, headings, bold) now lives in Boostlook
+   (boostlook repo: src/css/17-site-components.css), scoped
+   .boostlook.post-detail__body, and ships with boostlook-v3.css. The
+   container carries the `boostlook` class. #2491 */
 
 .post-detail__external-url a {
   color: var(--color-text-secondary);
   text-decoration: underline;
   text-underline-position: from-font;
 }
 
-.post-detail__body img {
-  max-width: 100%;
-  height: auto;
-  border-radius: var(--border-radius-m);
-}
-
-.post-detail__body pre,
-.post-detail__body code {
-  font-family: var(--font-code);
-  font-size: var(--font-size-small);
-}
-
-.post-detail__body pre {
-  padding: var(--space-medium);
-  border-radius: var(--border-radius-m);
-  background: var(--color-surface-mid);
-  overflow-x: auto;
-}
-
-.post-detail__body ul,
-.post-detail__body ol {
-  padding-left: var(--space-large);
-  list-style-position: outside;
-}
-
-.post-detail__body ul {
-  list-style-type: disc;
-}
-
-.post-detail__body ol {
-  list-style-type: decimal;
-}
-
-.post-detail__body ul ul {
-  list-style-type: circle;
-}
-
-.post-detail__body ol ol,
-.post-detail__body ul ol {
-  list-style-type: lower-alpha;
-}
-
-.post-detail__body h1,
-.post-detail__body h2,
-.post-detail__body h3,
-.post-detail__body h4,
-.post-detail__body h5,
-.post-detail__body h6 {
-  color: var(--color-text-primary);
-  font-family: var(--font-display);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-tight);
-}
-
-.post-detail__body h1 { font-size: var(--font-size-xl); }
-.post-detail__body h2 { font-size: var(--font-size-large); }
-.post-detail__body h3 { font-size: var(--font-size-medium); }
-.post-detail__body h4,
-.post-detail__body h5,
-.post-detail__body h6 { font-size: var(--font-size-base); }
-
-.post-detail__body b,
-.post-detail__body strong {
-  color: var(--color-text-primary);
-  font-weight: var(--font-weight-medium);
-}
-
 .post-detail__next,
 .post-detail__related {
   display: flex;

templates/news/v3/detail.html

@@ -49,7 +49,7 @@
         </figure>
       {% endif %}
 
-      <div class="post-detail__body">
+      <div class="post-detail__body boostlook">
         {% if object.external_url %}
           <p class="post-detail__external-url">
             <a href="{{ object.external_url }}" rel="noopener noreferrer" target="_blank" aria-label="Read full article: {{ object.title }} (opens in new tab)">{{ object.external_url }}</a>