style image in figure

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
+}