Load Mermaid/Highlight.js only where used; fix heading hierarchy and image attributes

.github/workflows/deploy.yaml

@@ -220,6 +220,13 @@ jobs:
           path: public/
           retention-days: 1
 
+      # =======================
+      # Built HTML Regression Checks
+      # =======================
+      - name: Check built HTML (headings, conditional assets, image alt)
+        run: |
+          python3 scripts/check_seo_html.py public
+
   #========================================
   # Deploy website to production GitHub Pages
   # Note: Staging deployments are handled by staging-aggregate.yaml

assets/scss/academic/_content.scss

@@ -42,6 +42,7 @@ article {
 .featured-image {
   position: relative;
   width: 100%;
+  height: auto;
   display: block;
   margin: 0 auto;
 }

assets/scss/academic/_dark.scss

@@ -71,6 +71,7 @@ body.dark,
   color: #fff;
 }
 
+.dark #profile .portrait-title h1,
 .dark .portrait-title h2 {
   color: #fff;
 }

assets/scss/academic/_root.scss

@@ -161,8 +161,10 @@ video {
 }
 
 .img-responsive {
-  /* Extend Bootstrap declaration with centering. */
+  /* Extend Bootstrap declaration with centering; keep intrinsic-size images fluid. */
   margin: 0 auto;
+  max-width: 100%;
+  height: auto;
 }
 
 // Center all figure images by default.

assets/scss/academic/_search.scss

@@ -57,9 +57,11 @@
   background-color: $sta-dark-background;
 }
 
-.search-header h1 {
+/* The search overlay is a subordinate region, so its heading is an h2; keep the h1 size. */
+.search-header h2 {
   margin: 0;
   line-height: 1;
+  font-size: 2.25rem;
 }
 
 .col-search-close {

assets/scss/academic/_widgets.scss

@@ -93,8 +93,17 @@
   }
 }
 
-.section-heading h1 {
+/* Section titles are h2 (the page's h1 belongs to its hero); keep the h1 size. */
+.section-heading h1,
+.section-heading h2 {
   margin: 0 0 10px 0;
+  font-size: 2.25rem;
+}
+
+/* Same size for one-column widget layouts, whose centred title sits outside
+   `.section-heading`. Keeps the h2 margins, which already match the h1 ones. */
+h2.widget-title {
+  font-size: 2.25rem;
 }
 
 .section-heading p {
@@ -288,6 +297,7 @@ a.hero-cta-alt:hover {
   border-radius: 3px;
 }
 
+#profile .portrait-title h1,
 .portrait-title h2 {
   font-size: 1.75em;
   font-weight: 300;

assets/scss/custom.scss

@@ -3278,8 +3278,8 @@ h1.clusters-site-heading.clusters-hub-page__title {
  *  `subtitle = "---"` / `***` content dividers (which some sections had and
  *  others didn't). Scoped to .home-section so inner pages are unaffected.
  * ============================================================ */
-.home-section .section-heading h1::after,
-.home-section.wg-about-welcome h1::after {
+.home-section .section-heading h2::after,
+.home-section.wg-about-welcome h2::after {
   content: "";
   display: block;
   height: 1px;
@@ -3461,6 +3461,16 @@ h1.clusters-site-heading.clusters-hub-page__title {
 }
 
 /* ---- "What is FORRT?" media column: logo + video stacked, text beside it. ---- */
+/* Featurette images carry intrinsic width/height attributes; scale them with the column. */
+.wg-featurette-alternative img,
+.wg-featurette-welcome img,
+.wg-featurette-team img {
+  height: auto;
+}
+/* About section title: same size as the section headings. */
+.home-section.wg-about-welcome h2 {
+  font-size: 2.25rem;
+}
 .wg-about-welcome .avatar {
   width: 170px;
   height: 170px;
@@ -3562,3 +3572,25 @@ h1.clusters-site-heading.clusters-hub-page__title {
   .nla-grid { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); }
   .nla-archive-header, .nla-subscribe-band { flex-direction: column; align-items: flex-start; }
 }
+
+/* ============================================================
+ *  Cite modal BibTeX block.
+ *  `<code class="tex hljs">` in the citation modal used to inherit its colours
+ *  and block layout from the highlight.js theme stylesheet, which now loads only
+ *  on pages that actually contain a code block. Without it the snippet falls
+ *  back to the inline-code rule (pink on pink, no padding), so restate the few
+ *  declarations the hljs theme provided. Values mirror highlight.js `github`
+ *  (light) and the existing `.dark code` colours (dark).
+ * ============================================================ */
+code.tex {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #333;
+  background: #f8f8f8;
+}
+
+.dark code.tex {
+  color: rgb(139, 233, 253);
+  background: rgb(68, 71, 90);
+}

config/_default/params.toml

@@ -86,19 +86,22 @@ tag_index_min_pages = 5
 # Show "Recommended" tab with community-endorsed resources on cluster pages
 enable_featured_resources = false
 
-# Enable source code highlighting? true/false
+# Force Highlight.js onto every page? true/false
+#   With false, it loads only on pages whose Markdown content contains a code block,
+#   plus any page with `highlight: true` in its front matter.
 # Documentation: https://sourcethemes.com/academic/docs/writing-markdown-latex/#highlighting-options
-highlight = true
+highlight = false
 highlight_languages = ["r"]  # Add support for highlighting additional languages
 # highlight_style = "github"  # For supported styles, see https://cdnjs.com/libraries/highlight.js/
 
 # Enable LaTeX math rendering? true/false
 #   If false, you can enable math on a per page basis as needed.
 math = false
 
-# Enable diagram rendering? true/false
-#   If false, you can enable diagrams on a per page basis as needed.
-diagram = true
+# Force Mermaid onto every page? true/false
+#   With false, it loads only on pages whose Markdown content contains a mermaid code
+#   block, plus any page with `diagram: true` in its front matter.
+diagram = false
 
 # Privacy pack
 #   Show a cookie consent message to visitors