From 2fc36e151300550b155fe37713429e365e8ec776 Mon Sep 17 00:00:00 2001
From: Dennis Fink
Date: Thu, 23 Jul 2026 00:19:28 +0200
Subject: Add Markdown figure support

This adds a project-local Markdown figure plugin so blog posts can use
semantic `<figure>` blocks with arbitrary CSS classes, optional
captions, and Markdown inside captions.

The image CSS is also updated so figures share the existing width,
breakout, float, centering, and rounded-image utilities while keeping
captions styled and spaced consistently with the rest of the article
layout.
---
 assets/static/css/style.css | 124 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 120 insertions(+), 4 deletions(-)

(limited to 'assets/static/css')

diff --git a/assets/static/css/style.css b/assets/static/css/style.css
index 268c323..7237509 100644
--- a/assets/static/css/style.css
+++ b/assets/static/css/style.css
@@ -673,14 +673,117 @@ IMAGES
 img {
   height: auto;
   max-width: 100%;
+}
+
+figure:not(.trail) {
+  width: fit-content;
+  max-width: 100%;
+  border: 1px solid var(--foreground);
+  border-radius: var(--default-border-radius);
+  margin: 0.75rem 0 0 0;
+  padding: 0.75rem;
+
+  &:has(+ h3) {
+    margin-top: 2rem;
+  }
+
+  &:has(+ p + *) {
+    margin-top: 0;
+  }
 
+  & > img {
+    display: block;
+    border-radius: var(--default-border-radius);
+  }
+
+  &.round > img {
+    border-radius: 100%;
+  }
+
+  &:is(
+      .w25,
+      .w33,
+      .w50,
+      .w66,
+      .w75,
+      .breakout-xxs,
+      .breakout-xs,
+      .breakout-sm,
+      .breakout-md,
+      .breakout-lg,
+      .breakout-xl,
+      .breakout-xxl,
+      .breakout-full
+    )
+    > img {
+    width: 100%;
+  }
+
+  figcaption {
+    color: var(--dim-foreground);
+    font-size: 0.85em;
+    line-height: 1.4;
+    margin-top: 0.5rem;
+    max-inline-size: none;
+    overflow-wrap: anywhere;
+
+    & > :first-child {
+      margin-top: 0;
+    }
+
+    & > :last-child {
+      margin-bottom: 0;
+    }
+
+    p {
+      font-size: inherit;
+      line-height: inherit;
+      max-inline-size: none;
+      font-style: italic;
+
+      & + p {
+        margin-top: 0.75rem;
+      }
+    }
+
+    ul,
+    ol,
+    dl {
+      font-size: inherit;
+      line-height: inherit;
+      margin-bottom: 0;
+      margin-top: 0.5rem;
+    }
+
+    li,
+    dd {
+      max-inline-size: none;
+    }
+  }
+
+  & + p {
+    margin-top: 0.75rem;
+  }
+}
+
+img.round {
+  border-radius: 100%;
+}
+
+:is(img, figure) {
   &.center {
     display: block;
     margin-inline: auto;
   }
 
-  &.round {
-    border-radius: 100%;
+  &.left {
+    float: left;
+    margin-right: 0.75rem;
+  }
+
+  &.right {
+    float: right;
+    margin-left: 0.75rem;
   }
 
   &.w25 {
@@ -755,18 +858,31 @@ img {
   }
 
   @media (max-width: 500px) {
+    &.left,
+    &.right {
+      float: none;
+      margin: 2rem auto;
+    }
+
     &.breakout-xs,
     &.breakout-sm,
     &.breakout-md,
     &.breakout-lg,
     &.breakout-xl {
-      width: 100vw;
-      transform: none;
       margin-left: calc(50% - 50vw);
+      transform: none;
+      width: 100vw;
     }
   }
 }
 
+article::after,
+.clear {
+  clear: both;
+  content: "";
+  display: block;
+}
+
 .missing-publication-date-warning {
   background: var(--red);
   color: var(--foreground);
-- 
cgit v1.3.1