projects status now end-aligned

src/lib/banner2.svelte

@@ -27,9 +27,11 @@
 	<div class="title-container">
         <div class="title-text-container">
             <h1 class="title">{title}</h1>
+
             {#if subtitle}
                 <p class="subtitle">[ {subtitle} ]</p>
             {/if}
+
             {#if tags.length}
                 <div class="tag-container">
                     {#each tags as tag}
@@ -43,9 +45,11 @@
                 {#if dateIndeterminate}
                     <p class="date">:: {dateIndeterminate}</p>
                 {/if}
+
                 {#if date}
                     <p class="date">posted :: {date}</p>
                 {/if}
+
                 {#if dateUpdated}
                     <p class="date">last updated :: {dateUpdated}</p>
                 {/if}
@@ -57,13 +61,10 @@
 <div class="container">
     {#if banner && banner !== ""}
         <a class="banner-container" href={banner}>
-            {#if pixelated}
-                <img class="banner pixelated-img" src={banner} alt={bannerAlt}>
-            {:else}
-                <img class="banner" src={banner} alt={bannerAlt}>
-            {/if}
+            <img class="banner {pixelated ? "pixelated-img" : ""}" src={banner} alt={bannerAlt}>
         </a>
     {/if}
+    
     {@render titles({title, subtitle, date})}
     <hr>
 </div>

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,38 +0,0 @@
-<script lang="ts">
-    let {
-        text,
-        onClick,
-        fullWidth,
-    }: {
-        text: string;
-        onClick: () => undefined;
-        fullWidth?: boolean;
-    } = $props();
-</script>
-
-{#if fullWidth}
-    <button class="outlined-button outlined-button-fullwidth" onclick={onClick}>{text}</button>   
-{:else}
-    <button class="outlined-button" onclick={onClick}>{text}</button>
-{/if}
-
-<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/ring.svelte

@@ -34,18 +34,24 @@
 <div class="webring-container">
     <div class="webring-row">
         <span>〔</span>
+        
         <a href="{ringLink}">{highlightEmojiLeft} {ringName} {highlightEmojiRight ?? highlightEmojiLeft}</a>
+
         <span>〕</span>
     </div>
     <div class="webring-row">
         <span>〔</span>
+
         <a href="{prevLink}">{prevSymbol} prev</a>
+
         {#if randLink}
             <a href="{randLink}">rand</a>
         {/if}
+
         {#if listLink}
             <a href="{listLink}">list</a>
         {/if}
+
         <a href="{nextLink}">next {nextSymbol}</a>
         <span>〕</span>
     </div>

src/lib/components/scroll-top-button.svelte

@@ -1,34 +1,44 @@
 <script lang="ts">
     let y: number;
-
-    // TODO change out for <a href="#top"/>
-    function scrollToTop() {
-        document.documentElement.scrollTop = 0;
-    }
 </script>
 
 <svelte:window bind:scrollY={y} />
 
-{#if y > 2400}
-    <button class="scroll-top-button blurred-background" onclick={scrollToTop}>↑</button>
-{/if}
+<a
+    href="#top"
+    class="
+        scroll-top-button
+        blurred-background
+        {y > 2400 ? "scroll-top-button-visible" : ""}
+    "
+>↑</a>
 
 <style>
     .scroll-top-button {
         position: fixed;
         bottom: 24px;
         right: 48px;
-        font-size: 1.4rem;
+        font-size: 1.6rem;
+        font-weight: 700;
         cursor: pointer;
-        border: var(--border-style) var(--border-dash-size) var(--color-highlight);
-        color: var(--color-highlight);
-        background-color: var(--color-background-highlight);
-        padding: 12px;
-        transition: background-color var(--duration-animation) var(--anim-curve);
+        border-radius: var(--border-radius);
+        border-top: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+        border-bottom: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+        color: var(--color-text);
+        background-color: var(--color-background-highlight-alt);
+        padding: 14px 22px;
+        transition: background-color var(--duration-animation) var(--anim-curve),
+                    opacity var(--duration-animation) var(--anim-curve);
         z-index: 10;
+        opacity: 0;
+        text-decoration: none;
     }
 
     .scroll-top-button:hover {
-        background-color: var(--color-background-highlight-hover);
+        background-color: var(--color-background-highlight-hover-alt);
+    }
+
+    .scroll-top-button-visible {
+        opacity: 1;
     }
 </style>

src/lib/components/subtitled-image.svelte

@@ -21,15 +21,31 @@
     } = $props();
 </script>
 
-{#snippet subtitledImageContent()}
+<a class="
+    subtitled-img-container
+    blurred-background
+    {smaller ? "subtitled-img-reduced-size" : ""}
+    {alignment == "left"
+        ? "subtitled-img-container-left"
+        : alignment == "right"
+            ? "subtitled-img-container-right"
+            : "subtitled-img-container-centred"
+    }
+    "
+    href="{image}"
+    >
+
     {#if video}
         <Video src={image} />
     {:else}
-        {#if pixelated}
-            <img class="subtitled-img pixelated-img" src="{image}" alt="{altText}">
-        {:else}
-            <img class="subtitled-img" src="{image}" alt="{altText}">
-        {/if}
+        <img class="
+            subtitled-img
+            {pixelated ? "pixelated-img" : ""}
+            {subtitle ? "subtitled-img-sub" : "subtitled-img-no-sub"}
+        "
+        src="{image}"
+        alt="{altText}"
+        >
     {/if}
 
     {#if subtitle}
@@ -39,40 +55,7 @@
             <p class="subtitled-img-text">{subtitle}</p>
         </div>
     {/if}
-{/snippet}
-
-<!-- this structure is ugly as fuck. there must be a better way of doing this -->
-{#if alignment && alignment == "left"}
-    {#if smaller}
-        <a class="subtitled-img-container blurred-background subtitled-img-container-left subtitled-img-reduced-size" href="{image}">
-            {@render subtitledImageContent()}
 </a>
-    {:else}
-        <a class="subtitled-img-container blurred-background subtitled-img-container-left" href="{image}">
-            {@render subtitledImageContent()}
-        </a>
-    {/if}
-{:else if alignment && alignment == "right"}
-    {#if smaller}
-        <a class="subtitled-img-container blurred-background subtitled-img-container-right subtitled-img-reduced-size" href="{image}">
-            {@render subtitledImageContent()}
-        </a>
-    {:else}
-        <a class="subtitled-img-container subtitled-img-container-right" href="{image}">
-            {@render subtitledImageContent()}
-        </a>
-    {/if}
-{:else}
-    {#if smaller}
-        <a class="subtitled-img-container blurred-background subtitled-img-container-centred subtitled-img-reduced-size" href="{image}">
-            {@render subtitledImageContent()}
-        </a>
-    {:else}
-        <a class="subtitled-img-container blurred-background subtitled-img-container-centred" href="{image}">
-            {@render subtitledImageContent()}
-        </a>
-    {/if}
-{/if}
 
 <style>
     .subtitled-img-container {
@@ -82,11 +65,12 @@
         text-decoration: none;
         box-sizing: border-box;
         transition: background-color var(--duration-animation) var(--anim-curve);
+        border-radius: var(--border-radius);
     }
 
     .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;
     }
@@ -96,9 +80,21 @@
     }
 
     .subtitled-img {
-        width: 100%;
+        max-width: 100%;
+        /* margin: 0; */
+        width: fit-content;
         box-sizing: border-box;
         padding: 8px;
+        overflow: hidden;
+    }
+
+    .subtitled-img-sub {
+        border-top-left-radius: var(--border-radius);
+        border-top-right-radius: var(--border-radius);
+    }
+
+    .subtitled-img-no-sub {
+        border-radius: var(--border-radius);
     }
 
     hr {

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/+page.svelte

@@ -36,11 +36,7 @@
         <p class="tag-filter-header"># filter posts by tag:</p>
         <div class="tag-filter-container">
             {#each Object.values(BlogPostTag) as tag}
-                {#if tag == filter}
-                    <button class="post-tag tag-filter tag-filter-selected" onclick={() => { setFilter(tag) }}>{tag}</button>
-                {:else}
-                    <button class="post-tag tag-filter" onclick={() => { setFilter(tag) }}>{tag}</button>
-                {/if}
+                <button class="post-tag tag-filter {tag == filter ? "tag-filter-selected" : ""}" onclick={() => { setFilter(tag) }}>{tag}</button>
             {/each}
         </div>
     </div>

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!*

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.

src/routes/projects/+page.svelte

@@ -45,11 +45,7 @@
         <p class="tag-filter-header"># filter projects by category:</p>
         <div class="tag-filter-container">
             {#each Object.values(ProjectCategory) as tag}
-                {#if tag == filter}
-                    <button class="post-tag tag-filter tag-filter-selected" onclick={() => { setFilter(tag) }}>{tag}</button>
-                {:else}
-                    <button class="post-tag tag-filter" onclick={() => { setFilter(tag) }}>{tag}</button>
-                {/if}
+                <button class="post-tag tag-filter {tag == filter ? "tag-filter-selected" : ""}" onclick={() => { setFilter(tag) }}>{tag}</button>
             {/each}
         </div>
     </div>
@@ -179,6 +175,7 @@
 
     .project-status {
         font-style: italic;
+        text-align: end;
     }
 
     .project-category, .project-status {