category page: replace .sp-tree (white-space: pre eats template whitespace) with compact .cat-list

Author: gemivnet

design/site.css

@@ -633,3 +633,11 @@
 
 /* hide the stripe pattern when the cell is showing a real photo */
 .sp-img.has-photo::before { display: none; }
+
+/* ── category sub-folder list (used on /musings/<cat>) ────── */
+.cat-list { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: var(--fs-small); }
+.cat-list li { padding: 6px 0; border-bottom: 1px solid var(--rule); display: flex; align-items: baseline; gap: var(--sp-3); }
+.cat-list li:last-child { border-bottom: 0; }
+.cat-list li a { color: var(--ink); text-decoration: none; }
+.cat-list li a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
+.cat-list li .count { color: var(--ink-3); }

templates/musings-category.eta

@@ -16,11 +16,11 @@
     <% if (children.length) { %>
     <section style="margin-top: var(--sp-5); border-top: 1px solid var(--rule); padding-top: var(--sp-4);">
       <div style="font-family: var(--font-mono); font-size: var(--fs-tiny); color: var(--ink-3); margin-bottom: var(--sp-3);">// sub-folders</div>
-      <div class="sp-tree">
-        <% children.forEach(function(c, i){ var last = i === children.length - 1; %>
-          <div><span class="glyph"><%= last ? '└── ' : '├── ' %></span><a href="<%= c.url %>"><%= c.label %>/</a><span class="count">  (<%= c.count %>)</span></div>
+      <ul class="cat-list">
+        <% children.forEach(function(c){ %>
+          <li><a href="<%= c.url %>"><%= c.label %>/</a><span class="count">(<%= c.count %>)</span></li>
         <% }) %>
-      </div>
+      </ul>
     </section>
     <% } %>