From f7928c21901e3e92d3410b5af472e335b1b5dec1 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Tue, 8 Oct 2024 21:58:57 -0700
Subject: [PATCH] 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         | 44 ++++++++++++++----------
 layouts/partials/page/taxonomy_list.html | 11 +++---
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/assets/css/099_taxonomy_list.css b/assets/css/099_taxonomy_list.css
index 47fcc43..ad0ffd5 100644
--- a/assets/css/099_taxonomy_list.css
+++ b/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;
-    font-family: var(--font-family-monospace);
-    gap: var(--spacing);
-    list-style-type: none;
-    margin-block: 0;
-    padding-inline-start: 0;
+  .taxonomy-list__name {
+    color: var(--text-color-secondary);
+    text-transform: uppercase;
 
-    &::before {
-        color: var(--text-color-secondary);
-        content: attr(data-name) " =";
-        text-transform: uppercase;
+    &::after {
+      content: " =";
     }
+  }
 
-    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 {
-        color: var(--text-color-secondary);
-        content: ":";
-        margin-inline-start: var(--spacing);
-    }
+      li {
+        padding-inline-start: 0;
+      }
+
+      li:not(:last-child)::after {
+          color: var(--text-color-secondary);
+          content: ":";
+          margin-inline-start: var(--spacing);
+      }
+  }
 }
diff --git a/layouts/partials/page/taxonomy_list.html b/layouts/partials/page/taxonomy_list.html
index fc5df6d..f684799 100644
--- a/layouts/partials/page/taxonomy_list.html
+++ b/layouts/partials/page/taxonomy_list.html
@@ -13,9 +13,10 @@
   {{- with T $taxonomy (len .) }}
     {{ $name = . }}
   {{ end -}}
-  <ul class="taxonomy-list" data-name="{{ $name }}">
-    {{ range . }}
-      <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
-    {{ end }}
-  </ul>
+  <div class="taxonomy-list">
+    <span class="taxonomy-list__name">{{ $name }}</span>
+    <ul class="taxonomy-list__terms" data-name="{{ $name }}">
+      {{ range . }}<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>{{ end }}
+    </ul>
+  </div>
 {{ end }}