style: adjust hashtag pills colors

static/pills.css

@@ -0,0 +1,55 @@
+.featured-tags,
+.tag-bar {
+  & .pill {
+    border-radius: 5px;
+    border: 1px solid;
+    border-color: rgba(197, 209, 222, 0.25);
+    background-color: rgba(197, 209, 222, 0.15);
+    margin-bottom: 0.5em;
+    padding: 0.25em 1em;
+    display: inline-block;
+    font-size: var(--font-size-sm);
+    color: var(--text-color-dark-faded);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--color-link);
+      border: 1px solid var(--color-link);
+    }
+
+    & .pill-label {
+      background-color: rgba(0, 0, 0, 0.15);
+      border-radius: 0.5em;
+      padding: 0 0.25em;
+      margin-right: 0.25em;
+      font-weight: bold;
+    }
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .featured-tags,
+  .tag-bar {
+    & .pill {
+      color: var(--text-color-light-faded);
+      border: 1px solid;
+      border-color: rgba(0, 0, 0, 0.25);
+      background-color: rgba(0, 0, 0, 0.15);
+      text-decoration: none;
+
+      &:hover {
+        color: var(--color-brand-complement);
+        border: 1px solid var(--color-brand-complement);
+      }
+    }
+  }
+}
+
+.featured-tags .pill {
+  color: var(--text-color-dark);
+}
+
+@media (prefers-color-scheme: dark) {
+  .featured-tags .pill {
+    color: var(--text-color-light);
+  }
+}

templates/_home.html

@@ -25,6 +25,10 @@
   <!-- Use parent app's variables & reset stylesheets -->
   <link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
   <link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
+
+  <!-- threads specific static css-->
+  <link rel="stylesheet" href="{{ url_for('threads.static', filename='pills.css') }}" />
+
   <style>
     html {
       scroll-behavior: smooth;
@@ -114,29 +118,6 @@
       display: none;
     }
 
-    .pill {
-      border-radius: 2em;
-      background-color: rgba(197, 209, 222, 0.25);
-      margin-bottom: 0.5em;
-      padding: 0.5em 1em;
-      display: inline-block;
-      font-size: var(--font-size-sm);
-      color: var(--text-color-dark);
-      text-decoration: none;
-
-      &:hover {
-        color: var(--color-link);
-      }
-
-      & .pill-label {
-        font-weight: bold;
-        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%;
@@ -168,14 +149,6 @@
         }
       }
 
-      .pill {
-        background-color: rgba(0, 0, 0, 0.15);
-        color: var(--text-color-light-faded);
-
-        &:hover {
-          color: var(--color-brand-complement);
-        }
-      }
     }
   </style>
 </head>

templates/_tag.html

@@ -25,6 +25,10 @@
   <!-- Use parent app's variables & reset stylesheets -->
   <link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
   <link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
+
+  <!-- threads specific static css-->
+  <link rel="stylesheet" href="{{ url_for('threads.static', filename='pills.css') }}" />
+
   <style>
     html {
       scroll-behavior: smooth;
@@ -109,28 +113,6 @@
       }
     }
 
-    .pill {
-      border-radius: 2em;
-      background-color: rgba(197, 209, 222, 0.25);
-      margin-bottom: 0.5em;
-      padding: 0.5em 1em;
-      display: inline-block;
-      font-size: var(--font-size-sm);
-      color: var(--text-color-dark);
-      text-decoration: none;
-
-      &:hover {
-        color: var(--color-link);
-      }
-
-      & .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%;
@@ -161,15 +143,6 @@
           border-right: 2px solid rgba(197, 209, 222, 0.15);
         }
       }
-
-      .pill {
-        background-color: rgba(0, 0, 0, 0.15);
-        color: var(--text-color-light-faded);
-
-        &:hover {
-          color: var(--color-brand-complement);
-        }
-      }
     }
   </style>
 </head>

templates/card.html

@@ -17,8 +17,8 @@
 
     & .body {
 
-      .hashtag,
+      .hashtag:not(.pill),
-      .mention {
+      .mention:not(.pill) {
         color: var(--text-color-dark-faded);
         text-decoration: none;
 
@@ -128,8 +128,8 @@
 
       & .body {
 
-        .hashtag,
+        .hashtag:not(.pill),
-        .mention {
+        .mention:not(.pill) {
           color: var(--text-color-light-faded);
           text-decoration: none;
 
@@ -158,15 +158,6 @@
         }
       }
     }
-
-    .pill {
-      background-color: rgba(0, 0, 0, 0.15);
-      color: var(--text-color-light-faded);
-
-      &:hover {
-        color: var(--color-brand-complement);
-      }
-    }
   }
 </style>
 <article class="card">

templates/tag-pills.html

@@ -1,8 +1,10 @@
 <div class="featured-tags">
     {% for tag in tags %}
-    <a class="pill" href="{{url_for('threads.tag', id=tag.name) }}">
+    <a class="hashtag pill" href="{{url_for('threads.tag', id=tag.name) }}">
-        <span class="pill-label">{{ tag.statuses_count }}</span>
         {{ tag.name }}
+        {% if tag.statuses_count is defined %}
+        <span class="pill-label">{{ tag.statuses_count }}</span>
+        {% endif %}
     </a>
     {% endfor %}
 </div>