updated callout in blog post 2026/0317

src/lib/banner2.svelte

@@ -141,5 +141,10 @@
             font-size: 0.9rem;
             line-height: 1.2rem;
         }
+
+        .banner {
+            height: 180px;
+            max-height: 180px;
+        }
     }
 </style>

src/lib/components/callout.svelte

@@ -5,7 +5,7 @@
     }: {
         content: string[];
         
-        // valid values: warn, quote. defaults to warn
+        // valid values: warn, quote, info. defaults to warn
         type: string;
     } = $props();
 </script>
@@ -14,6 +14,8 @@
     <p class="callout-symbol">
         {#if type == "quote"}
             »
+        {:else if type == "info"}
+            i
         {:else}
             !
         {/if}
@@ -33,6 +35,10 @@
     <div class="callout-container callout-quote">
         {@render calloutContent()}
     </div>
+{:else if type == "info"}
+    <div class="callout-container callout-info">
+        {@render calloutContent()}
+    </div>
 {:else}
     <div class="callout-container callout-warn">
         {@render calloutContent()}
@@ -48,12 +54,16 @@
         --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: 0 auto;
+        margin: 12px auto 0;
         align-items: center;
         border: var(--border-style) var(--border-dash-size) var(--color-callout);
         background-color: var(--color-callout-background);

src/routes/+layout.svelte

@@ -122,6 +122,7 @@
 
             --color-callout-warn: var(--color-highlight-alt);
             --color-callout-quote: #354CBE;
+            --color-callout-info: #AC7F31;
 
             /* blurs */
             --blur-radius-background: 6px;

src/routes/blog/2026/0317.md

@@ -1,8 +1,14 @@
-<div class="callout-warning">
-    <p><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.</p>
+<script lang="ts">
+    import Callout from "$lib/components/callout.svelte";
+</script>
 
-    <p>Expect a Go API.</p>
-</div>
+<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.", 
+    ]}
+    />
 
 *Hey!*
 

src/routes/meta/about/+page.svelte

@@ -115,7 +115,7 @@
         bannerAlt="Mirror picture of me, pixelated beyond recognition"
         subtitle="If you'd like to learn more about me and my website"
         date="2025-08-10"
-        dateUpdated="2026-03-26"
+        dateUpdated="2026-04-03"
         pixelated />
 
     <TableOfContents />
@@ -172,8 +172,6 @@
 
     <p>The <a href="https://ratchetandclank.fandom.com/wiki/Ratchet">rat</a> in the bottom right of the screen is property of <a href="https://insomniac.games/">Insomniac Games</a>. Clicking it will bring you good fortune.</p>
 
-    <p>The style of the webring elements is adapted from a template provided by Rainbow Cemetery for the <a href="https://www.rainbowcemetery.com/devring/">Gamedev webring</a>. I adapted it into <a href="https://code.natconf.dev/denizk0461/pages/src/branch/master/src/lib/components/ring.svelte">a Svelte component</a> that allows setting the links, emojis, and arrows more easily.</p>
-
     <h2 id="contact">Contact / Where to find me</h2>
 
     <p>Best to e-mail me if you want to get in touch – it's the only way I'm currently reliably available!</p>
@@ -188,7 +186,7 @@
 
     <p>Have a small FAQ. No one ever asked these questions, but you may find the answer you didn't know you needed.</p>
 
-    <p class="faq-question">What does '0461' stand for?</p>
+    <p class="faq-question">What does '0461' in denizk0461 stand for?</p>
 
     <p>It's a reference to Ratchet & Clank; Clank's designation is <a href="https://ratchetandclank.fandom.com/wiki/Clank">XJ-0461</a>. They started using that designation in <i>Ratchet & Clank: A Crack in Time</i> when Orvus is revealed to be Clank's father and he keeps calling him by his 'real' name.</p>