From bcfd005cc9dc4a998f42de34a0f1502a4ab8050e Mon Sep 17 00:00:00 2001
From: Magnus Madsen <magnusm@cs.au.dk>
Date: Mon, 3 Aug 2026 15:12:51 +0200
Subject: [PATCH] fix: correct invalid grid nesting, heading nesting, and
 navbar collapse

Three markup issues found while auditing the site:

- index.astro nested a `.row` directly inside another `.row` in the
  Sponsors and Collaborators sections. The inner row's -15px negative
  margins applied with no `.col` padding to cancel them. Split each into
  two sibling rows, moving `mb-4` to the logo row so spacing before the
  following `<hr>` is unchanged.

- blog.astro wrapped an `<h2>` in an `<a>`. Inverted to put the anchor
  inside the heading. The `<a>` still supplies the link color the `<h2>`
  was inheriting, so it renders identically.

- The navbar `<ul>` was not inside a `.collapse.navbar-collapse` and had
  no toggler, so `navbar-expand-md` just stacked nine links vertically on
  mobile. Added the collapse wrapper and a `.navbar-toggler`.

Bootstrap's collapse JS needs jQuery, which the site does not load, and
`.collapse:not(.show)` would otherwise hide the nav outright below the md
breakpoint. So the toggler ships a small script that toggles `.show` and
keeps `aria-expanded` in sync, following the same no-jQuery approach the
Carousel component already uses.

Above md, `.navbar-collapse` is `display: flex !important` and the
toggler is `display: none`, so the desktop nav is untouched and a stale
`.show` is harmless when resizing back up.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/layouts/Layout.astro |  42 ++++++++++---
 src/pages/blog.astro     |   2 +-
 src/pages/index.astro    | 126 ++++++++++++++++++++-------------------
 3 files changed, 98 insertions(+), 72 deletions(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 596c09d..a360d0a 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -53,19 +53,43 @@ import '../styles/global.css';
     <div class="container page">
       <nav class="navbar navbar-dark bg-info navbar-expand-md menu shadow-sm mb-4">
         <div class="container-fluid">
-          <ul class="navbar-nav mr-lg-auto">
-            {navLinks.map(({ href, label }) => (
-              <li class="nav-item pl-1 pr-1">
-                <a class={`nav-link${currentPath === href ? " active font-weight-bold" : ""}`} href={href}>
-                  {label}
-                </a>
-              </li>
-            ))}
-          </ul>
+          <button
+            class="navbar-toggler"
+            type="button"
+            aria-controls="main-nav"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+          >
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="main-nav">
+            <ul class="navbar-nav mr-lg-auto">
+              {navLinks.map(({ href, label }) => (
+                <li class="nav-item pl-1 pr-1">
+                  <a class={`nav-link${currentPath === href ? " active font-weight-bold" : ""}`} href={href}>
+                    {label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
         </div>
       </nav>
 
       <slot />
     </div>
+
+    <script>
+      // Bootstrap's collapse JS needs jQuery, which the site does not load. Its
+      // CSS hides .collapse:not(.show) below the md breakpoint, so this script
+      // only toggles that class. Above md, .navbar-collapse is display:flex
+      // !important, so a stale .show is harmless when resizing back up.
+      const toggler = document.querySelector<HTMLButtonElement>(".navbar-toggler");
+      const target = document.getElementById("main-nav");
+      toggler?.addEventListener("click", () => {
+        const open = target?.classList.toggle("show") ?? false;
+        toggler.setAttribute("aria-expanded", String(open));
+      });
+    </script>
   </body>
 </html>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index c1f0fe2..9fe4045 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -12,7 +12,7 @@ import Layout from '../layouts/Layout.astro';
         <h1>Blog</h1>
         <p>The Flix Blog is now available at:</p>
         <div class="mt-3">
-          <a href="https://blog.flix.dev/"><h2>https://blog.flix.dev/</h2></a>
+          <h2><a href="https://blog.flix.dev/">https://blog.flix.dev/</a></h2>
         </div>
       </div>
     </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 73b8ce1..0bf19ca 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -994,85 +994,87 @@ const vscodeSlides = [
 
     <hr class="mb-4" />
 
-    <div class="row mb-4">
+    <div class="row">
       <div class="col-md-12">
         <h2>Sponsors and Funding</h2>
       </div>
-      <div class="row">
-        <div class="col">
-          <div class="card border-0 p-3">
-            <img
-              src="/logo/dff.png"
-              class="card-img"
-              alt="Independent Research Fund Denmark"
-              loading="lazy"
-            />
-          </div>
+    </div>
+
+    <div class="row mb-4">
+      <div class="col">
+        <div class="card border-0 p-3">
+          <img
+            src="/logo/dff.png"
+            class="card-img"
+            alt="Independent Research Fund Denmark"
+            loading="lazy"
+          />
         </div>
-        <div class="col">
-          <div class="card border-0 p-3">
-            <img
-              src="/logo/direc.png"
-              class="card-img"
-              alt="Digital Research Centre Denmark"
-              loading="lazy"
-            />
-          </div>
+      </div>
+      <div class="col">
+        <div class="card border-0 p-3">
+          <img
+            src="/logo/direc.png"
+            class="card-img"
+            alt="Digital Research Centre Denmark"
+            loading="lazy"
+          />
         </div>
-        <div class="col">
-          <div class="card border-0 p-3">
-            <img
-              src="/logo/amazon-science.png"
-              class="card-img"
-              alt="Amazon Research Award"
-              loading="lazy"
-            />
-          </div>
+      </div>
+      <div class="col">
+        <div class="card border-0 p-3">
+          <img
+            src="/logo/amazon-science.png"
+            class="card-img"
+            alt="Amazon Research Award"
+            loading="lazy"
+          />
         </div>
-        <div class="col">
-          <div class="card border-0 p-3">
-            <img src="/logo/stibo.png" class="card-img" alt="StiboFonden" loading="lazy" />
-          </div>
+      </div>
+      <div class="col">
+        <div class="card border-0 p-3">
+          <img src="/logo/stibo.png" class="card-img" alt="StiboFonden" loading="lazy" />
         </div>
       </div>
     </div>
 
     <hr class="mb-4" />
 
-    <div class="row mb-4">
+    <div class="row">
       <div class="col-md-12">
         <h2>Collaborators</h2>
       </div>
-      <div class="row">
-        <div class="col-md-3">
-          <div class="card border-0 p-3">
-            <img
-              src="/logo/aarhusu.png"
-              class="card-img"
-              alt="Aarhus University"
-              loading="lazy"
-            />
-          </div>
+    </div>
+
+    <div class="row mb-4">
+      <div class="col-md-3">
+        <div class="card border-0 p-3">
+          <img
+            src="/logo/aarhusu.png"
+            class="card-img"
+            alt="Aarhus University"
+            loading="lazy"
+          />
         </div>
-        <div class="col-md-4">
-          <div class="card border-0 p-3">
-            <img
-              src="/logo/uwaterloo.png"
-              class="card-img"
-              alt="University of Waterloo"
-              loading="lazy"
-            />
-          </div>
+      </div>
+      <div class="col-md-4">
+        <div class="card border-0 p-3">
+          <img
+            src="/logo/uwaterloo.png"
+            class="card-img"
+            alt="University of Waterloo"
+            loading="lazy"
+          />
         </div>
-        <div class="col-md-3">
-          <div class="card border-0 p-3">
-            <img
-              src="/logo/tubingen.png"
-              class="card-img"
-              alt="University of Tubingen"
-              loading="lazy"
-            />
-          </div>
+      </div>
+      <div class="col-md-3">
+        <div class="card border-0 p-3">
+          <img
+            src="/logo/tubingen.png"
+            class="card-img"
+            alt="University of Tubingen"
+            loading="lazy"
+          />
         </div>
       </div>
     </div>