chore: enhance Callout visually

one-aalam · Dec 8, 2023 · 2ca4888 · 2ca4888 · vercel · Dec 8, 2023
1 parent 807bfa0
commit 2ca4888
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/components/mdoc/Callout.astro b/src/components/mdoc/Callout.astro
@@ -22,10 +22,10 @@ const COLOR_MAP: Record<CalloutType, string> = {
 
 const { title, type = 'note' } = Astro.props
 ---
-<div class="callout flex gap-2 w-full bg-gray-50 my-1 px-5 py-2 rounded-sm shadow-sm">
-    <Icon class={`w-8 h-8 inline-block ${COLOR_MAP[type]}`} pack="mdi" name={ICON_MAP[type]} />
+<div class="callout flex gap-2 w-full bg-gray-200/75 dark:bg-gray-600/75 p-4 rounded-sm shadow-sm">
+    <Icon class={`w-6 h-6 inline-block ${COLOR_MAP[type]}`} pack="mdi" name={ICON_MAP[type]} />
     <div class="copy flex flex-col">
-        <h3 class={`title m-0 ${COLOR_MAP[type]}`}>{title}</h3>
+        <h4 class={`title m-0 ${COLOR_MAP[type]}`}>{title}</h4>
         <slot/>
     </div>
 </div>
diff --git a/src/content/blog/markdoc-integration.mdoc b/src/content/blog/markdoc-integration.mdoc
@@ -49,19 +49,24 @@ or create custom components.
 Astro Ink ships with the following tags with more coming soon...
 
 ### Callout
-{% callout type="note" title="Note" %}
-    lorem ipsum doler sit amet
-{% /callout %}
 
-{% callout type="error" title="Error" %}
+#### Note 
+{% callout type="note" title="title goes here..." %}
+    lorem ipsum doler sit amet lorem  
+{% /callout %}  
+
+#### Error 
+{% callout type="error" title="title goes here..." %}
     lorem ipsum doler sit amet
 {% /callout %}
 
-{% callout type="warning" title="Warning" %}
+#### Warning 
+{% callout type="warning" title="title goes here..." %}
     lorem ipsum doler sit amet
 {% /callout %}
 
-{% callout type="check" title="Check" %}
+#### Check 
+{% callout type="check" title="title goes here..." %}
     lorem ipsum doler sit amet
 {% /callout %}