Overhaul the blog list template

layouts/blog/list.html

@@ -3,23 +3,18 @@
 {{ end }}
 
 {{ define "main" }}
-{{ range .Pages.ByDate.GroupByDate "2006" }}
-  <h2>{{ .Key }}</h2>
+<section id="by-date">
+  {{- range .Pages.ByDate.GroupByDate "2006" -}}
+  <h6>{{ .Key | title }}</h6>
   <ul class="post-list">
-  {{ range .Pages }}
-      {{ if or (not .Draft) (and .Draft (not hugo.IsProduction)) }}
-      <li>
-          <h1>
-          <a href="{{ .Permalink }}">{{ .Title }}</a>
-          {{ partial "development/draft_tag.html" . }}
-          </h1>
-          <time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "January" }}</time>
-          <time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "2" }}</time>
-      </li>
-      {{ end }}
-  {{ end }}
+    {{- range .Pages -}}
+      {{- if or (not .Draft) (not hugo.IsProduction) -}}
+        {{- .Render "li_grid_with_date" -}}
+      {{- end -}}
+    {{- end -}}
   </ul>
-{{ end }}
+  {{- end -}}
+</section>
 {{ end }}
 
 {{ define "footer" }}

static/styles/root.css

@@ -454,7 +454,7 @@ ol ol {
     text-align: end;
 }
 
-.post-list li h1 {
+.post-list li .title {
     font-family: var(--font-family-body);
     grid-area: title;
     text-align: start;