From 448c48281c5a294211b6fcf327458352919dc5bc Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sat, 12 Oct 2024 09:22:35 -0700
Subject: [PATCH] Get taxonomy lists to wrap correctly

Do not allow any element to wrap (white-space: nowrap) but do allow the flexbox
to wrap.

Shift the colon separators to the ::before pseudoelement so the colon appears
on the leading side of the taxonomy item when it wraps.

Remove the vertical gap from the flexbox.
---
 assets/css/099_taxonomy_list.css | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/assets/css/099_taxonomy_list.css b/assets/css/099_taxonomy_list.css
index ad0ffd5..b6f6a82 100644
--- a/assets/css/099_taxonomy_list.css
+++ b/assets/css/099_taxonomy_list.css
@@ -15,6 +15,7 @@
   .taxonomy-list__name {
     color: var(--text-color-secondary);
     text-transform: uppercase;
+    white-space: nowrap;
 
     &::after {
       content: " =";
@@ -22,22 +23,24 @@
   }
 
   .taxonomy-list__terms {
-      --spacing: 1ch;
+    --spacing: 1ch;
 
-      display: flex;
-      gap: var(--spacing);
-      list-style-type: none;
-      margin-block: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 var(--spacing);
+    list-style-type: none;
+    margin-block: 0;
+    padding-inline-start: 0;
+
+    li {
       padding-inline-start: 0;
+      white-space: nowrap;
+    }
 
-      li {
-        padding-inline-start: 0;
-      }
-
-      li:not(:last-child)::after {
-          color: var(--text-color-secondary);
-          content: ":";
-          margin-inline-start: var(--spacing);
-      }
+    li:not(:first-child)::before {
+      color: var(--text-color-secondary);
+      content: ":";
+      margin-inline-end: var(--spacing);
+    }
   }
 }