Add circlar selfie to about page

content/about/index.md

@@ -4,6 +4,8 @@ date: 2022-09-03T12:14:32-07:00
 draft: true
 ---
 
+{{< circular_image name=me.jpeg 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,
 with my [two cats][cats]. I was born in Seattle, WA and grew up in Phoenix, AZ.

layouts/shortcodes/circular_image.html

@@ -0,0 +1,5 @@
+{{ $img := (.Page.Resources.GetMatch (.Get "name")) }}
+{{ $classes := .Get "class" }}
+{{ $width := .Get "width" }}
+{{ $resized_img := $img.Resize (printf "%dx%d" $width $width) }}
+<img class="circular {{ $classes }}" src="{{ $img.RelPermalink }}" width="{{ $width }}" height="{{ $width }}">

static/styles/root.css

@@ -202,6 +202,11 @@ html {
     font-size: clamp(var(--font-size-min), 1vw, var(--font-size-max));
 }
 
+img.circular {
+    shape-outside: circle(50%);
+    -webkit-clip-path: circle(50%);
+}
+
 main {
     max-width: var(--content-width);
     margin: 0 auto;
@@ -443,6 +448,7 @@ p:last-child { margin-block-end: 0; }
 /** HELPER CLASSES **/
 
 .centered { text-align: center; }
+.float-right { float: right; }
 .nobreak { white-space: nowrap; }
 
 .platter {