Redo the blog list layout to make it work a little better on narrow screens

content/blog/blog.css

@@ -34,6 +34,64 @@
     margin-block-start: var(--body-item-spacing);
 }
 
+.blog.list > ul {
+    list-style: none;
+}
+.blog.list > ul > li {
+    align-items: baseline;
+    border-radius: 6px;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: minmax(min-content, 10vh) minmax(min-content, 3vh) auto max-content;
+    margin-block-end: 0.25rem;
+    transition: background-color 0.25s;
+}
+.blog.list > ul > li:hover {
+    background-color: var(--post-item-highlight-color);
+}
+.blog.list > ul > li > a {
+    color: inherit;
+}
+.blog.list > ul > li > a:hover {
+    text-decoration: none;
+}
+.blog.list > ul > li > .draft {
+    align-self: center;
+}
+
+@supports (grid-template-columns: subgrid) {
+    .blog.list {
+        display: grid;
+        gap: 1rem;
+        grid-template-columns: minmax(min-content, 10vh) minmax(min-content, 3vh) auto max-content;
+    }
+    .blog.list > ul {
+        display: grid;
+        row-gap: 0.25rem;
+        grid-column: 1 / -1;
+        grid-template-columns: subgrid;
+        list-style: none;
+    }
+    .blog.list > ul > li {
+        display: grid;
+        grid-column: 1 / -1;
+        grid-template-columns: subgrid;
+        margin-block-end: 0;
+    }
+
+    .blog.list > h5 {
+        grid-column: 1 / -1;
+        margin-block: 1rem 0;
+    }
+    .blog.list > h5:first-child {
+        margin-block-start: 0;
+    }
+}
+
+.blog.list > ul > li > :first-child {
+    text-align: end;
+}
+
 .blog .tags {
     display: flex;
     padding-inline-start: 0;

layouts/blog/li_grid_with_date.html

@@ -1,8 +1,6 @@
 <li>
   <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>
-  <div class="title">
-    <a href="{{ .Permalink }}">{{ .Title }}</a>
-    {{ partial "development/draft_tag.html" . }}
-  </div>
+  <a href="{{ .Permalink }}">{{ .Title }}</a>
+  {{ partial "development/draft_tag.html" . }}
 </li>

layouts/blog/list.html

@@ -3,18 +3,16 @@
 {{ end }}
 
 {{ define "main" }}
-<section id="by-date">
-  {{- range .Pages.ByDate.GroupByDate "2006" -}}
-  <h6>{{ .Key | title }}</h6>
-  <ul class="post-list">
-    {{- range .Pages -}}
-      {{- if or (not .Draft) (not hugo.IsProduction) -}}
-        {{- .Render "li_grid_with_date" -}}
-      {{- end -}}
+{{- range .Pages.ByDate.GroupByDate "2006" -}}
+<h5>{{ .Key | title }}</h5>
+<ul>
+  {{- range .Pages -}}
+    {{- if or (not .Draft) (not hugo.IsProduction) -}}
+      {{- .Render "li_grid_with_date" -}}
     {{- end -}}
-  </ul>
   {{- end -}}
-</section>
+</ul>
+{{- end -}}
 {{ end }}
 
 {{ define "footer" }}

layouts/partials/development/draft_tag.html

@@ -1,3 +1,3 @@
 {{ if in (.Site.BaseURL | string) "localhost" }}
-{{ if .Draft }}<span class="draft">draft</span>{{ end }}
-{{ end }}
+{{ if .Draft }}<span class="draft">d</span>{{ end }}
+{{ end }}

static/styles/root.css

@@ -405,55 +405,7 @@ ol ol {
     display: grid;
     gap: 1em;
     padding: 0.1em;
-    transition: background-color 0.25s;
 }
-@supports not (display: subgrid) {
-    .post-list li {
-        grid-template-columns: 100px 20px 3px auto;
-        grid-template-areas: "month day thing title";
-    }
-}
-@supports (display: subgrid) {
-    .post-list li {
-        display: subgrid;
-    }
-}
-
-.post-list li time:nth-of-type(1) {
-    grid-area: month;
-    text-align: end;
-}
-
-.post-list li time:nth-of-type(2) {
-    grid-area: day;
-    text-align: end;
-}
-
-.post-list li .title {
-    font-family: var(--font-family-body);
-    grid-area: title;
-    text-align: start;
-}
-
-.post-list li:hover {
-    background-color: var(--post-item-highlight-color);
-}
-
-.post-list h1 {
-    font-size: inherit;
-    font-weight: normal;
-    margin: 0;
-    padding: 0;
-}
-
-.post-list a {
-    color: inherit;
-}
-
-.post-list a:hover {
-    text-decoration: none;
-}
-
 
 .post-title {
     align-items: baseline;