Images as figures

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

packages/website/src/lib/Nav.svelte

@@ -59,6 +59,7 @@
     }
     .navbar-logo {
         width: 3rem;
+        height: 100%;
     }
     .navbar-links {
         width: 100%;

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

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