list tags on posts page

site/_includes/collection.njk

@@ -3,6 +3,7 @@ layout: "base.njk"
 eleventyComputed:
   title: "{{ page.fileSlug | capitalize }}"
 ---
+
 {%- from "components/collectionList.njk" import collectionList with context -%}
 <main>
   <section data-pagefind-body>
@@ -10,6 +11,15 @@ eleventyComputed:
   </section>
   {% set tag = page.fileSlug %}
   {% if collections[tag] %}
+    {% if tag === "posts" %}
+      <div style="--totalTags:{{ collections.categories | dictsort | length }}">
+        {%- for tag, data in collections.categories -%}
+          <a class="button tag" style="--tagIndex:{{ collections.categories[tag].id }}" href="/tags/{{ tag | slugify }}/">{{ tag }}
+            <span class="tagCount">{{ data.count }}</span>
+          </a>
+        {%- endfor -%}
+      </div>
+    {% endif %}
     {{ collectionList(tag) }}
   {% endif %}
-</main>
+</main>

site/_includes/css/site.css

@@ -19,9 +19,9 @@ body {
   --c-bg1: oklch(15% 0.05 calc(var(--hue-main) + 30));
   --c-bg2: oklch(15% 0.05 calc(var(--hue-main) - 30));
   --c-dark: oklch(19.1% 0.005 var(--hue-main));
-  --c-text-background-light: oklch(45% 0.135 var(--hue-main) / 0.3);
-  --c-text-light: oklch(94% 0.045 calc(var(--hue-main) + 180));
-  --c-text-dark: oklch(94% 0.045 calc(var(--hue-main) + 180));
+  --c-text-background: oklch(45% 0.135 var(--hue-main) / 0.3);
+  --c-text: oklch(94% 0.045 calc(var(--hue-main) + 180));
+  --c-text-dim: oklch(94% 0.045 calc(var(--hue-main) + 180) / 0.67);
   --tag-luminance: 0.85;
 
   --ratio: 1.333;
@@ -55,7 +55,7 @@ body {
     "Inter", "Inter Variable", Ubuntu, "Noto Sans", "Fira Sans", Roboto,
     "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
   background-color: var(--c-body-background);
-  color: var(--c-text-dark);
+  color: var(--c-text);
   background-image:
     url(/noise.png),
     radial-gradient(ellipse at -20% 20vmin, var(--c-bg1), transparent 90%),
@@ -68,7 +68,7 @@ body {
 
 ::selection {
   background: var(--c-highlight);
-  color: var(--c-text-dark);
+  color: var(--c-text);
 }
 
 mark {
@@ -105,7 +105,7 @@ a[href] {
 nav label:has(input:focus-visible),
 nav label:has(input:checked) {
   outline: none;
-  color: var(--c-text-dark);
+  color: var(--c-text);
   background-color: var(--glowColor);
   box-shadow:
     0 0 0.5rem var(--glowColor),
@@ -121,18 +121,7 @@ nav label:has(input:checked) {
 :is(a[href], button, nav label):focus-visible,
 nav label:has(input:focus-visible) {
   z-index: 1;
-  outline: 2px solid var(--c-text-dark);
-}
-
-.tag {
-  &::before {
-    content: "#";
-  }
-  --glowColor: oklch(var(--tag-luminance) 0.25 calc(25 + 360 * var(--tagIndex, 0) / var(--totalTags, 1)) / 0.3);
-  color: oklch(var(--tag-luminance) 0.25 calc(25 + 360 * var(--tagIndex, 0) / var(--totalTags, 1)) / 0.8);
-  &:hover {
-    color: var(--c-text-dark);
-  }
+  outline: 2px solid var(--c-text);
 }
 
 main p img {
@@ -269,6 +258,7 @@ ul.collection {
       &::before {
         content: none;
       }
+      color: var(--c-text-dim);
       width: 100%;
     }
     + li {
@@ -312,7 +302,7 @@ sup {
 }
 
 body > header {
-  color: var(--c-text-dark);
+  color: var(--c-text);
   padding: 0 var(--inset) 0;
   border-radius: 0.5rem 0.5rem 0 0;
   padding-top: env(safe-area-inset-top, 0);
@@ -371,8 +361,7 @@ body > header > nav {
     --c-accent: black;
     --c-body-background: white;
 
-    --c-text-light: black;
-    --c-text-dark: black;
+    --c-text: black;
 
     --content-width: 100vw;
   }
@@ -444,7 +433,7 @@ body > footer {
   padding: 0.1rem 0.25rem;
   margin: 0;
   border-radius: 0 !important;
-  background-color: var(--c-text-background-light);
+  background-color: var(--c-text-background);
   > input[type="radio"] {
     z-index: -2;
     position: absolute;
@@ -587,7 +576,7 @@ a.header-anchor {
 :not(pre) > code,
 pre {
   font-family: "Commit Mono", monospace;
-  background-color: var(--c-text-background-light);
+  background-color: var(--c-text-background);
   padding: 0.1em;
   border-radius: 0.5em;
 }
@@ -662,17 +651,21 @@ body .isso-preview {
     -45deg,
     transparent,
     transparent 10px,
-    var(--c-text-background-light) 10px,
-    var(--c-text-background-light) 20px
+    var(--c-text-background) 10px,
+    var(--c-text-background) 20px
   );
 }
+body .isso-post-action > input, button {
+  color: inherit;
+}
 body .isso-post-action > input,
 button, a.button {
-  color: inherit;
+  display: inline-block;
   text-decoration: none;
-  background-color: var(--c-text-background-light);
+  background-color: var(--c-text-background);
   font-size: 1rem;
-  padding: calc(0.5rem + 1px) 0.5rem;
+  padding: 0.5rem;
+  margin: 0 0.2em 0.2em 0;
   border-radius: 0.2rem;
   border: none;
   cursor: pointer;
@@ -682,8 +675,31 @@ button, a.button {
   &:focus-visible {
     background-color: var(--c-accent);
     box-shadow:
-      0 0 0.5rem var(--c-accent),
-      0 0 1rem var(--c-accent);
+    0 0 0.5rem var(--c-accent),
+    0 0 1rem var(--c-accent);
+  }
+}
+
+.tag {
+  display: inline-flex;
+  &::before {
+    content: "#";
+  }
+  --tagLCH: var(--tag-luminance) 0.25 calc(25 + 360 * var(--tagIndex, 0) / var(--totalTags, 1));
+  --glowColor: oklch(var(--tagLCH) / 0.3);
+  --c-text-background: color-mix(in oklch, oklch(var(--tagLCH) / 0.4), #000A 50%);
+  --c-accent: color-mix(in oklch, oklch(var(--tagLCH) / 0.8), #000A 50%);
+  color: oklch(var(--tagLCH) / 0.8);
+  &:hover {
+    color: var(--c-text);
+  }
+  .tagCount {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-size: calc(1em / var(--ratio));
+    color: var(--c-text);
+    width: 2em;
   }
 }
 

site/pages/tags.njk

@@ -1,16 +0,0 @@
----
-layout: base.njk
-title: Tags
-permalink: /tags/
----
-
-<main>
-  <ul class="collection" style="--totalTags:{{ collections.categories | dictsort | length }}">
-    {%- for tag, data in collections.categories -%}
-      <li>
-        <a class="tag" style="--tagIndex:{{ collections.categories[tag].id }}" href="/tags/{{ tag | slugify }}">{{ tag }}</a>
-        <aside>{{ data.count }}</aside>
-      </li>
-    {%- endfor -%}
-  </ul>
-</main>