From b7070ccfd5c8d9c9547c88d9afe22a8a6a81e982 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Tue, 26 Sep 2023 08:35:21 -0700
Subject: [PATCH] Remove the <ul> and <li> from the blog list

---
 assets/styles/blog/050_list.css     | 63 +++++++++--------------------
 layouts/blog/li_grid_with_date.html | 15 ++++---
 layouts/blog/list.html              | 12 +++---
 3 files changed, 33 insertions(+), 57 deletions(-)

diff --git a/assets/styles/blog/050_list.css b/assets/styles/blog/050_list.css
index f732a04..5a50f1e 100644
--- a/assets/styles/blog/050_list.css
+++ b/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 > ul > li {
+  .blog.list > .post {
     grid-column: wide-content-start / wide-content-end;
   }
 
   @supports (grid-template-columns: subgrid) {
-    .blog.list > ul,
-    .blog.list > ul > li,
-    .blog.list > ul > li > article {
+    .blog.list > .post {
+      --body-item-spacing: 2rem;
+
       display: grid;
       grid-template-columns: subgrid;
       gap: var(--body-item-spacing) 0;
     }
   }
 
-  /*
-  @media (max-width: 415px) {
-    .blog.list > ul,
-    .blog.list > ul > li {
-      display: block;
+  .post header {
+    grid-column: wide-content-start / content-end;
+  }
+
+  @supports (grid-template-columns: subgrid) {
+    .post header {
+      display: grid;
+      grid-template-columns: subgrid;
     }
   }
-  */
 
-  .blog.list > ul {
-    gap: 8rem 0;
-  }
-
-  .blog.list > ul > li {
-    gap: 1rem 0;
-    margin: 0;
-  }
-
-  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 {
-    grid-column: content-start / content-end;
-  }
-
-  li > article {
+  article.post {
     grid-column: gutter-start / gutter-end;
   }
 
-  li > p,
-  li > .tags {
+  .post p,
+  .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);
   }
diff --git a/layouts/blog/li_grid_with_date.html b/layouts/blog/li_grid_with_date.html
index ed687de..57cbda7 100644
--- a/layouts/blog/li_grid_with_date.html
+++ b/layouts/blog/li_grid_with_date.html
@@ -1,14 +1,19 @@
-<li class="post">
-  <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>
+<article class="post">
+  <header>
+    <time class="nobreak" datetime="{{ .Date | time.Format "2006-01-02" }}">{{ .Date | time.Format "Jan 2, 2006" }}</time>
+    <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>
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
index a7af6da..ebe4ef7 100644
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@@ -4,14 +4,12 @@
 
 {{ define "main" }}
 {{- range .Pages.ByDate.GroupByDate "2006" -}}
-  <h1 class="date">{{ .Key | title }}</h1>
-  <ul>
-    {{- range .Pages -}}
-      {{- if or (not .Draft) (not hugo.IsProduction) -}}
-        {{- .Render "li_grid_with_date" -}}
-      {{- end -}}
+  <h1 class="date"><a id="{{ .Key }}">{{ .Key | title }}</a></h1>
+  {{- range .Pages -}}
+    {{- if or (not .Draft) (not hugo.IsProduction) -}}
+      {{- .Render "li_grid_with_date" -}}
     {{- end -}}
-  </ul>
+  {{- end -}}
 {{- end -}}
 {{ end }}