From bfee27e7c58f642830ee593775e7d6f265ebad95 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sat, 18 Nov 2023 11:11:34 -0800
Subject: [PATCH] Fix "me" image on the about page

Add a section shortcode to enable wrapping a chunk of a post in a <section>
Add a section.flow class that removes grid from the section
Fix up the about styles so that the paragraph that Hugo wraps the <img> in behaves sensibly when floated
Fix the alt text in the circular_image shortcode
---
 assets/styles/root/002_layout.css      |  4 ++++
 content/about/_index.md                | 11 +++++++++--
 content/about/style.css                | 10 ++++++++++
 layouts/shortcodes/circular_image.html |  2 +-
 layouts/shortcodes/section.html        |  3 +++
 5 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 layouts/shortcodes/section.html

diff --git a/assets/styles/root/002_layout.css b/assets/styles/root/002_layout.css
index 0153d0a..caa2153 100644
--- a/assets/styles/root/002_layout.css
+++ b/assets/styles/root/002_layout.css
@@ -260,6 +260,10 @@
     margin-inline-start: 0;
   }
 
+  section.flow {
+    display: block flow;
+  }
+
   ul, ol {
     list-style-position: inside;
   }
diff --git a/content/about/_index.md b/content/about/_index.md
index f5afdab..7b2ba05 100644
--- a/content/about/_index.md
+++ b/content/about/_index.md
@@ -4,10 +4,15 @@ date: 2022-09-03T12:14:32-07:00
 resources:
   - name: me
     src: me.jpeg
+    params:
+      alt: "
+        Me, wearing a hat and smiling slightly, standing in front of a stone background.
+      "
 ---
 
-{{< circular_image id=me name=me class="float-right" width=200
-  alt="A photo of me, wearing a hat, standing in front of a stone background">}}
+{{% section class=flow %}}
+
+{{< circular_image id=me name=me class="float-right" width=200 >}}
 
 I'm Eryn. My pronouns are [she/her][p]. I'm a queer trans woman. I live in San
 Francisco, CA, on the unceded ancestral lands of the Ramaytush Ohlone people,
@@ -17,6 +22,8 @@ I attended [Oberlin College][ob] where I got a degree in Computer Science.
 
 I speak English natively, and Spanish too, though I always need more practice.
 
+{{% /section %}}
+
 ## Hobbies
 
 I've been a musician for most of my life. I started on the piano at age seven,
diff --git a/content/about/style.css b/content/about/style.css
index b61a43d..45d6e31 100644
--- a/content/about/style.css
+++ b/content/about/style.css
@@ -1,4 +1,14 @@
 @layer page {
+  main > section > p:not(:last-child) {
+    margin-bottom: var(--body-item-spacing);
+  }
+
+  p:has(img#me) {
+    display: inline;
+    grid-column: unset;
+    margin-bottom: 0;
+  }
+
   img#me {
     margin: 0;
     shape-outside: circle(55%);
diff --git a/layouts/shortcodes/circular_image.html b/layouts/shortcodes/circular_image.html
index 45b1b74..ec47e22 100644
--- a/layouts/shortcodes/circular_image.html
+++ b/layouts/shortcodes/circular_image.html
@@ -1,7 +1,7 @@
 {{- $img := (.Page.Resources.GetMatch (.Get "name")) -}}
 {{- $id := .Get "id" -}}
 {{- $classes := .Get "class" -}}
-{{- $alt := .Get "alt" -}}
+{{- $alt := .Get "alt" | default $img.Params.alt -}}
 {{- $width := .Get "width" -}}
 {{- $resized_img := $img.Resize (printf "%dx%d" $width $width) -}}
 <img
diff --git a/layouts/shortcodes/section.html b/layouts/shortcodes/section.html
new file mode 100644
index 0000000..f28037c
--- /dev/null
+++ b/layouts/shortcodes/section.html
@@ -0,0 +1,3 @@
+<section {{ with .Get "class" }}class="{{ . }}"{{ end }}>
+  {{ .Inner }}
+</section>