Callout: Add feather support to mf loud callouts

Author: nginx-jack

assets/css/v2/style.css

@@ -1083,6 +1083,10 @@ blockquote {
     /* Removes negative margins from multi-line codeblocks */
     margin: 0;
   }
+
+  .callout-content {
+    margin: 0;
+  }
 }
 
 blockquote.note {
@@ -1134,14 +1138,16 @@ li > blockquote {
 }
 
 blockquote.call-out {
-  padding: 0.5rem;
+  --padding: 0.75rem;
+  padding: var(--padding);
 
   .call-out-type {
     display: block;
-    padding: 0.25rem 0.5rem;
-    margin: -0.5rem 0 0.5rem -0.5rem;
-    width: calc(100% + 1rem);
     font-weight: 500;
+    margin: calc(-1 * var(--padding)) calc(-1 * var(--padding)) var(--padding)
+      calc(-1 * var(--padding));
+
+    padding: 0.25rem var(--padding);
   }
 
   br {
@@ -1157,6 +1163,9 @@ blockquote.caution {
     background-color: oklch(var(--color-callout-caution-shadow));
     border-bottom: 1px solid oklch(var(--color-callout-caution-primary));
   }
+  .call-out-type .feather {
+    color: oklch(var(--color-callout-caution-primary));
+  }
 }
 
 blockquote.warning {
@@ -1167,6 +1176,9 @@ blockquote.warning {
     background-color: oklch(var(--color-callout-warning-shadow));
     border-bottom: 1px solid oklch(var(--color-callout-warning-primary));
   }
+  .call-out-type .feather {
+    color: oklch(var(--color-callout-warning-primary));
+  }
 }
 
 blockquote.important {

layouts/partials/callout.html

@@ -35,18 +35,24 @@
 
 {{/*  Render a different block, if "loud" callouts are used  */}}
 {{ $specialTitles := slice "Caution" "Warning" "Deprecated" "Important" }}
+{{ $specialTitleIcons := dict
+  "Caution"    "alert-triangle"
+  "Warning"    "alert-octagon"
+  "Deprecated" "alert-octagon"
+  "Important"  "arrow-right-circle"
+}}
+{{ $icon := index $specialTitleIcons $title | default "" }}
+
 {{ $isSpecialTitle := in $specialTitles $title }}
 {{ if $isSpecialTitle }}
   {{/*  Loud callouts  */}}
   <blockquote class="{{ $class }}" data-mf="true" style="display: none;">
     <div>
-      {{ with $icon }}
-        <i class="{{ . }}"></i>
-      {{ end }}
       <div class="call-out-type">
+        {{ partial "feather" (dict "context" . "icon" $icon) .}}
        {{ $title }}
       </div>
-      <div class="special-content">
+      <div class="callout-content">
         {{ .content | markdownify }}
       </div>
     </div>
@@ -59,11 +65,13 @@
 {{ $cleanTitle := strings.TrimSuffix ":" $title}}
 
 <blockquote class="{{ $class }} note" data-mf="true" style="display: none;" data-title="{{ $cleanTitle }}">
-  <div>
+  <div class="callout-content">
     {{ with $icon }}
       <i class="{{ . }}"></i>
     {{ end }}
+    <div class="callout-content">
     {{ .content | markdownify }}
+    </div>
   </div>
 </blockquote>
 

layouts/shortcodes/call-out.html

@@ -6,7 +6,7 @@
 {{</call-out>}}
 
 Backwards compatibility usage:
-{{<call-out "warning" "Custom title""fa fa-check-circle" "true">}}
+{{<call-out "warning" "Custom title" "fa fa-check-circle" "true">}}
 This callout uses the icon check-circle. **This should be an inline callout.**
 {{</call-out>}}