style image in figure

lib/custom_html.typ

@@ -17,3 +17,9 @@
 }
 #let nav-menu = html.elem.with("nav-menu")
 #let home-symbol = html.elem.with("home-symbol")
+
+#let fullscreen-overlay = html.elem.with("fullscreen-overlay")
+#let image-magnifier-group(body) = {
+  // Role 'radiogroup' is needed because of bug in chromium with screenreaders (https://lyra.horse/blog/2025/08/you-dont-need-js/#fn:10)
+  html.elem("image-magnifier-group", attrs: (role: "radiogroup"), body)
+}

lib/figures.typ

@@ -0,0 +1,90 @@
+#import "custom_html.typ" as chtml
+
+#let fullscreen-counter = state("fullscreen-counter", 0)
+
+#let show-rule-img-fig(img) = context {
+  let fs-id = fullscreen-counter.get()
+  ```raw-css
+  figure image-magnifier-group {
+
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      height: auto;
+      width: auto;
+    }
+
+    fullscreen-overlay {
+      display: none;
+
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      position: fixed;
+
+      background: var(--color-bg-overlay);
+
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+
+      img {
+        width: 100%;
+      }
+
+    }
+
+    &:has(.img-magnified-button:checked) {
+      fullscreen-overlay {
+        display: flex;
+      }
+    }
+
+    input {
+      /* To allow screen reader to still access these. */
+      opacity: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+
+  }
+  ```
+  chtml.image-magnifier-group({
+    html.label({
+      html.input(
+        type: "radio", 
+        name: "magnify-img-" + str(fs-id), 
+        id: "img-" + str(fs-id) + "-magnified-button", 
+        class: ("img-magnified-button",)
+      )
+      img
+    })
+    html.label({
+      html.input(
+        type: "radio", 
+        name: "magnify-img-" + str(fs-id), 
+        id: "img-" + str(fs-id) + "-not-magnified-button", 
+        class: ("img-not-magnified-button",),
+        checked: true
+      )
+      chtml.fullscreen-overlay()[
+        #img
+      ]
+    })
+  })
+  fullscreen-counter.update(x => x+1)
+}
+
+#let show-rule-figure(fig) = {
+  show image: show-rule-img-fig
+  ```raw-css
+  figure {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  ```
+  fig
+}

lib/html_body.typ

@@ -100,6 +100,7 @@
     }
   }
   ```
+  set figure(supplement: none)
   html.body({
     chtml.site-wrapper({
       chtml.site-container({

lib/html_utils.typ

@@ -1,4 +1,5 @@
 #import "./custom_html.typ": code-block
+#import "./figures.typ": show-rule-figure
 
 #let css-list = state("css-list", ())
 
@@ -24,5 +25,6 @@
       it
     }
   }
+  show figure: show-rule-figure
   body
 }

lib/theme_colors.typ

@@ -14,6 +14,8 @@
   --color-button-shadow: light-dark(#888, #000);
   --color-button-focus: light-dark(#000, #FFF);
 
-  --color-code-bg: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05))
+  --color-code-bg: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
+
+  --color-bg-overlay: light-dark(rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0.9))
 }
 ```

test_template/main.typ

@@ -135,3 +135,18 @@ thead {
   [34], [605106], [605098], [26], [18],
   table.hline(),
 )
+
+#figure(
+  image(
+    "./smol-platypus.png",
+    alt: "A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.",
+  ),
+  caption: [A Platypus!]
+)
+#figure(
+  image(
+    "./big-platypus.png",
+    alt: "A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.",
+  ),
+  caption: [A Big Platypus!]
+)