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

@@ -260,6 +260,10 @@
     margin-inline-start: 0;
   }
 
+  section.flow {
+    display: block flow;
+  }
+
   ul, ol {
     list-style-position: inside;
   }

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,

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%);

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

layouts/shortcodes/section.html

@@ -0,0 +1,3 @@
+<section {{ with .Get "class" }}class="{{ . }}"{{ end }}>
+  {{ .Inner }}
+</section>