Make article tags wrap like inline text

This moves the “Tagged with” label into the tag list itself, so the
footer can wrap naturally like a paragraph instead of splitting the
label and tags onto separate alignment contexts.

The CSS now treats each tag item as inline text while keeping later
items together, which avoids awkward line breaks after the label.

2 files changed, 7 insertions, 14 deletions

diff --git a/assets/static/css/style.css b/assets/static/css/style.css
index ddc2cac..268c323 100644
--- a/assets/static/css/style.css
+++ b/assets/static/css/style.css
@@ -557,30 +557,23 @@ article {
     margin-top: 1.5rem;
     color: var(--dim-foreground);
     font-style: italic;
-    margin-top: 1.5rem;
-
-    p {
-      display: inline;
-      font-size: 1.2rem;
-      line-height: 1.5;
-      margin: 0;
-      padding: 0;
-    }
 
     ul {
+      display: block;
       font-size: 1.2rem;
       line-height: 1.5;
+      list-style: none;
       margin: 0;
       padding: 0;
-      display: inline-flex;
-      flex-wrap: wrap;
-      list-style: none;
     }
 
     li {
-      display: flex;
+      display: inline;
       max-inline-size: none;
     }
+    li:not(:first-child) {
+      white-space: nowrap;
+    }
   }
 
   /* --- Article separator --- */
diff --git a/templates/macros/blog.html b/templates/macros/blog.html
index 904e59e..7f2ca60 100644
--- a/templates/macros/blog.html
+++ b/templates/macros/blog.html
@@ -75,8 +75,8 @@
     <div class="e-content">{{ post.body }}</div>
     {% if post.tags %}
       <footer>
-        <p>Tagged with</p>
         <ul aria-label="Tags">
+          <li>Tagged with</li>
           {% for tag in post.tags %}
             <li>
               {% set tag_slug = tag|trim|lower|replace(" ", "-") %}