feat: use homogeneous tag component

themes/paprika/assets/app.css

@@ -387,22 +387,28 @@ article {
     white-space: nowrap;
     scrollbar-width: none;
 
-    a {
-      position: relative;
-      z-index: 2; /* above the inset link */
-  
-      display: inline-block;
-      color: var(--lit);
-      padding: 0.4rem 1rem;
-      border-radius: 0.5rem;
-      transition: background-color 200ms, color 200ms;
-      border: 0.35rem solid var(--fog);
+  }
+}
 
-      &:hover {
-        background-color: var(--fog);
-        color: var(--foreground);
-      }
-    }
+nav[data-tag] {
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.tag {
+  position: relative;
+  z-index: 2; /* above the inset link */
+
+  display: inline-block;
+  color: var(--lit);
+  padding: 0.4rem 1rem;
+  border-radius: 0.5rem;
+  transition: background-color 200ms, color 200ms;
+  border: 0.35rem solid var(--fog);
+
+  &:hover {
+    background-color: var(--fog);
+    color: var(--foreground);
   }
 }
 

themes/paprika/layouts/_default/list.html

@@ -26,12 +26,9 @@
 
   <h2>{{ .Title }}</h2>
   {{ partial "description" . }}
-  <nav>
-    {{ range .Params.tags }}
-      <a href="/tags/{{ . | urlize }}">{{ . }}</a>
-    {{ end }}
-  </nav>
+  <nav>{{ partial "tags" . }}</nav>
 </article>
+
 {{ end }}
 
 {{ if gt $paginator.TotalPages 1 }}

themes/paprika/layouts/_default/single.html

@@ -7,9 +7,9 @@
   </hgroup>
   <section class="post-content" data-pagefind-body>{{ .Content }}</section>
 
-  <footer class="post-tags" data-pagefind-meta="tags">
-    {{ partial "tags" . }}
-  </footer>
+  <nav data-tag>
+  {{ partial "tags" . }}
+  </nav>
 
   <!-- Post Nav -->
   {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}

themes/paprika/layouts/partials/tags.html

@@ -1,3 +1,3 @@
 {{ range .Params.tags }} {{ $href := print (absURL "tags/") (urlize .) }}
-<a href="{{ $href }}" class="list-tag">{{ . }}</a>
+<a href="{{ $href }}" class="tag">{{ . }}</a>
 {{ end }}