New tag and index-item style

static/css/tailwind-main.css

@@ -101,8 +101,18 @@
       grid-row: 2/2;
     }
   }
+  .tags-inline {
+    @apply flex flex-wrap leading-loose m-0 gap-x-2;
+  }
+  .series {
+    @apply hover:underline;
+    &::before {
+      content: "§ ";
+      @apply font-bold text-accent-strong;
+    }
+  }
   .tag {
-    @apply rounded mt-0 mb-1 mr-2 px-2 py-1 text-special-strong bg-special;
+    @apply rounded px-2 py-1 text-accent-strong bg-accent-light;
     &::before {
       content: "#";
     }
@@ -118,13 +128,6 @@
       @apply pl-6;
     }
   }
-  a.index-item {
-    @apply text-primary hover:no-underline;
-    & > div {
-      /* extend the background highlight on hover, then counter the left padding */
-      @apply p-2 -ml-2;
-    }
-  }
   ul.illust-index {
     @apply p-0 flex flex-wrap gap-x-4;
     li {

tailwind.config.js

@@ -30,6 +30,7 @@ module.exports = {
         secondary: "#333333",
         accent: "#cdadff",
         "accent-strong": "#4d2b82",
+        "accent-light": "#cdadff30",
         special: "#cdecff",
         "special-strong": "#246084",
         "special-light": "#cdecff50",

templates/index.html

@@ -5,7 +5,7 @@ <h1 class="text-4xl">Kisaragi Hiu</h1>
     {{ partial "content" . }}
     <hr class="mt-8" />
     <h1 class="text-xl">Posts</h1>
-    <ul class="index">
+    <ul class="flex flex-col gap-4">
       <!-- prettier-ignore -->
       {{ range (sort (union (where .Site.RegularPages "Section" "")
                             (where .Site.RegularPages "Section" "blog"))

templates/partials/func-page-term.html

@@ -10,8 +10,20 @@
      .GetTerms("tags"):
        (partial "func-page-term" (dict "page" . "taxonomy" "tags"))
 -->
-{{ $terms := (slice) }}
-{{ range .page.Param .taxonomy }}
-{{ $terms = (union $terms (slice ((site).GetPage (printf "/%s/%s" $.taxonomy (anchorize .)))))}}
+{{ $term_pages := (slice) }}
+{{ $terms := .page.Param .taxonomy }}
+
+<!-- Code below expects a list of strings, so make sure it's not just a single string.
+     Yes, this is how you test for the type of a variable. I hate this language.
+     https://discourse.gohugo.io/t/how-to-test-if-a-variable-is-of-a-certain-type/9207
+-->
+{{ if (eq "string" (printf "%T" $terms)) }}
+{{ $terms = (slice $terms) }}
 {{ end }}
-{{ return $terms }}
+
+<!-- Extract the page object for each term -->
+{{ range $terms }}
+{{ $term_pages = (union $term_pages (slice ((site).GetPage (printf "/%s/%s" $.taxonomy (anchorize .)))))}}
+{{ end }}
+
+{{ return $term_pages }}

templates/partials/index-item.html

@@ -4,23 +4,34 @@
    - series(?)
    - Tags
    - Title (link)-->
-<a class="index-item" href="{{ .Permalink }}">
-  <div
-    class="
-      hover:bg-special-light
-      transition
-      duration-100
-      ease-in-out
-      rounded-lg
-      flex flex-col-reverse
-      items-start
-      md:items-center md:flex-row
-    "
-  >
-    <div class="my-0 text-secondary font-mono mr-2 text-base">
-      <!-- Ideally we want to show both creation and modification times. -->
-      {{ with .Params.created }} {{ partial "date" . }} {{ end }}
+
+<div
+  class="
+    flex flex-col
+    gap-y-2
+    hover:bg-accent-light
+    transition
+    duration-100
+    ease-in-out
+    rounded
+    p-4
+    -ml-4
+  "
+>
+  <a href="{{ .Permalink }}">
+    <div>
+      <div class="font-bold">{{.Title}}</div>
+      <div class="font-mono">{{ partial "date" .Date }}</div>
     </div>
-    <h2 class="m-0 font-normal text-lg">{{ .Title }}</h2>
-  </div>
-</a>
+  </a>
+  <!-- prettier-ignore -->
+  {{ with (index (partial "func-page-term" (dict "page" . "taxonomy" "series"))
+                 0) }}
+  <a class="series" href="{{.Permalink}}">{{.LinkTitle}}</a>
+  {{ end }}
+  <ul class="tags-inline">
+    {{ range (partial "func-page-term" (dict "page" . "taxonomy" "tags")) }}
+    <li>{{ partial "tag" . }}</li>
+    {{ end }}
+  </ul>
+</div>

templates/partials/projects.html

@@ -14,8 +14,12 @@
         <td>
           <!-- prettier-ignore -->
           {{ with .GetTerms "tags" }}
-        {{ partial "tags-inline" . }}
-        {{ end }}
+            <ul class="tags-inline">
+                {{ range . }}
+                <li>{{ partial "tag" . }}</li>
+                {{ end }}
+            </ul>
+          {{ end }}
         </td>
         <td>
           <!-- prettier-ignore -->

templates/partials/tag.html

@@ -0,0 +1,3 @@
+<a class="tag hover:underline" href="{{ .Permalink }}"
+  >{{ .LinkTitle | lower }}</a
+>

templates/partials/tags-block.html

@@ -1,7 +1,7 @@
-<ul class="list-none pl-0 flex flex-wrap gap-y-1 leading-loose my-4">
+<ul class="list-none pl-0 flex flex-wrap gap-x-2 gap-y-1 leading-loose my-4">
   {{ range . }}
   <li>
-    <a class="tag" href="{{ .Permalink }}">{{ .LinkTitle | lower }}</a>
+    {{ partial "tag" . }}
   </li>
   {{ end }}
 </ul>