Add aspect-ratio-aware image galleries

This adds a project-local gallery plugin that builds deterministic rectangular
image layouts from attachment aspect ratios, with both in-process and disk-backed
layout caching.

It also adds gallery flow blocks, templates, and CSS so posts can include
responsive galleries with lazy-loaded images, configurable gaps, target ratios,
and the existing breakout/centering utilities.

1 files changed, 56 insertions, 1 deletions

diff --git a/assets/static/css/style.css b/assets/static/css/style.css
index a8fe9b7..fb12054 100644
--- a/assets/static/css/style.css
+++ b/assets/static/css/style.css
@@ -847,7 +847,7 @@ img.round {
   border-radius: 100%;
 }
 
-:is(img, figure) {
+:is(img, figure, .gallery) {
   &.center {
     display: block;
     margin-inline: auto;
@@ -970,3 +970,58 @@ article::after,
 .missing-publication-date-warning > dt {
   color: var(--foreground);
 }
+
+.gallery {
+  margin-block: 1rem;
+
+  [data-direction] {
+    display: flex;
+    gap: var(--gap);
+    width: 100%;
+  }
+
+  [data-direction="row"] {
+    align-items: flex-start;
+    flex-direction: row;
+
+    & > div {
+      flex: none;
+      min-width: 0;
+      width: var(--width);
+    }
+  }
+
+  [data-direction="column"] {
+    flex-direction: column;
+
+    & > div {
+      width: 100%;
+    }
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: var(--default-border-radius);
+  }
+
+  @media (max-width: 500px) {
+    [data-direction] {
+      flex-direction: column;
+      width: 100%;
+    }
+
+    [data-direction] > div {
+      flex: none;
+      min-width: 0;
+      width: 100%;
+    }
+
+    img {
+      height: auto;
+      max-width: 100%;
+      width: 100%;
+    }
+  }
+}