Clean up the taxonomy list

Make the name of the taxonomy copyable by putting it in the dom, rather than in
the CSS content:.

assets/css/099_taxonomy_list.css

@@ -8,28 +8,36 @@
  ***************************/
 
 .taxonomy-list {
-    --spacing: 1ch;
+  display: flex;
+  gap: 1ch;
+  font-family: var(--font-family-monospace);
 
-    display: flex;
+  .taxonomy-list__name {
-    font-family: var(--font-family-monospace);
+    color: var(--text-color-secondary);
-    gap: var(--spacing);
+    text-transform: uppercase;
-    list-style-type: none;
-    margin-block: 0;
-    padding-inline-start: 0;
 
-    &::before {
+    &::after {
-        color: var(--text-color-secondary);
+      content: " =";
-        content: attr(data-name) " =";
-        text-transform: uppercase;
     }
+  }
 
-    li {
+  .taxonomy-list__terms {
+      --spacing: 1ch;
+
+      display: flex;
+      gap: var(--spacing);
+      list-style-type: none;
+      margin-block: 0;
       padding-inline-start: 0;
-    }
 
-    li:not(:last-child)::after {
+      li {
-        color: var(--text-color-secondary);
+        padding-inline-start: 0;
-        content: ":";
+      }
-        margin-inline-start: var(--spacing);
+
-    }
+      li:not(:last-child)::after {
+          color: var(--text-color-secondary);
+          content: ":";
+          margin-inline-start: var(--spacing);
+      }
+  }
 }

layouts/partials/page/taxonomy_list.html

@@ -13,9 +13,10 @@
   {{- with T $taxonomy (len .) }}
     {{ $name = . }}
   {{ end -}}
-  <ul class="taxonomy-list" data-name="{{ $name }}">
+  <div class="taxonomy-list">
-    {{ range . }}
+    <span class="taxonomy-list__name">{{ $name }}</span>
-      <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+    <ul class="taxonomy-list__terms" data-name="{{ $name }}">
-    {{ end }}
+      {{ range . }}<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>{{ end }}
-  </ul>
+    </ul>
+  </div>
 {{ end }}