improve semantic HTML for post-links

Author: ethmarks

assets/modules/post-link.css

@@ -61,6 +61,9 @@
         gap: 0.4em;
         flex-shrink: 0;
         margin-left: 1em;
+        list-style: none;
+        padding: 0;
+        margin: 0;
 
         @media (max-width: 1000px) {
             display: none;
@@ -91,7 +94,7 @@
         font-weight: 700;
         display: block;
         color: var(--color-text);
-        margin-bottom: 0;
+        margin: 0;
         transition: color 0.3s ease;
     }
 
@@ -101,6 +104,6 @@
         color: var(--color-text-secondary);
         line-height: 1.4;
         display: block;
-        margin-top: 0.25rem;
+        margin: 0.25rem 0 0 0;
     }
 }

layouts/partials/post-links.html

@@ -2,18 +2,20 @@
     {{ range (where . "Params.unlisted" "ne" true).ByDate.Reverse }} {{ $post :=
     . }} {{ $minRead := math.Ceil (div (countwords $post.Content) 200.0) }}
     <a class="post-link" href="{{ .Permalink | relURL }}">
-        <span class="content">
-            <span class="title">{{ .Title }}</span>
-            <span class="description">
-                {{ .Date.Format "January 2, 2006" }} {{ if gt $minRead 1 }} · {{
-                $minRead }} min read{{ end }}
-            </span>
-        </span>
-        <span class="tags">
+        <div class="content">
+            <h3 class="title">{{ .Title }}</h3>
+            <p class="description">
+                <time datetime="{{ .Date.Format "2006-01-02" }}">
+                    {{ .Date.Format "January 2, 2006" }}
+                </time>
+                {{ if gt $minRead 1 }} · {{ $minRead }} min read{{ end }}
+            </p>
+        </div>
+        <ul class="tags">
             {{ range .Params.tags }}
-            <span class="tag">{{ . }}</span>
+            <li class="tag">{{ . }}</li>
             {{ end }}
-        </span>
+        </ul>
     </a>
     {{ end }}
 </nav>