From 8aed72a94d0b746181a7d8d4a398b04d89276780 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sun, 20 Aug 2023 09:52:05 -0700
Subject: [PATCH] Wrap tags list in a .taxonomies <div>

Put two <ul.tags> elements inside so there's not an <li> with a triangle in it.
---
 assets/styles/root/050_tags_list.css | 29 ++++++++++--------
 layouts/partials/footer_tags.html    | 44 +++++++++++++++-------------
 2 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/assets/styles/root/050_tags_list.css b/assets/styles/root/050_tags_list.css
index 7490f3e..a9c60a8 100644
--- a/assets/styles/root/050_tags_list.css
+++ b/assets/styles/root/050_tags_list.css
@@ -1,5 +1,15 @@
+.taxonomies {
+    align-items: first baseline;
+    display: flex;
+    grid-column: content-start / content-end;
+    height: min-content;
+    position: relative;
+}
+
 ul.tags {
     display: flex;
+    flex-wrap: wrap;
+    gap: 1rem 1rem;
     height: min-content;
     margin-inline-start: 0;
     padding-inline-start: 0;
@@ -12,10 +22,7 @@ ul.tags > li {
     display: inline-block;
     font-size: 75%;
     letter-spacing: 1px;
-}
-
-ul.tags > li:first-child {
-    margin-inline-start: 0;
+    margin: 0;
 }
 
 ul.tags > li:hover {
@@ -28,6 +35,7 @@ ul.tags > li > a {
     height: 100%;
     width: 100%;
     padding: 0.6rem 1rem;
+    text-decoration: none;
 }
 
 ul.tags > li > a:hover {
@@ -35,10 +43,9 @@ ul.tags > li > a:hover {
     text-decoration: none;
 }
 
-ul.tags > li + li { margin-inline-start: 1rem; }
-ul.tags > li.chevron + li { margin-inline-start: 0 }
+ul.tags > li + li { margin-inline-start: 0; }
 
-ul.tags > .chevron {
+.taxonomies > .chevron {
     align-items: center;
     border: 0;
     border-radius: 0;
@@ -47,11 +54,7 @@ ul.tags > .chevron {
     display: flex;
     justify-content: center;
     margin-inline-start: 0;
-    padding-inline-start: 1px;
+    position: relative;
+    top: 2px;
     width: 2rem;
 }
-
-ul.tags > .chevron:hover {
-    color: var(--tag-spacer-foreground-color);
-    background-color: inherit;
-}
diff --git a/layouts/partials/footer_tags.html b/layouts/partials/footer_tags.html
index 6e88463..d9f65de 100644
--- a/layouts/partials/footer_tags.html
+++ b/layouts/partials/footer_tags.html
@@ -1,24 +1,28 @@
-{{- if or .Params.categories .Params.tags -}}
-<ul class="tags">
-  {{- if .Params.categories -}}
-    {{- $categories := .GetTerms "categories" -}}
-    {{- if gt (len $categories) 1 -}}
-      {{- errorf "More than one category for %q" .Path -}}
+<div class="taxonomies">
+  {{- if or .Params.categories .Params.tags -}}
+  <ul class="tags">
+    {{- if .Params.categories -}}
+      {{- $categories := .GetTerms "categories" -}}
+      {{- if gt (len $categories) 1 -}}
+        {{- errorf "More than one category for %q" .Path -}}
+      {{- end -}}
+
+      {{- with index (.GetTerms "categories") 0 -}}
+        <li class="category"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+      {{- end -}}
+    {{- end -}}
+  </ul>
+
+    {{- if and .Params.categories .Params.tags -}}
+      <div class="chevron noselect">⏵</div>
     {{- end -}}
 
-    {{- with index (.GetTerms "categories") 0 -}}
-      <li class="category"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+  <ul class="tags">
+    {{- if .Params.tags -}}
+      {{- range .GetTerms "tags" -}}
+        <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
+      {{- end -}}
     {{- end -}}
+  </ul>
   {{- end -}}
-
-  {{- if and .Params.categories .Params.tags -}}
-    <li class="chevron noselect">⏵</li>
-  {{- end -}}
-
-  {{- if .Params.tags -}}
-    {{- range .GetTerms "tags" -}}
-      <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
-    {{- end -}}
-  {{- end -}}
-</ul>
-{{- end -}}
+</div>