From cb77f341da75feb8e3176e003719849df9b4bc42 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Fri, 3 Apr 2026 00:03:05 +0200
Subject: [PATCH] colour of callout now depends on type

---
 src/lib/components/callout.svelte | 28 +++++++++++++++++++++++-----
 src/routes/+layout.svelte         |  3 +++
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/callout.svelte b/src/lib/components/callout.svelte
index 21dba98..dc165e3 100644
--- a/src/lib/components/callout.svelte
+++ b/src/lib/components/callout.svelte
@@ -10,8 +10,7 @@
     } = $props();
 </script>
 
-
-<div class="callout-container">
+{#snippet calloutContent()}
     <p class="callout-symbol">
         {#if type == "quote"}
             »
@@ -28,17 +27,36 @@
             {/if}
         {/each}
     </div>
-</div>
+{/snippet}
+
+{#if type == "quote"}
+    <div class="callout-container callout-quote">
+        {@render calloutContent()}
+    </div>
+{:else}
+    <div class="callout-container callout-warn">
+        {@render calloutContent()}
+    </div>
+{/if}
 
 <style>
+    .callout-warn {
+        --color-callout: var(--color-callout-warn);
+    }
+
+    .callout-quote {
+        --color-callout: var(--color-callout-quote);
+    }
+
     .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;
         align-items: center;
-        border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
-        background-color: var(--color-background-highlight-alt);
+        border: var(--border-style) var(--border-dash-size) var(--color-callout);
+        background-color: var(--color-callout-background);
         backdrop-filter: blur(var(--blur-radius-background));
         border-radius: var(--border-radius);
         padding: 16px;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f608d7b..a51db47 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -120,6 +120,9 @@
             --color-link-visited: #ffd7f0;
             --color-link-hovered: #ffdad5;
 
+            --color-callout-warn: var(--color-highlight-alt);
+            --color-callout-quote: #354CBE;
+
             /* blurs */
             --blur-radius-background: 6px;