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);
+        max-width: var(--media-width);
-        /* width: fit-content; */
+        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>

src/routes/+layout.svelte

@@ -120,10 +120,6 @@
             --color-link-visited: #ffd7f0;
             --color-link-hovered: #ffdad5;
 
-            --color-callout-warn: var(--color-highlight-alt);
-            --color-callout-quote: #354CBE;
-            --color-callout-info: #AC7F31;
-
             /* blurs */
             --blur-radius-background: 6px;
 
@@ -310,7 +306,7 @@
 
         video {
             max-width: var(--media-width);
-            height: var(--media-height);
+            /* height: var(--media-height); */
             margin-top: 12px;
             margin-bottom: 12px;
         }

src/routes/blog/2026/0317.md

@@ -1,13 +1,10 @@
 <script lang="ts">
-    import Callout from "$lib/components/callout.svelte";
+    import ReactionQuote from "$lib/components/reaction-quote.svelte";
 </script>
 
-<Callout
+<ReactionQuote
-    type="info"
+    reaction="warn"
-    content={[
+    text="<b>Note</b>: as I'm constantly learning new things, this blog post is sort of outdated now. The information is still correct, but it feels inefficient and leads into a dead-end. I dislike this, as I wanted to write a guide that provides an expandable base. Therefore, I'll likely either update or replace this article and trim it down to focus on the important bits. Expect a Go API."
-        "<b>Note</b>: as I'm constantly learning new things, this blog post is sort of outdated now. The information is still correct, but it feels inefficient and leads into a dead-end. I dislike this, as I wanted to write a guide that provides an expandable base. Therefore, I'll likely either update or replace this article and trim it down to focus on the important bits.", 
-        "Expect a Go API.", 
-    ]}
     />
 
 *Hey!*

src/routes/blog/2026/0402.md

@@ -1,18 +1,13 @@
 <script lang="ts">
     import SubtitledImage from "$lib/components/subtitled-image.svelte";
-    import Callout from "$lib/components/callout.svelte";
     import ReactionQuote from "$lib/components/reaction-quote.svelte";
 </script>
 
 fuck i'm so sick of this shit. i need to incoherently ramble about this
 
-<Callout
+<ReactionQuote
-    type="info"
+    reaction="pointing"
-    content={[
+    text="hey. if you read the headline and agree with it but don't want to read some mildly infuriating content, skip this post. remember that you're cool and valid, and enjoy the rest of your day. if you are pro-AI, i also recommend you don't read this post. leave this page. in fact, kindly leave my website and reconsider your decisions. if you decide to stand your ground, do not interact with me."
-        "hey.",
-        "if you read the headline and agree with it but don't want to read some mildly infuriating content, skip this post. remember that you're cool and valid, and enjoy the rest of your day.",
-        "if you are pro-AI, i also recommend you don't read this post. leave this page. in fact, kindly leave my website and reconsider your decisions. if you decide to stand your ground, do not interact with me.",    
-    ]}
     />
 
 
@@ -52,11 +47,9 @@ I may delete my Bluesky account over this. It would be a bit of a shame because
 
 ## horny men and conservatives are pathetic
 
-<Callout
+<ReactionQuote
-    type="warn"
+    reaction="warn"
-    content={[
+    text="<b>content warning</b>: abuse of women. also, discussion of conservative behaviour. <a href='#protecting-my-server-from-ai-using--ai-'>click here to skip</a>"
-        "<b>content warning</b>: abuse of women. also, discussion of conservative behaviour. <a href='#protecting-my-server-from-ai-using--ai-'>click here to skip</a>.", 
-    ]}
     />
 
 In Germany, the name Collien Fernandes has been making its rounds [in the media](https://www.tagesschau.de/inland/gesellschaft/deepfakes-ki-strafrecht-collien-fernandes-christian-ulmen-100.html). It's about Fernandes' ex spreading pornographic material of her on the internet. This has led to a discussion about deepfake pornography on the internet.