From ba9d309e1e5298d427e34498209911884ff983c5 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Fri, 15 Nov 2024 20:43:27 -0800
Subject: [PATCH 01/24] Set spacing between paragraphs and lists to standard
 paragraph spacing

---
 assets/css/010_spacing.css | 2 +-
 assets/css/050_lists.css   | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/css/010_spacing.css b/assets/css/010_spacing.css
index 8de79d4..8fa670b 100644
--- a/assets/css/010_spacing.css
+++ b/assets/css/010_spacing.css
@@ -54,7 +54,7 @@ hr {
   margin-block: var(--space-m);
 }
 
-p + p {
+p + :is(dl, p, ol, ul) {
   margin-block-start: var(--space-paragraph);
 }
 
diff --git a/assets/css/050_lists.css b/assets/css/050_lists.css
index 4523c46..77984ef 100644
--- a/assets/css/050_lists.css
+++ b/assets/css/050_lists.css
@@ -12,6 +12,7 @@ ol,
 ul
 {
   grid-column: main-start / main-end;
+  margin-block: 0;
 }
 
 ol {

From 75f7771c384189da855b9b6ffa4a8a0ba9006b8b Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Fri, 15 Nov 2024 20:44:16 -0800
Subject: [PATCH 02/24] Use the page's .PublishDate as the date for the
 PUBLISHED tag

---
 layouts/partials/page/date.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/partials/page/date.html b/layouts/partials/page/date.html
index c305e53..b29e523 100644
--- a/layouts/partials/page/date.html
+++ b/layouts/partials/page/date.html
@@ -12,7 +12,7 @@
 {{- $dateName := .date -}}
 
 {{- $name := "" -}}
-{{- $date := $page.Date -}}
+{{- $date := $page.PublishDate -}}
 
 {{- if or (not $dateName) (eq $dateName "date") }}
   {{- $name = T "datePublishedName" -}}

From c5cc95052dd1dc1d17674db3dea6b523522eb55b Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sat, 16 Nov 2024 09:38:53 -0800
Subject: [PATCH 03/24] Spacing refinements for lists and paragraphs

Add list elements to the paragraph spacing styles so they're all consistent.
---
 assets/css/010_spacing.css    | 2 +-
 assets/css/010_typography.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/css/010_spacing.css b/assets/css/010_spacing.css
index 8fa670b..73f8cb3 100644
--- a/assets/css/010_spacing.css
+++ b/assets/css/010_spacing.css
@@ -54,7 +54,7 @@ hr {
   margin-block: var(--space-m);
 }
 
-p + :is(dl, p, ol, ul) {
+:is(dl, p, ol, ul) + :is(dl, p, ol, ul) {
   margin-block-start: var(--space-paragraph);
 }
 
diff --git a/assets/css/010_typography.css b/assets/css/010_typography.css
index 0428bbd..17b4da2 100644
--- a/assets/css/010_typography.css
+++ b/assets/css/010_typography.css
@@ -82,7 +82,7 @@ h4 {
   font-size: var(--text-m);
 }
 
-p {
+p, dd {
   letter-spacing: 0.01em;
 }
 

From 08e787b1d918ce5923a9391d77e0524433d1610a Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sat, 16 Nov 2024 09:40:01 -0800
Subject: [PATCH 04/24] Reformat definition list definitions

Large inline margins and small text. No more italics. I think this is easier to
read and more consistent with the surrounding text.
---
 assets/css/050_lists.css | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/assets/css/050_lists.css b/assets/css/050_lists.css
index 77984ef..0bab49a 100644
--- a/assets/css/050_lists.css
+++ b/assets/css/050_lists.css
@@ -15,6 +15,7 @@ ul
   margin-block: 0;
 }
 
+
 ol {
   display: grid;
   grid-template-columns: min-content 1fr;
@@ -47,6 +48,7 @@ ol {
   }
 }
 
+
 ul {
   list-style-type: "*";
   padding-inline-start: 1ch;
@@ -56,6 +58,7 @@ ul {
   }
 }
 
+
 li {
   &::marker, &::before {
     color: var(--text-color-secondary);
@@ -63,15 +66,15 @@ li {
   }
 }
 
+
 dl {
   dd {
     color: var(--text-color-secondary);
-    font-style: italic;
-    line-height: 1.2;
-    margin-inline-start: var(--space-l);
+    font-size: var(--text-s);
+    margin-inline: var(--space-l);
 
     &:has(+ dt) {
-      margin-block-end: var(--space-xs);
+      margin-block-end: var(--space-paragraph);
     }
   }
 }

From 3842e25fa036bd803264fc969ef5ccf596505c9b Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sat, 16 Nov 2024 09:40:50 -0800
Subject: [PATCH 05/24] Finally adjust the spacing of the date relative to the
 page title

This has been bothering me for a little while. The spacing is too big. Squish them
together and give it secondary text color so it doesn't compete with the title
or body text.
---
 assets/css/099_page_header.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/css/099_page_header.css b/assets/css/099_page_header.css
index ff52630..21cac5a 100644
--- a/assets/css/099_page_header.css
+++ b/assets/css/099_page_header.css
@@ -31,9 +31,10 @@
   }
 
   .page-date {
+    color: var(--text-color-secondary);
     display: block;
     font-family: var(--font-family-body);
     font-size: var(--text-s);
-    margin-block: var(--space-paragraph) 0;
+    margin-block: var(--space-xs) 0;
   }
 }

From ce19ae0bbbe14cedeacb57989b182cbdf0dd543c Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sat, 16 Nov 2024 09:41:22 -0800
Subject: [PATCH 06/24] Use .PublishDate for the page header date

---
 layouts/partials/page_header.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/partials/page_header.html b/layouts/partials/page_header.html
index 10a8d45..e67aa6b 100644
--- a/layouts/partials/page_header.html
+++ b/layouts/partials/page_header.html
@@ -5,7 +5,7 @@
 {{- end }}
 
 {{ if not .page.IsNode }}
-  {{- with .page.Date -}}
+  {{- with .page.PublishDate -}}
     <time class="page-date" datetime="{{ . | time.Format "2006-01-02" }}">
       {{- . | time.Format "January 02, 2006" -}}
     </time>

From b7ae6211ce477835ffbd0da7ea958bb4a4d5c8e7 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Tue, 19 Nov 2024 20:53:28 -0800
Subject: [PATCH 07/24] Tweak <hr> so it looks good in dark mode

---
 assets/css/010_colors.css  | 2 +-
 assets/css/010_spacing.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/css/010_colors.css b/assets/css/010_colors.css
index e789be9..3daa877 100644
--- a/assets/css/010_colors.css
+++ b/assets/css/010_colors.css
@@ -47,7 +47,7 @@
 
 :root {
   --background-color: light-dark(var(--gray7), var(--gray1));
-  --hr-color: light-dark(var(--gray5), var(--gray2));
+  --hr-color: var(--text-color-secondary);
   --text-color-primary: light-dark(var(--gray1), var(--gray7));
   --text-color-secondary: light-dark(var(--gray4), var(--gray5));
   --text-color-light: light-dark(var(--gray5), var(--gray4));
diff --git a/assets/css/010_spacing.css b/assets/css/010_spacing.css
index 73f8cb3..6f16899 100644
--- a/assets/css/010_spacing.css
+++ b/assets/css/010_spacing.css
@@ -51,7 +51,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 hr {
-  margin-block: var(--space-m);
+  margin-block: var(--space-l);
 }
 
 :is(dl, p, ol, ul) + :is(dl, p, ol, ul) {

From e8daeda08bd96186d1c9b8e1bfbd2d60398c3943 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sun, 24 Nov 2024 10:18:45 -0800
Subject: [PATCH 08/24] Convert elementsWithXLBlockMargins to a slice that's
 joined with ", "

---
 assets/css/010_spacing.css | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/assets/css/010_spacing.css b/assets/css/010_spacing.css
index 6f16899..40a7ed2 100644
--- a/assets/css/010_spacing.css
+++ b/assets/css/010_spacing.css
@@ -61,7 +61,23 @@ hr {
 
 /* Figures */
 
-{{- $elementsWithXLBlockMargins := "blockquote, table, .codeblock, .figure--main-column, .figure--code, .figure--image, .figure--video, .figure--youtube, .highlight" -}}
+{{-
+  $elementsWithXLBlockMargins := delimit
+    (slice
+      "blockquote"
+      "table"
+      ".codeblock"
+      ".figure"
+      ".figure--main-column"
+      ".figure--code"
+      ".figure--image"
+      ".figure--video"
+      ".figure--youtube"
+      ".highlight"
+      ".instagram-media"
+    )
+  ", "
+-}}
 
 p + :is({{ $elementsWithXLBlockMargins }}) {
     margin-block-start: var(--space-xl);

From d81f2a107c2f3e6f30860686097fb016b29bb6af Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sun, 24 Nov 2024 10:19:26 -0800
Subject: [PATCH 09/24] Remove the interstitial .tag__value__list-item

Just .tag__list-item is enough.
---
 assets/css/050_tags.css                  | 4 ++--
 layouts/partials/page/taxonomy_list.html | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/assets/css/050_tags.css b/assets/css/050_tags.css
index 7b24637..ead6755 100644
--- a/assets/css/050_tags.css
+++ b/assets/css/050_tags.css
@@ -37,12 +37,12 @@
     padding-inline-start: 0;
   }
 
-  .tag__value__list-item {
+  .tag__list-item {
     padding-inline-start: 0;
     white-space: nowrap;
   }
 
-  .tag__value__list-item:not(:first-child)::before {
+  .tag__list-item:not(:first-child)::before {
     color: var(--text-color-secondary);
     content: ":";
     margin-inline-end: var(--spacing);
diff --git a/layouts/partials/page/taxonomy_list.html b/layouts/partials/page/taxonomy_list.html
index 677d7c1..33c5cf6 100644
--- a/layouts/partials/page/taxonomy_list.html
+++ b/layouts/partials/page/taxonomy_list.html
@@ -16,7 +16,9 @@
   <div class="tag">
     <span class="tag__name">{{ $name }}</span>
     <ul class="tag__value--list" data-name="{{ $name }}">
-      {{ range . }}<li class="tag__value__list-item"><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>{{ end }}
+      {{ range . -}}
+        <li class="tag__list-item"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+      {{- end -}}
     </ul>
   </div>
 {{ end }}

From 502aa408d9775d73c1bd75b199897ddbd71e3e28 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Mon, 25 Nov 2024 09:51:32 -0800
Subject: [PATCH 10/24] Refactor all the figures

There are two main sizes of figures: fullwidth and small. Full width figures take
the full content width. Usually they spread into the "wide" content area too.
Main size figures are also full width figures, but they stop at the edges of the
main content area. Small figures shrink to fit and are generally 480pts wide.

Break all these different types of figures down into separate templates for each
variant.

Add the ability for resources to specify a "source" with a link and title.
---
 assets/css/010_structure.css                  |  2 +-
 assets/css/050_figures.css                    | 36 +++++++++++++------
 i18n/en.yaml                                  |  7 +++-
 layouts/partials/page/figures/caption.html    |  6 ++++
 .../page/figures/fullwidth-image.html         | 30 ++++++++++++++++
 .../page/figures/fullwidth-video.html         | 10 ++++++
 layouts/partials/page/figures/fullwidth.html  | 14 ++++++++
 .../page/figures/resource-source.html         | 19 ++++++++++
 .../partials/page/figures/small-image.html    | 29 +++++++++++++++
 layouts/partials/page/figures/small.html      | 12 +++++++
 10 files changed, 153 insertions(+), 12 deletions(-)
 create mode 100644 layouts/partials/page/figures/caption.html
 create mode 100644 layouts/partials/page/figures/fullwidth-image.html
 create mode 100644 layouts/partials/page/figures/fullwidth-video.html
 create mode 100644 layouts/partials/page/figures/fullwidth.html
 create mode 100644 layouts/partials/page/figures/resource-source.html
 create mode 100644 layouts/partials/page/figures/small-image.html
 create mode 100644 layouts/partials/page/figures/small.html

diff --git a/assets/css/010_structure.css b/assets/css/010_structure.css
index 35d8dfa..3b7b888 100644
--- a/assets/css/010_structure.css
+++ b/assets/css/010_structure.css
@@ -106,7 +106,7 @@ body {
   grid-column: main-start / main-end;
 }
 
-.content > :is(.figure--image, .codeblock) {
+.content > .codeblock) {
   grid-column: wide-gutter-start / wide-gutter-end;
 }
 
diff --git a/assets/css/050_figures.css b/assets/css/050_figures.css
index 822c4e6..41691e5 100644
--- a/assets/css/050_figures.css
+++ b/assets/css/050_figures.css
@@ -12,16 +12,7 @@
   display: grid;
   grid-template-columns: subgrid;
 
-  .figure__container {
-    align-items: center;
-    display: flex;
-    gap: var(--body-item-spacing);
-    grid-column: wide-gutter-start / wide-gutter-end;
-    justify-content: center;
-    min-width: fit-content;
-  }
-
-  &:has(> img:only-child, .figure__container > img:only-child) {
+  &:has(> img:only-child, .figure__container:only-child > img:only-child) {
     display: flex;
     justify-content: center;
   }
@@ -46,6 +37,26 @@
 }
 
 
+.figure--image img,
+.figure--video video
+{
+  grid-column: wide-gutter-start / wide-gutter-end;
+}
+
+
+.figure--small {
+  align-items: center;
+  display: flex;
+  grid-column: main-start / main-end;
+  justify-content: center;
+  min-width: fit-content;
+
+  img {
+    width: 480px;
+  }
+}
+
+
 .figure--main-column {
   grid-column: main-start / main-end;
 }
@@ -56,6 +67,11 @@
 }
 
 
+.figure--video video {
+  width: 100%;
+}
+
+
 .figure--youtube {
   grid-column: wide-gutter-start / wide-gutter-end;
 
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 5d80a99..01d4a5f 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -5,10 +5,15 @@ draftYes: "YES"
 draftNo: "NO"
 
 home: Home
-tableOfContents: Table of Contents
+
+instagram: Instagram
 
 # Title of section of a list page where years older than
 # .Site.Params.blog.yearLimit are collapsed into a bulleted list.
 olderPagesSectionTitle: Older
 
+source: Source
+
+tableOfContents: Table of Contents
+
 yearsTagTitle: Years
diff --git a/layouts/partials/page/figures/caption.html b/layouts/partials/page/figures/caption.html
new file mode 100644
index 0000000..f3ccf29
--- /dev/null
+++ b/layouts/partials/page/figures/caption.html
@@ -0,0 +1,6 @@
+<figcaption>
+  {{ .resource.Title | markdownify }}
+  {{ with .resource.Params.source -}}
+    {{ partial "page/figures/resource-source.html" . }}
+  {{- end -}}
+</figcaption>
diff --git a/layouts/partials/page/figures/fullwidth-image.html b/layouts/partials/page/figures/fullwidth-image.html
new file mode 100644
index 0000000..da98420
--- /dev/null
+++ b/layouts/partials/page/figures/fullwidth-image.html
@@ -0,0 +1,30 @@
+{{- $image := .resource -}}
+
+{{-
+  $resizedImages := dict
+    "full"    ($image.Fit "2560x2560")
+    "half"    ($image.Fit "1280x1280")
+    "quarter" ($image.Fit "640x640")
+-}}
+
+<figure class="figure  figure--image
+  {{- if eq .size "main" }}figure--main-column{{ end }}">
+  {{ if .linksToFullSizeImage -}}
+    <a href="{{ $image.RelPermalink }}">
+  {{- end -}}
+    <img
+      src="{{ (index $resizedImages "full").RelPermalink }}"
+      srcset="
+        {{ (index $resizedImages "full").RelPermalink }} 2560w,
+        {{ (index $resizedImages "half").RelPermalink }} 1280w,
+        {{ (index $resizedImages "quarter").RelPermalink }} 640w,
+      "
+      {{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }}
+      {{ with $image.Title }} title="{{ . }}"{{ end }}>
+  {{ if .linksToFullSizeImage -}}
+    </a>
+  {{- end -}}
+  {{ if .shouldShowTitle }}
+    {{ partial "page/figures/caption.html" . }}
+  {{ end }}
+</figure>
diff --git a/layouts/partials/page/figures/fullwidth-video.html b/layouts/partials/page/figures/fullwidth-video.html
new file mode 100644
index 0000000..017f4a5
--- /dev/null
+++ b/layouts/partials/page/figures/fullwidth-video.html
@@ -0,0 +1,10 @@
+{{- $video := .resource -}}
+
+<figure class="figure  figure--video">
+  <video controls>
+    <source src="{{ $video.RelPermalink }}" type="{{ $video.MediaType.Type }}">
+  </video>
+  {{ if .shouldShowTitle }}
+    {{ partial "page/figures/caption.html" . }}
+  {{ end }}
+</figure>
diff --git a/layouts/partials/page/figures/fullwidth.html b/layouts/partials/page/figures/fullwidth.html
new file mode 100644
index 0000000..282f180
--- /dev/null
+++ b/layouts/partials/page/figures/fullwidth.html
@@ -0,0 +1,14 @@
+{{- $page := .page -}}
+
+{{- $shouldShowTitle := .shouldShowTitle -}}
+
+{{- $resource := $page.Resources.GetMatch .name -}}
+{{- if not $resource }}
+  {{ errorf "No resource named '%s'. %s" .name .page.Permalink }}
+{{ end -}}
+
+{{- if eq $resource.ResourceType "image" -}}
+  {{ partial "page/figures/fullwidth-image.html" (merge . (dict "resource" $resource))  }}
+{{- else if eq $resource.ResourceType "video" -}}
+  {{ partial "page/figures/fullwidth-video.html" (merge . (dict "resource" $resource)) }}
+{{- end -}}
diff --git a/layouts/partials/page/figures/resource-source.html b/layouts/partials/page/figures/resource-source.html
new file mode 100644
index 0000000..ca992c6
--- /dev/null
+++ b/layouts/partials/page/figures/resource-source.html
@@ -0,0 +1,19 @@
+<span class="figure__source">
+  {{ if and .title .url }}
+    {{ i18n "source" }}: <a href="{{ .url }}">{{ .title }}</a>.
+  {{ else if .title }}
+    {{ .title }}
+  {{ else }}
+    {{ $sourceTitle := "" }}
+    {{ $parsedURL := urls.Parse .url }}
+    {{ if strings.Contains $parsedURL.Hostname "instagram.com" }}
+      {{ $sourceTitle = i18n "instagram" }}
+    {{ end }}
+
+    {{ if gt (len $sourceTitle) 0 }}
+      {{ i18n "source" }}: <a href="{{ .url }}">{{ $sourceTitle }}</a>
+    {{ else }}
+      <a href="{{ .url }}">{{ i18n "source" }}</a>
+    {{ end }}
+  {{ end }}
+</span>
diff --git a/layouts/partials/page/figures/small-image.html b/layouts/partials/page/figures/small-image.html
new file mode 100644
index 0000000..2166fcf
--- /dev/null
+++ b/layouts/partials/page/figures/small-image.html
@@ -0,0 +1,29 @@
+{{- $image := .resource -}}
+
+{{-
+  $resizedImages := dict
+    "2x" ($image.Fit "960x960")
+    "1x" ($image.Fit "480x480")
+-}}
+
+<figure class="figure  figure--image  figure--small">
+  <div class="figure__container">
+    {{ if .linksToFullSizeImage -}}
+      <a href="{{ $image.RelPermalink }}">
+    {{- end -}}
+      <img
+        src="{{ (index $resizedImages "2x").RelPermalink }}"
+        srcset="
+          {{ (index $resizedImages "2x").RelPermalink }} 960w,
+          {{ (index $resizedImages "1x").RelPermalink }} 480w,
+        "
+        {{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }}
+        {{ with $image.Title }} title="{{ . }}"{{ end }}>
+    {{ if .linksToFullSizeImage -}}
+      </a>
+    {{- end -}}
+    {{ if .shouldShowTitle }}
+      {{ partial "page/figures/caption.html" . }}
+    {{ end }}
+  </div>
+</figure>
diff --git a/layouts/partials/page/figures/small.html b/layouts/partials/page/figures/small.html
new file mode 100644
index 0000000..6b39a92
--- /dev/null
+++ b/layouts/partials/page/figures/small.html
@@ -0,0 +1,12 @@
+{{- $page := .page -}}
+
+{{- $shouldShowTitle := .shouldShowTitle -}}
+
+{{- $resource := $page.Resources.GetMatch .name -}}
+{{- if not $resource }}
+  {{ errorf "No resource named '%s'. %s" .name .page.Permalink }}
+{{ end -}}
+
+{{- if eq $resource.ResourceType "image" -}}
+  {{ partial "page/figures/small-image.html" (merge . (dict "resource" $resource))  }}
+{{- end -}}

From efae2acdeac6d8fa8a21e5cf8f0a0ab5e49f09d7 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Mon, 25 Nov 2024 15:48:04 -0800
Subject: [PATCH 11/24] Simplify figure styles and markup

Remove the .figure__container element. According to Tess, putting a <figcaption>
inside a child of a <figure> "doesn't obey the content model" or some shit.
Fiiiiine.

Getting small figures to lay out the way I want them to without the container
was a bit of a trick. Instead of letting the figure span the entire width of the
grid column, let it fit the size of its contents, and then set margin-inline to
auto so it centers.

Doing this also allowed me to remove the .figure--image, etc styles because the
styles and markup are a lot more similar among figures containing different
kinds of elements. Nice!
---
 assets/css/010_spacing.css                    |  5 ---
 assets/css/010_structure.css                  |  6 +--
 assets/css/050_figures.css                    | 39 +++++++++----------
 .../page/figures/fullwidth-image.html         |  8 +++-
 layouts/partials/page/figures/fullwidth.html  |  6 +--
 .../partials/page/figures/small-image.html    | 36 ++++++++---------
 6 files changed, 44 insertions(+), 56 deletions(-)

diff --git a/assets/css/010_spacing.css b/assets/css/010_spacing.css
index 40a7ed2..9680333 100644
--- a/assets/css/010_spacing.css
+++ b/assets/css/010_spacing.css
@@ -68,11 +68,6 @@ hr {
       "table"
       ".codeblock"
       ".figure"
-      ".figure--main-column"
-      ".figure--code"
-      ".figure--image"
-      ".figure--video"
-      ".figure--youtube"
       ".highlight"
       ".instagram-media"
     )
diff --git a/assets/css/010_structure.css b/assets/css/010_structure.css
index 3b7b888..f4cac11 100644
--- a/assets/css/010_structure.css
+++ b/assets/css/010_structure.css
@@ -98,7 +98,7 @@ body {
   gap: var(--space-xl) 0;
 }
 
-:is(.list-header, p) {
+.list-header, p {
   grid-column: main-start / main-end;
 }
 
@@ -110,10 +110,6 @@ body {
   grid-column: wide-gutter-start / wide-gutter-end;
 }
 
-figure, img {
-  max-width: 100%;
-}
-
 img {
   object-fit: contain;
 }
diff --git a/assets/css/050_figures.css b/assets/css/050_figures.css
index 41691e5..a426a63 100644
--- a/assets/css/050_figures.css
+++ b/assets/css/050_figures.css
@@ -9,10 +9,22 @@
 
 .figure {
   grid-column: wide-gutter-start / wide-gutter-end;
+}
+
+.figure--main-column {
+  grid-column: main-start / main-end;
+}
+
+.figure--code {
+  grid-column: gutter-start / gutter-end;
+}
+
+
+.figure {
   display: grid;
   grid-template-columns: subgrid;
 
-  &:has(> img:only-child, .figure__container:only-child > img:only-child) {
+  &:has(> img:only-child) {
     display: flex;
     justify-content: center;
   }
@@ -37,37 +49,24 @@
 }
 
 
-.figure--image img,
-.figure--video video
-{
+.figure :is(img, video) {
   grid-column: wide-gutter-start / wide-gutter-end;
+  width: 100%;
 }
 
 
 .figure--small {
-  align-items: center;
-  display: flex;
-  grid-column: main-start / main-end;
-  justify-content: center;
-  min-width: fit-content;
+  display: flow;
+  margin-inline: auto;
 
   img {
+    max-width: 100%;
     width: 480px;
   }
 }
 
 
-.figure--main-column {
-  grid-column: main-start / main-end;
-}
-
-
-.figure--code {
-  grid-column: gutter-start / gutter-end;
-}
-
-
-.figure--video video {
+.figure video {
   width: 100%;
 }
 
diff --git a/layouts/partials/page/figures/fullwidth-image.html b/layouts/partials/page/figures/fullwidth-image.html
index da98420..ed39f0e 100644
--- a/layouts/partials/page/figures/fullwidth-image.html
+++ b/layouts/partials/page/figures/fullwidth-image.html
@@ -7,8 +7,12 @@
     "quarter" ($image.Fit "640x640")
 -}}
 
-<figure class="figure  figure--image
-  {{- if eq .size "main" }}figure--main-column{{ end }}">
+{{- $classes := slice "figure" "figure--image" -}}
+{{- if eq .size "main" -}}
+  {{ $classes = $classes | append "figure--main-column" }}
+{{- end -}}
+
+<figure class="{{ delimit $classes "  " }}">
   {{ if .linksToFullSizeImage -}}
     <a href="{{ $image.RelPermalink }}">
   {{- end -}}
diff --git a/layouts/partials/page/figures/fullwidth.html b/layouts/partials/page/figures/fullwidth.html
index 282f180..d10d467 100644
--- a/layouts/partials/page/figures/fullwidth.html
+++ b/layouts/partials/page/figures/fullwidth.html
@@ -1,8 +1,4 @@
-{{- $page := .page -}}
-
-{{- $shouldShowTitle := .shouldShowTitle -}}
-
-{{- $resource := $page.Resources.GetMatch .name -}}
+{{- $resource := .page.Resources.GetMatch .name -}}
 {{- if not $resource }}
   {{ errorf "No resource named '%s'. %s" .name .page.Permalink }}
 {{ end -}}
diff --git a/layouts/partials/page/figures/small-image.html b/layouts/partials/page/figures/small-image.html
index 2166fcf..7dd7cf5 100644
--- a/layouts/partials/page/figures/small-image.html
+++ b/layouts/partials/page/figures/small-image.html
@@ -7,23 +7,21 @@
 -}}
 
 <figure class="figure  figure--image  figure--small">
-  <div class="figure__container">
-    {{ if .linksToFullSizeImage -}}
-      <a href="{{ $image.RelPermalink }}">
-    {{- end -}}
-      <img
-        src="{{ (index $resizedImages "2x").RelPermalink }}"
-        srcset="
-          {{ (index $resizedImages "2x").RelPermalink }} 960w,
-          {{ (index $resizedImages "1x").RelPermalink }} 480w,
-        "
-        {{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }}
-        {{ with $image.Title }} title="{{ . }}"{{ end }}>
-    {{ if .linksToFullSizeImage -}}
-      </a>
-    {{- end -}}
-    {{ if .shouldShowTitle }}
-      {{ partial "page/figures/caption.html" . }}
-    {{ end }}
-  </div>
+  {{ if .linksToFullSizeImage -}}
+    <a href="{{ $image.RelPermalink }}">
+  {{- end -}}
+    <img
+      src="{{ (index $resizedImages "2x").RelPermalink }}"
+      srcset="
+        {{ (index $resizedImages "2x").RelPermalink }} 960w,
+        {{ (index $resizedImages "1x").RelPermalink }} 480w,
+      "
+      {{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }}
+      {{ with $image.Title }} title="{{ . }}"{{ end }}>
+  {{ if .linksToFullSizeImage -}}
+    </a>
+  {{- end -}}
+  {{ if .shouldShowTitle }}
+    {{ partial "page/figures/caption.html" . }}
+  {{ end }}
 </figure>

From 7872296ee392d789f078e5a0ec44fd726e3e8111 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Mon, 25 Nov 2024 15:56:51 -0800
Subject: [PATCH 12/24] Images in small figures can grow to 480px

Set max-width to 480px, rather than an explicit width. Images smaller than 480px
were being stretched.
---
 assets/css/050_figures.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/assets/css/050_figures.css b/assets/css/050_figures.css
index a426a63..971836c 100644
--- a/assets/css/050_figures.css
+++ b/assets/css/050_figures.css
@@ -60,8 +60,7 @@
   margin-inline: auto;
 
   img {
-    max-width: 100%;
-    width: 480px;
+    max-width: 480px;
   }
 }
 

From 4a5dc3a3187b743ca596e342fa6dee08c528d2e1 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Tue, 26 Nov 2024 08:37:58 -0700
Subject: [PATCH 13/24] Add a content-grid shortcode that creates a grid of n
 columns inside a <div>

---
 assets/css/010_spacing.css           |  1 +
 assets/css/050_figures.css           |  5 +++++
 assets/css/090_content_grid.css      | 13 +++++++++++++
 layouts/shortcodes/content-grid.html |  4 ++++
 4 files changed, 23 insertions(+)
 create mode 100644 assets/css/090_content_grid.css
 create mode 100644 layouts/shortcodes/content-grid.html

diff --git a/assets/css/010_spacing.css b/assets/css/010_spacing.css
index 9680333..3b733f5 100644
--- a/assets/css/010_spacing.css
+++ b/assets/css/010_spacing.css
@@ -67,6 +67,7 @@ hr {
       "blockquote"
       "table"
       ".codeblock"
+      ".content-grid"
       ".figure"
       ".highlight"
       ".instagram-media"
diff --git a/assets/css/050_figures.css b/assets/css/050_figures.css
index 971836c..4048df2 100644
--- a/assets/css/050_figures.css
+++ b/assets/css/050_figures.css
@@ -92,3 +92,8 @@ figcaption {
   grid-column: main-start / main-end;
   letter-spacing: 0.01em;
 }
+
+
+.content-grid > .figure {
+  grid-column: unset;
+}
diff --git a/assets/css/090_content_grid.css b/assets/css/090_content_grid.css
new file mode 100644
index 0000000..de17535
--- /dev/null
+++ b/assets/css/090_content_grid.css
@@ -0,0 +1,13 @@
+
+
+
+
+
+/***************
+ * CONTENT GRID
+ ***************/
+
+.content-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--columns), 1fr);
+}
diff --git a/layouts/shortcodes/content-grid.html b/layouts/shortcodes/content-grid.html
new file mode 100644
index 0000000..72c413b
--- /dev/null
+++ b/layouts/shortcodes/content-grid.html
@@ -0,0 +1,4 @@
+{{- $columns := .Get "columns" -}}
+<div class="content-grid" style="--columns: {{ $columns }};">
+  {{ .Inner }}
+</div>

From 1eba82c96bdc1576fae9bffd4025bde89cef4086 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Tue, 26 Nov 2024 13:44:29 -0700
Subject: [PATCH 14/24] Fix the name of tag__list-item elements

I changed the class name of these elements in a prior commit and forgot to
update this template.
---
 layouts/partials/page/section_year_nav.html | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/layouts/partials/page/section_year_nav.html b/layouts/partials/page/section_year_nav.html
index bc2e14f..57d07ca 100644
--- a/layouts/partials/page/section_year_nav.html
+++ b/layouts/partials/page/section_year_nav.html
@@ -1,13 +1,11 @@
-{{- $years := .years -}}
-{{- $includeCollapsedYearItem := .includeCollapsedYearItem -}}
 <nav class="year-nav  tag">
   <span class="tag__name">{{ i18n "yearsTagTitle" }}</span>
   <ul class="tag__value--list">
-    {{ range $years -}}
-      <li class="tag__value__list-item"><a href="#{{ .Date | time.Format "2006" }}">{{ .LinkTitle }}</a></li>
+    {{ range .years -}}
+      <li class="tag__list-item"><a href="#{{ .Date | time.Format "2006" }}">{{ .LinkTitle }}</a></li>
     {{ end }}
-    {{ if $includeCollapsedYearItem -}}
-      <li class="tag__value__list-item"><a href="#older">{{ i18n "olderPagesSectionTitle" }}</a></li>
+    {{ if .includeCollapsedYearItem -}}
+      <li class="tag__list-item"><a href="#older">{{ i18n "olderPagesSectionTitle" }}</a></li>
     {{ end }}
   </ul>
 </nav>

From accd1aceeb333a93ade69eb2729047ff1fab31e4 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Mon, 23 Dec 2024 08:13:30 -0800
Subject: [PATCH 15/24] A couple fixes for page navigation

- Put the previous post on the left, and the next post on the right
- Simplify the CSS class names and styles
---
 assets/css/099_page_navigation.css              | 12 ++++++------
 layouts/partials/page/prev_next_navigation.html |  6 +++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/assets/css/099_page_navigation.css b/assets/css/099_page_navigation.css
index 99e285b..32de31b 100644
--- a/assets/css/099_page_navigation.css
+++ b/assets/css/099_page_navigation.css
@@ -15,27 +15,27 @@
     justify-content: flex-end;
   }
 
-  li {
+  .prev, .next {
     display: block;
     padding-inline: 0;
   }
 
-  .next-page {
+  .next {
     text-align: right;
   }
 
-  .previous-page::before,
-  .next-page::after {
+  .prev::before,
+  .next::after {
     color: var(--text-color-secondary);
     font-family: var(--font-family-monospace);
   }
 
-  .previous-page::before {
+  .prev::before {
     content: "<-";
     padding-inline-end: var(--space-s);
   }
 
-  .next-page::after {
+  .next::after {
     content: "->";
     padding-inline-start: var(--space-s);
   }
diff --git a/layouts/partials/page/prev_next_navigation.html b/layouts/partials/page/prev_next_navigation.html
index 87ef301..e214212 100644
--- a/layouts/partials/page/prev_next_navigation.html
+++ b/layouts/partials/page/prev_next_navigation.html
@@ -1,18 +1,18 @@
 {{ if .FirstSection }}
-  {{- $pages := where .FirstSection.RegularPagesRecursive "Draft" "eq" false -}}
+  {{- $pages := (where .FirstSection.RegularPagesRecursive "Draft" "eq" false).ByDate -}}
   {{- $previousInSection := $pages.Prev . -}}
   {{- $nextInSection := $pages.Next . -}}
 
   {{ if or $previousInSection $nextInSection }}
     <ul class="page-navigation">
       {{ with $nextInSection -}}
-        <li class="previous-page">
+        <li class="prev">
           <a href="{{ .Permalink }}">{{ .LinkTitle | markdownify }}</a>
         </li>
       {{- end }}
 
       {{ with $previousInSection -}}
-        <li class="next-page">
+        <li class="next">
           <a href="{{ .Permalink }}">{{ .LinkTitle | markdownify }}</a>
         </li>
       {{- end }}

From 05956b83b813e9ab3beebe0802f4ebe7a21c77fe Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Tue, 31 Dec 2024 09:37:19 -0800
Subject: [PATCH 16/24] Make some improvements to the fullwidth-image partial

- Add some handling of SVGs so the template doesn't attempt to resize them.
- Include custom classes in the <figure class> attribute
- Do not link to SVG images
- Only include <img srcset> if there are multiple sized images. This mostly supports
  SVG figures where there's only ever one.
---
 .../page/figures/fullwidth-image.html         | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/layouts/partials/page/figures/fullwidth-image.html b/layouts/partials/page/figures/fullwidth-image.html
index ed39f0e..74b29e3 100644
--- a/layouts/partials/page/figures/fullwidth-image.html
+++ b/layouts/partials/page/figures/fullwidth-image.html
@@ -1,28 +1,39 @@
 {{- $image := .resource -}}
 
-{{-
-  $resizedImages := dict
-    "full"    ($image.Fit "2560x2560")
-    "half"    ($image.Fit "1280x1280")
-    "quarter" ($image.Fit "640x640")
--}}
+{{- $isSVG := strings.Contains $image.MediaType.SubType "svg" -}}
+{{- $linksToFullSizeImage := and .linksToFullSizeImage (not $isSVG) -}}
+
+{{- $resizedImages := dict "full" $image -}}
+{{- if not $isSVG -}}
+  {{-
+    $resizedImages := dict
+      "full"    ($image.Fit "2560x2560")
+      "half"    ($image.Fit "1280x1280")
+      "quarter" ($image.Fit "640x640")
+  -}}
+{{ end }}
 
 {{- $classes := slice "figure" "figure--image" -}}
 {{- if eq .size "main" -}}
   {{ $classes = $classes | append "figure--main-column" }}
 {{- end -}}
+{{- with .class -}}
+  {{ $classes = $classes | append . }}
+{{- end -}}
 
 <figure class="{{ delimit $classes "  " }}">
-  {{ if .linksToFullSizeImage -}}
+  {{ if $linksToFullSizeImage -}}
     <a href="{{ $image.RelPermalink }}">
   {{- end -}}
     <img
       src="{{ (index $resizedImages "full").RelPermalink }}"
-      srcset="
-        {{ (index $resizedImages "full").RelPermalink }} 2560w,
-        {{ (index $resizedImages "half").RelPermalink }} 1280w,
-        {{ (index $resizedImages "quarter").RelPermalink }} 640w,
-      "
+      {{ if gt (len $resizedImages) 1 -}}
+        srcset="
+          {{ (index $resizedImages "full").RelPermalink }} 2560w,
+          {{ (index $resizedImages "half").RelPermalink }} 1280w,
+          {{ (index $resizedImages "quarter").RelPermalink }} 640w,
+        "
+      {{ end }}
       {{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }}
       {{ with $image.Title }} title="{{ . }}"{{ end }}>
   {{ if .linksToFullSizeImage -}}

From 7d56bd2f78eea9ba998e456e34915ccd587ca8e4 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sat, 4 Jan 2025 10:12:29 -0800
Subject: [PATCH 17/24] Inline image template

This is for embedding SVGs inline.
---
 .../partials/page/figures/inline-image.html   | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 layouts/partials/page/figures/inline-image.html

diff --git a/layouts/partials/page/figures/inline-image.html b/layouts/partials/page/figures/inline-image.html
new file mode 100644
index 0000000..d54bd09
--- /dev/null
+++ b/layouts/partials/page/figures/inline-image.html
@@ -0,0 +1,24 @@
+{{- $image := .page.Resources.GetMatch .name -}}
+
+{{ if not $image }}
+  {{ errorf "No images named '%s' found. %s " .name .page.Permalink }}
+{{ end }}
+
+{{ if ne $image.MediaType.SubType "svg" }}
+  {{ errorf "Only SVGs may be inlined. %s" $image.Permalink }}
+{{ end }}
+
+{{- $classes := slice "figure" "figure--image" "figure--inline-image" -}}
+{{- if eq .size "main" -}}
+  {{ $classes = $classes | append "figure--main-column" }}
+{{- end -}}
+{{- with .class -}}
+  {{ $classes = $classes | append . }}
+{{- end -}}
+
+<figure class="{{ delimit $classes "  " }}">
+  {{ $image.Content | safeHTML }}
+  {{ if .shouldShowTitle }}
+    {{ partial "page/figures/caption.html" (merge . (dict "resource" $image)) }}
+  {{ end }}
+</figure>

From 1e6db433544280ec117a07f1cd72a4de1b393a73 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sat, 4 Jan 2025 10:12:56 -0800
Subject: [PATCH 18/24] A {{ 2col }} shortcode and styling to make a 2 column
 grid

If the shortcode contains only figures, lay it out wide and add XL margins like
other figures.
---
 assets/css/010_spacing.css   |  1 +
 assets/css/010_structure.css | 31 +++++++++++++++++++++++++++++++
 layouts/shortcodes/2col.html | 10 ++++++++++
 3 files changed, 42 insertions(+)
 create mode 100644 layouts/shortcodes/2col.html

diff --git a/assets/css/010_spacing.css b/assets/css/010_spacing.css
index 3b733f5..d8b6452 100644
--- a/assets/css/010_spacing.css
+++ b/assets/css/010_spacing.css
@@ -71,6 +71,7 @@ hr {
       ".figure"
       ".highlight"
       ".instagram-media"
+      ".two-column:has(figure:first-child + figure:last-child)"
     )
   ", "
 -}}
diff --git a/assets/css/010_structure.css b/assets/css/010_structure.css
index f4cac11..8244e46 100644
--- a/assets/css/010_structure.css
+++ b/assets/css/010_structure.css
@@ -138,3 +138,34 @@ section.content--small-right-column {
     margin-block: 0;
   }
 }
+
+
+
+
+
+/*********************
+ * 2 COLUMN CONTAINER
+ *********************/
+
+main.content > .two-column {
+  display: grid;
+  grid-column: main-start / main-end;
+  grid-template-columns: 1fr 1fr;
+
+  &.wide {
+    grid-column: wide-gutter-start / wide-gutter-end;
+  }
+
+  > :first-child {
+    grid-column: unset;
+  }
+
+  > :last-child {
+    grid-column: unset;
+  }
+
+  &:has(figure:first-child + figure:last-child) {
+    gap: var(--space-xs);
+    grid-column: wide-gutter-start / wide-gutter-end;
+  }
+}
diff --git a/layouts/shortcodes/2col.html b/layouts/shortcodes/2col.html
new file mode 100644
index 0000000..c491714
--- /dev/null
+++ b/layouts/shortcodes/2col.html
@@ -0,0 +1,10 @@
+{{- $size := .Get 0 | default "main" -}}
+
+{{- $classes := slice "two-column" -}}
+{{- if eq $size "wide" -}}
+  {{- $classes = $classes | append "wide" -}}
+{{- end -}}
+
+<div class="{{ delimit $classes "  " }}">
+  {{ .Inner }}
+</div>

From c949edac151ea8d2adfcbf402f919e6499df7acb Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Tue, 7 Jan 2025 15:36:30 -0800
Subject: [PATCH 19/24] Fix a syntax error in the structure CSS file

There was a stray paren here.
---
 assets/css/010_structure.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/css/010_structure.css b/assets/css/010_structure.css
index 8244e46..674af10 100644
--- a/assets/css/010_structure.css
+++ b/assets/css/010_structure.css
@@ -106,7 +106,7 @@ body {
   grid-column: main-start / main-end;
 }
 
-.content > .codeblock) {
+.content > .codeblock {
   grid-column: wide-gutter-start / wide-gutter-end;
 }
 

From 27c1a84ee41894bd97a08737333cac267eb1f0e4 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Tue, 7 Jan 2025 15:37:28 -0800
Subject: [PATCH 20/24] Add an "after_content" blog to baseof.html

Populate it with links to CSS files in the page bundle.
---
 layouts/_default/baseof.html | 1 +
 layouts/_default/single.html | 6 ++++++
 layouts/blog/single.html     | 6 ++++++
 3 files changed, 13 insertions(+)

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 4db2f61..264af70 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -12,6 +12,7 @@
     <footer class="site-footer">
       {{ partialCached "site/footer.html" . }}
     </footer>
+    {{ block "after_content" . }}{{ end }}
     {{ partial "base/body-extras.html" . }}
   </body>
   {{- block "after_js" . }}{{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 99992ac..c6d157a 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -20,3 +20,9 @@
     </footer>
   </main>
 {{ end }}
+
+{{ define "after_content" }}
+  {{ range .Resources.Match "*.css" }}
+    <link rel="stylesheet" href="{{ .RelPermalink }}">
+  {{ end }}
+{{ end }}
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index c846373..7e4efdf 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -12,3 +12,9 @@
     </footer>
   </main>
 {{ end }}
+
+{{ define "after_content" }}
+  {{ range .Resources.Match "*.css" }}
+    <link rel="stylesheet" href="{{ .RelPermalink }}">
+  {{ end }}
+{{ end }}

From ccedb4c2bd267dd8c302880db75a964db554f155 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Tue, 14 Jan 2025 19:29:19 -0800
Subject: [PATCH 21/24] Several fixes for youtube figures

---
 assets/css/050_figures.css      | 19 ++++++++++---------
 layouts/shortcodes/youtube.html |  2 +-
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/assets/css/050_figures.css b/assets/css/050_figures.css
index 4048df2..af11a8f 100644
--- a/assets/css/050_figures.css
+++ b/assets/css/050_figures.css
@@ -29,6 +29,11 @@
     justify-content: center;
   }
 
+  &:has(.youtube) {
+    display: block;
+    grid-template-columns: unset;
+  }
+
   > a:has(img:only-child) {
     grid-column: wide-gutter-start / wide-gutter-end;
   }
@@ -70,17 +75,13 @@
 }
 
 
-.figure--youtube {
-  grid-column: wide-gutter-start / wide-gutter-end;
+.figure .youtube {
+  width: 100%;
 
-  .youtube {
+  iframe {
+    aspect-ratio: 16 / 9;
+    margin-bottom: -3px;
     width: 100%;
-
-    iframe {
-      aspect-ratio: 16 / 9;
-      margin-bottom: -3px;
-      width: 100%;
-    }
   }
 }
 
diff --git a/layouts/shortcodes/youtube.html b/layouts/shortcodes/youtube.html
index bc07810..c2000fb 100644
--- a/layouts/shortcodes/youtube.html
+++ b/layouts/shortcodes/youtube.html
@@ -4,7 +4,7 @@
 {{- $id := .Get "id" | default (.Get 0) -}}
 {{- $class := .Get "class" | default (.Get 1) -}}
 {{- $title := .Get "title" | default "YouTube Video" }}
-<figure class="figure--youtube{{ with $class }}  {{ . }}{{ end }}">
+<figure class="figure{{ with $class }}  {{ . }}{{ end }}">
   <div class="youtube">
     <iframe src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" allowfullscreen frameborder=0 title="{{ $title }}"></iframe>
   </div>

From 5a67372ee52aee6a2aec5a61aa203d1208cf1985 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Tue, 14 Jan 2025 19:29:52 -0800
Subject: [PATCH 22/24] Remove the grid from figures in two-column grid

This lays out figcaptions better than with the grid.
---
 assets/css/010_structure.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/assets/css/010_structure.css b/assets/css/010_structure.css
index 674af10..05d5f3e 100644
--- a/assets/css/010_structure.css
+++ b/assets/css/010_structure.css
@@ -164,6 +164,10 @@ main.content > .two-column {
     grid-column: unset;
   }
 
+  > .figure {
+    display: block;
+  }
+
   &:has(figure:first-child + figure:last-child) {
     gap: var(--space-xs);
     grid-column: wide-gutter-start / wide-gutter-end;

From a395d26bc4fa025335489845ed8c0dd988b4252d Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Tue, 14 Jan 2025 19:30:10 -0800
Subject: [PATCH 23/24] Remove the 2px border from the <hr> in footnote
 elements

The <hr> is styled elsewhere.
---
 assets/css/099_footnotes.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/assets/css/099_footnotes.css b/assets/css/099_footnotes.css
index 6a8226a..369b38c 100644
--- a/assets/css/099_footnotes.css
+++ b/assets/css/099_footnotes.css
@@ -6,7 +6,6 @@
   font-size: var(--text-s);
 
   hr {
-    border-top: 2px dashed var(--gray6);
     margin-block-start: var(--space-xl);
   }
 

From 3248ac51d13b1ecf221f3c9ba453cb3da30b9bf3 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Tue, 19 Aug 2025 10:02:38 -0700
Subject: [PATCH 24/24] Take an .images list of resources in figures/fullwidth
 and figures/small

These two templates take a list of resources to operate on. Since these render
image figures, that list is called "images".
---
 layouts/partials/page/figures/fullwidth.html | 8 +++-----
 layouts/partials/page/figures/small.html     | 4 ++--
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/layouts/partials/page/figures/fullwidth.html b/layouts/partials/page/figures/fullwidth.html
index d10d467..40f3e46 100644
--- a/layouts/partials/page/figures/fullwidth.html
+++ b/layouts/partials/page/figures/fullwidth.html
@@ -1,10 +1,8 @@
-{{- $resource := .page.Resources.GetMatch .name -}}
-{{- if not $resource }}
-  {{ errorf "No resource named '%s'. %s" .name .page.Permalink }}
-{{ end -}}
+{# TODO: Accommodate multiple images here #}
+{{- $resource := index .images 0 -}}
 
 {{- if eq $resource.ResourceType "image" -}}
-  {{ partial "page/figures/fullwidth-image.html" (merge . (dict "resource" $resource))  }}
+  {{ partial "page/figures/fullwidth-image.html" (merge . (dict "resource" $resource)) }}
 {{- else if eq $resource.ResourceType "video" -}}
   {{ partial "page/figures/fullwidth-video.html" (merge . (dict "resource" $resource)) }}
 {{- end -}}
diff --git a/layouts/partials/page/figures/small.html b/layouts/partials/page/figures/small.html
index 6b39a92..29d4c09 100644
--- a/layouts/partials/page/figures/small.html
+++ b/layouts/partials/page/figures/small.html
@@ -1,8 +1,8 @@
 {{- $page := .page -}}
-
 {{- $shouldShowTitle := .shouldShowTitle -}}
 
-{{- $resource := $page.Resources.GetMatch .name -}}
+{# TODO: Accommodate multiple images here. #}
+{{- $resource := index .images 0 -}}
 {{- if not $resource }}
   {{ errorf "No resource named '%s'. %s" .name .page.Permalink }}
 {{ end -}}