From 1930ff408d372e3cff93b35b8d39f8dd969b8ce0 Mon Sep 17 00:00:00 2001
From: Jade Ellis <jade@ellis.link>
Date: Tue, 16 Jul 2024 20:43:43 +0100
Subject: [PATCH] Images as figures

---
 packages/website/mdsvex.config.js             |  6 ++---
 packages/website/src/lib/Nav.svelte           |  1 +
 .../website/src/lib/htmlComponents/img.svelte | 27 +++++++++++++++++--
 packages/website/src/lib/styles.css           |  4 +--
 4 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/packages/website/mdsvex.config.js b/packages/website/mdsvex.config.js
index c8ba9072..bcadeaf1 100644
--- a/packages/website/mdsvex.config.js
+++ b/packages/website/mdsvex.config.js
@@ -305,9 +305,9 @@ const config = {
         dashes: "oldschool",
     },
 
-    // layout: {
-    //     _: "./src/lib/mdlayouts/default.svelte"
-    // },
+    layout: {
+        _: "./src/lib/mdlayouts/default.svelte"
+    },
 
     highlight: {
         // @ts-ignore
diff --git a/packages/website/src/lib/Nav.svelte b/packages/website/src/lib/Nav.svelte
index dff6425f..f6205a77 100644
--- a/packages/website/src/lib/Nav.svelte
+++ b/packages/website/src/lib/Nav.svelte
@@ -59,6 +59,7 @@
     }
     .navbar-logo {
         width: 3rem;
+        height: 100%;
     }
     .navbar-links {
         width: 100%;
diff --git a/packages/website/src/lib/htmlComponents/img.svelte b/packages/website/src/lib/htmlComponents/img.svelte
index e49d28d7..4f612fee 100644
--- a/packages/website/src/lib/htmlComponents/img.svelte
+++ b/packages/website/src/lib/htmlComponents/img.svelte
@@ -1,8 +1,31 @@
 <script>
     export let src;
     export let alt;
+    let className = ""
+    export { className as class };
     // console.log(src)
     // import _PastedImage20240716123726Png from "./Pasted%20image%2020240716123726.png?meta";
+</script>
 
-  </script>
-  <img src={src} alt={alt}/>
\ No newline at end of file
+<figure class={className}>
+    <img {src} {alt} />
+    {#if alt}
+        <figcaption>{alt}</figcaption>
+    {/if}
+</figure>
+
+<style>
+    img {
+        max-height: 60vh;
+        display: block;
+        margin-inline: auto;
+    }
+    figure {
+        text-align: center;
+    }
+    figcaption {
+
+        font-size: 0.95em;
+        margin-block: calc(var(--spacing)/2);
+    }
+</style>
diff --git a/packages/website/src/lib/styles.css b/packages/website/src/lib/styles.css
index 7b988783..53cef019 100644
--- a/packages/website/src/lib/styles.css
+++ b/packages/website/src/lib/styles.css
@@ -83,8 +83,8 @@ body {
 iframe,
 img,
 svg {
-    width: 100%;
-    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
     display: block;
 }