Improve the UX of the theme

Also, this is enough for a minor release.

CHANGELOG.adoc

@@ -7,6 +7,31 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version
 
 
 
+== [2.1.0] - 2020-10-28
+
+
+=== Added
+
+* Authors are now added in the post metadata template.
+
+
+=== Changed
+
+* Improve the taxonomy template inspired from the https://www.oilshell.org/blog/tags.html[Oil shell blog tags template].
+It should offer an improved user experience with the listing of the pages and a convenient link of the term as a standalone page.
+
+
+=== Fixed
+
+* The post metadata with the grey text indicating it is secondary content and whatnot.
+
+* Datetimes in the https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*[data attributes] now use full datetimes.
+
+* Authors in the data attributes in the content template now use the full data from the content frontmatter.
+
+
+
+
 == [2.0.0] - 2020-10-24
 
 

README.md

@@ -52,9 +52,9 @@ More possibilities are there if you tinker it with your own modifications.
 
 I assume you already have [Git](https://git-scm.com/) and [Hugo](https://gohugo.io/) installed.
 For future reference, the minimum Hugo version required is at v0.74.
-Additionally, the following instructions are done as if you're in a Hugo directory.
+Furthermore, the following instructions are done as if you're in a Hugo directory.
 
-Installation of a Hugo theme is pretty simple and you can do it in multiple ways.
+You can install the Hugo theme in two ways.
 
 
 ### Using Hugo module

assets/css/main.css

@@ -23,7 +23,7 @@
     --background: #000000;
     --background-light: #363537;
     --foreground: #FAFAFA;
-    --foreground-light: #E1E1E1;
+    --foreground-light: #CCCCCC;
     --grey: #919191;
 }
 
@@ -269,14 +269,56 @@ footer {
 }
 
 .post__meta {
+    color: var(--grey);
+    display: inline-block;
     margin: 0.5rem auto;
     font-size: 0.9em;
 }
 
-.post__meta > * {
-    margin: 0.5rem auto;
+.post__meta--single {
+    color: var(--grey);
+    font-size: 0.9em;
+    margin: 0.5em auto;
 }
 
+.post__meta--single > * {
+    margin: 0.5em auto;
+}
+
+.post__meta > :not(:first-child)::before {
+    content: "|";
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+}
+
+.taxonomy__header {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+}
+
+.taxonomy__header > * {
+    margin: 0;
+    margin-right: 0.25em;
+}
+
+.taxonomy__pages {
+    list-style: none;
+    padding-left: 1em;
+    margin: 1em auto;
+}
+
+.taxonomy__page {
+    display: flex;
+}
+
+.taxonomy__page :first-child {
+    white-space: nowrap;
+}
+
+.taxonomy__page > * {
+    margin-right: 0.5em;
+}
 
 /* Mobile styles */
 @media all and (max-width: 860px) {
@@ -284,11 +326,3 @@ footer {
         --font-size: 17px;
     }
 }
-
-/* Automatic color scheme detection */
-@media (prefers-color-scheme: dark) {
-  :root {
-  }
-}
-
-/* Table of contents autogenerated from Hugo */

layouts/_default/list.html

@@ -13,10 +13,20 @@ Otherwise, we take the pages of a section. */ -}}
 <article class="post">
     <h1><a href="{{ .Permalink }}" aria-label="{{ .Title }}">{{ .Title }}</a></h1>
     <div class="post__meta">
-        <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006-01-02" }}</time>
-        {{- if and .GitInfo (ne (.Date.Format "2006-01-02") (.Lastmod.Format "2006-01-02")) }}
-        (Modified on <time datetime="{{ .Lastmod.Format "2006-01-02" }}">{{ .Lastmod.Format "2006-01-02" }}</time>)
-        {{- end }}
+        <span>
+            <time datetime="{{ .Date }}">
+                {{ .Date.Format "2006-01-02" }}
+            </time>
+            {{- if and .GitInfo (ne (.Date.Format "2006-01-02") (.Lastmod.Format "2006-01-02")) }}
+            (<time datetime="{{ .Lastmod }}">{{ .Lastmod.Format "2006-01-02" }}</time>)
+            {{- end }}
+        </span>
+
+        {{- /* The authors are appended with 'et al' if there's more than one author in the map. */ -}}
+        {{ with .Params.author }}
+            {{ $author := index (first 1 .) 0 }}
+            <span data-authors="{{ jsonify . }}">{{ $author.name }}{{ if ge (len .) 2 }}, et al.{{ end }}</span>
+        {{ end }}
     </div>
 </article>
 {{ end }}

layouts/_default/single.html

@@ -4,12 +4,12 @@
     <header>
         <h1>{{ .Title }}</h1>
     </header>
-    <div class="post__meta">
+    <div class="post__meta--single">
         <!-- List the author(s) of the article. -->
         {{- with .Params.author }}
         {{- $names := slice }}
         {{- range . }}{{ $names = $names | append .name }}{{ end }}
-        <p data-content-author="{{ jsonify $names }}">{{ i18n "published_by" }}: {{ delimit $names ", " (printf " %s " (i18n "and")) }}</p>
+        <p data-content-author="{{ jsonify . }}">{{ i18n "published_by" }}: {{ delimit $names ", " (printf " %s " (i18n "and")) }}</p>
         {{- end }}
 
         <!-- Only show the creation date if the `date` field is valid. -->

layouts/_default/terms.html

@@ -3,12 +3,22 @@
 
 <h1>{{ .Title }}</h1>
 
-<ul>
-  {{ range .Data.Terms }}
-  <li>
-    <a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a> ({{ .Count }})
-  </li>
-  {{ end }}
-</ul>
+{{- range .Data.Terms }}
+  {{- $pages := (where .Pages "Params.hidden" "!=" true) }}
+  {{- if ge (len $pages) 1 }}
+  <header id="{{ .Page.Title | urlize }}" class="taxonomy__header">
+    <h2>{{ .Page.Title }}</h2>
+    <small>(<a href="{{ .Page.RelPermalink }}">Permalink</a>)</small>
+  </header>
+  <ul class="taxonomy__pages">
+  {{- range $pages }}
+      <li class="taxonomy__page">
+          <date datetime="{{ .Date }}">{{ .Date.Format "2006-01-02" }}</date>
+          <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+      </li>
+  {{- end }}
+  </ul>
+  {{- end }}
+{{- end }}
 
-{{ end }}
+{{ end }}