Mushrooms photo post

This group has one command so far: next-tag. It looks at the git tag list and
figured out the next deployment tag. For the most part tags are named like so:

    deploy-%Y-%m-%d-NN

The middle segments are year-month-day, and the last segment is an incrementing
counter. For the most part this number will be 01. On days when I deploy more than
once, it will increment.

.gitattributes

@@ -1,3 +1,5 @@
 *.jpg filter=lfs diff=lfs merge=lfs -text
 *.jpeg filter=lfs diff=lfs merge=lfs -text
 *.pxm filter=lfs diff=lfs merge=lfs -text
+*.mov filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -1,7 +1,11 @@
 node_modules/
 public/
+/documentation/mirrors/
 /resources/
 .hugo_build.lock
 *.log
 *.orig
 *~
+
+# Backup files for Markdown files processed in-place with sed
+*.md-e

.gitmodules

@@ -0,0 +1,18 @@
+[submodule "themes/platters"]
+	path = themes/platters
+	url = nutmeg:git/hugo-theme-platters.git
+[submodule "themes/termlite"]
+	path = themes/termlite
+	url = git@github.com:erynofwales/hugo-theme-termlite.git
+[submodule "themes/resource-builders"]
+	path = themes/resource-builders
+	url = git@github.com:erynofwales/hugo-resource-builders.git
+[submodule "themes/image-utils"]
+	path = themes/image-utils
+	url = git@github.com:erynofwales/hugo-image-utilities.git
+[submodule "themes/photostream"]
+	path = themes/photostream
+	url = git@github.com:erynofwales/hugo-theme-photostream.git
+[submodule "themes/feeds"]
+	path = themes/feeds
+	url = git@github.com:erynofwales/hugo-theme-feeds.git

.nvim/ftdetect/html.lua

@@ -2,7 +2,7 @@
 
 local filetypedetectGroup = vim.api.nvim_create_augroup("HugoHTMLTemplates", {clear = true})
 vim.api.nvim_create_autocmd({"BufRead", "BufNewFile"}, {
-    pattern = {"*/layouts/*.html"},
+    pattern = {"**/layouts/**/*.html"},
     group = filetypedetectGroup,
     command = "set ft=gohtmltmpl",
 })

Makefile

@@ -1,5 +1,9 @@
 # Eryn Wells <eryn@erynwells.me>
 
+BUILD_DIR=public
+
+CONTENT_PATH=content
+
 DEPLOY_USER=eryn
 DEPLOY_HOSTNAME=nutmeg.erynwells.me
 DEPLOY_PATH=/srv/www/erynwells.me/html
@@ -12,15 +16,17 @@ NETHACK_LOGFILE_DATA_FILE=data/nethack/logfile/$(HOSTNAME).json
 
 .PHONY: site deploy clean
 
-site: nethack
+site:
 	@echo "Building site"
-	hugo
+	hugo --buildFuture --enableGitInfo --destination "$(BUILD_DIR)"
 
 deploy: site
 	@echo "Deploying to $(DEPLOY_LOCATION)"
-	rsync -avz --no-times --no-perms --delete public/ $(DEPLOY_LOCATION)
+	rsync -avz --no-times --no-perms --delete "$(BUILD_DIR)/" "$(DEPLOY_LOCATION)"
 	git tag -f deploy-$(shell date +%Y-%m-%d)
 
+deployall: nethack deploy
+
 nethack: nethack-logfile nethack-commit
 
 nethack-logfile: $(NETHACK_LOGFILE)
@@ -33,4 +39,4 @@ nethack-commit: $(NETHACK_LOGFILE_DATA_FILE)
 	if ! git diff --quiet $<; then git commit -m "Update Nethack logfile for $(HOSTNAME)" -- $<; fi
 
 clean:
-	rm -rf public/
+	rm -rf "$(BUILD_DIR)/"

archetypes/link.md

@@ -0,0 +1,9 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+slug: link-{{ .Name }}
+date: {{ .Date }}
+categories: links
+draft: true
+tags: []
+---
+

archetypes/weeknotes.md

@@ -0,0 +1,10 @@
+---
+title: "Notes on {{ time.Now.Format "2006" }}W%%WEEK_NUMBER%%"
+slug: weeknotes-{{ time.Now.Format "2006" }}w%%WEEK_NUMBER%%
+date: {{ .Date | time.Format "2006-01-02" }}
+categories: weeknotes
+tags:
+  - Weeknotes
+draft: true
+---
+

assets/css/099_format_tweaks.css

@@ -0,0 +1,18 @@
+
+
+
+
+
+/************************
+ * PARAGRAPH-SPACED LIST
+ ************************/
+
+p + .paragraph-spaced-list {
+  margin-block-start: var(--space-paragraph);
+}
+
+.paragraph-spaced-list {
+  li + li {
+    margin-block-start: var(--space-paragraph);
+  }
+}

assets/css/099_home_latest.css

@@ -0,0 +1,42 @@
+.home-latest {
+  display: grid;
+  grid-column: main-start / main-end;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: min-content min-content;
+  grid-template-areas:
+    "blog1 blog1 blog2 blog2"
+    "photo1 photo2 photo3 photo4";
+
+  .home-latest__blog {
+    margin-block-end: var(--space-m);
+  }
+
+  .home-latest__blog:nth-of-type(1) {
+    grid-area: blog1;
+    border-right: 2px dashed var(--gray6);
+    padding-inline-end: var(--space-s);
+  }
+
+  .home-latest__blog:nth-of-type(2) {
+    grid-area: blog2;
+    padding-inline-start: var(--space-s);
+  }
+
+  .home-latest__photo {
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .home-latest {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: repeat(min-content, 4);
+    grid-template-areas:
+      "blog1 blog2"
+      "photo1 photo2"
+      "photo3 photo4";
+  }
+}
+
+p + .home-latest {
+  margin-block-start: var(--space-paragraph);
+}

assets/css/099_nethack.css

@@ -0,0 +1,100 @@
+
+
+
+
+
+/******************
+ * NETHACK LOGFILE
+ ******************/
+
+#dungeon-background {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  filter: brightness(0.3);
+}
+
+.nethack-logfile {
+  margin-inline-start: 0;
+  padding-inline-start: 0;
+
+  .nethack-logentry {
+    align-items: first baseline;
+    display: grid;
+    grid-template-columns: min-content min-content auto min-content;
+    grid-template-areas:
+      "list-marker entry-marker entry-date        entry-character-descriptor"
+      ".           .            entry-description entry-description"
+      ".           .            entry-stats       entry-stats";
+    gap: var(--space-xs);
+    margin-inline-start: 0;
+  }
+}
+
+
+.nethack-logentry {
+  &:not(:last-child) {
+    margin-block-end: var(--space-l);
+  }
+
+  &::before {
+    grid-area: list-marker;
+  }
+
+  .nethack-logentry__marker {
+    grid-area: entry-marker;
+  }
+
+  .nethack-logentry__date {
+    grid-area: entry-date;
+    line-height: 1;
+    margin: 0;
+    padding: 0;
+  }
+
+  .nethack-logentry__character-descriptor {
+    font-family: var(--font-family-monospace);
+    font-size: var(--text-s);
+    grid-area: entry-character-descriptor;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  .nethack-logentry__description {
+    grid-area: entry-description;
+    margin: 0;
+  }
+
+  .nethack-logentry__stats {
+    border: 0;
+    color: var(--text-color-secondary);
+    font-family: var(--font-family-monospace);
+    font-size: var(--text-s);
+    grid-area: entry-stats;
+    margin-block: 0;
+    width: 100%;
+    -webkit-border-horizontal-spacing: 0;
+    -webkit-border-vertical-spacing: 0;
+  }
+
+  .nethack-logentry__stats {
+    padding: 0;
+    text-transform: uppercase;
+    vertical-align: bottom;
+    white-space: nowrap;
+
+    thead {
+      font-weight: bolder;
+    }
+
+    .nethack-logentry__score,
+    .nethack-logentry__hp,
+    .nethack-logentry__level {
+      width: 16rem;
+      text-align: right;
+    }
+  }
+}

assets/scripts/modules/sketches/console.ts

@@ -1,66 +0,0 @@
-import {
-    IntegerPoint as Point,
-    IntegerSize as Size,
-    Rect,
-} from "./geometry.js";
-
-export class Console {
-    #screen: Cell[];
-    #size: Size;
-
-    constructor(size: Size) {
-        const length = size.width * size.height;
-        this.#size = size
-
-        this.#screen = new Array(length);
-        for (let i = 0; i < length; i++) {
-            this.#screen[i] = new Cell(' ')
-        }
-    }
-
-    drawInRect(rect: Rect) {
-        const cellSize = new Size(
-            rect.size.width / this.#size.width,
-            rect.size.height / this.#size.height
-        );
-
-        for (let y = 0; y < this.#size.height; y++) {
-            for (let x = 0; x < this.#size.width; x++) {
-                const pt = new Point(x, y);
-                const character = this.characterAt(pt);
-            }
-        }
-    }
-
-    characterAt(pt: Point) {
-        return this.#cellAt(pt).character;
-    }
-
-    #cellAt(pt: Point): Cell {
-        return this.#screen[this.#size.width * pt.y + pt.x];
-    }
-}
-
-export class Color {
-    red: number;
-    green: number;
-    blue: number;
-
-    constructor(r: number, g: number, b: number) {
-        this.red = Math.min(1, Math.max(0, r));
-        this.green = Math.min(1, Math.max(0, g));
-        this.blue = Math.min(1, Math.max(0, b));
-    }
-}
-
-export class Cell {
-    character: String;
-    foregroundColor: Color;
-    backgroundColor?: Color;
-
-    constructor(character: String, foregroundColor?: Color, backgroundColor?: Color) {
-        this.character = character ? character : " ";
-        this.foregroundColor = foregroundColor ? foregroundColor : new Color(1, 1, 1);
-        this.backgroundColor = backgroundColor;
-    }
-}

assets/scripts/modules/sketches/geometry.ts

@@ -1,144 +0,0 @@
-export class Point {
-    x = 0;
-    y = 0;
-
-    constructor(x: number = 0, y: number = 0) {
-        if (x !== null && x !== undefined) {
-            this.x = x;
-        }
-        if (y !== null && y !== undefined) {
-            this.y = y;
-        }
-    }
-
-    toString() {
-        return `(${this.x}, ${this.y})`;
-    }
-
-    equalsPoint(other: Point): boolean {
-        return this.x === other.x && this.y === other.y;
-    }
-}
-
-
-export class IntegerPoint extends Point {
-    constructor(x: number = 0, y: number = 0) {
-        super(x ? Math.floor(x) : 0, y ? Math.floor(y) : 0);
-    }
-
-    *neighbors() {
-        const x = this.x;
-        const y = this.y;
-
-        yield new IntegerPoint(x - 1, y - 1);
-        yield new IntegerPoint(x,     y - 1);
-        yield new IntegerPoint(x + 1, y - 1);
-        yield new IntegerPoint(x - 1, y);
-        yield new IntegerPoint(x + 1, y);
-        yield new IntegerPoint(x - 1, y + 1);
-        yield new IntegerPoint(x,     y + 1);
-        yield new IntegerPoint(x + 1, y + 1);
-    }
-}
-
-
-export class Size {
-    width = 0;
-    height = 0;
-
-    constructor(width: number = 0, height: number = 0) {
-        if (width !== null && width !== undefined) {
-            this.width = width;
-        }
-        if (height !== null && height !== undefined) {
-            this.height = height;
-        }
-    }
-
-    toString() {
-        return `(${this.width}, ${this.height})`
-    }
-}
-
-
-export class IntegerSize extends Size {
-    constructor(w: number = 0, h: number = 0) {
-        super(w ? Math.floor(w) : 0, h ? Math.floor(h) : 0);
-    }
-}
-
-
-export class Rect {
-    origin = new Point();
-    size = new Size();
-
-    static fromCoordinates(x: number, y: number, w: number, h: number) {
-        return new Rect(new Point(x, y), new Size(w, h));
-    }
-
-    constructor(origin: Point, size: Size) {
-        if (origin instanceof Point) {
-            this.origin = origin;
-        } else {
-            throw new Error("Invalid origin value");
-        }
-
-        if (size instanceof Size) {
-            this.size = size;
-        } else {
-            throw new Error("Invalid size value");
-        }
-    }
-
-    toString() {
-        return `{${this.origin.toString()}, ${this.size.toString()}}`
-    }
-
-    get minX() { return this.origin.x; }
-    get minY() { return this.origin.y; }
-    get maxX() { return this.origin.x + this.size.width; }
-    get maxY() { return this.origin.y + this.size.height; }
-
-    get width() { return this.size.width; }
-    get height() { return this.size.height; }
-    get area() { return this.size.width * this.size.height; }
-
-    *xCoordinates() {
-        for (let x = this.minX; x <= this.maxX; x++) {
-            yield x;
-        }
-    }
-
-    *yCoordinates() {
-        for (let y = this.minY; y <= this.maxY; y++) {
-            yield y;
-        }
-    }
-
-    insetRect(inset: number) {
-        const twiceInset = 2 * inset;
-
-        return Rect.fromCoordinates(
-            this.origin.x + inset,
-            this.origin.y + inset,
-            this.size.width - twiceInset,
-            this.size.height - twiceInset
-        );
-    }
-
-    intersects(other: Rect) {
-        if (other.minX > this.maxX)
-            return false;
-
-        if (other.maxX < this.minX)
-            return false;
-
-        if (other.minY > this.maxY)
-            return false;
-
-        if (other.maxY < this.minY)
-            return false;
-
-        return true;
-    }
-}

assets/scripts/nethack/dungeon.js

@@ -1,12 +1,6 @@
 const NUMBER_OF_ROOMS = 12;
 const TUNNEL_PASSES = 3;
 
-import {
-    IntegerPoint as Point,
-    IntegerSize as Size,
-    Rect
-} from "scripts/modules/sketches/geometry.ts";
-
 class Cell {
   static CORRIDOR = "#";
   static DOOR_CLOSED = "+";
@@ -17,7 +11,6 @@ class Cell {
 
   constructor(char, charColor) {
     this.character = char;
-    this.characterColor = charColor;
   }
 
   empty() { this.character = " "; }
@@ -40,6 +33,104 @@ class Cell {
   canBecomeDoor() { return this.character === "─" || this.character === "│" }
 }
 
+class Point {
+  x = 0;
+  y = 0;
+
+  constructor(x, y) {
+    if (x) { this.x = x; }
+    if (y) { this.y = y; }
+  }
+
+  *neighbors() {
+    const x = this.x;
+    const y = this.y;
+
+    yield new Point(x - 1, y - 1);
+    yield new Point(x,     y - 1);
+    yield new Point(x + 1, y - 1);
+    yield new Point(x - 1, y);
+    yield new Point(x + 1, y);
+    yield new Point(x - 1, y + 1);
+    yield new Point(x,     y + 1);
+    yield new Point(x + 1, y + 1);
+  }
+
+  equalsPoint(other) { return this.x === other.x && this.y === other.y; }
+}
+
+class Size {
+  width = 0;
+  height = 0;
+
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+  }
+}
+
+class Rect {
+  origin = new Point();
+  size = new Size();
+
+  static fromCoordinates(x, y, w, h) {
+    return new Rect(new Point(x, y), new Size(w, h));
+  }
+
+  constructor(origin, size) {
+    this.origin = origin;
+    this.size = size;
+  }
+
+  get minX() { return this.origin.x; }
+  get minY() { return this.origin.y; }
+  get maxX() { return this.origin.x + this.size.width; }
+  get maxY() { return this.origin.y + this.size.height; }
+
+  get width() { return this.size.width; }
+  get height() { return this.size.height; }
+  get area() { return this.size.width * this.size.height; }
+
+  *xCoordinates() {
+    for (let x = this.minX; x <= this.maxX; x++) {
+      yield x;
+    }
+  }
+
+  *yCoordinates() {
+    for (let y = this.minY; y <= this.maxY; y++) {
+      yield y;
+    }
+  }
+
+  insetRect(inset) {
+    const twiceInset = 2 * inset;
+
+    return Rect.fromCoordinates(
+      this.origin.x + inset,
+      this.origin.y + inset,
+      this.size.width - twiceInset,
+      this.size.height - twiceInset
+    );
+  }
+
+  intersects(otherRect) {
+    if (otherRect.minX > this.maxX)
+      return false;
+
+    if (otherRect.maxX < this.minX)
+      return false;
+
+    if (otherRect.minY > this.maxY)
+      return false;
+
+    if (otherRect.maxY < this.minY)
+      return false;
+
+    return true;
+  }
+}
+
 class Grid {
   #size;
   #cells = [];
@@ -183,7 +274,6 @@ class NRandomRoomsGenerator {
   #generateRooms() {
     let rects = new Array();
 
-    const bounds = this.#bounds;
     const sizeRange = NRandomRoomsGenerator.MAX_ROOM_DIMENSION - NRandomRoomsGenerator.MIN_ROOM_DIMENSION;
 
     while (rects.length < this.#numberOfRooms) {
@@ -193,8 +283,8 @@ class NRandomRoomsGenerator {
       );
 
       const randomOrigin = new Point(
-        bounds.minX + randomInt(bounds.maxX - randomSize.width),
-        bounds.minY + randomInt(bounds.maxY - randomSize.height)
+        this.#bounds.minX + randomInt(this.#bounds.maxX - randomSize.width),
+        this.#bounds.minY + randomInt(this.#bounds.maxY - randomSize.height)
       );
 
       const proposedRoomRect = new Rect(randomOrigin, randomSize);
@@ -204,8 +294,6 @@ class NRandomRoomsGenerator {
         continue;
       }
 
-      console.log("Pushing new room rect", proposedRoomRect.toString());
-
       rects.push(proposedRoomRect);
     }
 
@@ -314,11 +402,11 @@ class TunnelGenerator {
   }
 
   /**
-   * Dig a corridor from fromPoint to toPoint, assuming that both points are adjacent to valid locations for doors on
-   * the map.
+   * Dig a corridor from fromPoint to toPoint, assuming that both points are
+   * adjacent to valid locations for doors on the map.
    *
-   * This is as close a copy of dig_corridor in the Nethack source as I could muster. It's not exactly pretty. This
-   * method assumed
+   * This is as close a copy of dig_corridor in the Nethack source as I could
+   * muster. It's not exactly pretty. This method assumed
    */
   #digCorridorFromPointToPoint(p, fromPoint, toPoint) {
     const MAX_STEPS = 500;
@@ -443,7 +531,7 @@ class TunnelGenerator {
     let toPoint;
     if (fromRoomBounds.maxX < toRoomBounds.minX) {
       // fromRoom is farther left than toRoom
-
+      
       fromPoint = new Point(fromRoomBounds.maxX, fromRoomBounds.minY + 1 + randomInt(fromRoomBounds.height - 2));
       foundFromPoint = this.#canPlaceDoorAt(fromPoint);
 
@@ -611,7 +699,7 @@ class TunnelGenerator {
 }
 
 function randomInt(n) {
-  const max = Math.floor(n);
+  max = Math.floor(n);
   return Math.floor(Math.random() * max);
 }
 
@@ -621,14 +709,12 @@ new p5(p => {
   const CELL_WIDTH = 20;
   const CELL_HEIGHT = Math.floor(CELL_WIDTH * 1.3);
 
-  const cellSize = new Size(CELL_WIDTH, CELL_HEIGHT);
-
   p.setup = () => {
     const container = document.querySelector('#dungeon-background');
-    const canvasWidth = parseFloat(getComputedStyle(container).width);
-    const canvasHeight = parseFloat(getComputedStyle(container).height);
+    console.assert(container, "Missing #dungeon-background element");
 
-    console.log(`Canvas size is ${(new Size(canvasWidth, canvasHeight)).toString()}`);
+    canvasWidth = parseFloat(getComputedStyle(container).width);
+    canvasHeight = parseFloat(getComputedStyle(container).height);
 
     let canvas = p.createCanvas(canvasWidth, canvasHeight);
     canvas.canvas.removeAttribute('style');
@@ -639,25 +725,20 @@ new p5(p => {
 
     const gridBounds = Rect.fromCoordinates(
       0, 0,
-      Math.max(80, Math.floor(canvasWidth / CELL_WIDTH) - 1),
-      Math.max(24, Math.floor(canvasHeight / CELL_HEIGHT) - 1)
+      Math.max(80, Math.ceil(canvasWidth / CELL_WIDTH) - 1),
+      Math.max(24, Math.ceil(canvasHeight / CELL_HEIGHT) - 1)
     );
 
-    if (gridBounds.width === 80) {
-      cellSize.width = Math.floor(canvasWidth / gridBounds.width);
-    }
-    if (gridBounds.height === 24) {
-      cellSize.height = Math.floor(canvasHeight / gridBounds.height);
-    }
-
-    console.log(`Generating grid with size ${gridBounds.size.toString()}, cell: ${cellSize.toString()}`);
+    console.log(`Generating grid with size ${gridBounds.size.width} x ${gridBounds.size.height}`);
 
     grid = new Grid(gridBounds.size.width, gridBounds.size.height);
     grid.generate(p, NRandomRoomsGenerator, TunnelGenerator);
-  }
+  };
 
   p.draw = () => {
-    p.textSize(cellSize.height);
+    console.log("Drawing");
+
+    p.textSize(CELL_HEIGHT);
 
     for (let y = 0; y < grid.height; y++) {
       for (let x = 0; x < grid.width; x++) {
@@ -667,7 +748,7 @@ new p5(p => {
         p.fill(fillColor);
 
         p.textAlign(p.CENTER, p.CENTER);
-        p.text(cell.character, x * cellSize.width, y * cellSize.height, cellSize.width, cellSize.height);
+        p.text(cell.character, x * CELL_WIDTH, y * CELL_HEIGHT, CELL_WIDTH, CELL_HEIGHT);
       }
     }
 

assets/scripts/railroad-utils.js

@@ -1,8 +1,4 @@
-{{ with resources.Get "scripts/lib/railroad.js" | fingerprint "sha512" }}
-import rr from "{{ .RelPermalink }}";
-{{ else }}
-  {{ errorf "Unable to get railroad.js resource" }}
-{{ end }}
+import rr from "scripts/lib/railroad.js";
 
 class RailroadDiagramManager {
     constructor() {

assets/scripts/rubiks/scrambler.js

@@ -0,0 +1,123 @@
+class RubiksCubeScrambler extends HTMLElement {
+    static #RandomMoveHysteresisMaxLength = 2;
+
+    #shadowRoot;
+    #movesListElement;
+
+    #numberOfMovesToGenerate = 25;
+
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: "open" });
+    }
+
+    scramble() {
+        console.log("Randomizing Rubik's cube...");
+
+        const movesList = this.#movesListElement;
+
+        while (movesList.childElementCount > this.#numberOfMovesToGenerate) {
+            movesList.removeChild(movesList.lastChild);
+        }
+
+        let randomMoveHysteresis = [];
+
+        for (let i = 0; i < this.#numberOfMovesToGenerate; i++) {
+            const randomMove = this.#randomMove(randomMoveHysteresis);
+
+            let moveItem;
+            if (i < movesList.childElementCount) {
+                moveItem = movesList.children[i];
+            } else {
+                moveItem = document.createElement("li");
+                movesList.appendChild(moveItem);
+            }
+
+            moveItem.classList.add("scrambler__move");
+            moveItem.classList.remove("scrambler__move--start", "scrambler__move--end");
+
+            if (randomMove.includes("2")) {
+                moveItem.classList.add("scrambler__move--start");
+            } else if (randomMove.includes("'")) {
+                moveItem.classList.add("scrambler__move--end");
+            }
+
+            moveItem.innerText = randomMove;
+        }
+    }
+
+    #randomMove(hysteresis) {
+        const faces = "FBLRUD";
+
+        let move;
+        do {
+            move = faces.charAt(Math.floor(Math.random() * faces.length));
+        } while (hysteresis && hysteresis.includes(move));
+
+        if (hysteresis) {
+            hysteresis.unshift(move);
+            while (hysteresis.length > RubiksCubeScrambler.#RandomMoveHysteresisMaxLength) {
+                hysteresis.pop();
+            }
+        }
+        
+        const modifierFactor = Math.random();
+        if (modifierFactor < 0.33333) {
+            move = "2" + move;
+        } else if (modifierFactor < 0.666666) {
+            move = move + "'";
+        }
+
+        return move;
+    }
+
+    #removeAllMoves() {
+        const element = this.#movesListElement;
+        while (element.hasChildNodes()) {
+            element.removeChild(element.lastChild);
+        }
+    }
+
+    // MARK: Custom Element
+
+    connectedCallback() {
+        let template = document.getElementById("rubiks-cube-scrambler-template");
+        console.assert(template, "Couldn't find RubiksCubeScrambler component template in the document");
+
+        const shadowRoot = this.#shadowRoot;
+        shadowRoot.appendChild(template.content.cloneNode(true));
+
+        this.#movesListElement = shadowRoot.querySelector(".scrambler__move-list");
+
+        shadowRoot
+            .querySelector("button[name='scramble']")
+            .addEventListener("click", () => this.scramble());
+
+        const patternLengthInputElement = shadowRoot.querySelector(".scrambler__pattern-length > input");
+        patternLengthInputElement.value = this.#numberOfMovesToGenerate;
+        patternLengthInputElement.addEventListener("input", event => {
+            try {
+                const integerValue = parseInt(event.target.value);
+                this.#numberOfMovesToGenerate = integerValue;
+            } catch (e) {
+                console.error("Non-integer value of pattern length field", e);
+            }
+        });
+
+        this.scramble();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        console.debug("RubiksCubeScrambler attribute changed", name, oldValue, newValue);
+        if (name === "count") {
+            try {
+                let newIntValue = parseInt(newValue);
+                this.#numberOfMovesToGenerate = newIntValue;
+            } catch (e) {
+                console.error("`count` attribute should have an integer value.", e);
+            }
+        }
+    }
+}
+
+window.customElements.define("rubiks-cube-scrambler", RubiksCubeScrambler);

assets/styles/blog/002_grid.css

@@ -1,9 +0,0 @@
-/* Eryn Wells <eryn@erynwells.me> */
-
-article > :is(h1, h2, h3, h4, h5, h6) {
-    grid-column: content-start / content-end;
-}
-
-.blog.list {
-    gap: 4rem 0;
-}

assets/styles/development.css

@@ -1,105 +0,0 @@
-/* Eryn Wells <eryn@erynwells.me> */
-
-details:has(.photo-params.debug) {
-    width: 100%;
-}
-
-.draft {
-    color: red;
-    display: inline-block;
-    font-family: 'SF Pro', sans-serif;
-    font-size: 1.5rem;
-    font-weight: bold;
-    letter-spacing: 3px;
-    text-transform: uppercase;
-}
-
-.draft:before {
-    content: "[";
-}
-
-.draft:after {
-    content: "]";
-}
-
-#debug-page-info {
-    background-color: var(--background-color);
-    border: 1px solid var(--separator-color);
-    border-radius: 6px;
-    box-shadow: 4px 5px 5px var(--box-shadow-color);
-    box-sizing: border-box;
-    font-size: 12px;
-    padding: 0.5rem;
-    position: fixed;
-    left: 12px;
-    bottom: 12px;
-    width: max-content;
-}
-
-#debug-page-info > details {
-    margin: 0.5rem;
-}
-
-#debug-page-info > summary {
-    font-family: var(--font-family-heading);
-}
-
-#debug-page-info h4 {
-    margin-block: 1rem;
-    margin-inline-start: 2rem;
-}
-
-#debug-page-info table {
-    border: 0;
-    border-color: rgb(var(--dk-gray));
-    display: block;
-    margin-inline-start: 2rem;
-    width: 100%;
-}
-
-#debug-page-info table > tbody {
-    border: 1px solid;
-}
-
-#debug-page-info table > tbody + tbody {
-    border-top: 1px solid;
-}
-
-#debug-page-info td {
-    border: 1px dotted;
-    border-left: 1px solid;
-    padding: 0.3em;
-}
-
-#debug-page-info table > tbody > tr:nth-child(even) {
-    background-color: var(--separator-color);
-}
-
-table.photo-params.debug {
-    --inline-start-padding: 2rem;
-
-    box-sizing: border-box;
-    width: calc(100% - var(--inline-start-padding));
-    margin-block-start: 1rem;
-    margin-inline-start: var(--inline-start-padding);
-}
-
-.photo-params.debug > thead {
-    font-size: 2rem;
-    font-weight: bold;
-    border-bottom: 2px solid rgb(var(--dk-gray));
-}
-
-.photo-params.debug > tbody > tr > td {
-    border: 1px solid var(--photo-params-border-color);
-    vertical-align: top;
-}
-
-.photo-params.debug > tbody > tr > td:first-of-type {
-    width: max-content;
-}
-
-.photo-params.debug > tbody > tr > td:last-of-type {
-    word-wrap: anywhere;
-    overflow: scroll;
-}

assets/styles/home.css

@@ -1,207 +0,0 @@
-@layer page {
-  :root {
-    --animation-offset: 6px;
-    --font-size-max: 12px;
-    --line-height: 1.85;
-  }
-
-  body {
-    display: flex;
-    font-size: 2rem;
-    justify-content: center;
-    margin: auto;
-  }
-
-  h1 {
-    font-size: 5rem;
-    line-height: 1.3;
-    margin: 0;
-    padding: 0;
-  }
-
-  @media (max-width: 599px) {
-    h1 {
-      font-size: 4.25rem;
-    }
-  }
-
-  header.site h1 { white-space: normal; }
-
-  @media (max-width: 599px) {
-    html {
-      --font-size-scale-factor: 1.33vmax;
-    }
-  }
-
-  main {
-    display: block;
-    line-height: var(--landing-line-height);
-    margin-block-start: 10vh;
-    width: inherit;
-  }
-
-  main header {
-    align-items: first baseline;
-    display: grid;
-    gap: 0 2rem;
-    grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 2fr);
-    grid-template-rows: repeat(2, max-content);
-    grid-template-areas:
-      "title blurb"
-      "title nav";
-    padding-inline: 1em;
-    margin-inline: 2rem;
-    max-width: 40rem;
-  }
-  @media (max-width: 599px) {
-    main header {
-      gap: 1rem 0;
-      grid-template-columns: 1fr;
-      grid-template-rows: repeat(3, max-content);
-      grid-template-areas:
-        "title"
-        "blurb"
-        "nav";
-      justify-items: center;
-      text-align: center;
-    }
-  }
-
-  main h1 {
-    letter-spacing: 0.025em;
-    text-align: end;
-  }
-
-  @media (max-width: 599px) {
-    main h1 {
-      text-align: center;
-    }
-  }
-
-  nav {
-    align-items: baseline;
-    justify-self: center;
-    display: flex;
-    font-size: 90%;
-    list-style: none;
-    text-transform: lowercase;
-  }
-
-  nav > li::before {
-  }
-
-  p {
-    margin: 0;
-    line-height: var(--line-height);
-  }
-
-  h1 {
-    grid-area: title;
-  }
-
-  #content {
-    grid-area: blurb
-  }
-
-  nav {
-    grid-area: nav
-  }
-
-  h1,
-  #content>p,
-  nav {
-    position: relative;
-  }
-
-  h1 {
-    animation: left-fade-in var(--transition-duration) ease-in-out;
-  }
-  @media (max-width: 599px) {
-    h1 {
-      animation: top-fade-in var(--transition-duration) ease-in-out;
-    }
-  }
-
-  #content>p,
-  nav {
-    animation: right-fade-in var(--transition-duration) ease-in-out;
-  }
-  @media (max-width: 599px) {
-    #content>p,
-    nav {
-      animation: bottom-fade-in var(--transition-duration) ease-in-out;
-    }
-  }
-
-  @keyframes left-fade-in {
-    from {
-      opacity: 0%;
-      left: var(--animation-offset);
-    }
-
-    33% {
-      opacity: 0%;
-      left: var(--animation-offset);
-    }
-
-    to {
-      opacity: 100%;
-      left: 0;
-    }
-  }
-
-  @keyframes right-fade-in {
-    from {
-      opacity: 0%;
-      left: calc(-1 * var(--animation-offset));
-    }
-
-    33% {
-      opacity: 0%;
-      left: calc(-1 * var(--animation-offset));
-    }
-
-    to {
-      opacity: 100%;
-      left: 0;
-    }
-  }
-
-  @keyframes top-fade-in {
-    from {
-      opacity: 0%;
-      bottom: calc(-1 * var(--animation-offset));
-    }
-
-    33% {
-      opacity: 0%;
-      bottom: calc(-1 * var(--animation-offset));
-    }
-
-    to {
-      opacity: 100%;
-      bottom: 0;
-    }
-  }
-
-  @keyframes bottom-fade-in {
-    from {
-      opacity: 0%;
-      bottom: var(--animation-offset);
-    }
-
-    33% {
-      opacity: 0%;
-      bottom: var(--animation-offset);
-    }
-
-    to {
-      opacity: 100%;
-      bottom: 0;
-    }
-  }
-
-  .platter {
-    padding: 1.5rem 3rem;
-  }
-}

assets/styles/monokai.css

@@ -1,198 +0,0 @@
-:root {
-    --highlight-background-color: rgb(250, 250, 250);
-    --highlight-foreground-color: var(--foreground-body-color);
-}
-
-.chroma {
-    line-height: var(--line-height);
-}
-
-.bg {
-    color: var(--highlight-foreground-color);
-    background-color: var(--highlight-background-color);
-}
-
-.chroma {
-    color: var(--highlight-foreground-color);
-    background-color: var(--highlight-background-color);
-}
-
-/* Other */ .chroma .x {  }
-/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
-/* CodeLine */ .chroma .cl {  }
-/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
-/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* LineNumbers */
-.chroma .ln {
-    color: #7f7f7f;
-    background-color: var(--background-color);
-    padding: 0 0.4em 0 0.4em;
-    user-select: none;
-    white-space: pre;
-}
-.chroma .ln a[href] {
-    color: inherit;
-}
-/* Keyword */ .chroma .k { color: #00a8c8 }
-/* KeywordConstant */ .chroma .kc { color: #00a8c8 }
-/* KeywordDeclaration */ .chroma .kd { color: #00a8c8 }
-/* KeywordNamespace */ .chroma .kn { color: #f92672 }
-/* KeywordPseudo */ .chroma .kp { color: #00a8c8 }
-/* KeywordReserved */ .chroma .kr { color: #00a8c8 }
-/* KeywordType */ .chroma .kt { color: #00a8c8 }
-/* Name */ .chroma .n { color: #111111 }
-/* NameAttribute */ .chroma .na { color: #75af00 }
-/* NameBuiltin */ .chroma .nb { color: #111111 }
-/* NameBuiltinPseudo */ .chroma .bp { color: #111111 }
-/* NameClass */ .chroma .nc { color: #75af00 }
-/* NameConstant */ .chroma .no { color: #00a8c8 }
-/* NameDecorator */ .chroma .nd { color: #75af00 }
-/* NameEntity */ .chroma .ni { color: #111111 }
-/* NameException */ .chroma .ne { color: #75af00 }
-/* NameFunction */ .chroma .nf { color: #75af00 }
-/* NameFunctionMagic */ .chroma .fm { color: #111111 }
-/* NameLabel */ .chroma .nl { color: #111111 }
-/* NameNamespace */ .chroma .nn { color: #111111 }
-/* NameOther */ .chroma .nx { color: #75af00 }
-/* NameProperty */ .chroma .py { color: #111111 }
-/* NameTag */ .chroma .nt { color: #f92672 }
-/* NameVariable */ .chroma .nv { color: #111111 }
-/* NameVariableClass */ .chroma .vc { color: #111111 }
-/* NameVariableGlobal */ .chroma .vg { color: #111111 }
-/* NameVariableInstance */ .chroma .vi { color: #111111 }
-/* NameVariableMagic */ .chroma .vm { color: #111111 }
-/* Literal */ .chroma .l { color: #ae81ff }
-/* LiteralDate */ .chroma .ld { color: #d88200 }
-/* LiteralString */ .chroma .s { color: #d88200 }
-/* LiteralStringAffix */ .chroma .sa { color: #d88200 }
-/* LiteralStringBacktick */ .chroma .sb { color: #d88200 }
-/* LiteralStringChar */ .chroma .sc { color: #d88200 }
-/* LiteralStringDelimiter */ .chroma .dl { color: #d88200 }
-/* LiteralStringDoc */ .chroma .sd { color: #d88200 }
-/* LiteralStringDouble */ .chroma .s2 { color: #d88200 }
-/* LiteralStringEscape */ .chroma .se { color: #8045ff }
-/* LiteralStringHeredoc */ .chroma .sh { color: #d88200 }
-/* LiteralStringInterpol */ .chroma .si { color: #d88200 }
-/* LiteralStringOther */ .chroma .sx { color: #d88200 }
-/* LiteralStringRegex */ .chroma .sr { color: #d88200 }
-/* LiteralStringSingle */ .chroma .s1 { color: #d88200 }
-/* LiteralStringSymbol */ .chroma .ss { color: #d88200 }
-/* LiteralNumber */ .chroma .m { color: #ae81ff }
-/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
-/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
-/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
-/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
-/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
-/* Operator */ .chroma .o { color: #f92672 }
-/* OperatorWord */ .chroma .ow { color: #f92672 }
-/* Punctuation */ .chroma .p { color: #111111 }
-/* Comment */ .chroma .c { color: #75715e }
-/* CommentHashbang */ .chroma .ch { color: #75715e }
-/* CommentMultiline */ .chroma .cm { color: #75715e }
-/* CommentSingle */ .chroma .c1 { color: #75715e }
-/* CommentSpecial */ .chroma .cs { color: #75715e }
-/* CommentPreproc */ .chroma .cp { color: #75715e }
-/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
-/* Generic */ .chroma .g {  }
-/* GenericDeleted */ .chroma .gd {  }
-/* GenericEmph */ .chroma .ge { font-style: italic }
-/* GenericError */ .chroma .gr {  }
-/* GenericHeading */ .chroma .gh {  }
-/* GenericInserted */ .chroma .gi {  }
-/* GenericOutput */ .chroma .go {  }
-/* GenericPrompt */ .chroma .gp {  }
-/* GenericStrong */ .chroma .gs { font-weight: bold }
-/* GenericSubheading */ .chroma .gu {  }
-/* GenericTraceback */ .chroma .gt {  }
-/* GenericUnderline */ .chroma .gl {  }
-/* TextWhitespace */ .chroma .w {  }
-
-@media (prefers-color-scheme: dark) {
-    /* Background */ .bg { color: #f8f8f2; background-color: #272822 }
-    /* PreWrapper */ .chroma { color: #f8f8f2; background-color: #272822; }
-    /* Other */ .chroma .x {  }
-    /* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
-    /* CodeLine */ .chroma .cl {  }
-    /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-    /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-    /* LineHighlight */ .chroma .hl { background-color: #ffffcc }
-    /* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-    /* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-    /* Keyword */ .chroma .k { color: #66d9ef }
-    /* KeywordConstant */ .chroma .kc { color: #66d9ef }
-    /* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
-    /* KeywordNamespace */ .chroma .kn { color: #f92672 }
-    /* KeywordPseudo */ .chroma .kp { color: #66d9ef }
-    /* KeywordReserved */ .chroma .kr { color: #66d9ef }
-    /* KeywordType */ .chroma .kt { color: #66d9ef }
-    /* Name */ .chroma .n {  }
-    /* NameAttribute */ .chroma .na { color: #a6e22e }
-    /* NameBuiltin */ .chroma .nb { color: inherit; }
-    /* NameBuiltinPseudo */ .chroma .bp {  }
-    /* NameClass */ .chroma .nc { color: #a6e22e }
-    /* NameConstant */ .chroma .no { color: #66d9ef }
-    /* NameDecorator */ .chroma .nd { color: #a6e22e }
-    /* NameEntity */ .chroma .ni {  }
-    /* NameException */ .chroma .ne { color: #a6e22e }
-    /* NameFunction */ .chroma .nf { color: #a6e22e }
-    /* NameFunctionMagic */ .chroma .fm {  }
-    /* NameLabel */ .chroma .nl {  }
-    /* NameNamespace */ .chroma .nn {  }
-    /* NameOther */ .chroma .nx { color: #a6e22e }
-    /* NameProperty */ .chroma .py {  }
-    /* NameTag */ .chroma .nt { color: #f92672 }
-    /* NameVariable */ .chroma .nv { color: inherit; }
-    /* NameVariableClass */ .chroma .vc {  }
-    /* NameVariableGlobal */ .chroma .vg {  }
-    /* NameVariableInstance */ .chroma .vi {  }
-    /* NameVariableMagic */ .chroma .vm {  }
-    /* Literal */ .chroma .l { color: #ae81ff }
-    /* LiteralDate */ .chroma .ld { color: #e6db74 }
-    /* LiteralString */ .chroma .s { color: #e6db74 }
-    /* LiteralStringAffix */ .chroma .sa { color: #e6db74 }
-    /* LiteralStringBacktick */ .chroma .sb { color: #e6db74 }
-    /* LiteralStringChar */ .chroma .sc { color: #e6db74 }
-    /* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 }
-    /* LiteralStringDoc */ .chroma .sd { color: #e6db74 }
-    /* LiteralStringDouble */ .chroma .s2 { color: #e6db74 }
-    /* LiteralStringEscape */ .chroma .se { color: #ae81ff }
-    /* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 }
-    /* LiteralStringInterpol */ .chroma .si { color: #e6db74 }
-    /* LiteralStringOther */ .chroma .sx { color: #e6db74 }
-    /* LiteralStringRegex */ .chroma .sr { color: #e6db74 }
-    /* LiteralStringSingle */ .chroma .s1 { color: #e6db74 }
-    /* LiteralStringSymbol */ .chroma .ss { color: #e6db74 }
-    /* LiteralNumber */ .chroma .m { color: #ae81ff }
-    /* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
-    /* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
-    /* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
-    /* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
-    /* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
-    /* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
-    /* Operator */ .chroma .o { color: #f92672 }
-    /* OperatorWord */ .chroma .ow { color: #f92672 }
-    /* Punctuation */ .chroma .p { color: inherit; }
-    /* Comment */ .chroma .c { color: #75715e }
-    /* CommentHashbang */ .chroma .ch { color: #75715e }
-    /* CommentMultiline */ .chroma .cm { color: #75715e }
-    /* CommentSingle */ .chroma .c1 { color: #75715e }
-    /* CommentSpecial */ .chroma .cs { color: #75715e }
-    /* CommentPreproc */ .chroma .cp { color: #75715e }
-    /* CommentPreprocFile */ .chroma .cpf { color: #75715e }
-    /* Generic */ .chroma .g {  }
-    /* GenericDeleted */ .chroma .gd { color: #f92672 }
-    /* GenericEmph */ .chroma .ge { font-style: italic }
-    /* GenericError */ .chroma .gr {  }
-    /* GenericHeading */ .chroma .gh {  }
-    /* GenericInserted */ .chroma .gi { color: #a6e22e }
-    /* GenericOutput */ .chroma .go {  }
-    /* GenericPrompt */ .chroma .gp {  }
-    /* GenericStrong */ .chroma .gs { font-weight: bold }
-    /* GenericSubheading */ .chroma .gu { color: #75715e }
-    /* GenericTraceback */ .chroma .gt {  }
-    /* GenericUnderline */ .chroma .gl {  }
-    /* TextWhitespace */ .chroma .w {  }
-}

assets/styles/nethack.css

@@ -1,113 +0,0 @@
-/* Eryn Wells <eryn@erynwells.me> */
-
-:root {
-  --logentry-background-color: var(--tag-background-color);
-  --logentry-foreground-color: var(--tag-text-color);
-
-  --separator-color: rgb(var(--dk-gray));
-  --box-shadow-color: rgba(var(--dk-gray), 0.8);
-  --body-code-background-color: rgb(var(--dk-gray));
-
-  --heading-color: rgb(var(--white));
-  --header-series-arrow-foreground-color: rgb(var(--super-dk-gray));
-
-  --html-background-color: rgb(var(--black));
-  --color: rgba(var(--white), 0.8);
-
-  --platter-background-color: rgba(var(--black), var(--platter-background-opacity));
-  --platter-backdrop-filter: brightness(0.66) blur(10px);
-
-  --tag-foreground-color: rgb(var(--sub-lt-gray));
-  --tag-background-color: rgb(var(--dk-gray));
-  --tag-spacer-foreground-color: rgb(var(--super-dk-gray));
-  --tag-hover-background-color: rgb(var(--super-dk-gray));
-  --tag-hover-foreground-color: rgb(var(--mid-gray));
-}
-
-main {
-  background: rgba(var(--black), 0.6);
-}
-
-#dungeon-background {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  filter: brightness(0.3);
-}
-
-.logfile {
-    margin-block-start: 0;
-    margin-inline-start: 0;
-    padding-inline-start: 0;
-}
-
-.logfile > li {
-    align-items: first baseline;
-    color: var(--logentry-foreground-color);
-    background-color: var(--logentry-background-color);
-    border-radius: 6px;
-    display: grid;
-    grid-template-columns: 32px auto auto;
-    row-gap: 1rem;
-    margin-block-start: 2rem;
-    margin-inline-start: 0;
-    padding: 3rem;
-}
-
-.logfile > li > .date {
-    grid-column-start: 2;
-    grid-row-start: 1;
-}
-
-.logfile > li > h4.date {
-    margin: 0;
-    padding: 0;
-}
-
-.logfile > li > .character-descriptor {
-    color: #aaa;
-    font-size: 1.5rem;
-    font-weight: 700;
-    grid-column-start: 3;
-    grid-row-start: 1;
-    text-align: right;
-    text-transform: uppercase;
-}
-
-.logfile > li > p {
-    grid-column-start: 2;
-    grid-column-end: 4;
-    grid-row-start: 2;
-    margin: 0;
-}
-
-.logfile > li > table.stats {
-    border: 0;
-    grid-column-start: 2;
-    grid-column-end: 4;
-    grid-row-start: 3;
-    margin-block-end: 0;
-    width: 100%;
-    -webkit-border-horizontal-spacing: 0;
-    -webkit-border-vertical-spacing: 0;
-}
-
-.logfile > li > table.stats > tbody > tr > td {
-    border: 0;
-    color: #aaa;
-    font-size: 1.5rem;
-    font-weight: 700;
-    padding: 0;
-    text-transform: uppercase;
-    vertical-align: bottom;
-}
-
-.logfile > li > table.stats > tbody > tr > td.score,
-.logfile > li > table.stats > tbody > tr > td.hp,
-.logfile > li > table.stats > tbody > tr > td.level {
-    width: 16rem;
-    text-align: right;
-}

assets/styles/photos/001_photos.css

@@ -1,87 +0,0 @@
-{{ $gridSize := site.Params.photos.gridSize }}
-:root {
-    --date-item-background-color: rgb(var(--lt-gray));
-
-    --photo-params-background-color: rgb(var(--lt-gray));
-    --photo-params-container-background-color: rgb(var(--super-lt-gray));
-    --photo-params-color: rgb(var(--sub-dk-gray));
-    --photo-params-border-color: rgb(var(--super-lt-gray));
-}
-@media (prefers-color-scheme: dark) {
-    :root {
-        --date-item-background-color: rgb(var(--dk-gray));
-
-        --photo-params-background-color: rgb(var(--dk-gray));
-        --photo-params-container-background-color: rgb(var(--sub-dk-gray));
-        --photo-params-color: rgb(var(--super-lt-gray));
-        --photo-params-border-color: rgb(var(--sub-dk-gray));
-    }
-}
-
-.photos.list {
-    box-sizing: border-box;
-    max-width: none;
-    padding: 0 var(--body-item-spacing);
-    width: 100%;
-}
-
-.photos.list {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax({{ printf "%dpx" $gridSize }}, 1fr));
-    gap: 4px;
-}
-
-.photos.list > * {
-    margin-block-end: 0;
-    grid-column: auto;
-}
-
-.photos.list > a {
-    display: block;
-    line-height: 0;
-}
-
-.photos.list > a > img {
-    image-orientation: from-image;
-}
-
-.photos.list > div {
-    background-color: var(--date-item-background-color);
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-}
-
-.photos.list > div > h6 {
-    display: block;
-    font-size: 5rem;
-    margin: 0 auto;
-    letter-spacing: 0;
-}
-
-.photos.list > div > h6 > span {
-    text-align: end;
-    width: min-content;
-    position: relative;
-    display: inline-block;
-    padding-inline-end: 20px;
-}
-
-.photos.list > div > h6 > span::after {
-    top: 6px;
-    right: 0px;
-    position: absolute;
-    display: block;
-    content: "⏵︎";
-    font-size: 80%;
-}
-@media (max-width: calc(24px + 400px + 4px)) {
-    .photos.list > div > h6 > span {
-        width: max-content;
-        padding-block: calc(0.25 * var(--body-item-spacing));
-    }
-    .photos.list > div > h6 > span::after {
-        content: "";
-    }
-}

assets/styles/photos/050_page.css

@@ -1,34 +0,0 @@
-@layer section {
-    .photos.page {
-        gap: var(--body-item-spacing) 0;
-    }
-
-    .photos.page > article > :not(:last-child) {
-        margin-block-end: var(--body-item-spacing);
-    }
-
-    .photos.page > article > h1 {
-        font-size: var(--h3-size);
-    }
-
-    .photos.page > nav {
-        margin-block-end: var(--body-item-spacing);
-    }
-
-    .photos.page > :not(figure) {
-        grid-column: content-start / content-end;
-    }
-
-    .photos.page > figure {
-        grid-column: wide-content-start / wide-content-end;
-    }
-    @media (max-width: 960px) {
-        figure, img {
-            border-radius: 0;
-        }
-    }
-
-    .photos.page :is(figure, figure > img) {
-        max-width: none;
-    }
-}

assets/styles/photos/050_params.css

@@ -1,68 +0,0 @@
-.photo-params {
-    padding-inline: calc(var(--body-item-spacing) / 2);
-}
-
-.photo-params > .container {
-    display: block;
-    background-color: var(--photo-params-container-background-color);
-    border-radius: 10px;
-    margin: auto;
-    padding: calc(var(--body-item-spacing) / 2);
-    max-width: calc(0.66 * var(--content-width));
-}
-
-.photo-params > .container > table {
-    background-color: var(--photo-params-background-color);
-    color: var(--photo-params-color);
-    border-collapse: collapse;
-    border-radius: 6px;
-    table-layout: fixed;
-    text-align: center;
-    width: 100%;
-}
-
-.photo-params thead td {
-    border-bottom: 1px solid var(--photo-params-border-color);
-    font-size: 80%;
-    font-weight: bold;
-}
-
-.photo-params tbody tr > td {
-  border: none;
-  border-bottom: 1px solid var(--photo-params-border-color);
-}
-
-.photo-params tr.exposure-attributes > td {
-    border: none;
-    border-top: 1px solid var(--photo-params-border-color);
-    border-left: 1px solid var(--photo-params-border-color);
-}
-
-.photo-params tr.exposure-attributes > td:first-child {
-    border-left: none;
-}
-
-.photo-params td {
-    font-size: 75%;
-    padding: 1rem;
-}
-
-.photo-params td:last-child {
-    text-align: end;
-}
-
-.photo-params td:first-child {
-    text-align: start;
-}
-
-.photo-params .make-model {
-    font-weight: bold;
-}
-
-.photo-params .size {
-    border-left: 0;
-}
-
-.photo-params .location {
-    border-right: 0;
-}

assets/styles/railroad.css

@@ -1,64 +0,0 @@
-:root {
-    --rect-fill: rgba(var(--mid-blue), 0.1);
-}
-@media (prefers-color-scheme: dark) {
-    :root {
-        --rect-fill: rgb(var(--mid-blue), 0.9);
-    }
-}
-
-svg.railroad-diagram path {
-    stroke-width: 2;
-    stroke: var(--color);
-    fill: none;
-}
-
-svg.railroad-diagram text {
-    font-family: var(--font-family-monospace);
-    text-anchor: middle;
-    white-space: pre;
-    fill: var(--color);
-}
-
-svg.railroad-diagram text.diagram-text {
-    font-size: 11px;
-}
-
-svg.railroad-diagram text.diagram-arrow {
-    font-size: 16px;
-}
-
-svg.railroad-diagram text.label {
-    text-anchor: start;
-}
-
-svg.railroad-diagram text.comment {
-    font: italic 12px var(--font-family-monospace);
-}
-
-svg.railroad-diagram g.non-terminal text {
-    /*font-style: italic;*/
-}
-
-svg.railroad-diagram rect {
-    stroke-width: 2;
-    stroke: var(--color);
-    fill: var(--rect-fill);
-}
-
-svg.railroad-diagram rect.group-box {
-    stroke: gray;
-    stroke-dasharray: 10 5;
-    fill: none;
-}
-
-svg.railroad-diagram path.diagram-text {
-    stroke-width: 2;
-    stroke: var(--color);
-    fill: var(--html-background-color);
-    cursor: help;
-}
-
-svg.railroad-diagram g.diagram-text:hover path.diagram-text {
-    fill: var(--rect-fill);
-}

assets/styles/root/000_layers.css

@@ -1 +0,0 @@
-@layer reset, typography, root, layout, section, page, utility;

assets/styles/root/001_reset.css

@@ -1,7 +0,0 @@
-@layer reset {
-    body, button, h1, h2, h3, h4, h5, h6, input, ol, ul, p, pre, textarea {
-        padding: 0; margin: 0;
-    }
-
-    figure, figure .youtube { line-height: 1; }
-}

assets/styles/root/002_colors.css

@@ -1,224 +0,0 @@
-:root {
-  --black: 0, 0, 0;
-  --sub-dk-gray: 16, 16, 16;
-  --dk-gray: 32, 32, 32;
-  --super-dk-gray: 80, 80, 80;
-  --mid-gray: 128, 128, 128;
-  --sub-lt-gray: 175, 175, 175;
-  --lt-gray: 223, 223, 223;
-  --super-lt-gray: 240, 240, 240;
-  --white: 255, 255, 255;
-
-  --lt-blue: 69, 212, 243;
-  --mid-blue: 26, 169, 239;
-  --dk-blue: 63, 46, 231;
-  --purple: 161, 49, 232;
-  --lilac: 187, 121, 245;
-
-  --background: var(--white);
-  --color: rgba(var(--black), 0.8);
-
-  --a-color: rgb(var(--mid-blue));
-  --a-underline-color: rgb(var(--sub-lt-gray));
-  --a-ruby-color: var(--color);
-
-  --body-code-background-color: rgb(var(--super-lt-gray));
-  --box-shadow-color: rgba(var(--lt-gray), 0.8);
-
-  --separator-color: rgb(var(--lt-gray));
-  --header-border-color: var(--separator-color);
-  --footer-border-color: var(--separator-color);
-
-  --header-anchor-link-color: rgb(var(--sub-lt-gray));
-  --header-box-shadow-color: var(--box-shadow-color);
-  --header-series-arrow-foreground-color: rgb(var(--sub-dk-gray));
-  --heading-color: rgb(var(--black));
-
-  --html-background-color: rgb(var(--background));
-
-  --platter-background-color: rgba(var(--white), var(--platter-background-opacity));
-  --platter-background-opacity: 0.6;
-  --platter-backdrop-filter: blur(10px);
-
-  --site-nav-link-color: var(--a-color);
-
-  --tag-foreground-color: rgb(var(--super-dk-gray));
-  --tag-background-color: rgb(var(--super-lt-gray));
-  --tag-spacer-foreground-color: rgb(var(--super-dk-gray));
-  --tag-hover-background-color: rgb(var(--sub-lt-gray));
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: var(--black);
-    --color: rgba(var(--white), 0.8);
-
-    --separator-color: rgb(var(--dk-gray));
-    --box-shadow-color: rgba(var(--dk-gray), 0.8);
-    --body-code-background-color: rgb(var(--dk-gray));
-
-    --header-anchor-link-color: rgb(var(--super-dk-gray));
-    --header-series-arrow-foreground-color: rgb(var(--super-dk-gray));
-    --heading-color: rgb(var(--white));
-
-    --html-background-color: rgb(var(--background));
-
-    --platter-background-color: rgba(var(--black), var(--platter-background-opacity));
-    --platter-backdrop-filter: brightness(0.66) blur(10px);
-
-    --tag-foreground-color: rgb(var(--sub-lt-gray));
-    --tag-background-color: rgb(var(--dk-gray));
-    --tag-spacer-foreground-color: rgb(var(--super-dk-gray));
-    --tag-hover-background-color: rgb(var(--super-dk-gray));
-    --tag-hover-foreground-color: rgb(var(--mid-gray));
-  }
-}
-
-@layer root {
-  a rt,
-  a:hover rt {
-    color: var(--a-ruby-color);
-  }
-
-  a[href] {
-    color: var(--a-color);
-  }
-
-  a[href]:visited {
-    color: var(--a-color);
-  }
-
-  a.hover-only {
-    color: var(--color);
-    transition: color 0.2s;
-  }
-
-  a.hover-only:hover {
-    color: var(--a-color);
-    transition: color 0.2s;
-  }
-
-  code {
-    background-color: var(--body-code-background-color);
-  }
-
-  code.nobg {
-    background: none;
-  }
-
-  details:has(#TableOfContents) {
-    border: 1px solid var(--separator-color);
-  }
-
-  fieldset {
-    border: 1px solid var(--separator-color);
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    color: var(--heading-color);
-  }
-
-  h1.gradient {
-    --site-title-color1: rgb(103, 128, 229);
-    --site-title-color2: rgb(130, 90, 227);
-    --site-title-color3: rgb(135, 101, 228);
-    --site-title-color4: rgb(125, 115, 229);
-    --site-title-color5: rgb(107, 130, 230);
-    --site-title-color6: rgb(77, 153, 232);
-    --site-title-color7: rgb(74, 136, 230);
-    --site-title-color8: rgb(71, 128, 228);
-    --site-title-color9: rgb(65, 80, 224);
-    --site-title-color10: rgb(61, 58, 223);
-
-    color: rgb(var(--mid-blue));
-  }
-
-  @supports not ((background-clip: text) or (-webkit-background-clip: text)) {
-    h1.gradient span:nth-child(10n + 1) { color: var(--site-title-color1); }
-    h1.gradient span:nth-child(10n + 2) { color: var(--site-title-color2); }
-    h1.gradient span:nth-child(10n + 3) { color: var(--site-title-color3); }
-    h1.gradient span:nth-child(10n + 4) { color: var(--site-title-color4); }
-    h1.gradient span:nth-child(10n + 5) { color: var(--site-title-color5); }
-    h1.gradient span:nth-child(10n + 6) { color: var(--site-title-color6); }
-    h1.gradient span:nth-child(10n + 7) { color: var(--site-title-color7); }
-    h1.gradient span:nth-child(10n + 8) { color: var(--site-title-color8); }
-    h1.gradient span:nth-child(10n + 9) { color: var(--site-title-color9); }
-    h1.gradient span:nth-child(10n) { color: var(--site-title-color10); }
-  }
-  @supports (background-clip: text) or (-webkit-background-clip: text) {
-    h1.gradient {
-      background:
-      radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%),
-      radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, transparent 80%),
-      radial-gradient(ellipse at 95% 20%, rgb(var(--dk-blue)), rgb(var(--mid-blue)) 70%, transparent 80%),
-      radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%),
-      radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%),
-      radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%);
-      -webkit-background-clip: text;
-      background-clip: text;
-      color: transparent;
-    }
-
-    h1.gradient a[href] {
-      color: inherit;
-    }
-  }
-
-  header.site nav > li {
-    color: var(--site-nav-link-color);
-  }
-
-  html {
-    background-color: var(--html-background-color);
-    color: var(--color);
-  }
-
-  main > :is(h1, h2, h3, h4, h5, h6) > a[href],
-  main > :is(h1, h2, h3, h4, h5, h6) > a[href]:visited {
-    color: inherit;
-  }
-
-  nav.bulleted > li:first-child::before {
-    color: var(--color);
-  }
-
-  nav.bulleted > li::before {
-    color: var(--heading-color);
-    opacity: 80%;
-  }
-
-  ruby:hover rt {
-    color: var(--color);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    rt {
-      color: rgba(var(--white), 0.5);
-    }
-  }
-
-  table {
-    border: 1px solid var(--separator-color);
-  }
-
-  td, th {
-    border: 1px solid var(--separator-color);
-  }
-
-  figure.code code {
-    background-color: inherit;
-  }
-
-  .post header a,
-  .post header a:visited {
-    color: inherit;
-  }
-
-  .social > li + li:before {
-    color: var(--dark);
-  }
-
-  .title, .title a {
-    color: var(--color);
-  }
-}

assets/styles/root/002_layout.css

@@ -1,449 +0,0 @@
-:root {
-  --body-item-spacing: 2rem;
-  --content-width: 80rem;
-  --content-columns: 5;
-  --gutter-width: 3rem;
-  --list-item-block-gap: var(--body-item-spacing);
-  --margin-min-width: var(--body-item-spacing);
-  --margin-max-width: 1fr;
-  --menu-icon-size: 20px;
-  --nav-bulleted-spacing: 0.75rem;
-}
-
-@layer root {
-    main {
-        display: grid;
-        grid-template-columns:
-            [margin-left]
-            minmax(var(--margin-min-width), var(--margin-max-width))
-            [wide-content-start wide-content-left-start]
-            1fr
-            [wide-content-left-end gutter-start gutter-left-start]
-            var(--gutter-width)
-            [gutter-left-end content-start]
-            repeat(var(--content-columns),
-                [column-start]
-                min(
-                    calc((100% - 2 * var(--gutter-width)) / var(--content-columns)),
-                    calc(var(--content-width) / var(--content-columns))
-                )
-                [column-end]
-            )
-            [content-end gutter-right-start]
-            var(--gutter-width)
-            [gutter-right-end gutter-end wide-content-right-start]
-            1fr
-            [wide-content-right-end wide-content-end]
-            minmax(var(--margin-min-width), var(--margin-max-width))
-            [margin-right];
-    }
-
-    @media (max-width: 960px) {
-        main {
-            --margin-min-width: 0;
-            --margin-max-width: 0;
-        }
-    }
-
-    @media (max-width: 519px) {
-        /* Collapse the margin and wide content tracks */
-        main {
-            --content-columns: 3;
-
-            grid-template-columns:
-                [margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start]
-                var(--gutter-width)
-                [gutter-left-end content-start]
-                repeat(
-                  var(--content-columns),
-                  [column-start]
-                  min(
-                    calc((100% - 2 * var(--gutter-width)) / var(--content-columns)),
-                    calc(var(--content-width) / var(--content-columns))
-                  )
-                  [column-end]
-                )
-                [content-end gutter-right-start]
-                var(--gutter-width)
-                [gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right];
-        }
-    }
-
-    @media (max-width: 415px) {
-        main {
-            --content-columns: 1;
-
-            display: grid;
-            grid-template-columns:
-                [margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start]
-                var(--gutter-width)
-                [gutter-left-end content-start]
-                calc(100% - 2 * var(--gutter-width))
-                [content-end gutter-right-start]
-                var(--gutter-width)
-                [gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right];
-        }
-    }
-}
-
-@layer layout {
-  aside#table-of-contents {
-    grid-column: content-start / content-end;
-  }
-
-  blockquote {
-    --line-width: 4px;
-
-    border-inline-start: var(--line-width) solid var(--separator-color);
-    padding-inline-start: calc(3rem - var(--line-width));
-
-    margin: 0;
-  }
-
-  p code {
-    padding-block-start: 0.1em;
-    padding-inline: 0.25em;
-  }
-
-  code.nobg {
-    display: inline-block;
-    margin: 0;
-    padding: 0;
-  }
-
-  details {
-    width: 100%;
-  }
-
-  details:has(#TableOfContents) {
-    box-sizing: border-box;
-    padding: var(--body-item-spacing);
-  }
-
-  details > summary + #TableOfContents {
-    margin-top: 1rem;
-  }
-
-  fieldset {
-    box-sizing: border-box;
-    padding: var(--body-item-spacing);
-    padding-top: calc(var(--body-item-spacing) / 10);
-  }
-
-  figcaption:not(:empty) {
-    margin-block-start: 0.2em;
-  }
-
-  figure {
-    grid-column: gutter-start / gutter-end;
-    margin: 0;
-    margin-inline: 0;
-    min-width: fit-content;
-    overflow: hidden;
-  }
-  @media (max-width: 415px) {
-    figure {
-      grid-column: wide-content-start / wide-content-end;
-    }
-  }
-
-  figure.code {
-    grid-column: content-start / content-end;
-  }
-
-  figure.code pre {
-    overflow: auto;
-    padding: 1rem;
-  }
-
-  figure > .container {
-    align-items: center;
-    display: flex;
-    gap: var(--body-item-spacing);
-    justify-content: center;
-    min-width: fit-content;
-  }
-
-  figure img {
-    display: block;
-  }
-  @media (max-width: 414px) {
-    figure img {
-      max-width: 100%;
-    }
-  }
-
-  figure svg {
-    width: 100%;
-    height: auto;
-  }
-
-  figure .youtube {
-    overflow: hidden;
-    max-width: var(--content-width);
-    width: 100%;
-  }
-
-  header.site {
-    display: flex;
-    width: 100%;
-  }
-
-  header.site h1 {
-    margin: 0;
-    order: 1;
-  }
-
-  header.site > .grid {
-    align-items: baseline;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0 0.5em;
-    margin: 0 auto;
-    max-width: var(--content-width);
-    padding: 1.5rem 3rem;
-    width: 100%;
-  }
-
-  header.site > .grid > nav {
-    align-items: center;
-    display: flex;
-    justify-content: start;
-    list-style: none;
-  }
-
-  header.site nav > li { display: block; }
-
-  header.site nav:first-of-type {
-    justify-content: start;
-    order: 2;
-  }
-  @media (max-width: 435px) {
-    header.site nav:first-of-type { order: 5; }
-  }
-
-  header.site nav:last-of-type {
-    justify-content: end;
-    order: 3;
-  }
-
-  @media (max-width: 516px) {
-    header.site > .platter {
-      border-left: none;
-      border-radius: 0;
-      border-right: none;
-      border-top: none;
-    }
-
-    header.site > .grid { max-width: none; }
-  }
-
-  img {
-    height: auto;
-    max-width: 100%;
-    width: 100%;
-  }
-
-  main {
-    box-sizing: border-box;
-    margin-block-start: var(--body-item-spacing);
-    width: 100%;
-  }
-
-  main > * {
-    grid-column: content-start / content-end;
-  }
-
-  main > figure:not(.code),
-  main > a.to-photo-post {
-    grid-column: wide-content-start / wide-content-end;
-  }
-
-  main > header > .series {
-    margin-inline-start: 0.5em;
-    width: 100%;
-  }
-
-  main > header > .series::before {
-    margin-inline-end: 0.25em;
-  }
-
-  main > :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
-      padding-block-start: 0.5em;
-  }
-
-  nav.bulleted > li:not(:first-child)::before {
-    margin-inline-start: var(--nav-bulleted-spacing);
-  }
-
-  nav.social > li {
-    margin-inline-start: var(--nav-bulleted-spacing);
-  }
-
-  nav.social > li:first-child {
-    margin-inline-start: 0;
-  }
-
-  section.flow {
-    display: block flow;
-  }
-
-  ul, ol {
-    list-style-position: inside;
-  }
-
-  ul,
-  ol,
-  dl,
-  :is(ul, ol) > li,
-  dl > dt {
-    margin-inline-start: var(--body-item-spacing);
-  }
-
-  :is(ul, ol) > li:not(:last-child) {
-    margin-block-end: calc(var(--body-item-spacing) / 2);
-  }
-
-  :is(ul, ol) > li > :is(ul, ol) {
-    margin-inline-start: 0;
-    margin-block-start: calc(var(--body-item-spacing) / 2);
-  }
-
-  table {
-    border-collapse: collapse;
-    margin-inline: auto;
-    width: 50%;
-  }
-
-  td,
-  th {
-    padding-inline: 1rem;
-  }
-
-  .list .post header {
-    grid-column: wide-content-start / content-end;
-  }
-  @supports (grid-template-columns: subgrid) {
-    .list .post header {
-      display: grid;
-      grid-template-columns: subgrid;
-    }
-
-    .list .post header h1 {
-      grid-column: content-start / content-end;
-    }
-  }
-
-  .list .post time {
-    grid-column: wide-content-start;
-    justify-self: end;
-  }
-  @media (max-width: 960px) {
-    .list .post time {
-      grid-column: content-start / content-end;
-      justify-self: start;
-    }
-  }
-
-  .list {
-    gap: var(--list-item-block-gap) 0;
-  }
-
-  .list > h1,
-  .list > header {
-    grid-column: content-start / content-end;
-  }
-
-  .list > .post {
-    grid-column: wide-content-start / wide-content-end;
-  }
-
-  @supports (grid-template-columns: subgrid) {
-    .list > .post {
-      display: grid;
-      grid-template-columns: subgrid;
-      gap: var(--body-item-spacing) 0;
-    }
-  }
-
-  .list .post time {
-    font-variant-numeric: tabular-nums;
-  }
-
-  @media (max-width: 960px) {
-    .list .post time {
-      line-height: var(--line-height);
-    }
-  }
-
-  .p5-sketch {
-    display: block;
-    position: relative;
-    width: 100%;
-  }
-
-  .page {
-    gap: var(--body-item-spacing) 0;
-  }
-
-  .page > header {
-    align-items: first baseline;
-    column-gap: 4rem;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-  }
-
-  @media (max-width: 539px) {
-    .page > header {
-      grid-template-columns: auto;
-    }
-  }
-
-  .page > header,
-  .page > footer {
-    grid-column: content-start / content-end;
-  }
-
-  .page > article > * {
-    grid-column: gutter-start / gutter-end;
-  }
-
-  .page > article > :not(:last-child) {
-    margin-block-end: var(--body-item-spacing);
-  }
-
-  .post {
-    grid-column: gutter-start / gutter-end;
-  }
-
-  .post > * {
-    grid-column: content-start / content-end;
-  }
-
-  .social {
-    display: block flex;
-    margin-left: auto;
-    order: 2;
-  }
-
-  .social > li > a {
-    display: block;
-    height: var(--menu-icon-size);
-    width: var(--menu-icon-size);
-  }
-
-  .social > li > a > span {
-    display: none;
-  }
-
-  .social > li + li:before {
-    padding: 0 0.5rem;
-  }
-
-  .youtube iframe {
-    aspect-ratio: 16 / 9;
-    margin-bottom: -3px;
-    width: 100%;
-  }
-}

assets/styles/root/010_interactions.css

@@ -1,14 +0,0 @@
-/* Eryn Wells <eryn@erynwells.me> */
-
-:root {
-  --transition-duration: 0.7s;
-}
-
-@layer root {
-  figure.code .ln a {
-    -webkit-user-select: none;
-    -moz-use-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-}

assets/styles/root/050_ruby.css

@@ -1,25 +0,0 @@
-@layer root {
-    body:has(ruby-switch[value=none]) rt {
-        display: none;
-    }
-
-    /* When the ruby switch is set to "hidden", hide the ruby base and only show the <rt>. */
-    body:has(ruby-switch[value=hidden]) ruby > span {
-        display: none;
-    }
-
-    body:has(ruby-switch[value=hidden]) rt {
-        color: inherit;
-        display: inline;
-        font-size: inherit;
-        white-space: inherit;
-    }
-
-    body:has(ruby-switch[value=hidden]) :is(h1, h2, h3, h4, h5, h6) rt {
-        font-family: var(--font-family-heading);
-        font-weight: bold;
-    }
-
-    rt { transition: color 0.3s; }
-    ruby:hover rt { transition: color 0.3s; }
-}

assets/styles/root/050_site_footer.css

@@ -1,40 +0,0 @@
-@layer root {
-    footer.site {
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        margin-block: var(--body-item-spacing);
-        text-align: center;
-    }
-
-    footer.site > ul {
-        align-items: center;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        list-style: none;
-    }
-
-    footer.site > .slogans {
-        margin-block-end: 0;
-    }
-
-    footer.site > .slogans > li {
-        margin-block-end: 0;
-        margin-inline-start: 0.5em;
-    }
-
-    footer.site > p {
-        margin: 0;
-    }
-
-    footer.site p + p {
-        margin-top: 0.25rem;
-    }
-
-    @media (max-width: 740px) {
-        footer.site .slogans span {
-            white-space: nowrap;
-        }
-    }
-}

assets/styles/root/050_site_header.css

@@ -1,29 +0,0 @@
-@layer root {
-    :root {
-        --mastodon-icon: url(/icons/mastodon.svg);
-        --github-icon: url(/icons/github.svg);
-        --instagram-icon: url(/icons/instagram.svg);
-        --feed-icon: url(/icons/feed.svg);
-
-        --social-menu-padding: 1rem;
-    }
-
-    @media (prefers-color-scheme: dark) {
-        :root {
-            --mastodon-icon: url(/icons/mastodon-dark.svg);
-            --github-icon: url(/icons/github-dark.svg);
-            --instagram-icon: url(/icons/instagram-dark.svg);
-            --feed-icon: url(/icons/feed-dark.svg);
-        }
-    }
-
-    #social-menu-mastodon img { content: var(--mastodon-icon); }
-    #social-menu-github img { content: var(--github-icon); }
-    #social-menu-instagram img { content: var(--instagram-icon); }
-    #social-menu-feed img { content: var(--feed-icon); }
-
-    #social-menu-mastodon img {
-        position: relative;
-        top: 1px;
-    }
-}

assets/styles/root/050_tags_list.css

@@ -1,60 +0,0 @@
-.taxonomies {
-    align-items: first baseline;
-    display: flex;
-    grid-column: content-start / content-end;
-    height: min-content;
-    position: relative;
-}
-
-ul.tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem 1rem;
-    height: min-content;
-    margin-inline-start: 0;
-    padding-inline-start: 0;
-}
-
-ul.tags > li {
-    background-color: var(--tag-background-color);
-    color: var(--tag-foreground-color);
-    border-radius: 4px;
-    display: inline-block;
-    font-size: 75%;
-    letter-spacing: 1px;
-    margin: 0;
-}
-
-ul.tags > li:hover {
-    background-color: var(--tag-hover-background-color);
-}
-
-ul.tags > li > a {
-    color: inherit;
-    display: block;
-    height: 100%;
-    width: 100%;
-    padding: 0.6rem 1rem;
-    text-decoration: none;
-}
-
-ul.tags > li > a:hover {
-    color: var(--tag-hover-foreground-color);
-    text-decoration: none;
-}
-
-ul.tags > li + li { margin-inline-start: 0; }
-
-.taxonomies > .chevron {
-    align-items: center;
-    border: 0;
-    border-radius: 0;
-    color: var(--tag-spacer-foreground-color);
-    background-color: inherit;
-    display: flex;
-    justify-content: center;
-    margin-inline-start: 0;
-    position: relative;
-    top: 2px;
-    width: 2rem;
-}

assets/styles/root/050_typography.css

@@ -1,185 +0,0 @@
-@font-face {
-    font-family: "Museo_Slab";
-    src: url("{{ `/fonts/Museo_Slab_500.woff2` | relURL }}") format("woff2"),
-    url("{{ `/fonts/Museo_Slab_500.woff` | relURL }}") format("woff");
-    font-weight: normal;
-    font-style: normal;
-}
-
-@layer typography {
-    :root {
-        --font-family: Verdana, Helvetica, sans-serif;
-        --font-family-heading: Museo_Slab, Tahoma, "Hiragino Mincho ProN", serif;
-        --font-family-monospace: "Courier New", Courier, monospace;
-        --font-family-site-heading: Museo_Slab, Tahoma, sans-serif;
-
-        --font-size: 2rem;
-        --font-size-max: 8px;
-        --font-size-min: 6px;
-        --font-size-scale-factor: 1vmax;
-        --site-header-font-size: 200%;
-
-        --h1-size: 305%;
-        --h2-size: 244%;
-        --h3-size: 195%;
-        --h4-size: 156%;
-        --h5-size: 125%;
-        --h6-size: 100%;
-
-        --line-height: 1.5;
-        --heading-line-height: 1;
-        /* A little extra line height so the descenders don't get clipped */
-        --site-heading-line-height: 1.1;
-    }
-
-    a {
-        text-decoration: none;
-    }
-
-    a[href]:hover {
-        text-decoration: underline;
-        text-decoration-style: solid;
-    }
-
-    a.hover-only:hover {
-        text-decoration: underline;
-    }
-
-    body {
-        font-size: var(--font-size);
-    }
-
-    code {
-        font-family: var(--font-family-monospace);
-    }
-
-    figcaption {
-        font-size: 80%;
-        line-height: var(--line-height);
-        text-align: center;
-    }
-
-    figure.code .cl {
-        white-space: pre-wrap;
-    }
-
-    footer.site {
-        font-size: 80%;
-        line-height: 1;
-    }
-
-    h1 { font-size: var(--h1-size); }
-    h2 { font-size: var(--h2-size); }
-    h3 { font-size: var(--h3-size); }
-    h4 { font-size: var(--h4-size); }
-    h5 { font-size: var(--h5-size); }
-    h6 { font-size: var(--h6-size); }
-    h5, h6 { font-family: var(--font-family-body); }
-
-    header > span.series::before {
-        content: "↳";
-    }
-
-    header.site h1 > a:hover {
-      text-decoration: none;
-    }
-
-    header.site nav {
-      list-style: none;
-    }
-
-    header.site nav > .active {
-      font-weight: bold;
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-        font-family: var(--font-family-heading);
-        font-weight: 600;
-        letter-spacing: 1pt;
-        line-height: var(--heading-line-height);
-    }
-
-    h1.gradient {
-        font-family: var(--font-family-site-heading);
-    }
-
-    h1.gradient > a { color: inherit; }
-
-
-    header.site h1.site {
-        font-size: var(--site-header-font-size);
-        line-height: var(--site-heading-line-height);
-        white-space: nowrap;
-    }
-
-    header.site nav {
-        font-size: max(1.5rem, 80%);
-        letter-spacing: 0.10em;
-        text-transform: lowercase;
-    }
-
-    header.site nav > li {
-        color: var(--site-nav-link-color);
-    }
-
-    :is(h1, h2, h3, h4, h5, h6) rt {
-        font-family: var(--font-family);
-        font-weight: normal;
-        letter-spacing: 0;
-    }
-
-    header > span.series {
-        font-size: 1.75rem;
-        letter-spacing: 1px;
-    }
-
-    header > span.series::before {
-        color: var(--header-series-arrow-foreground-color);
-    }
-
-    html {
-        font-family: var(--font-family);
-        font-size: clamp(var(--font-size-min), var(--font-size-scale-factor), var(--font-size-max));
-    }
-
-    main:has(header > .post-title > h1) h1 { font-size: 244%; }
-    main:has(header > .post-title > h1) h2 { font-size: 195%; }
-    main:has(header > .post-title > h1) h3 { font-size: 156%; }
-    main:has(header > .post-title > h1) h4 { font-size: 125%; }
-    main:has(header > .post-title > h1) h5 { font-size: 100%; }
-    main:has(header > .post-title > h1) h6 { font-size: 100%; }
-
-    main:has(header > .post-title > h1) :is(h5, h6) {
-        font-family: var(--font-family-body);
-    }
-
-    nav.bulleted>li:first-child::before {
-        content: "";
-    }
-
-    nav.bulleted > li::before {
-        content: "•";
-        font-size: 60%;
-        font-weight: normal;
-    }
-
-    p {
-        line-height: var(--line-height);
-    }
-
-    p > code {
-      white-space: pre;
-    }
-
-    #TableOfContents ul {
-        list-style-type: none;
-    }
-
-    .social {
-      letter-spacing: 2px;
-    }
-
-    .title {
-        font-size: var(--h5-size);
-    }
-}

assets/styles/root/099_utility.css

@@ -1,41 +0,0 @@
-@layer utility {
-    .centered { text-align: center; }
-
-    .float-right {
-        float: right;
-        justify-self: end;
-    }
-
-    .nobreak { white-space: nowrap; }
-
-    .noselect {
-        cursor: default;
-        -webkit-user-select: none;
-        -moz-use-select: none;
-        -ms-user-select: none;
-        user-select: none;
-    }
-
-    .platter {
-        -webkit-backdrop-filter: var(--platter-backdrop-filter);
-        backdrop-filter: var(--platter-backdrop-filter);
-        background-color: var(--platter-background-color);
-        border: 1px solid var(--header-border-color);
-        border-radius: 12px;
-        box-shadow: 3px 4px 4px var(--header-box-shadow-color);
-    }
-
-    .visible { visibility: visible; }
-
-    article.two-column { columns: 2; }
-
-    img.circular {
-      shape-outside: circle(50%);
-      -webkit-clip-path: circle(50%);
-      clip-path: circle(50%);
-    }
-
-    .column5 {
-      grid-column: span content-start 4;
-    }
-}

config/_default/config.yaml

@@ -1,5 +1,6 @@
 baseURL: https://erynwells.me/
 languageCode: en-US
-title: Eryn Rachel Wells
-copyright: Copyright © 2020—2023 Eryn Wells
+title: ~eryn
+copyright: Copyright © 2020—2024 Eryn Wells
 defaultContentLanguage: en
+enableEmoji: true

config/_default/languages.yaml

@@ -7,3 +7,6 @@ es:
 jp:
   languageName: 日本語
   weight: 3
+tok:
+  languageName: toki pona
+  weight: 4

config/_default/markup.yaml

@@ -1,6 +1,10 @@
 goldmark:
   renderer:
     unsafe: true
+  parser:
+    attribute:
+      block: true
+      title: true
 highlight:
   anchorLineNos: true
   lineNos: false

config/_default/menu.yaml

@@ -11,6 +11,12 @@ main:
     name: About
     url: /about/
     weight: 30
+  - identifier: feed
+    name: feed
+    url: /feed.atom
+    weight: 40
+    params:
+      style: file
 social:
   - identifier: mastodon
     name: Mastodon
@@ -31,7 +37,7 @@ social:
     params:
       shortName: ig
   - identifier: feed
-    name: Feed
+    name: feed
     url: /feed.atom
     weight: 40
     params:

config/_default/module.yaml

@@ -0,0 +1,15 @@
+hugoVersion:
+  extended: false
+  min: "0.116.0"
+replacements: >-
+  github.com/erynofwales/hugo-theme-feeds/v2 -> feeds,
+  github.com/erynofwales/hugo-theme-termlite/v2 -> termlite,
+  github.com/erynofwales/hugo-theme-photostream/v2 -> photostream,
+  github.com/erynofwales/hugo-resource-builders/v2 -> resource-builders,
+  github.com/erynofwales/hugo-image-utilities/v2 -> image-utils
+imports:
+  - path: github.com/erynofwales/hugo-theme-termlite/v2
+  - path: github.com/erynofwales/hugo-theme-feeds/v2
+  - path: github.com/erynofwales/hugo-theme-photostream/v2
+  - path: github.com/erynofwales/hugo-resource-builders/v2
+  - path: github.com/erynofwales/hugo-image-utilities/v2

config/_default/outputs.yaml

@@ -1,3 +1,4 @@
-home: [HTML, Atom, RSS]
-page: [HTML, JSON]
-section: [HTML, Atom, RSS]
+home: [HTML, Atom]
+section: [HTML, Atom]
+taxonomy: [HTML]
+term: [HTML]

config/_default/params.yaml

@@ -9,6 +9,12 @@ github: erynofwales
 instagram: erynofwales
 description: Home page of Eryn Rachel Wells
 
+blog:
+  yearLimit: 3
+
+photostream:
+  yearLimit: 3
+
 photos:
   gridSize: 200
   thumbnailSize: 600

config/_default/privacy.yaml

@@ -1,2 +1,2 @@
-twitter:
+x:
   enableDNT: true

config/_default/services.yaml

@@ -1,2 +1,2 @@
-twitter:
+x:
   disableInlineCSS: true

content/_index.es.md

@@ -1,5 +1,6 @@
 ---
 title: Eryn Rachel Wells
+layout: single
 ---
 
 {{< nobreak >}}Ingeniera de software,{{< /nobreak >}}

content/_index.md

@@ -1,5 +1,58 @@
 ---
-title: Eryn Rachel Wells
+layout: single
+params:
+  renderHeadingAnchors: false
 ---
 
-Software engineer, potter, musician, and overall nerd.
+Hi, I'm Eryn Wells. This is my website. Welcome!
+
+## Latest
+
+Here are some of my most recent posts.
+
+{{< home/latest >}}
+
+## Personal
+
+I'm a queer trans woman, {{< tess >}}' partner, and mom of [two cats][cats]. I
+was born in Seattle, {{< abbr Washington >}}WA{{< /abbr >}} and grew up in
+Phoenix, {{< abbr Arizona >}}AZ{{< /abbr >}}. I attended [Oberlin College][ob]
+where I got a degree in Computer Science. My pronouns are [she/her][pronouns]. 
+
+You can read more about me on my [about][ab] page, or [get in touch][where-am-i].
+
+## Professional
+
+I've worked as a software engineer since 2011 for a variety of companies around
+the San Francisco Bay Area. I joined [Apple][a] in 2016, where I currently work
+on password management and authentication technologies.
+
+My [résumé][r] has all the details.
+
+## Hobbies
+
+When I'm not working, you can reliably find me hacking on this website or [some
+coding other project][gh]. I'm also a musician, and play piano, Irish tin
+whistle, and modular synthesizer. Occasionally I [record][bc] [things][sc]. I
+love outer space and astronomy; I will always get excited to look at the moon
+with you, or check out anything through a telescope. I enjoy [photograhy][p],
+mostly as a travel hobby. And I've been practicing iaido, a traditional Japanese
+sword art, since early 2024. Other things I've been into include: bread baking,
+bicycling, calligraphy, ceramics, and knitting. 
+
+[a]: https://apple.com
+[ab]: {{< ref "/about" >}}
+[b]: {{< ref "/blog" >}}
+[bc]: https://erynwells.bandcamp.com/releases
+[cats]: {{< ref "/cats" >}}
+[eml]: mailto:Eryn%20Wells<eryn@erynwells.me>
+[gh]: https://github.com/erynofwales
+[ig]: https://www.instagram.com/erynofwales
+[m]: https://mastodon.social/@erynofwales
+[n]: {{< ref "/now" >}}
+[ob]: https://www.oberlin.edu
+[p]: {{< ref "/photos" >}}
+[pronouns]: http://pronoun.is/she
+[r]: {{< ref "/resume" >}}
+[sc]: https://soundcloud.com/purlsnbeeps
+[where-am-i]: {{< ref "/about/where-am-i" >}}

content/about/_index.md

@@ -1,18 +1,16 @@
 ---
 title: "Hi! 👋🏻"
-date: 2022-09-03T12:14:32-07:00
+layout: single
 resources:
   - name: me
     src: me.jpeg
     params:
-      alt: "
-        Me, wearing a hat and smiling slightly, standing in front of a stone background.
-      "
+      alt: >
+        Me, wearing a hat and smiling slightly, standing in front of a stone
+        background.
 ---
 
-{{% section class=flow %}}
-
-{{< circular_image id=me name=me class="float-right" width=200 >}}
+{{% section class=content--small-right-column %}}
 
 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,
@@ -22,6 +20,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.
 
+{{< circular_image id=me name=me class="content--right-column" width=200 >}}
+
 {{% /section %}}
 
 ## Hobbies

content/about/where-am-i.md

@@ -3,11 +3,16 @@ title: "Where to Find Me"
 date: 2022-11-11T08:35:26-08:00
 ---
 
-Here's a list of places you can find me online.
+Here's a list of places you can find me online. You can often find me on
+services not listed here with the `erynofwales` or `erynrwells` handles.
 
 ## Social Media
 
-- Cohost: [@eryn](https://cohost.org/eryn)
+I'm really only on Instagram and Mastodon these days. My Twitter account is
+still live, as an archive, but I don't post on it or look at it. Ditto for
+Facebook.
+
+- Facebook: [erynofwales](https://www.facebook.com/erynofwales)
 - Instagram: [@erynofwales](https://instagram.com/erynofwales)
 - Mastodon: [@erynofwales](https://mastodon.social/@erynofwales)
 - Twitter: [@erynofwales](https://twitter.com/erynofwales)
@@ -15,9 +20,10 @@ Here's a list of places you can find me online.
 ## Content
 
 - Bandcamp: [erynwells](https://erynwells.bandcamp.com/releases)
-- Soundcloud: [purlsnbeeps](https://soundcloud.com/purlsnbeeps)
-- YouTube: [Eryn Wells](https://www.youtube.com/channel/UCWb2pTDlC27R1PucyUPrypA)
 - GitHub: [erynofwales](https://github.com/erynofwales)
+- Soundcloud: [purlsnbeeps](https://soundcloud.com/purlsnbeeps)
+- StoryGraph: [erynrwells](https://app.thestorygraph.com/profile/erynrwells)
+- YouTube: [Eryn Wells](https://www.youtube.com/channel/UCWb2pTDlC27R1PucyUPrypA)
 
 ## The Old Fashioned Way
 

content/blog/2020/_index.md

@@ -0,0 +1,4 @@
+---
+title: 2020
+date: 2020-01-01
+---

content/blog/2021/09/oskitone-scout/index.md

@@ -7,7 +7,7 @@ categories: ["Music"]
 tags: ["Synthesizers", "Electronics", "DIY", "Compositions"]
 ---
 
-{{< figures/youtube id="gCSwWsxzy_c" title="A timelapse video of me building an Oskitone Scout, set to music produced using the Scout itself">}}
+{{< youtube id="gCSwWsxzy_c" title="A timelapse video of me building an Oskitone Scout, set to music produced using the Scout itself" >}}
 
 [Oskitone][oskitone] recently released a new synthesizer: the [Scout][scout].
 It's a small monophonic keyboard synth built around an Arduino. It was a quick

content/blog/2021/10/pnw-reunion-trip/index.md

@@ -41,4 +41,4 @@ I'm so grateful for every one of these people. We've been friends for years and
 even though our lives have taken us in so many different directions, we've found
 each other again and that is so wonderful.
 
-{{< twitter erynofwales 1447951049076056071 >}}
+{{< twitter user=erynofwales id=1447951049076056071 >}}

content/blog/2021/_index.md

@@ -0,0 +1,4 @@
+---
+title: 2021
+date: 2021-01-01
+---

content/blog/2022/01/cmss-3modules/index.md

@@ -7,7 +7,7 @@ categories: ["Music"]
 tags: ["Eurorack", "Synthesizers", "Recordings", "Performances", "Compositions"]
 ---
 
-{{< figures/youtube id="sqr7g4P85aM" title="A top-down video of me operating a small Eurorack system made of only three modules. Lights flash, an incorporeal hand turns knobs to sculpt the sound." >}}
+{{< youtube id="sqr7g4P85aM" title="A top-down video of me operating a small Eurorack system made of only three modules. Lights flash, an incorporeal hand turns knobs to sculpt the sound." >}}
 
 This is my submission to the [Three Module Challenge][3mc] show put on by
 Colorado Modular Synth Society in late January 2022. This is my first time

content/blog/2022/04/nethack/index.es.md

@@ -18,7 +18,7 @@ estuve hecho.
 
 Es posible que me entusiasme un poco.
 
-{{< twitter erynofwales 1510763278691016705 >}}
+{{< twitter user=erynofwales id=1510763278691016705 >}}
 
 He mejorado mucho en las últimas semanas. Mis puntajes han crecidos desde 1,000
 hasta el mejor juego hasta ahora en que [obtuve 9401 puntos][over9000]. Quién

content/blog/2022/04/nethack/index.md

@@ -23,7 +23,7 @@ packed with [NetHackWiki][nethackwiki] tabs too, including a pinned one for the
 
 I may have gotten a little carried away a time or two.
 
-{{< twitter erynofwales 1510763278691016705 >}}
+{{< twitter user=erynofwales id=1510763278691016705 >}}
 
 I've gotten much better in that time. My scores have increased from the
 1000-2000 range to my best game so far in which [I scored 9401

content/blog/2022/08/audio-scope-with-p5js/diagram.svg

@@ -0,0 +1,36 @@
+<svg class="railroad-diagram" width="408" height="62" viewBox="0 0 408 62">
+<g transform="translate(.5 .5)">
+<g>
+<path d="M20 21v20m10 -20v20m-10 -10h20"></path>
+</g>
+<path d="M40 31h10"></path>
+<g>
+<path d="M50 31h0"></path>
+<path d="M358 31h0"></path>
+<g class="terminal ">
+<path d="M50 31h0"></path>
+<path d="M126 31h0"></path>
+<rect x="50" y="20" width="76" height="22" rx="10" ry="10"></rect>
+<text x="88" y="35">&#60;audio></text>
+</g>
+<path d="M126 31h10"></path>
+<path d="M136 31h10"></path>
+<g class="terminal ">
+<path d="M146 31h0"></path>
+<path d="M230 31h0"></path>
+<rect x="146" y="20" width="84" height="22" rx="10" ry="10"></rect>
+<text x="188" y="35">Analyzer</text>
+</g>
+<path d="M230 31h10"></path>
+<path d="M240 31h10"></path>
+<g class="terminal ">
+<path d="M250 31h0"></path>
+<path d="M358 31h0"></path>
+<rect x="250" y="20" width="108" height="22" rx="10" ry="10"></rect>
+<text x="304" y="35">destination</text>
+</g>
+</g>
+<path d="M358 31h10"></path>
+<path d="M 368 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path>
+</g>
+</svg>

content/blog/2022/08/audio-scope-with-p5js/index.md

@@ -88,22 +88,7 @@ node to the input of the analyzer node, and the output of the analyzer node to
 the audio context's `destination` node that routes to the computer's speakers.
 Our audio processing graph looks like this:
 
-{{< figures/railroad id="audioContextDiagram" >}}
-    {{< scripts/railroad >}}
-        return rr.Diagram(
-            rr.Sequence(
-                rr.Terminal("<audio>"),
-                rr.Terminal("Analyzer"),
-                rr.Terminal("destination")));
-    {{< /scripts/railroad >}}
-    {{< scripts/railroad narrow=1 >}}
-    return rr.Diagram(
-        rr.Stack(
-            rr.Terminal("<audio>"),
-            rr.Terminal("Analyzer"),
-            rr.Terminal("destination")));
-    {{< /scripts/railroad >}}
-{{< /figures/railroad >}}
+![](diagram.svg)
 
 By itself the AudioContext doesn't actually play any audio. I'll tackle that
 next.

content/blog/2022/_index.md

@@ -0,0 +1,4 @@
+---
+title: 2022
+date: 2022-01-01
+---

content/blog/2023/_index.md

@@ -0,0 +1,4 @@
+---
+title: 2023
+date: 2023-01-01
+---

content/blog/2023/hello-chess-friend.md

@@ -0,0 +1,38 @@
+---
+title: "Hello Chess Friend"
+description: I started building a chess engine in Rust. Here it is.
+date: 2023-12-29T08:29:00-08:00
+series: chess-friend
+categories: Tech
+tags: [Programming, Chess]
+---
+
+I started [playing a lot of chess][chess-post] recently. As often happens with
+me, it wasn't very long until I started wondering how I could Do Programming To
+It.
+
+I found the mostly excellent, occasionally vague and confusing [Chess
+Programming Wiki][cpwiki] and have been using that as a guide. It helpfully says
+this on it's [Getting Started][cpgs] page:
+
+> The **very first step** to writing a chess engine is to write a complete, bug
+> free board representation that knows every rule of chess.
+
+As a software engineer, the "bug free" bit cracks me up.
+
+My engine is called ChessFriend. It uses [bitboards][cpbb] for its board
+representation. As of this post, I've managed to write a board representation
+that allows me to place pieces of both colors on any square, and I'm hacking
+away at the move generator. I've also written a small command line "board
+explorer" utility that can interact with my board representation. Of course, it
+has a pile of unit tests, helping me inch ever-so-slowly toward that blissful
+bug-free state.
+
+It's written in Rust. I've [_mostly_][rust-bc-toot] avoided fighting with the
+borrow checker.
+
+[chess-post]: {{< ref "chess" >}}
+[cpwiki]: https://www.chessprogramming.org/Main_Page
+[cpgs]: https://www.chessprogramming.org/Getting_Started
+[cpbb]: https://www.chessprogramming.org/Bitboards
+[rust-bc-toot]: https://mastodon.social/@erynofwales/111637122773195611

content/blog/2023/less-instagram-more-blog.md

@@ -0,0 +1,36 @@
+---
+title: "Less Instagram, More Blog"
+description: Resolving, yet again, to blog more and social media less.
+date: 2023-12-27T08:56:44-07:00
+categories: Meta
+tags: [Writing, Resolutions, Habits]
+---
+
+I've been thinking the last few days about how to make use of my blog in 2024. I
+made some vague noises in this general direction a few days ago in my [What
+Should I Blog About?][what-to-blog-about] post too.
+
+My vision since I started posting more here has been to use it as a place to
+share all sorts of things: stuff I'm working on or thinking about; photos; and
+stories from travel and life.
+
+I often fall into a trap when I sit down to write something in which I feel like
+I must first invent the Universe. The need to explain everything from first
+principles seriously hampers my ability (and frankly, desire) to write anything.
+I don't want to only post carefully thought out, highly edited and polished
+pieces, though I certainly hope _some_ of my posts reach that bar. I hope to
+also post quick notes and sketches of ideas. I've enjoyed reading some quicker
+posts from {{< tess >}} and [Elaine][e] this past year, and I'd like to follow
+their example.
+
+{{< youtube zSgiXGELjbc >}}
+
+I'm not setting myself a specific goal here. The idea is just "more" in a
+certain general direction. I don't want to commit to a specific frequency or
+quality. Instead, I'm hoping this post sets a foundation on which to build a
+sustainable thinking-writing-sharing habit.
+
+Thanks for coming along. :)
+
+[what-to-blog-about]: {{< ref "what-to-blog-about" >}}
+[e]: https://diplograph.net

content/blog/2023/long-way-to-a-small-angry-planet-book/index.es.md

@@ -1,8 +0,0 @@
----
-resources:
-    - name: cover
-      src: cover.jpg
-      title:
----
-
-{{< figures/image name=cover >}}

content/blog/2023/netscape-meteors/index.md

@@ -26,13 +26,13 @@ Navigator "meteors" animation. This one has a special place in my head and
 heart because it is so clearly connected to my memories of discovering the
 web as a kid. Here it is in its original 60×60 px glory:
 
-{{< figures/image name=netscape60 shouldShowTitle=false >}}
+{{< figures/image name=netscape60 shouldShowTitle=false size=small >}}
 
 I started out doing some web searches that turned up several versions. One was
 promising but far too big: 400&times;400 px. Worse, after some shoddy resize
 attempts, the "pixels" had become rectangular.
 
-{{< figures/image name=rectangular-pixels shouldShowTitle=false >}}
+{{< figures/image name=rectangular-pixels shouldShowTitle=false size=small >}}
 
 This would not do.
 
@@ -81,7 +81,10 @@ that replaces those pixels with ones that match the surrounding pixels. Here's
 the modified 60&times;60 one and a bigger 240&times;240 px one, for good
 measure:
 
-{{< figures/image names="netscape-modified60,netscape-modified240" shouldShowTitle=false >}}
+{{< content-grid columns=2 >}}
+  {{< figures/image name="netscape-modified60" shouldShowTitle=false shouldResize=false size=small >}}
+  {{< figures/image name="netscape-modified240" shouldShowTitle=false shouldResize=false size=small >}}
+{{< /content-grid >}}
 
 <script src="https://mastodon.social/embed.js" async="async"></script>
 

content/blog/2023/pajaro-dunes/index.md

@@ -1,8 +1,7 @@
 ---
 title: "Pajaro Dunes"
 date: 2023-05-30T08:31:34-07:00
-categories: Travel
-tags: [Beaches, Tess, EJ, Vacations]
+tags: [Travel, Beaches, Tess, EJ, Vacations]
 ---
 
 {{< tess >}}, EJ, and I took a weekend trip down the coast over Memorial Day

content/blog/2023/trip-to-japan/index.md

@@ -1,8 +1,10 @@
 ---
-title: "Trip to Japan"
+title: Trip to Japan
 date: 2023-04-14T21:40:21+09:00
 categories: Travel
-tags: ["日本"]
+tags:
+  - Travel
+  - japan
 ---
 
 At the beginning of April, {{< tess >}} and I took a trip to Japan for two

content/blog/2023/yerba-buena-book/cover.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7bc98cce772e0c075daed5a6dd9b1c18e6fd19e94ac68197893fd14cb58cf790
+size 83946

content/blog/2023/yerba-buena-book/index.md

@@ -0,0 +1,27 @@
+---
+title: "Yerba Buena by Nina LaCour"
+date: 2023-11-23T09:50:06-07:00
+series: 2023-books
+categories: Books
+tags: [Romance, Lesbians, Queerness]
+resources:
+    - name: cover
+      src: cover.jpg
+      title:
+      params:
+        alt: An orange book cover with green leafy sprigs around the edges. Profiles of two women, overlapping and facing opposite directions. "Yerba Buena a novel" is written across the top half.
+---
+
+I thought this book was a lesbian romance -- and it is -- but it's so much more
+too. It's the story of two women and the difficult pasts they emerge out of. I
+really enjoyed how LaCour wove together their processing of that trauma with
+growing into young women, making questionable choices, finding themselves, and
+ultimately each other. It's heavy at times, but also beautiful. I really enjoyed
+it. Thank you, {{< tess >}}, for the gift. ❤️
+
+Get it at [Folio][folio] in San Francisco, or on [Bookshop.org][bookshop].
+
+{{< figures/image name=cover class=content-width >}}
+
+[folio]: https://www.foliosf.com/book/9781250810519
+[bookshop]: https://bookshop.org/p/books/yerba-buena-nina-lacour/18721506?ean=9781250810519

content/blog/2023/you-deserve-a-tech-union-book/index.md

@@ -0,0 +1,28 @@
+---
+title: "You Deserve a Tech Union by Ethan Marcotte"
+date: 2023-12-16T08:19:41-08:00
+draft: true
+series: 2023-books
+categories: Books
+tags: [Unions, Tech]
+---
+
+Ethan's book came out in August 2023, and I've been eager to read it since he
+announced it. Unionization has been a hot topic in the US over the last several
+years. I've rooted for workers at Amazon, Google, Starbucks, and Apple to form
+unions and advocate for their rights vis á vis their employers. I think that
+work is so important.
+
+This book provides an overview of the history of unions in the US, and in the US
+tech industry, plus some helpful thoughts on how to form unions in your
+workplace.
+
+I found his arguments about why unions are important, even in an industrial
+sector considered to be rather plush compared to many others. Many people think
+of unions as organizations that advocate for _more_ privileges and protections
+for workers. However, at least as important as that work, they also ensure that
+workers retain the privileges they already have.
+
+Get it from [A Book Apart][aba].
+
+[aba]: https://abookapart.com/products/you-deserve-a-tech-union

content/blog/2024/_index.md

@@ -0,0 +1,4 @@
+---
+title: 2024
+date: 2024-01-01
+---

content/blog/2024/ay-carmela.md

@@ -0,0 +1,56 @@
+---
+title: ¡Ay Carmela!
+description: |
+  Pero nada pueden bombas<br>
+  Donde sobra corazón
+date: 2024-11-06T08:30:22-08:00
+categories: Politics
+tags:
+  - Music
+  - United States
+  - España
+  - Guerra Civil Española
+---
+
+> ```text
+> El ejército del Ebro
+> Rumbala rumbala rum-ba-la
+> El ejército del Ebro
+> Rumbala rumbala rum-ba-la
+>
+> Una noche el río pasó
+> ¡Ay Carmela! ¡Ay Carmela!
+> Una noche el río pasó
+> ¡Ay Carmela! ¡Ay Carmela!
+>
+> Pero nada pueden bombas
+> Rumbala rumbala rum-ba-la
+> Pero nada pueden bombas
+> Rumbala rumbala rum-ba-la
+>
+> Donde sobra corazón
+> ¡Ay Carmela! ¡Ay Carmela!
+> Donde sobra corazón
+> ¡Ay Carmela! ¡Ay Carmela!
+>
+> Contraataques muy rabiosos
+> Rumbala rumbala rum-ba-la
+> Contraataques muy rabiosos
+> Rumbala rumbala rum-ba-la
+>
+> <strong>Deberemos resistir</strong>
+> ¡Ay Carmela! ¡Ay Carmela!
+> Deberemos resistir
+> ¡Ay Carmela! ¡Ay Carmela!
+>
+> Pero igual que combatimos
+> Rumbala rumbala rum-ba-la
+> Pero igual que combatimos
+> Rumbala rumbala rum-ba-la
+>
+> <strong>Prometemos resistir</strong>
+> ¡Ay Carmela! ¡Ay Carmela!
+> Prometemos resistir
+> ¡Ay Carmela! ¡Ay Carmela!
+> ```
+{cite="https://music.apple.com/us/album/ay-carmela/1119265269?i=1119265947" caption="Traditional; emphasis mine"}

content/blog/2024/b612/index.es.md

@@ -0,0 +1,23 @@
+---
+title: B612
+date: 2024-03-09T08:38:03-08:00
+description: An open source font I rediscovered recently.
+categories: Tech
+tags: [Fonts]
+resources:
+  - name: specimen
+    src: specimen.png
+    title: B612 y B612 Mono
+    params:
+      alt: "
+      Una muestra de B612 y B612 Mono. El mismo pangrama inglés, “quick brown fox,” es escrito en líneas separadas.
+      "
+---
+
+Recientemente, redescubrí la fuente [B612][b612]. Fue engargado por AirBus para
+los tableros de instrumentos de sus aviones. Hace unos años que hizen de código
+abierto.
+
+{{% figures/image name=specimen class=content-width shouldResize=false %}}
+
+[b612]: https://b612-font.com

content/blog/2024/b612/index.md

@@ -0,0 +1,24 @@
+---
+title: B612
+date: 2024-03-09T08:38:03-08:00
+description: An open source font I rediscovered recently.
+categories: Tech
+tags: [Fonts]
+resources:
+  - name: specimen
+    src: specimen.png
+    title: B612 and B612 Mono
+    params:
+      alt: "
+      A specimen of B612 and B612 Mono. The same “quick brown fox” pangram sentence is
+      set in each font on separate lines.
+      "
+---
+
+I recently rediscovered [B612][b612], a font comissioned by AirBus to serve as
+the font for their airplanes' instrument panels. They made it open source
+several years ago.
+
+{{% figures/image name=specimen class=content-width shouldResize=false %}}
+
+[b612]: https://b612-font.com

content/blog/2024/books/index.md

@@ -0,0 +1,64 @@
+---
+title: Books I Read in 2024
+slug: books
+date: 2024-12-31
+tags:
+  - Books
+  - Reading
+---
+
+I enjoy reading quite a bit. Nevertheless, it's something I need to be
+intentional about incorporating into my life. I usually to finish a modest
+number of books in a year. This year I made it to a nice round ten.
+
+A big theme of the year is the [Murderbot Diaries][murderbot]. My friend Jess
+recommended them to me a while back, and I finally got around to [All Systems
+Red][murderbot1] last year. I was hooked enough that {{< tess >}} bought me the
+subsequent three for Christmas last year. So you're gonna see almost all the
+Murderbot books on this list.
+
+[Bindle Punk Bruja](https://marthawells.com/networkeffect.htm) by Desideria Mesa
+: Mesa's debut novel is set in 1920s Kansas City and centers around Rose, the
+daughter of Mexican immigrants who takes on the city's mob bosses with the help
+of friends and some witchy magical powers. This was a gift from my sister
+[Anna][anna] for Christmas last year.
+
+[The Deep Sky](https://www.yumekitasei.com/projects-6) by Yume Kitasei
+: A murder mystery that takes place in space on a one-way mission to colonize a
+far-off planet. A gift from my sister.
+
+[Wolfsong](https://www.tjklunebooks.com/wolfsong) by TJ Klune
+: Warewolves, magic, queerness, and family. A gift from my sister.
+
+[Fingersmith](https://www.penguinrandomhouse.com/books/348400/fingersmith-by-sarah-waters/) by Sarah Waters
+: Mystery, intrigue, gay ladies, and some incredible plot twists. Tess gave me
+this one.
+
+[Artificial Condition](https://marthawells.com/murderbot2.htm) by Martha Wells
+: Murderbot investigates its past.
+
+[Rogue Protocol](https://marthawells.com/murderbot3.htm) by Martha Wells
+: Murderbot goes digging for evidence against its former corporate master,
+GrayCris.
+
+[Exit Strategy](https://marthawells.com/murderbot4.htm) by Martha Wells
+: Murderbot attempts to save its former owner from GrayCris.
+
+[Network Effect](https://marthawells.com/networkeffect.htm) by Martha Wells
+: Continuing the Murderbot obsession, I picked up this one from a [Books
+Inc][booksinc] in San Francisco's Marina district.
+
+[I'm Starting to Worry About This Black Box of Doom](https://us.macmillan.com/books/9781250285959/imstartingtoworryaboutthisblackboxofdoom/) by Jason Pargin
+: Anna and I decided to read this together, book club style. It's a ridiculous
+romp across the US with some deep commentary on the perils of social media: how
+it promotes dogpiling in ways that can destroy lives, and the groupthink that
+arises from being terminally online.
+
+[The Full Moon Coffee Shop](https://www.penguinrandomhouse.com/books/746333/the-full-moon-coffee-shop-by-mai-mochizuki/) by Mai Mochizuki
+: A cute, short read about a mysterious popup coffee shop that appears in Kyōto
+during the full moon.
+
+[murderbot]: https://marthawells.com/murderbot.htm
+[murderbot1]: https://marthawells.com/murderbot1.htm
+[anna]: https://www.instagram.com/anna.e.az/
+[booksinc]: https://booksinc.net

content/blog/2024/bsd-make.md

@@ -0,0 +1,26 @@
+---
+title: BSD `make` != GNU `make`
+date: 2024-07-31T07:27:50-07:00
+description: Discussing some differences between the BSD and GNU variants of `make(1)`.
+categories: Tech
+tags: [BSD, GNU, Make, Software]
+---
+
+While working on a little home networking project, I found myself having to
+write a Makefile in a FreeBSD environment.
+
+Having written only GNU Makefiles over the course of my life, I was surprised to
+find that my recipes just ... didn't work.
+
+Some resources that helped me make the jump to writing BSD style Makefiles are:
+
+* The [`make(1)`][man] man page that ships with FreeBSD. It's surprisingly
+  thorough, but difficult to search through if you don't know exactly what
+  you're looking for.
+* This FreeBSD mailing list post quoting [GNU make's summary of
+  differences][diffs] from BSD `make`.
+* And [PMake: A Tutorial][pmake], hosted on FreeBSD.org.
+
+[man]: https://man.freebsd.org/cgi/man.cgi?make(1)
+[diffs]: https://lists.freebsd.org/pipermail/freebsd-questions/2007-April/147533.html
+[pmake]: https://docs-archive.freebsd.org/44doc/psd/12.make/paper.pdf

content/blog/2024/cat-in-the-cream-cookies.md

@@ -0,0 +1,69 @@
+---
+title: "Cat in the Cream Cookies"
+date: 2024-11-18
+tags:
+  - Cooking
+  - Cookies
+  - Oberlin
+  - Recipes
+---
+
+One of my favorite memories from my time as a student at [Oberlin][ob] was going
+to the [Cat in the Cream][cat]. I saw a lot of great plays, improv shows, and
+jazz ensembles by students, and several performances by visiting musical guests.
+
+The other highlight of these memories was the oatmeal chocolate chip cookies you
+could get for $1. They're somewhere between a small cake and a cookie, often
+fresh-baked (they often had a hard time keeping up with demand on show nights).
+Honestly they're everything I want in a cookie. I think the recipe was printed
+in an edition of the [Alumni Magazine][mag] at some point in the last several
+years, but this [video][video] I found online was the closest I had to hand, so
+I'm copying it here.
+
+
+## Recipe
+
+**Yield:** 20 cookies
+
+### Tools
+
+* Measuring cups and spoons
+* 2 large mixing bowls
+* Spoon or electric mixer to mix wet ingredients
+* Whisk to combine dry ingredients (optional)
+* 1 or 2 half-size sheet pans for baking
+
+
+### Ingredients
+
+* 2 cups butter, softened
+* 1 cup granulated sugar
+* 2 cups brown sugar or 2 tablespoons of molasses
+* 4 eggs, lightly beaten
+* 2 teaspoons vanilla
+* 4 cups flour
+* 2 teaspoons baking soda
+* 2 teaspoons salt
+* Dash cinnamon
+* 4 cups oats
+* 3 cups chocolate chips
+
+
+### Method
+
+1. Preheat oven to 375°.
+1. Combine butter, sugars, and/or molasses in a bowl.
+1. Add eggs and vanilla. Stir to combine.
+1. Mix flour, baking soda, salt, and cinnamon in a separate bowl.
+1. Add dry ingredients above to the wet. Stir to combine.
+1. Add in oats and chocolate chips. Stir to combine.
+1. Drop in large hunks (about 1/4 cup) onto ungreased baking sheets. They don't
+   spread during baking, but you'll only get six cookies on a half sheet.
+1. Bake until the edges are slightly brown. The original recipe says 20 minutes,
+   but 15 was enough in my oven.
+
+
+[ob]: https://www.oberlin.edu
+[cat]: https://www.thecatinthecream.com/our-menu.html
+[video]: https://vimeo.com/827645032
+[mag]: https://www.oberlin.edu/communications/editorial/alumni-magazine

content/blog/2024/chicago/index.md

@@ -0,0 +1,68 @@
+---
+title: Chicago
+date: 2024-10-05T18:58:05-05:00
+description: >
+  Tess and I traveled to Chicago to attend the wedding of one of my oldest
+  friends, visit some family, and do a little sightseeing.
+resources:
+  - src: wedding.jpg
+    title: Bill and Ashley walked each other in. My dad officiated.
+    params:
+      alt: >
+        To the left, a man wearing a suit and white pastoral stole stands near a
+        mic. To the right, a woman in a white dress, and a man in a tuxedo walk
+        into the frame. Everyone is smiling.
+  - src: quincy.jpg
+    title: >
+      Wood plank platforms, Copperplate lettering, and wingding-style hands to
+      direct you where you need to go.
+    params:
+      alt: >
+        A large station sign, framed with a simple wood frame, hanging on the
+        railing around a station platform stairway. It declares the station's
+        name, Quincy, and points to exits to the left and right.
+  - src: tess-kerryman.jpg
+    title: >
+      The Kerryman is a great Irish bar in River North, owned and operated by
+      one of Tess' distant Irish cousins.
+    params:
+      alt: >
+        Tess, on the left, stands outside a large pub on a stree corner. The pub
+        has outdoor seating.
+tags:
+  - Travel
+  - Friends
+  - Family
+  - "Chicago, IL"
+  - Illinois
+---
+
+This past week {{< tess >}} and I traveled to Chicago to attend the wedding of
+Bill, one of my oldest friends, and his partner Ashley.
+
+{{< figures/image name=wedding.jpg >}}
+
+They've been a couple for a long time. I'm thrilled that they've decided to take
+this step together, and grateful to have been invited to witness it. Bill also
+asked my dad to perform the ceremony, and I think he did an excellent job.
+
+{{< figures/image name=quincy.jpg >}}
+
+After the wedding day, we spent several days in Chicago sightseeing and visiting
+with friends and family. We went record shopping at [Reckless][reckless], walked
+down Navy Pier and Michigan Avenue, rode the L (including a stop a the
+delightfully old timey [Quincy Station][quincy]), took selfies at the
+[Bean][bean], and caught Hokusai's [Great Wave Off Kanagawa][wave] at the [Art
+Institute of Chicago][artic] on a limited exhibition. We had breakfast at
+[Tary][tary], and stopped in for pints at [The Kerryman][kerryman], a pub owned
+by one of Tess' distant Irish cousins.
+
+{{< figures/image name=tess-kerryman.jpg >}}
+
+[reckless]: https://www.reckless.com
+[bean]: https://millenniumparkfoundation.org/art-architecture/cloud-gate/
+[artic]: https://www.artic.edu
+[tary]: https://tarycoffee.com/menu
+[kerryman]: https://kerrymanchicago.com/drinks/
+[wave]: https://en.wikipedia.org/wiki/The_Great_Wave_off_Kanagawa
+[quincy]: https://www.transitchicago.com/station/quin/

content/blog/2024/chicago/quincy.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3b6c19b8a5f589b21a7ab8ee846e2c23c364335142c04457998cc89e948ac39e
+size 1843640

content/blog/2024/chicago/tess-kerryman.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ad7dcfa33b5a9df82ae941f970324bcac5a25dbd36e900051032724a2af15bb2
+size 2452294

content/blog/2024/chicago/wedding.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:08c30e5304a8341e6734eb5ce53c3249c935eb1eaa0401e90726ff660f8cf0e8
+size 2870428

content/blog/2024/christmas-in-massachusetts/bluey-erin-kathleen.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1d3444135aab32635f480ee8ca4a6797821ff9b6f0f68e51aa4dd0f9b5d6383e
+size 3407880

content/blog/2024/christmas-in-massachusetts/bluey-green-door.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5c17df7d3f75b0f3b18f9b5d73c1aa63b54ce5d856742f7121f4b9e9c8632e54
+size 3836629

content/blog/2024/christmas-in-massachusetts/bowling.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:19005c6eb5ef6da85eafcfe5abc92cff98bd4a7b53156fee94204f0e100db359
+size 1129641

content/blog/2024/christmas-in-massachusetts/erin-snowballs.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3e171f8b999e0af9bf949e391397a78ef6c7dd34bffa127c62f78ad57917f185
+size 2557799

content/blog/2024/christmas-in-massachusetts/index.md

@@ -0,0 +1,117 @@
+---
+title: "Christmas in Massachusetts"
+description: This year, I spent Christmas with Tess and Erin in Massachusetts.
+date: 2024-12-25
+resources:
+  - src: snow-friend.jpg
+    title: The tiniest snow friend
+  - src: erin-snowballs.jpg
+    title: Erin making snowballs
+  - src: minot.jpg
+    title: Minot Light sits on an undersea ledge far out from shore
+  - src: sand-hills.jpg
+    title: The sea wall along Sand Hills Beach, where Tess spent many summers
+  - src: bluey-erin-kathleen.jpg
+    title: Heading into the Heeler's living room with Auntie Kathleen
+  - src: bluey-green-door.jpg
+    title: Waiting to go through the secret door!
+  - src: bowling.jpg
+    title: Erin's first game of candlepin bowling
+  - src: old-brigade.jpg
+    title: Danny (on the center mic) and the Old Brigade at Fox & Hound in Quincy, MA
+tags:
+  - Holidays
+  - Christmas
+  - Family
+  - Tess
+  - Erin
+  - Candlepin Bowling
+  - Massachusetts
+---
+
+This year, {{< tess >}}, Erin, and I traveled to Massachusetts to spend
+Christmas with Tess' family. This was my first year spending Christmas away from
+my family in Arizona, and my first with Tess and Erin.
+
+One of my hopes for Christmas in a cold place was to see some snow. As luck
+would have it, I woke up on Christmas Eve to find a light dusting! Erin and I
+couldn't help ourselves: we rushed outside to make a few snowballs and the
+tiniest snow man you've ever seen.
+
+{{< 2col >}}
+  {{< figures/image name=erin-snowballs.jpg >}}
+  {{< figures/image name=snow-friend.jpg >}}
+{{< /2col >}}
+
+We opened presents and had a lazy Christmas morning. We had dinner at Tess'
+parents' house, and then went over for Christmas dessert at her cousin's house
+-- a truly massive family event with many extended family members attending.
+
+The next day, Tess and I went "down harbor" for lunch and a little walk around.
+We stopped at [Lucky Finn](https://www.luckyfinncafe.com) for a coffee, and Tess
+took me around to see some of her old summer stomping grounds. I asked her to
+help me get a good view of [Minot Light][minot], but it turns out it's really
+damn far out so I only managed a little speck on the horizon.
+
+{{< 2col >}}
+  {{< figures/image name=minot.jpg >}}
+  {{< figures/image name=sand-hills.jpg >}}
+{{< /2col >}}
+
+On Friday, Tess, Erin, and I went candlepin bowling at [Alley Kat
+Lane][alleykat] in Kingston. Despite some initial hesitation, Erin had a lot of
+fun. It was my first time at candlepin bowling too, and I found it really fun!
+Harder than "big ball" bowling, but also more approachable because of the
+lighter, smaller ball. The opportunities to strategize how to use the fallen
+pins to your advantage add an interesting element too.
+
+{{< 2col >}}
+  {{< figures/image name=bluey-erin-kathleen.jpg >}}
+  {{< figures/image name=bluey-green-door.jpg >}}
+{{< /2col >}}
+
+On Saturday, Tess, Kathleen, and I took Erin to an immersive [Bluey camp][bluey]
+in Burlington. She had a great time building a fort out of the big cushy
+oversized "blocks" in Bluey and Bingo's playroom.
+
+{{< 2col >}}
+  {{< figures/image name=bowling.jpg >}}
+  {{< figures/image name=old-brigade.jpg >}}
+{{< /2col >}}
+
+Our last day in town, we went out to brunch at [The Tinker's Son][tinker], and
+went up to [The Fox & Hound][fox] in Quincy to watch Tess' cousin
+[Danny][brigade] play Irish music.
+
+---
+
+I had a lot of feelings going into this Christmas. Apart from one pandemic year,
+I've spent every year with my family in Arizona. I was worried about being in a
+new place with people I didn't know well, breaking long-standing traditions with
+my own family, letting them down, and feeling homesick.
+
+Everyone in Tess' family was welcoming and supportive. Tess' mom even got me a
+stocking for their fireplce with my name on it, and her dad filled it with many
+of the same things he gives to the rest of the family members. I also got to
+watch Erin experience Christmas as a kid for the first time: opening presents,
+playing in the snow, snuggling and reading books or watching TV together.
+
+I was able to keep some of my family traditions too. Mom sent me a box of full
+of cookies; I shopped for presents for my parents and sister. And when we
+returned to California, I was able to have a video call with my family to open
+presents together.
+
+The older I get the more see the point of Christmas to be about the
+relationships to family, and the sense of home and community you get from being
+with people you love. Despite a whole new experience, I really felt that this
+year. In fact, I think being in a new place, enacting different traditions, let
+me hold the traditions and rituals of Christmas as I've experienced up to now a
+little more loosely, and to focus on the people that bring meaning to the
+holiday and make those rituals happen.
+
+[minot]: https://en.wikipedia.org/wiki/Minot%27s_Ledge_Light
+[bluey]: https://camp.com/bluey-x-camp-boston
+[alleykat]: https://alleykatlane.com
+[tinker]: https://www.thetinkersson.com
+[fox]: https://www.foxandhoundquincy.com
+[brigade]: https://www.instagram.com/theoldbrigade/

content/blog/2024/christmas-in-massachusetts/minot.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:60395d73a2aa641b7d3f033474685bd2f9ef3128bb328f52456f432db579c1a3
+size 1976740

content/blog/2024/christmas-in-massachusetts/old-brigade.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a3b5bd5931bdec32c2b54f7a63c6761d6951ee7e75891af6863aa127b2ed20ae
+size 3163986

content/blog/2024/christmas-in-massachusetts/sand-hills.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8c190c6ac37402e683c61715a71a1c4494c81a659a63403329a871017d9bf156
+size 3017239

content/blog/2024/christmas-in-massachusetts/snow-friend.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:812fcea1bf412ac0fd89d790095ae641dcc0461c14caa11e5f7f53a3f479240a
+size 2395627

content/blog/2024/departure-mono/index.md

@@ -0,0 +1,28 @@
+---
+title: "Departure Mono"
+description: >
+  A fun fixed-width font evoking old school terminals and pixel fonts
+  from early computing.
+date: 2024-12-28T08:19:53-05:00
+resources:
+  - src: screenshot.png
+    title:
+    params:
+      alt: >
+        A screenshot of the Departure Mono website. On the left, a small caption
+        "Departure Mono is a monospaced pixel font with a lo-fi technical vibe".
+        On the right are two examples: a personal letter on continuous feed
+        paper, and a notice on small stationary.
+tags:
+  - Fonts
+  - Design
+  - Web Design
+---
+
+Here's a fun fixed-width pixel font I came across the other day: [Departure
+Mono][dep]. It's got a neat old school terminal vibe, think VT100 or Commodore
+64.
+
+{{< figures/image name=screenshot.png >}}
+
+[dep]: https://departuremono.com

content/blog/2024/eclipse/breanna-reading.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7c8907530f730f800e59101b9b26cd200b6f73c9bb045560ed0354ac4a73bf41
+size 1933691

content/blog/2024/eclipse/comadre-concha.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:25ea86cacf4d35397f8dddfe949c83bf7abd1c8df23cf447820603abb4e40b50
+size 2144929

content/blog/2024/eclipse/diamondring.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c3f95920dc571ee9ac3fae17bd190d2a45e4fa85a94e50ea488bd79f9b5cb988
+size 1925477

content/blog/2024/eclipse/index.md

@@ -0,0 +1,96 @@
+---
+title: Eclipse
+date: 2024-04-09T20:26:31-05:00
+description: >
+  I traveled to Austin, TX to watch the total solar eclipse that passed over
+  North America, and visit my friend Breanna Carzoo.
+tags:
+  - Travel
+  - Space
+  - Eclipse
+  - "Austin, TX"
+  - Texas
+  - Food
+  - Conchas
+  - Books
+  - Reading
+resources:
+  - name: preparing
+    src: preparing.jpg
+    title:
+  - name: sol
+    src: sol.jpg
+    title: Sol
+  - name: ringoffire
+    src: ringoffire.jpg
+    title: The Ring of Fire
+  - name: diamondring
+    src: diamondring.jpg
+    title: Diamond Ring
+  - src: breanna-reading.jpg
+    title: Breanna read Greenlight to a room full of kids wearing bee antennae.
+  - name: concha
+    src: comadre-concha.jpg
+    title: >
+      An earl grey concha from Comadre. The most delicate, flavorful pan dulce
+      I've ever had.
+    params:
+      alt: >
+        A small round bun with a pinkish topping sittin on a napkin in front of
+        a traditional cardboard donut box.
+---
+
+{{< figures/image name=preparing >}}
+
+On April 8, the earth experienced a [total solar eclipse][nasa] tracking over
+North America. I was so excited to be able to travel to the path of totality and
+observe the eclipse with my friend and fellow space nerd, [Breanna
+Carzoo][breanna].
+
+My setup for all my eclipse photos was a [Fujifilm X-T5][xt5], with a [Canon EF
+100mm Macro][lens] lens. I used a [Fringer EF-XT converter][converter] to mount
+the EF lens on the X-T5. Of course I also had a solar filter.
+
+Here's one of my first test images. You can see a sun spot!
+
+{{< figures/image name=sol >}}
+
+During totality, when the moon fully covers the disc of the sun, a phenomenon
+known as the "Ring of Fire" occurse. The sky is dark and most of the Sun's light
+is hidden. In this state, it's possible to see the Sun's corona.
+
+{{< figures/image name=ringoffire >}}
+
+Just before and after totality is the "Diamond Ring" phase, when the last bit of
+light from the Sun's disc shines through the craters and valleys of the moon's
+surface.
+
+{{< figures/image name=diamondring >}}
+
+Austin, TX was pretty cloudy that day. I'm grateful we were able to see as much
+of the eclipse as we did. The clouds made for some awesome effects too. I'm
+particularly proud of my Diamond Ring image (above) with the additional drama
+the clouds brought to an already stunning event.
+
+Apart from the eclipse, I got to see Breanna do a book event in Bee Cave, TX.
+This town is adorable and leans hard into its name -- everything has a bee
+theme.
+
+{{< figures/image name=breanna-reading.jpg >}}
+
+I was also eager to try [Comadre Panadería](https://comadrepanaderia.com) after
+hearing about it from Claire Saffitz on [one of her videos][comadre-yt] on her
+Dessert Person YouTube channel. I have a huge soft spot for conchas -- Mexican
+pan dulces shaped like shells -- and these were _incredible_.
+
+{{< figures/image name=concha >}}
+
+All told, a very successful trip! Breanna and I had a great time hanging out
+together, and despite the clouds we got some great views of the eclipse.
+
+[nasa]: https://science.nasa.gov/eclipses/future-eclipses/eclipse-2024/
+[breanna]: https://www.breannacarzoo.com
+[xt5]: https://fujifilm-x.com/en-us/products/cameras/x-t5/
+[lens]: https://www.usa.canon.com/shop/p/ef-100mm-f-2-8l-macro-is-usm
+[converter]: https://www.fringeradapter.com/canon-ef-to-fujifilm-x
+[comadre-yt]: https://www.youtube.com/watch?v=kJTHTfJ-91E

content/blog/2024/eclipse/preparing.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2148bc15896769676fe90239e5ca9db6d8dfecddf6b81aeebbf744dcd1c23c89
+size 2674771

content/blog/2024/eclipse/ringoffire.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e80cba7115954aff0f0b9273ba6dffc88718bd503c9417be326f6e5224096a20
+size 2896916

content/blog/2024/eclipse/sol.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d5e0ab1a47e9458ee74915c2f590304dfef1abc274a9abe8e40d96ad58dffe4a
+size 145056

content/blog/2024/i-use-this/index.es.md

@@ -0,0 +1,9 @@
+---
+title: "Lo uso este"
+date: 2024-03-09T08:37:00-08:00
+---
+
+Recientemente, yo añadí una página ["lo uso este"]({{< ref path="/uses" lang=en
+>}}) a mi sitio. Si tengas interés en las herramientas que uso en cualqueria
+categoria, eche un vistazo. También, si haya algunas cosas que no estén en la
+lista que te gusta ver allí, me encanto saber. :)