added callout component

src/lib/components/callout.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    let {
+        content,
+        type,
+    }: {
+        content: string[];
+        
+        // valid values: warn, quote. defaults to warn
+        type: string;
+    } = $props();
+</script>
+
+
+<div class="callout-container">
+    <p class="callout-symbol">
+        {#if type == "quote"}
+            »
+        {:else}
+            !
+        {/if}
+    </p>
+    <div class="callout-text-container">
+        {#each content as p}
+            {#if type == "quote"}
+                <p class="callout-quote-text">{p}</p>
+            {:else}
+                <p>{p}</p>
+            {/if}
+        {/each}
+    </div>
+</div>
+
+<style>
+    .callout-container {
+        display: flex;
+        flex-direction: row;
+        max-width: 800px;
+        margin: 0 auto;
+        align-items: center;
+        border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+        background-color: var(--color-background-highlight-alt);
+        backdrop-filter: blur(var(--blur-radius-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; */
+    }
+
+    p {
+        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>