feat: various markup improvements

src/_includes/layouts/catalogue-item.html

@@ -6,16 +6,14 @@ imageCaption: ""
 
 {% set filteredTags = tags | filterCatalogueTags %}
 <article class="[ catalogue ] [ flow ]">
-    <div style="--flow-space: 2em">
+    {% block image %}
-        {% block image %}
+        {% if image %}
-            {% if image %}
+            {% image image, imageAlt, imageCaption %}
-                {% image image, imageAlt, imageCaption %}
+        {% endif %}
-            {% endif %}
+    {% endblock %}
-        {% endblock %}
-    </div>
     <section class="[ catalogue-meta ] [ flow ]">
         {% block title %}<h1>{{ title }}</h1>{% endblock %}
-        {% if subtitle %}<h2 class="[ text-fadeText ]" style="--flow-space: 0.25em">{{ subtitle }}</h2>{% endif %}
+        {% if subtitle %}<h2 class="[ text-fadeText flow-space-0.25 ]">{{ subtitle }}</h2>{% endif %}
         {{ tertiary | safe }}
         {% if rating %}
         <div class="[ flex justify-center ]">
@@ -24,7 +22,7 @@ imageCaption: ""
         </div>
         {% endif %}
         {% if filteredTags | length > 0 %}
-            <ul class="[ categories list-none p-0 mb-0 ] [ cluster justify-center ]">
+            <ul class="[ categories ] [ cluster justify-center p-0 ]" role="list">
                 {% for tag in filteredTags %}<li class="[ flex gap-0.25 ]">{{ tag }}</li>{% endfor %}
             </ul>
         {% endif %}

src/_includes/layouts/post.html

@@ -3,7 +3,7 @@ layout: "layouts/base"
 ---
 
 <article class="[ flow ]">
-    <header class="[ flow ]" style="--flow-space: 1rem">
+    <header class="[ flow flow-space-1 mb-2 ]">
         {% from "macros/date.njk" import format %}
         {{ format(page.date) }}
         <h1>{{ title }}</h1>

src/_includes/macros/catalogue.njk

@@ -3,9 +3,9 @@
 {% macro one(post, format) %}
 <article class="[ posts-list-item column-gap-0.5 justify-between line-height-m ]">
     <a href="{{ post.url }}">{{ post.data.title }}</a>
-    <p class="[ text-fadeText ]">{{ post.date | formatDate("MM/DD") }}</p>
+    <time datetime="{{ post.date }}" class="[ text-fadeText ]">{{ post.date | formatDate("MM/DD") }}</time>
     <div class="[ cluster mt-0.5 ]">
-        <div class="[ font-size-s ]"><p class="[ bg-surface text-fadeText p-0.5 radius-0.25 line-height-s ]">{{ post.data.tags[1] }}</p></div>
+        <div class="[ font-size-s ]"><p class="[ pill ]" data-state="small">{{ post.data.tags[1] }}</p></div>
         {% if post.data.rating %}
             {{ stars(post.data.rating) }}
         {% endif %}
@@ -14,7 +14,7 @@
 {% endmacro %}
 
 {% macro list(posts) %}
-<ol class="[ posts-list ] [ flow list-none p-0 ]">
+<ol class="[ flow p-0 ]" role="list">
     {% for post in posts %}
         <li>
             {{ one(post, format) }}
@@ -27,7 +27,7 @@
 <section class="[ flow ]">
     <header class="[ cluster gap-0.5 ]">
         <h2>{{ year }}</h2>
-        <p class="[ bg-surface text-fadeText px-0.5 py-0.25 font-size-s line-height-s radius-0.5 ]">
+        <p class="[ pill ]" data-state="extrasmall">
             {{ posts | length }}
         </p>
     </header>

src/_includes/macros/posts.njk

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

src/_includes/macros/tags.njk

@@ -1,7 +0,0 @@
-{% macro pills(tags) %}
-            {% if tags | length > 0 %}
-                <ul class="[ cluster list-none p-0 mb-0 ]" style="--gap: 0.5rem">
-                    {% for tag in tags %}<li class="[ bg-surface radius-1 px-1 py-0.5 ]">{{ tag }}</li>{% endfor %}
-                </ul>
-            {% endif %}
-{% endmacro %}

src/_includes/partials/catalogue-types.html

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

src/_includes/partials/footer.html

@@ -3,7 +3,7 @@
         <div class="[ repel ]">
             <p>&copy; {{ meta.author }} 2018-2024.</p>
             <nav>
-                <ul class="[ list-none cluster p-0 m-0 ]">
+                <ul class="[ cluster p-0 m-0 ]" role="list">
                     {% for link in navigation.bottom %}
                         <li>
                             <a href="{{ link.url }}">{{ link.text }}</a>
@@ -12,9 +12,8 @@
                 </ul>
             </nav>
         </div>
-        <nav style="--flow-space: var(--spacing-0\.5)">
+        <nav class="[ flow-space-0.5 ]">
-            <ul class="[ list-none cluster p-0 m-0 ]"
+            <ul class="[ cluster p-0 m-0 gap-0.5 ]" role="list">
-                style="--gap: var(--spacing-0\.5)">
                 <li>
                     <span class="[ visually-hidden ]">RSS</span>
                     <a href="/rss.xml" target="_blank" aria-label="View RSS feed">{% include "svgs/rss.svg" %}</a>
@@ -25,7 +24,7 @@
                         <span class="[ visually-hidden ]">{{ alt }}</span>
                         <a href="{{ url }}"
                            target="_blank"
-                           rel="external noreferrer noopener"
+                           rel="me external noreferrer noopener"
                            aria-label="View {{ alt }} page">{% include "svgs/social-" + key + ".svg" %}</a>
                     </li>
                 {% endfor %}

src/catalogue-type.html

@@ -13,16 +13,8 @@ eleventyComputed:
 ---
 
 {% from "macros/catalogue.njk" import yearList %}
-<h1>{{ type | pluralize | capitalize }}</h1>
+<h1>Catalogue: {{ type | pluralize | capitalize }}</h1>
-{% set catalogueTypes = collections.catalogueByType | keys %}
+{% include "partials/catalogue-types.html" %}
-<ul class="[ cluster p-0 gap-0.5 ]" role="list">
-    {% for type in catalogueTypes %}
-        <li>
-            <a class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]"
-               href="/catalogue/{{ type | pluralize }}">{{ type | pluralize }}<span class="[ pill-count ]">{{ collections.catalogueByType[ type ] | length }}</span></a>
-        </li>
-    {% endfor %}
-</ul>
 {% set itemsByYear = collections.catalogueByType[type] | reverse | organizeByDate %}
 {% set years = itemsByYear | keys | sort("desc") %}
 <section class="[ flow ]">

src/catalogue.html

@@ -7,15 +7,7 @@ title: Catalogue
 {% from "macros/catalogue.njk" import yearList %}
 <h1>Catalogue</h1>
 <p>A collection of my thoughts on various forms of media that I consume.</p>
-{% set catalogueTypes = collections.catalogueByType | keys %}
+{% include "partials/catalogue-types.html" %}
-<ul class="[ cluster list-none p-0 gap-0.5 ]">
-    {% for type in catalogueTypes %}
-        <li>
-            <a class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]"
-               href="/catalogue/{{ type | pluralize }}">{{ type | pluralize }}<span class="[ pill-count ]">{{ collections.catalogueByType[ type ] | length }}</span></a>
-        </li>
-    {% endfor %}
-</ul>
 {% set itemsByYear = collections.catalogue | reverse | organizeByDate %}
 {% set years = itemsByYear | keys | sort("desc") %}
 <section class="[ flow ]">

src/catalogue/books/books.11tydata.js

@@ -5,6 +5,6 @@ module.exports = {
   linkTitle: "View book details",
   eleventyComputed: {
     tertiary: (data) =>
-      `<p style="--flow-space: 0.5em"><span class="[ text-fadeText ]">by</span> ${data.author}</p>`,
+      `<p class="[ flow-space-0.5 ]"><span class="[ text-fadeText ]">by</span> ${data.author}</p>`,
   },
 };

src/css/blocks/pill.css

@@ -1,18 +1,39 @@
 .pill {
   background-color: var(--color-surface);
-  border-radius: 1rem;
+  border-radius: var(--spacing-1);
+  display: flex;
+  padding-inline: var(--spacing-1);
+  padding-block: var(--spacing-0\.5);
+  gap: var(--spacing-0\.5);
   transition:
     transform var(--transition-duration),
     background-color 75ms;
 }
 
-.pill:hover {
+.pill[data-state="small"] {
+  color: var(--color-fadeText);
+  font-size: 0.8rem;
+  line-height: 0.8rem;
+  padding-inline: var(--spacing-0\.5);
+  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);
+}
+
+.pill:not([data-state]):hover {
   background-color: var(--color-text);
   color: var(--color-primary);
   transform: translateY(-2px);
 }
 
-.pill:active {
+.pill:not([data-state]):active {
   transform: translateY(2px);
 }
 
@@ -24,6 +45,6 @@ a.pill {
   color: var(--color-fadeText);
 }
 
-.pill:hover .pill-count {
+.pill:not([data-state]):hover .pill-count {
   color: var(--color-border);
 }

src/tags.html

@@ -7,11 +7,10 @@ title: All tags
 {% set tags = collections.post | allTagCounts %}
 <section class="[ flow ]">
     <h1>{{ title }}</h1>
-    <ol class="[ cluster list-none p-0 ]" style="--gap: var(--spacing-0\.5)">
+    <ol class="[ cluster p-0 gap-0.5 ]" role="list">
         {% for tag in tags %}
             <li>
-                <a href="/tags/{{ tag.tag | slugify }}"
+                <a href="/tags/{{ tag.tag | slugify }}" class="[ pill ]">{{ tag.tag }} <span class="[ pill-count ]">{{ tag.count }}</span></a>
-                   class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]">{{ tag.tag }} <span class="[ pill-count ]">{{ tag.count }}</span></a>
             </li>
         {% endfor %}
     </ol>