From 3fb0ef35fe8c2965358c651ed5379e2760385e9e Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sun, 11 Sep 2022 10:40:25 -0700
Subject: [PATCH] Update the blog list layout

---
 content/blog/blog.css        | 86 ++++++++++++++++++++++++++++++++++++
 layouts/_default/baseof.html |  5 +++
 layouts/_default/list.html   | 44 ------------------
 layouts/blog/list.html       | 39 ++++++++++++++++
 4 files changed, 130 insertions(+), 44 deletions(-)
 create mode 100644 content/blog/blog.css
 delete mode 100644 layouts/_default/list.html
 create mode 100644 layouts/blog/list.html

diff --git a/content/blog/blog.css b/content/blog/blog.css
new file mode 100644
index 0000000..8d99e9e
--- /dev/null
+++ b/content/blog/blog.css
@@ -0,0 +1,86 @@
+@import url(/styles/reset.css);
+@import url(/styles/root.css);
+
+:root {
+    --post-item-highlight-color: #efefef;
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --post-item-highlight-color: #121212;
+    }
+}
+
+.post-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+@supports (display: subgrid) {
+    .post-list {
+        align-items: baseline;
+        display: grid;
+        gap: 1em;
+        grid-template-columns:
+            minmax(150px, max-content) minmax(20px, max-content) 3px auto;
+        grid-template-areas: "month day line title";
+    }
+}
+
+.post-list li {
+    align-items: baseline;
+    border-radius: 6px;
+    display: grid;
+    gap: 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 b {
+    background-color: #ddd;
+    display: block;
+    grid-area: thing;
+    height: 100%;
+    text-align: end;
+    width: 100%;
+}
+
+.post-list li h1 {
+    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;
+}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 4837f09..c7601a0 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -28,6 +28,11 @@
   {{ if not hugo.IsProduction }}
   <link rel="stylesheet" as="style" href="/styles/development.css">
   {{ end }}
+  {{ if gt (len .Section) 0 }}
+    {{ range .FirstSection.Resources.Match "*.css" }}
+    <link rel="stylesheet" as="style" href="{{ .Permalink }}">
+    {{ end }}
+  {{ end }}
   {{ range .Resources.Match "*.css" }}
   <link rel="stylesheet" as="style" href="{{ .Permalink }}">
   {{ end }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
deleted file mode 100644
index af7074d..0000000
--- a/layouts/_default/list.html
+++ /dev/null
@@ -1,44 +0,0 @@
-
-{{ define "main" }}
-{{ if .Title }}
-<header>
-  <h1 class="main-title">{{ .Title }}</h1>
-</header>
-{{ end }}
-
-{{ $pages := union .RegularPages .Sections }}
-{{ if .IsHome }}
-  {{ $pages = where site.RegularPages "Type" "in" site.Params.mainSections }}
-{{ end }}
-
-{{ .Content }}
-
-<ul class="post-list">
-{{ $paginator := .Paginate $pages }}
-{{ range $index, $page := $paginator.Pages }}
-  <li class="post-entry">
-    <header>
-      <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
-      <div class="post-date">
-        <time class="nobreak" datetime="{{ .Date | time.Format " 2006-01-02" }}">{{ .Date | time.Format "January 2, 2006" }}</time>
-      </div>
-      {{ partial "development/draft_tag.html" . }}
-    </header>
-    {{ if .Description }}
-    <article>{{ .Description }}</article>
-    {{ end }}
-  </li>
-{{ end }}
-</ul>
-
-{{ if gt $paginator.TotalPages 1 }}
-<nav class="main-nav">
-  {{ if $paginator.HasPrev }}
-  <a class="prev" href="{{ $paginator.Prev.URL }}">← {{ i18n "prev_page" }}</a>
-  {{ end }}<!---->
-  {{ if $paginator.HasNext }}
-  <a class="next" href="{{ $paginator.Next.URL }}">{{ i18n "next_page" }} →</a>
-  {{ end }}
-</nav>
-{{ end }}
-{{ end }}
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
new file mode 100644
index 0000000..dca3b6d
--- /dev/null
+++ b/layouts/blog/list.html
@@ -0,0 +1,39 @@
+{{ define "header" }}
+  {{ partial "header.html" . }}
+{{ end }}
+
+{{ define "main" }}
+{{ $pages := union .RegularPages .Sections }}
+{{ if .IsHome }}
+  {{ $pages = where site.RegularPages "Type" "in" site.Params.mainSections }}
+{{ end }}
+
+{{ .Content }}
+
+{{ range .Pages.ByDate.GroupByDate "2006" }}
+<h2>{{ .Key }}</h2>
+<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>
+    <b></b>
+  </li>
+  {{ end }}
+  {{ end }}
+</ul>
+{{ end }}
+{{ end }}
+
+{{ define "footer" }}
+  {{ partial "footer.html" . }}
+{{ end }}
+
+{{ define "styles" }}
+  <link rel="preload stylesheet" as="style" href="{{ `/styles/main.css` | absURL }}">
+{{ end }}