Remove the <ul> and <li> from the blog list

assets/styles/blog/050_list.css

@@ -1,8 +1,4 @@
 @layer section {
-  :root {
-      --body-item-spacing: 1rem;
-  }
-
   .blog.list {
     gap: 8rem 0;
   }
@@ -11,63 +7,52 @@
     grid-column: content-start / content-end;
   }
 
-  .blog.list > ul,
+  .blog.list > .post {
-  .blog.list > ul > li {
     grid-column: wide-content-start / wide-content-end;
   }
 
   @supports (grid-template-columns: subgrid) {
-    .blog.list > ul,
+    .blog.list > .post {
-    .blog.list > ul > li,
+      --body-item-spacing: 2rem;
-    .blog.list > ul > li > article {
+
       display: grid;
       grid-template-columns: subgrid;
       gap: var(--body-item-spacing) 0;
     }
   }
 
-  /*
+  .post header {
-  @media (max-width: 415px) {
+    grid-column: wide-content-start / content-end;
-    .blog.list > ul,
-    .blog.list > ul > li {
-      display: block;
-    }
-  }
-  */
-
-  .blog.list > ul {
-    gap: 8rem 0;
   }
 
-  .blog.list > ul > li {
+  @supports (grid-template-columns: subgrid) {
-    gap: 1rem 0;
+    .post header {
-    margin: 0;
+      display: grid;
+      grid-template-columns: subgrid;
+    }
   }
 
-  li > time {
+  .post time {
     font-variant-numeric: tabular-nums;
     grid-column: wide-content-start;
     justify-self: end;
   }
 
   @media (max-width: 960px) {
-    li > time {
+    .post time {
       grid-column: content-start / content-end;
       justify-self: start;
       line-height: var(--line-height);
     }
   }
 
-  li > .title {
+  article.post {
-    grid-column: content-start / content-end;
-  }
-
-  li > article {
     grid-column: gutter-start / gutter-end;
   }
 
-  li > p,
+  .post p,
-  li > .tags {
+  .post .tags,
+  .post .title {
     grid-column: content-start / content-end;
   }
 
@@ -75,18 +60,6 @@
     margin-block-end: 0;
   }
 
-  @media (max-width: 414px) {
-    li > article > figure,
-    li > article > figure img {
-        border-radius: 0;
-    }
-  }
-
-  .blog.list > ul,
-  .blog.list > ul > li {
-    margin-inline-start: 0;
-  }
-
   .title {
     font-size: var(--h5-size);
   }

layouts/blog/li_grid_with_date.html

@@ -1,14 +1,19 @@
-<li class="post">
+<article class="post">
+  <header>
     <time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "Jan 2, 2006" }}</time>
-  <h2 class="title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+    <h1 class="title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+  </header>
+
   {{ if .Description }}
     <p>{{ .Description }}</p>
   {{ else if lt .WordCount 110 }}
-    <article>{{ .Content }}</article>
+    {{ .Content }}
   {{ else }}
     {{ warnf "Post \"%s\" doesn't have a description or content suitable for the blog list" .Title }}
     <p>{{ .WordCount }} words</p>
   {{ end }}
+
   {{ partial "footer_tags.html" . }}
+
   {{ partial "development/draft_tag.html" . }}
-</li>
+</article>

layouts/blog/list.html

@@ -4,14 +4,12 @@
 
 {{ define "main" }}
 {{- range .Pages.ByDate.GroupByDate "2006" -}}
-  <h1 class="date">{{ .Key | title }}</h1>
+  <h1 class="date"><a id="{{ .Key }}">{{ .Key | title }}</a></h1>
-  <ul>
   {{- range .Pages -}}
     {{- if or (not .Draft) (not hugo.IsProduction) -}}
       {{- .Render "li_grid_with_date" -}}
     {{- end -}}
   {{- end -}}
-  </ul>
 {{- end -}}
 {{ end }}