Move v3 markdown components onto boostlook

Adds the boostlook class to the v3 components that render markdown or rich text (content modal, markdown card, shared user-profile bio, post detail body, release highlights descriptions) and removes their temporary component-level markdown CSS, which now lives in boostlook's 17-site-components.css.

The vendored boostlook-v3.css that carries those rules is added by the boostlook v3 integration PR (boostorg#2411); this change depends on it.

Author: julioest

static/css/v3/content-modal.css

@@ -126,50 +126,9 @@
   outline: none;
 }
 
-/* ============================================
-   PROSE — rich-content styling, isolated to the modal.
-   Self-contained so no shared `.markdown-content` rules apply.
-   ============================================ */
-.content-modal__prose {
-  color: var(--color-text-secondary);
-  font-family: var(--font-sans);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-default);
-  letter-spacing: var(--letter-spacing-tight);
-}
-
-.content-modal__prose :is(h2, h3, h4, h5, h6) {
-  margin: var(--space-xlarge) 0 var(--space-large);
-  color: var(--color-text-primary);
-  font-size: var(--font-size-large);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-tight);
-  letter-spacing: var(--letter-spacing-display-regular);
-}
-
-.content-modal__prose h2 {
-  font-size: var(--font-size-large);
-}
-
-.content-modal__prose h3 {
-  font-size: var(--font-size-base);
-}
-
-.content-modal__prose :is(h4, h5, h6) {
-  font-size: var(--font-size-small);
-}
-
-/* Sit flush with the top — no leading margin on the first prose element. */
-.content-modal__prose > :first-child {
-  margin-top: 0;
-}
-
-.content-modal__prose p {
-  margin: var(--space-default) 0;
-  padding: 0;
-  line-height: var(--line-height-loose);
-}
+/* PROSE — the `.boostlook.content-modal__prose` typography now lives in
+   Boostlook (boostlook repo: src/css/17-site-components.css), so it ships
+   with boostlook-v3.css. Nothing to override here. #2491 */
 
 /* ============================================
    RESPONSIVE

static/css/v3/markdown-card.css

@@ -1,101 +1,4 @@
-.card__column.markdown-content {
-    gap: var(--space-medium);
-    line-height: var(--line-height-code);
-}
-
-.markdown-content ul,
-.markdown-content ol {
-    list-style: none;
-    padding: 0;
-}
-
-.markdown-content li {
-    position: relative;
-    padding-left: var(--space-xlarge);
-    margin-top: var(--space-medium);
-
-}
-
-.markdown-content ul > li::before {
-    content: "\2022";
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: var(--space-xlarge);
-    height: calc(var(--font-size-small) * 1.2);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--color-text-primary);
-}
-
-.markdown-content a {
-    color: var(--color-text-link-accent);
-    text-decoration: underline;
-    text-decoration-skip-ink: none;
-    text-underline-position: from-font;
-}
-
-.markdown-content {
-    color: var(--color-text-secondary);
-    padding: 0 var(--space-large);
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-regular);
-    letter-spacing: var(--letter-spacing-tight);
-    overflow-y: auto;
-    overflow-wrap: anywhere;
-    min-width: 0;
-}
-
-.markdown-content pre {
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-}
-
-.markdown-content h1,
-.markdown-content h2,
-.markdown-content h3,
-.markdown-content h4,
-.markdown-content h5,
-.markdown-content h6 {
-  color: var(--color-text-primary);
-  font-family: var(--font-display);
-  font-weight: var(--font-weight-medium);
-  margin: 0;
-}
-
-.markdown-content h1 { font-size: var(--font-size-large); }
-.markdown-content h2 { font-size: var(--font-size-medium); }
-.markdown-content h3 { font-size: var(--font-size-base); }
-.markdown-content h4,
-.markdown-content h5,
-.markdown-content h6 { font-size: var(--font-size-small); }
-
-.markdown-content b,
-.markdown-content strong {
-  color: var(--color-text-primary);
-  font-weight: var(--font-weight-medium);
-}
-
-.markdown-card p {
-  padding: 0;
-  margin: 0;
-}
-
-.markdown-card ul,
-.markdown-card ol {
-  list-style-position: outside;
-  padding-left: 14px;
-}
-
-.markdown-content :is(code, tt, pre) {
-  display: inline;
-  font-family: var(--font-code);
-  font-size: 0.88em;
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
-  background: transparent;
-  padding: 0;
-  border: none;
-  border-radius: 0;
-}
+/* The .markdown-content styling (markdown card + user-profile bio) now lives in
+   Boostlook (boostlook repo: src/css/17-site-components.css), scoped
+   .boostlook.markdown-content, and ships with boostlook-v3.css. The containers
+   carry the `boostlook` class. Nothing to override here. #2491 */

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;

static/css/v3/release-highlights-card.css

@@ -51,9 +51,9 @@
   color: var(--color-text-secondary);
 }
 
-.release-highlight__description strong {
-  font-weight: var(--font-weight-medium);
-}
+/* Rich-text rendering (bold/inline-code from inline_markdown) is handled by
+   Boostlook via `.boostlook.release-highlight__description` in
+   17-site-components.css; the description carries the `boostlook` class. */
 
 .release-highlight__placeholder {
   padding: 0 var(--space-card);

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>

templates/v3/includes/_content_modal.html

@@ -38,7 +38,7 @@ <h2 class="content-modal__title" id="{{ modal_id }}-title">{{ title }}</h2>
     {% endif %}
     <hr class="content-modal__divider" aria-hidden="true">
     <div class="content-modal__body" tabindex="0">
-      <div class="content-modal__prose">{{ content|safe }}</div>
+      <div class="content-modal__prose boostlook">{{ content|safe }}</div>
     </div>
   </div>
 </div>

templates/v3/includes/_markdown_card.html

@@ -13,7 +13,7 @@
     <span class="card__title">{{ title }}</span>
   </div>
   <hr class="card__hr" aria-hidden="true" />
-  <div class="card__column markdown-content">
+  <div class="card__column markdown-content boostlook">
     {% if html %}{{ html|safe }}{% else %}{{ markdown|markdown }}{% endif %}
   </div>
   {% if button_url and button_label %}

templates/v3/includes/_release_highlights_card.html

@@ -40,7 +40,7 @@
         <article class="release-highlight">
           <h3 class="release-highlight__title">{{ item.title }}</h3>
           {% if item.description %}
-            <p class="release-highlight__description">{{ item.description|inline_markdown }}</p>
+            <p class="release-highlight__description boostlook">{{ item.description|inline_markdown }}</p>
           {% endif %}
         </article>
       </li>

templates/v3/includes/_user_profile_bio_card.html

@@ -24,7 +24,7 @@
     </div>
     <hr class="card__hr" />
   {% endif %}
-  <div class="card__column markdown-content">{{ markdown|markdown }}</div>
+  <div class="card__column markdown-content boostlook">{{ markdown|markdown }}</div>
   {% if button_url and button_label %}
     <hr class="card__hr" />
     <div class="card__cta_section">