A more generic tag/value component

Write styles and templates for a more generic tag/value component. Use this component
for the taxonomy lists, draft tag, and page dates in the summary template.

assets/css/050_tags.css

@@ -0,0 +1,50 @@
+
+
+
+
+
+/*****************
+ * COMPONENT: TAG
+ *****************/
+
+.tag {
+  display: flex;
+  gap: 1ch;
+  font-family: var(--font-family-monospace);
+
+  .tag__name {
+    color: var(--text-color-secondary);
+    text-transform: uppercase;
+    white-space: nowrap;
+
+    &::after {
+      content: " =";
+    }
+  }
+
+  .tag__value {
+    color: var(--text-color-primary);
+  }
+
+  .tag__value--list {
+    --spacing: 1ch;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 var(--spacing);
+    list-style-type: none;
+    margin-block: 0;
+    padding-inline-start: 0;
+  }
+
+  .tag__value__list-item {
+    padding-inline-start: 0;
+    white-space: nowrap;
+  }
+
+  .tag__value__list-item:not(:first-child)::before {
+    color: var(--text-color-secondary);
+    content: ":";
+    margin-inline-end: var(--spacing);
+  }
+}

assets/css/099_page_footer.css

@@ -8,6 +8,7 @@
 
 .page-footer {
   margin-block-start: var(--space-xl);
+  font-size: var(--text-s);
 
   :last-child {
     margin-bottom: 0;

assets/css/099_page_summary.css

@@ -1,3 +1,8 @@
+
+
+
+
+
 /**************************
  # COMPONENT: PAGE SUMMARY
  **************************/
@@ -16,8 +21,6 @@
   .page-summary__date {
     color: var(--text-color-secondary);
     display: block;
-    font-size: var(--text-s);
-    line-height: 1;
   }
 
   .page-summary__title {
@@ -40,6 +43,11 @@
     font-weight: normal;
   }
 
+  .page-summary__date,
+  .page-summary__draft {
+    font-size: var(--text-s);
+  }
+
   :is(
     .page-summary__heading,
     .page-summary__subtitle,

assets/css/099_taxonomy_list.css

@@ -1,46 +0,0 @@
-
-
-
-
-
-/***************************
- * COMPONENT: TAXONOMY LIST
- ***************************/
-
-.taxonomy-list {
-  display: flex;
-  gap: 1ch;
-  font-family: var(--font-family-monospace);
-
-  .taxonomy-list__name {
-    color: var(--text-color-secondary);
-    text-transform: uppercase;
-    white-space: nowrap;
-
-    &::after {
-      content: " =";
-    }
-  }
-
-  .taxonomy-list__terms {
-    --spacing: 1ch;
-
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0 var(--spacing);
-    list-style-type: none;
-    margin-block: 0;
-    padding-inline-start: 0;
-
-    li {
-      padding-inline-start: 0;
-      white-space: nowrap;
-    }
-
-    li:not(:first-child)::before {
-      color: var(--text-color-secondary);
-      content: ":";
-      margin-inline-end: var(--spacing);
-    }
-  }
-}