fix: collapse home hero category list into a disclosure on phones

On phones the hero's 74-link category grid was 1,236px tall and pushed the project table down to 2,583px, over three screens.

Co-Authored-By: Claude <noreply@anthropic.com>

website/static/style.css

@@ -353,12 +353,24 @@ kbd {
 }
 
 .hero-category-nav {
+  padding-top: 1.35rem;
+  border-top: 1px solid var(--hero-line);
+}
+
+.hero-category-details {
   display: grid;
   grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
   gap: clamp(1.5rem, 4vw, 3rem);
   align-items: start;
-  padding-top: 1.35rem;
-  border-top: 1px solid var(--hero-line);
+}
+
+.hero-category-meta {
+  display: block;
+  cursor: pointer;
+}
+
+.hero-category-meta::-webkit-details-marker {
+  display: none;
 }
 
 .hero-category-meta h2 {
@@ -368,6 +380,14 @@ kbd {
   letter-spacing: 0.04em;
 }
 
+.hero-category-meta h2::after {
+  content: " ↓";
+}
+
+.hero-category-details[open] .hero-category-meta h2::after {
+  content: " ↑";
+}
+
 .hero-category-links {
   list-style: none;
   display: grid;
@@ -438,6 +458,7 @@ kbd {
 .hero-brand-mini:focus-visible,
 .hero-topbar-link:focus-visible,
 .hero-category-link:focus-visible,
+.hero-category-meta:focus-visible,
 .search:focus-visible,
 .tag:focus-visible,
 .jump-link:focus-visible,
@@ -1718,7 +1739,7 @@ th[data-sort].sort-asc::after {
     gap: 0.35rem;
   }
 
-  .hero-category-nav {
+  .hero-category-details {
     grid-template-columns: 1fr;
     gap: 0.95rem;
   }

website/templates/index.html

@@ -53,18 +53,26 @@
     </div>
 
     <nav class="hero-category-nav" aria-labelledby="hero-category-heading">
-      <div class="hero-category-meta">
-        <h2 id="hero-category-heading">Browse by category</h2>
-      </div>
-      <ul class="hero-category-links">
-        {% for category in categories %}
-        <li>
-          <a class="hero-category-link" href="{{ category_urls[category.name] }}"
-            >{{ category.name }}</a
-          >
-        </li>
-        {% endfor %}
-      </ul>
+      <details class="hero-category-details" open>
+        <summary class="hero-category-meta">
+          <h2 id="hero-category-heading">Browse by category</h2>
+        </summary>
+        <ul class="hero-category-links">
+          {% for category in categories %}
+          <li>
+            <a class="hero-category-link" href="{{ category_urls[category.name] }}"
+              >{{ category.name }}</a
+            >
+          </li>
+          {% endfor %}
+        </ul>
+      </details>
+      <script>
+        // Collapse before first paint on phones, where the open list pushes the table about 1.5 screens down
+        if (matchMedia("(max-width: 680px)").matches) {
+          document.currentScript.previousElementSibling.open = false;
+        }
+      </script>
     </nav>
   </div>
 </header>