From e7b2cb493a4514ddc322710b11544ae46d61aba5 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sun, 30 Oct 2022 11:30:30 -0700
Subject: [PATCH] Redo the blog list layout to make it work a little better on
 narrow screens

---
 content/blog/blog.css                       | 58 +++++++++++++++++++++
 layouts/blog/li_grid_with_date.html         |  6 +--
 layouts/blog/list.html                      | 18 +++----
 layouts/partials/development/draft_tag.html |  4 +-
 static/styles/root.css                      | 48 -----------------
 5 files changed, 70 insertions(+), 64 deletions(-)

diff --git a/content/blog/blog.css b/content/blog/blog.css
index 7ea1a35..6f48fa1 100644
--- a/content/blog/blog.css
+++ b/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;
diff --git a/layouts/blog/li_grid_with_date.html b/layouts/blog/li_grid_with_date.html
index 3d9f17d..1a1e99b 100644
--- a/layouts/blog/li_grid_with_date.html
+++ b/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>
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
index 96b7928..070b633 100644
--- a/layouts/blog/list.html
+++ b/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" }}
diff --git a/layouts/partials/development/draft_tag.html b/layouts/partials/development/draft_tag.html
index 5d80efc..1f93b84 100644
--- a/layouts/partials/development/draft_tag.html
+++ b/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 }}
\ No newline at end of file
+{{ if .Draft }}<span class="draft">d</span>{{ end }}
+{{ end }}
diff --git a/static/styles/root.css b/static/styles/root.css
index 33daf14..5b1434f 100644
--- a/static/styles/root.css
+++ b/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;