💥 feat!: add tag filtering for projects (#431)

- Card (project) images no longer require manual top/bottom margin
adjustments for proper spacing. Action needed: Review existing card
images as previous manual margin adjustments may now be
unnecessary/excessive.
- Sites using `cards.html` with tags will now load JavaScript by
default when tags are present. To maintain no-JS behaviour, explicitly
set `enable_cards_tag_filtering = false` in either `config.toml` or the
`_index.md` file where `cards.html` is used.

sass/parts/_cards.scss

@@ -1,3 +1,44 @@
+.filter-controls {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+    margin-top: 1.2rem;
+    margin-bottom: -1rem;
+    padding: 0;
+    list-style: none;
+
+    #all-projects-filter {
+        display: none;
+    }
+
+    .taxonomy-item {
+        margin: 0;
+
+        a {
+            display: inline-block;
+            box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+            border-radius: 1rem;
+            background: var(--bg-2);
+            padding: 0 16px;
+            color: var(--text-color);
+            font-size: 0.8rem;
+            text-decoration: none;
+
+            &:hover {
+                background: var(--primary-color);
+                color: var(--hover-color);
+            }
+
+            &.active {
+                background: var(--primary-color);
+                color: var(--hover-color);
+            }
+        }
+    }
+}
+
 .cards {
     display: grid;
     grid-template-rows: auto;
@@ -27,13 +68,12 @@
             padding-block-end: 24px;
             text-align: center;
         }
-
-        .card-title {
-            margin-top: 0.7em;
-        }
-
         .card-image {
-            width: 100%;
+            $margin: 1.6rem;
+            margin: $margin;
+            margin-bottom: $margin / 1.5;
+            width: calc(100% - $margin * 2);
+            height: auto;
         }
 
         .card-image-placeholder {
@@ -53,4 +93,13 @@
     .cards {
         gap: 18px;
     }
+
+    .filter-controls {
+        gap: 8px;
+        margin: 18px 0;
+
+        .taxonomy-item a {
+            padding: 4px 12px;
+        }
+    }
 }

sass/parts/_posts_list.scss

@@ -11,6 +11,19 @@ $padding: 2.5rem;
     align-items: flex-start;
     background-color: var(--navbar-color);
     padding-block: $padding;
+    min-width: 13.5rem;
+
+    .thumbnail-image {
+        margin: 0;
+        margin-inline: auto;  // Centred by default.
+        max-width: 70%;
+    }
+
+    li.date + li.post-thumbnail .thumbnail-image {
+        // Styles for the thumbnail when there's a date above (either date or updated).
+        margin-inline: 0;  // Since metadata is left aligned, the image looks weird when centred.
+        margin-block-start: 0.7rem;
+    }
 
     ul {
         margin-inline-end: 0.7rem;
@@ -24,10 +37,6 @@ $padding: 2.5rem;
             white-space: nowrap;
         }
 
-        li.date {
-            width: 13.5rem;
-        }
-
         li.draft-label {
             width: fit-content;
             line-height: 1.2rem;
@@ -137,6 +146,10 @@ $padding: 2.5rem;
                 margin-inline-end: 0.3rem;
             }
         }
+
+        .post-thumbnail {
+            display: none;
+        }
     }
 
     .bloglist-content {