feat: simplify pill class usage

src/_includes/macros/catalogue.njk

@@ -1,36 +1,26 @@
 {% from "macros/utils.njk" import stars %}
-
 {% macro one(post, format, showType = true) %}
-<article class="[ posts-list-item column-gap-0.5 justify-between line-height-m ]">
+    <article class="[ posts-list-item column-gap-0.5 justify-between line-height-m ]">
-    <div class="[ cluster gap-0.5 ]"><a href="{{ post.url }}" class="[ line-height-m ]">{{ post.data.title }}</a>
+        <div class="[ cluster gap-0.5 ]">
-        {% if showType %}<p class="[ font-size-s text-fadeText ]">{{ post.data.tags[1] }}</p>{% endif %}</div>
+            <a href="{{ post.url }}" class="[ line-height-m ]">{{ post.data.title }}</a>
-    <div class="[ cluster ]">
+            {% if showType %}<p class="[ font-size-s text-fadeText ]">{{ post.data.tags[1] }}</p>{% endif %}
-        {% if post.data.rating %}
+        </div>
-            {{ stars(post.data.rating) }}
+        <div class="[ cluster ]">
-        {% endif %}
+            {% if post.data.rating %}{{ stars(post.data.rating) }}{% endif %}
-    </div>
+        </div>
-</article>
+    </article>
 {% endmacro %}
-
 {% macro list(posts, showType = true) %}
-<ol class="[ flow p-0 ]" role="list">
+    <ol class="[ flow p-0 ]" role="list">
-    {% for post in posts %}
+        {% for post in posts %}<li>{{ one(post, format, showType) }}</li>{% endfor %}
-        <li>
+    </ol>
-            {{ one(post, format, showType) }}
-        </li>
-    {% endfor %}
-</ol>
 {% endmacro %}
-
 {% macro yearList(posts, year, format = "MM/DD", showType = true) %}
-<section class="[ flow ]">
+    <section class="[ flow ]">
-    <header class="[ cluster gap-0.5 ]">
+        <header class="[ cluster gap-0.5 ]">
-        <h2>{{ year }}</h2>
+            <h2>{{ year }}</h2>
-        <p class="[ pill ]" data-state="extrasmall">
+            <p class="[ pill ]">{{ posts | length }}</p>
-            {{ posts | length }}
+        </header>
-        </p>
+        {{ list(posts, format) }}
-    </header>
+    </section>
-    {{ list(posts, format) }}
-</section>
 {% endmacro %}
-

src/_includes/macros/posts.njk

@@ -1,29 +1,21 @@
 {% macro one(post, format = "MM/DD") %}
-<article class="[ posts-list-item column-gap-0.5 justify-between line-height-l ]">
+    <article class="[ posts-list-item column-gap-0.5 justify-between line-height-l ]">
-    <a href="{{ post.url }}">{{ post.data.title }}</a>
+        <a href="{{ post.url }}">{{ post.data.title }}</a>
-    <time datetime="{{ post.date }}" class="[ text-fadeText ]">{{ post.date | formatDate(format) }}</time>
+        <time datetime="{{ post.date }}" class="[ text-fadeText ]">{{ post.date | formatDate(<built-in function format>) }}</time>
-    <p class="[ text-fadeText font-size-s line-height-m ]">{{ post.data.excerpt }}</p>
+        <p class="[ text-fadeText font-size-s line-height-m ]">{{ post.data.excerpt }}</p>
-</article>
+    </article>
 {% endmacro %}
-
 {% macro list(posts, format = "MM/DD") %}
-<ol class="[ flow p-0 ]" role="list">
+    <ol class="[ flow p-0 ]" role="list">
-    {% for post in posts %}
+        {% for post in posts %}<li class="[ flow-space-0.5 ]">{{ one(post, format) }}</li>{% endfor %}
-        <li class="[ flow-space-0.5 ]">
+    </ol>
-            {{ one(post, format) }}
-        </li>
-    {% endfor %}
-</ol>
 {% endmacro %}
-
 {% macro yearList(posts, year, format = "MM/DD") %}
-<section class="[ flow ]">
+    <section class="[ flow ]">
-    <header class="[ cluster gap-0.5 ]">
+        <header class="[ cluster gap-0.5 ]">
-        <h2>{{ year }}</h2>
+            <h2>{{ year }}</h2>
-        <p class="[ pill ]" data-state="extrasmall">
+            <p class="[ pill ]">{{ posts | length }}</p>
-            {{ posts | length }}
+        </header>
-        </p>
+        {{ list(posts, format) }}
-    </header>
+    </section>
-    {{ list(posts, format) }}
-</section>
 {% endmacro %}

src/_includes/partials/catalogue-types.html

@@ -1,11 +1,11 @@
 {% set catalogueTypes = collections.catalogueByType | keys %}
 <ul class="[ cluster p-0 gap-0.5 ]" role="list">
     <li>
-        <a class="[ pill ]" href="/catalogue">all<span class="[ pill-count ]">{{ collections.catalogue | length }}</span></a>
+        <a class="[ button ]" href="/catalogue">all<span class="[ button__count ]">{{ collections.catalogue | length }}</span></a>
     </li>
     {% for type in catalogueTypes %}
         <li>
-            <a class="[ pill ]" href="/catalogue/{{ type | pluralize }}">{{ type | pluralize }}<span class="[ pill-count ]">{{ collections.catalogueByType[ type ] | length }}</span></a>
+            <a class="[ button ]" href="/catalogue/{{ type | pluralize }}">{{ type | pluralize }}<span class="[ button__count ]">{{ collections.catalogueByType[ type ] | length }}</span></a>
         </li>
     {% endfor %}
 </ul>

src/css/blocks/button.css

@@ -88,3 +88,15 @@
     }
   }
 }
+
+.button__count {
+  color: var(--color-fadeText);
+}
+
+@media (hover: hover) {
+  .button:hover {
+    .button__count {
+      color: var(--color-border);
+    }
+  }
+}

src/css/blocks/pill.css

@@ -1,82 +1,11 @@
 .pill {
   display: inline-flex;
   align-items: center;
-  padding-inline: var(--spacing-1);
+  background-color: var(--color-surface);
-  padding-block: var(--spacing-0\.5);
-  gap: var(--spacing-0\.5);
-  position: relative;
-
-  transition: transform 0.1s ease;
-
-  &::before,
-  &::after {
-    position: absolute;
-    inset: 0;
-    content: "";
-    z-index: -1;
-    border-radius: var(--spacing-1);
-
-    transition: opacity 0.3s ease;
-  }
-
-  &::before {
-    background-color: var(--color-surface);
-  }
-
-  &::after {
-    background-color: var(--color-text);
-    opacity: 0;
-  }
-}
-
-.pill[data-state="small"] {
   color: var(--color-fadeText);
   font-size: 0.8rem;
   line-height: 0.8rem;
   padding-inline: var(--spacing-0\.5);
   padding-block: var(--spacing-0\.25);
-  border-radius: var(--spacing-0\.25);
-}
-
-.pill[data-state="extrasmall"] {
-  color: var(--color-fadeText);
-  padding-inline: var(--spacing-0\.5);
-  padding-block: var(--spacing-0\.25);
-  font-size: 0.8rem;
-  line-height: 0.8rem;
   border-radius: var(--spacing-0\.5);
 }
-
-button.pill:hover,
-a[href].pill:hover {
-  color: var(--color-primary);
-  transform: translateY(-2px);
-
-  &::before {
-    opacity: 0;
-  }
-
-  &::after {
-    opacity: 1;
-  }
-}
-
-button.pill:active,
-a[href].pill:active {
-  transform: translateY(2px);
-}
-
-a.pill {
-  text-decoration: none;
-}
-
-.pill-count {
-  color: var(--color-fadeText);
-}
-
-button.pill:hover,
-a[href].pill:hover {
-  .pill-count {
-    color: var(--color-border);
-  }
-}

src/pages/catalogue-type.html

@@ -13,7 +13,7 @@ eleventyComputed:
 ---
 
 {% from "macros/catalogue.njk" import yearList %}
-<h1>Catalogue: {{ type | pluralize | capitalize }}</h1>
+<h1>{{ type | pluralize | capitalize }}</h1>
 {% include "partials/catalogue-types.html" %}
 {% set itemsByYear = collections.catalogueByType[type] | reverse | organizeByDate %}
 {% set years = itemsByYear | keys | sort("desc") %}

src/pages/styleguide.html

@@ -34,19 +34,13 @@ description: A demo of the site's theme.
     <div class="[ size-2 ]" style="background-color: var(--color-shadow)"></div>
 </div>
 <hr />
-<div class="[ flex ]">
+<div class="[ flex gap-1 ]">
     <a href="#" class="[ button ]">A button</a>
+    <a href="#" class="[ button ]">A button with count <span class="[ button__count ]">4</span></a>
 </div>
 <div class="[ flex flex-wrap gap-1 ]">
-    <a href="#" class="[ pill ]">A pill</a>
+    <p class="[ pill ]">A pill</p>
-    <a href="#" class="[ pill ]">
+    <p class="[ pill ]">99+</p>
-        A pill link with a count <span class="[ pill-count ]">3</span>
-    </a>
-    <p class="[ pill ]">
-        A pill with a count <span class="[ pill-count ]">3</span>
-    </p>
-    <p class="[ pill ]" data-state="small">A small pill</p>
-    <p class="[ pill ]" data-state="extrasmall">99+</p>
 </div>
 <hr />
 <a href="#">A link</a>

src/pages/tags.html

@@ -9,7 +9,7 @@ description: Browse posts by all tags.
     <ol class="[ cluster p-0 gap-0.5 ]" role="list">
         {% for tag in tags %}
             <li>
-                <a href="/tags/{{ tag.tag | slugify }}" class="[ pill ]">{{ tag.tag }} <span class="[ pill-count ]">{{ tag.count }}</span></a>
+                <a href="/tags/{{ tag.tag | slugify }}" class="[ button ]">{{ tag.tag }} <span class="[ button__count ]">{{ tag.count }}</span></a>
             </li>
         {% endfor %}
     </ol>