SubtitledImage now respects image width; ImageSubtitle now centers its content

src/lib/components/callout.svelte

@@ -1,100 +0,0 @@
-<script lang="ts">
-    let {
-        content,
-        type,
-    }: {
-        content: string[];
-        
-        // valid values: warn, quote, info. defaults to warn
-        type: string;
-    } = $props();
-</script>
-
-{#snippet calloutContent()}
-    <p class="callout-symbol">
-        {#if type == "quote"}
-            »
-        {:else if type == "info"}
-            i
-        {:else}
-            !
-        {/if}
-    </p>
-    <div class="callout-text-container">
-        {#each content as p}
-            {#if type == "quote"}
-                <p class="callout-quote-text">"{@html p}"</p>
-            {:else}
-                <p class="callout-text">{@html p}</p>
-            {/if}
-        {/each}
-    </div>
-{/snippet}
-
-{#if type == "quote"}
-    <div class="callout-container blurred-background callout-quote">
-        {@render calloutContent()}
-    </div>
-{:else if type == "info"}
-    <div class="callout-container blurred-background callout-info">
-        {@render calloutContent()}
-    </div>
-{:else}
-    <div class="callout-container blurred-background callout-warn">
-        {@render calloutContent()}
-    </div>
-{/if}
-
-<style>
-    .callout-warn {
-        --color-callout: var(--color-callout-warn);
-    }
-
-    .callout-quote {
-        --color-callout: var(--color-callout-quote);
-    }
-
-    .callout-info {
-        --color-callout: var(--color-callout-info);
-    }
-
-    .callout-container {
-        --color-callout-background: color-mix(in srgb, var(--color-callout) 30%, transparent);
-        display: flex;
-        flex-direction: row;
-        max-width: 800px;
-        margin: 12px auto 0;
-        align-items: center;
-        border: var(--border-style) var(--border-dash-size) var(--color-callout);
-        background-color: var(--color-callout-background);
-        border-radius: var(--border-radius);
-        padding: 16px;
-        gap: 16px;
-        box-sizing: border-box;
-    }
-
-    .callout-symbol {
-        font-family: var(--font-mono);
-        font-size: 4.0rem;
-        font-weight: 700;
-        /* font-style: italic; */
-    }
-
-    :global {
-        .callout-text, .callout-text-container * {
-            margin: 0;
-            font-size: 1.0rem;
-            line-height: 1.4rem;
-        }
-}
-
-    .callout-quote-text {
-        font-style: italic;
-    }
-
-    .callout-text-container {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-    }
-</style>

src/lib/components/outlined-button.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-    let {
-        text,
-        onClick,
-        fullWidth,
-    }: {
-        text: string;
-        onClick: () => undefined;
-        fullWidth?: boolean;
-    } = $props();
-</script>
-
-<button class="outlined-button {fullWidth ? "outlined-button-fullwidth" : ""}" onclick={onClick}>{text}</button>   
-
-<style>
-    .outlined-button {
-        font-family: var(--font-mono);
-        font-size: var(--font-size-mono);
-        padding: 8px;
-        border: var(--border-style) var(--border-dash-size) var(--color-highlight);
-        color: var(--color-highlight);
-        font-weight: 700;
-        cursor: pointer;
-        transition: background-color var(--duration-animation) var(--anim-curve);
-    }
-
-    .outlined-button:hover {
-        background-color: var(--color-background-highlight);
-    }
-
-    .outlined-button-fullwidth {
-        width: 100%;
-    }
-</style>

src/lib/components/reaction-quote.svelte

@@ -27,7 +27,7 @@
 <div class="reaction-container blurred-background">
     <div class="reaction-content-container">
         <img src="/reactions/{reaction}.webp" alt={getReactionAlt(reaction)}>
-        <p>{text}</p>
+        <p>{@html text}</p>
     </div>
 </div>
 

src/lib/components/subtitled-image.svelte

@@ -69,8 +69,8 @@
     }
 
     .subtitled-img-container-centred {
-        width: var(--media-width);
-        /* width: fit-content; */
+        max-width: var(--media-width);
+        width: fit-content;
         margin-left: auto;
         margin-right: auto;
     }
@@ -80,7 +80,9 @@
     }
 
     .subtitled-img {
-        width: 100%;
+        max-width: 100%;
+        /* margin: 0; */
+        width: fit-content;
         box-sizing: border-box;
         padding: 8px;
         overflow: hidden;

src/lib/image-subtitle.svelte

@@ -15,7 +15,8 @@
     .image-subtitle-container {
         display: flex;
         flex-direction: row;
-        width: var(--media-width);
+        justify-content: center;
+        max-width: var(--media-width);
         margin: 0 auto;
     }
 

src/lib/lists/blog-gallery.svelte

@@ -19,7 +19,7 @@
                 <p class="entry-date">
                     ::&nbsp;{post.post.date}
                     {#if post.post.dateUpdated}
-                        // {post.post.dateUpdated}
+                        //&nbsp;{post.post.dateUpdated}
                     {/if}
                 </p>
                 <p class="entry-description">{post.post.description}</p>