updated callout in blog post 2026/0317

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">
+<script lang="ts">
-    <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>
+    import Callout from "$lib/components/callout.svelte";
+</script>
 
-    <p>Expect a Go API.</p>
+<Callout
-</div>
+    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!*