From f9b73851f3f59b0b1d95912562e10eaf8ed248d0 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Wed, 15 Apr 2026 17:14:43 +0200
Subject: [PATCH] SubtitledImage now respects image width; ImageSubtitle now
 centers its content

---
 src/lib/components/callout.svelte         | 100 ----------------------
 src/lib/components/outlined-button.svelte |  34 --------
 src/lib/components/reaction-quote.svelte  |   2 +-
 src/lib/components/subtitled-image.svelte |   8 +-
 src/lib/image-subtitle.svelte             |   3 +-
 src/lib/lists/blog-gallery.svelte         |   2 +-
 src/routes/+layout.svelte                 |   6 +-
 src/routes/blog/2026/0317.md              |  11 +--
 src/routes/blog/2026/0402.md              |  19 ++--
 9 files changed, 20 insertions(+), 165 deletions(-)
 delete mode 100644 src/lib/components/callout.svelte
 delete mode 100644 src/lib/components/outlined-button.svelte

diff --git a/src/lib/components/callout.svelte b/src/lib/components/callout.svelte
deleted file mode 100644
index e6827d7..0000000
--- a/src/lib/components/callout.svelte
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/lib/components/outlined-button.svelte b/src/lib/components/outlined-button.svelte
deleted file mode 100644
index 9dcbecc..0000000
--- a/src/lib/components/outlined-button.svelte
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/lib/components/reaction-quote.svelte b/src/lib/components/reaction-quote.svelte
index 20ef9c5..4cbb85c 100644
--- a/src/lib/components/reaction-quote.svelte
+++ b/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>
 
diff --git a/src/lib/components/subtitled-image.svelte b/src/lib/components/subtitled-image.svelte
index a98cfc2..c4536ae 100644
--- a/src/lib/components/subtitled-image.svelte
+++ b/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;
diff --git a/src/lib/image-subtitle.svelte b/src/lib/image-subtitle.svelte
index 3443508..94d6a12 100644
--- a/src/lib/image-subtitle.svelte
+++ b/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;
     }
 
diff --git a/src/lib/lists/blog-gallery.svelte b/src/lib/lists/blog-gallery.svelte
index 8e57b1c..03cc2d3 100644
--- a/src/lib/lists/blog-gallery.svelte
+++ b/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>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7ab4357..9a0e252 100644
--- a/src/routes/+layout.svelte
+++ b/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;
         }
diff --git a/src/routes/blog/2026/0317.md b/src/routes/blog/2026/0317.md
index 6562072..b7f66d3 100644
--- a/src/routes/blog/2026/0317.md
+++ b/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
-    type="info"
-    content={[
-        "<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.", 
-    ]}
+<ReactionQuote
+    reaction="warn"
+    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."
     />
 
 *Hey!*
diff --git a/src/routes/blog/2026/0402.md b/src/routes/blog/2026/0402.md
index ab4f9c5..a88f3fe 100644
--- a/src/routes/blog/2026/0402.md
+++ b/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
-    type="info"
-    content={[
-        "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.",    
-    ]}
+<ReactionQuote
+    reaction="pointing"
+    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."
     />
 
 
@@ -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
-    type="warn"
-    content={[
-        "<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>.", 
-    ]}
+<ReactionQuote
+    reaction="warn"
+    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>"
     />
 
 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.