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);