Merge pull request #101 from kbvernon/callout-margin

chore: add margin to callouts

Author: JosiahParry

templates/shortcodes/callout.html

@@ -3,27 +3,30 @@
 {%- set collapse = collapse | default(value=false) -%}
 {%- set dialog = dialog | default(value=false) -%}
 
-{%- if type == "tip" -%}{% set icon = "lucide--lightbulb" %}
-{%- elif type == "warning" -%}{% set icon = "lucide--triangle-alert" %}
-{%- else -%}{% set icon = "lucide--info" %}
+{%- if type == "tip" -%}
+{% set icon_img = "lucide--lightbulb" %}
+{%- elif type == "warning" -%}
+{% set icon_img = "lucide--triangle-alert" %}
+{%- else -%}
+{% set icon_img = "lucide--info" %}
 {%- endif -%}
-{%- set ico = '<span class="iconify ' ~ icon ~ ' size-5 shrink-0 text-primary"></span>' -%}
+{%- set icon = '<span class="iconify ' ~ icon_img ~ ' size-5 shrink-0 text-primary"></span>' -%}
 
 {%- if dialog -%}
 {%- set id = id | default(value="callout-dialog-" ~ nth) -%}
 <button type="button"
         class="bc my-6 w-full flex items-center gap-3 px-4 py-3 rounded-lg border border-border border-l-4 border-l-primary bg-card text-card-foreground text-left cursor-pointer transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 after:content-['\203A'] after:text-muted-foreground after:text-2xl after:leading-none after:ml-auto"
         onclick="document.getElementById('{{ id }}').showModal()">
-    {{ ico | safe }}
-    <h2 class="font-semibold text-[0.95rem]/[1.4]">
+    {{ icon | safe }}
+    <h2 class="font-semibold text-base">
         {{ label }}
     </h2>
 </button>
 <dialog id="{{ id }}" class="dialog bc" aria-labelledby="{{ id }}-title"
         onclick="if (event.target === this) this.close()">
     <div class="border-l-4 border-l-primary">
         <header class="flex items-center gap-3">
-            {{ ico | safe }}
+            {{ icon | safe }}
             <h2 id="{{ id }}-title">
                 {{ label }}
             </h2>
@@ -38,19 +41,19 @@ <h2 id="{{ id }}-title">
          role="note" aria-label="{{ label }}">
     <summary
              class="list-none cursor-pointer flex items-center gap-3 [&::-webkit-details-marker]:hidden after:content-['\203A'] after:text-muted-foreground after:text-2xl after:leading-none after:ml-auto after:transition-transform group-open:after:rotate-90">
-        {{ ico | safe }}
-        <h2 class="font-semibold text-[0.95rem]/[1.4]">{{ label }}</h2>
+        {{ icon | safe }}
+        <h2 class="font-semibold text-base">{{ label }}</h2>
     </summary>
     <section class="mt-2 pl-8 text-muted-foreground text-[0.925rem] [&>:first-child]:mt-0 [&>:last-child]:mb-0">
         {{ body | markdown(inline=true) | safe }}
     </section>
 </details>
 {%- else -%}
-<div class="bc px-4 py-3 rounded-lg border border-border border-l-4 border-l-primary bg-card text-card-foreground"
+<div class="bc px-4 py-3 my-6 border border-border border-l-4 border-l-primary bg-card text-card-foreground"
      role="note" aria-label="{{ label }}">
     <header class="flex items-center gap-3">
-        {{ ico | safe }}
-        <h2 class="font-semibold text-[0.95rem]/[1.4]">
+        {{ icon | safe }}
+        <h2 class="font-semibold text-base">
             {{ label }}
         </h2>
     </header>