From 2e8258613b5d861b175a6681b30f66eed1f7d00b Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ayo@ayco.io>
Date: Sat, 18 Jan 2025 18:34:16 +0100
Subject: [PATCH] style: fancy pills for tags

---
 templates/threads.html | 40 +++++++++++++++++++++++++++++-----------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/templates/threads.html b/templates/threads.html
index ba22542..82103e8 100644
--- a/templates/threads.html
+++ b/templates/threads.html
@@ -89,10 +89,6 @@
     }
 
     main.thread {
-      & h2.threads-title {
-        display: none
-      }
-
       & .card:not(:last-of-type) .card_avatar::after {
         content: " ";
         display: block;
@@ -103,6 +99,24 @@
       }
     }
 
+    .pill {
+      border-radius: 0.5em;
+      background-color: rgba(197, 209, 222, 0.5);
+      margin: 0 0.5em 0.5em 0;
+      padding: 0.5em;
+      display: inline-block;
+      font-size: var(--font-size-sm);
+      color: var(--text-color-dark);
+      text-decoration: none;
+
+      & .pill-label {
+        background-color: rgba(0, 0, 0, 0.15);
+        border-radius: 0.5em;
+        padding: 0 0.25em;
+        margin-right: 0.25em;
+      }
+    }
+
     .card_avatar img {
       border: 2px solid rgba(197, 209, 222, 0.15);
       border-radius: 50%;
@@ -271,6 +285,11 @@
           }
         }
       }
+
+      .pill {
+        background-color: rgba(0, 0, 0, 0.15);
+        color: var(--text-color-light-faded);
+      }
     }
   </style>
 </head>
@@ -286,18 +305,17 @@
   <main class={{ "thread" if threads|length==1 else "home" }}>
     {% if tags is defined%}
     <div class="featured-tags">
-      <h2>Featured tags:</h2>
-      <ul class="tags">
-        {% for tag in tags %}
-        <li><a href="{{ tag.url }}">#{{ tag.name }} ({{ tag.statuses_count }})</a> • </li>
-        {% endfor %}
-      </ul>
+      {% for tag in tags %}
+      <a class="pill" href="{{ tag.url }}">
+        <span class="pill-label">{{ tag.statuses_count }}</span>
+        {{ tag.name }}
+      </a>
+      {% endfor %}
     </div>
     {% endif %}
     <div class="back">
       <a href="{{url_for('threads.home')}}">Back</a>
     </div>
-    <h2 class="threads-title">Featured threads:</h2>
     {% for thread in threads %}
     {% with thread=thread, parent_id=thread.id, is_thread=threads|length > 1 %}
     {% include "card.html" %}