Add tentative style for tag badges

apps/rp/templates/rp/article_list_public.html

@@ -21,8 +21,9 @@
 
   <div class="row">
   <div class="col-md-10 offset-1">
+    <header class="my-4">
 
-    <ul class="nav nav-compressed my-4">
+    <ul class="nav nav-compressed">
       {% if view.filter_lang == 'EN' %}
       <li class="nav-item">
         <a class="nav-link" href="{% url 'rp:public-article-list' %}">
@@ -96,13 +97,14 @@
 
     <div class="collapse" id="collapseTags">
       {% for t in tags %}
-      <a class="badge badge-pill badge-primary" href="{% url 'rp:public-article-list-tag' filter_tag=t.name %}">
-        {{t}} {{t.num_times}}
-
+      <a class="badge badge-tag" href="{% url 'rp:public-article-list-tag' filter_tag=t.name %}">
+        <span>{{t}}</span>
       </a>
       {% endfor %}
     </div>
 
+    </header>
+
     {% for article in object_list %}
     <article class="article-card d-flex">
       <div class="article-card-img">

static/src/components/badge.css

@@ -5,3 +5,31 @@
 .badge.badge-info {
   background-color: var(--color-light-blue);
 }
+
+.badge.badge-tag {
+  border: 1px solid var(--color-light-blue);
+  color: var(--color-dark-blue);
+  font-weight: 300;
+  font-size: 0.9rem;
+
+  display: inline-flex;
+
+  margin: 0.25rem 0;
+  padding: 0;
+  & span {
+    padding: 0.50em 0.4em;
+  }
+
+  & span.badge-count {
+    border-left: 1px solid var(--color-light-blue);
+  }
+
+  &:hover, &:active, &:focus {
+    color: var(--color-black);
+    border-color: var(--color-dark-blue);
+
+    & span.badge-count {
+      border-color: var(--color-dark-blue);
+    }
+  }
+}