From 850173ec90fb881c09c62a967a5efd9b592f0ac5 Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@users.noreply.github.com>
Date: Wed, 28 Feb 2024 10:32:37 -0800
Subject: [PATCH] feat: various markup improvements

---
 src/_includes/layouts/catalogue-item.html   | 16 +++++-------
 src/_includes/layouts/post.html             |  2 +-
 src/_includes/macros/catalogue.njk          |  8 +++---
 src/_includes/macros/posts.njk              |  6 ++---
 src/_includes/macros/tags.njk               |  7 -----
 src/_includes/partials/catalogue-types.html |  8 ++++++
 src/_includes/partials/footer.html          |  9 +++----
 src/catalogue-type.html                     | 12 ++-------
 src/catalogue.html                          | 10 +------
 src/catalogue/books/books.11tydata.js       |  2 +-
 src/css/blocks/pill.css                     | 29 ++++++++++++++++++---
 src/tags.html                               |  5 ++--
 12 files changed, 58 insertions(+), 56 deletions(-)
 delete mode 100644 src/_includes/macros/tags.njk
 create mode 100644 src/_includes/partials/catalogue-types.html

diff --git a/src/_includes/layouts/catalogue-item.html b/src/_includes/layouts/catalogue-item.html
index e5ba9a4..4683c7c 100644
--- a/src/_includes/layouts/catalogue-item.html
+++ b/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 %}
-            {% if image %}
-                {% image image, imageAlt, imageCaption %}
-            {% endif %}
-        {% endblock %}
-    </div>
+    {% block image %}
+        {% if image %}
+            {% image image, imageAlt, imageCaption %}
+        {% endif %}
+    {% endblock %}
     <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 %}
diff --git a/src/_includes/layouts/post.html b/src/_includes/layouts/post.html
index b14dc66..78ea8ec 100644
--- a/src/_includes/layouts/post.html
+++ b/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>
diff --git a/src/_includes/macros/catalogue.njk b/src/_includes/macros/catalogue.njk
index c7e405f..1c0f554 100644
--- a/src/_includes/macros/catalogue.njk
+++ b/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>
diff --git a/src/_includes/macros/posts.njk b/src/_includes/macros/posts.njk
index 6e411e4..b520635 100644
--- a/src/_includes/macros/posts.njk
+++ b/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>
diff --git a/src/_includes/macros/tags.njk b/src/_includes/macros/tags.njk
deleted file mode 100644
index 4aa16eb..0000000
--- a/src/_includes/macros/tags.njk
+++ /dev/null
@@ -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 %}
diff --git a/src/_includes/partials/catalogue-types.html b/src/_includes/partials/catalogue-types.html
new file mode 100644
index 0000000..8c1906d
--- /dev/null
+++ b/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>
diff --git a/src/_includes/partials/footer.html b/src/_includes/partials/footer.html
index ed03e91..ca547fe 100644
--- a/src/_includes/partials/footer.html
+++ b/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)">
-            <ul class="[ list-none cluster p-0 m-0 ]"
-                style="--gap: var(--spacing-0\.5)">
+        <nav class="[ flow-space-0.5 ]">
+            <ul class="[ cluster p-0 m-0 gap-0.5 ]" role="list">
                 <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 %}
diff --git a/src/catalogue-type.html b/src/catalogue-type.html
index c6d600c..c23fe86 100644
--- a/src/catalogue-type.html
+++ b/src/catalogue-type.html
@@ -13,16 +13,8 @@ eleventyComputed:
 ---
 
 {% from "macros/catalogue.njk" import yearList %}
-<h1>{{ type | pluralize | capitalize }}</h1>
-{% set catalogueTypes = collections.catalogueByType | keys %}
-<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>
+<h1>Catalogue: {{ type | pluralize | capitalize }}</h1>
+{% include "partials/catalogue-types.html" %}
 {% set itemsByYear = collections.catalogueByType[type] | reverse | organizeByDate %}
 {% set years = itemsByYear | keys | sort("desc") %}
 <section class="[ flow ]">
diff --git a/src/catalogue.html b/src/catalogue.html
index 3f53c92..e121d53 100644
--- a/src/catalogue.html
+++ b/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 %}
-<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>
+{% include "partials/catalogue-types.html" %}
 {% set itemsByYear = collections.catalogue | reverse | organizeByDate %}
 {% set years = itemsByYear | keys | sort("desc") %}
 <section class="[ flow ]">
diff --git a/src/catalogue/books/books.11tydata.js b/src/catalogue/books/books.11tydata.js
index 63c9576..5521e0a 100644
--- a/src/catalogue/books/books.11tydata.js
+++ b/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>`,
   },
 };
diff --git a/src/css/blocks/pill.css b/src/css/blocks/pill.css
index 792cd4a..9fc46ef 100644
--- a/src/css/blocks/pill.css
+++ b/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);
 }
diff --git a/src/tags.html b/src/tags.html
index 4b37292..b66ab65 100644
--- a/src/tags.html
+++ b/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 }}"
-                   class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]">{{ tag.tag }} <span class="[ pill-count ]">{{ tag.count }}</span></a>
+                <a href="/tags/{{ tag.tag | slugify }}" class="[ pill ]">{{ tag.tag }} <span class="[ pill-count ]">{{ tag.count }}</span></a>
             </li>
         {% endfor %}
     </ol>