Overhaul the look of tags; integrate a category and a cute little triangle

content/blog/blog.css

@@ -1,18 +1,20 @@
 :root {
     --post-item-highlight-color: #efefef;
 
-    --tag-text-color: #666;
-    --tag-background-color: #eee;
-    --tag-hover-background-color: #bbb;
+    --tag-foreground-color: rgb(var(--super-dk-gray));
+    --tag-background-color: rgb(var(--super-lt-gray));
+    --tag-spacer-foreground-color: rgb(var(--super-dk-gray));
+    --tag-hover-background-color: rgb(var(--sub-lt-gray));
 }
 @media (prefers-color-scheme: dark) {
     :root {
         --post-item-highlight-color: #121212;
 
-        --tag-text-color: #888;
-        --tag-background-color: rgb(40, 40, 40);
-        --tag-hover-background-color: rgb(73, 73, 73);
-        --tag-hover-foreground-color: #666;
+        --tag-foreground-color: rgb(var(--sub-lt-gray));
+        --tag-background-color: rgb(var(--dk-gray));
+        --tag-spacer-foreground-color: rgb(var(--super-dk-gray));
+        --tag-hover-background-color: rgb(var(--super-dk-gray));
+        --tag-hover-foreground-color: rgb(var(--mid-gray));
     }
 }
 
@@ -32,36 +34,54 @@
     margin-block-start: 3.5rem;
 }
 
-.blog footer .tags {
+.blog .tags {
     display: flex;
     padding-inline-start: 0;
 }
 
-.blog footer .tags li {
+.blog .tags li {
     background-color: var(--tag-background-color);
+    color: var(--tag-foreground-color);
     border-radius: 4px;
     display: inline-block;
     font-size: 75%;
-    letter-spacing: 2px;
+    letter-spacing: 1px;
 }
 
-.blog footer .tags li:hover {
+.blog .tags li:hover {
     background-color: var(--tag-hover-background-color);
 }
 
-.blog footer .tags li a {
-    color: var(--tag-text-color);
+.blog .tags li a {
+    color: inherit;
     display: block;
     height: 100%;
     width: 100%;
-    padding: 0.75rem 1rem;
+    padding: 0.6rem 1rem;
 }
 
-.blog footer .tags li a:hover {
+.blog .tags li a:hover {
     color: var(--tag-hover-foreground-color);
     text-decoration: none;
 }
 
-.blog footer .tags li + li {
-    margin-inline-start: 1rem;
+.blog .tags li + li { margin-inline-start: 1rem; }
+.blog .tags li.chevron + li { margin-inline-start: 0 }
+
+.blog .tags .chevron {
+    align-items: center;
+    border: 0;
+    border-radius: 0;
+    color: var(--tag-spacer-foreground-color);
+    background-color: inherit;
+    display: flex;
+    justify-content: center;
+    margin-inline-start: 0;
+    padding-inline-start: 1px;
+    width: 2rem;
+}
+
+.blog .tags .chevron:hover {
+    color: var(--tag-background-color);
+    background-color: inherit;
 }

layouts/partials/single_main.html

@@ -14,11 +14,25 @@
   </section>
 
   <footer>
-    {{- if .Params.tags -}}
+    {{- if or .Params.categories .Params.tags -}}
     <ul class="tags">
-    {{- range (.GetTerms "tags") -}}
-      <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
-    {{- end -}}
+      {{- if .Params.categories -}}
+        {{- $categories := .GetTerms "categories" -}}
+        {{- if gt (len $categories) 1 -}}
+          {{- errorf "More than one category for %q" .Path -}}
+        {{- end -}}
+        {{- with index (.GetTerms "categories") 0 -}}
+          <li class="category"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+        {{- end -}}
+      {{- end -}}
+      {{- if and .Params.categories .Params.tags -}}
+        <li class="chevron noselect">⏵</li>
+      {{- end -}}
+      {{- if .Params.tags -}}
+        {{- range .GetTerms "tags" -}}
+          <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
+        {{- end -}}
+      {{- end -}}
     </ul>
     {{- end -}}
 

static/styles/root.css

@@ -2,7 +2,9 @@
     --black: 0, 0, 0;
     --sub-dk-gray: 16, 16, 16;
     --dk-gray: 32, 32, 32;
+    --super-dk-gray: 80, 80, 80;
     --mid-gray: 128, 128, 128;
+    --sub-lt-gray: 175, 175, 175;
     --lt-gray: 223, 223, 223;
     --super-lt-gray: 240, 240, 240;
     --white: 255, 255, 255;
@@ -521,7 +523,15 @@ p:last-child { margin-block-end: 0; }
 
 .centered { text-align: center; }
 .float-right { float: right; }
+
 .nobreak { white-space: nowrap; }
+.noselect {
+    cursor: default;
+    -webkit-user-select: none;
+    -moz-use-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
 
 .platter {
     background: var(--background-color);