Skip to content

Commit ad559df

Browse files
committed
Callout: Add feather support to mf loud callouts
1 parent 267aa23 commit ad559df

File tree

3 files changed

+30
-10
lines changed

3 files changed

+30
-10
lines changed

assets/css/v2/style.css

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1083,6 +1083,10 @@ blockquote {
10831083
/* Removes negative margins from multi-line codeblocks */
10841084
margin: 0;
10851085
}
1086+
1087+
.callout-content {
1088+
margin: 0;
1089+
}
10861090
}
10871091

10881092
blockquote.note {
@@ -1134,14 +1138,16 @@ li > blockquote {
11341138
}
11351139

11361140
blockquote.call-out {
1137-
padding: 0.5rem;
1141+
--padding: 0.75rem;
1142+
padding: var(--padding);
11381143

11391144
.call-out-type {
11401145
display: block;
1141-
padding: 0.25rem 0.5rem;
1142-
margin: -0.5rem 0 0.5rem -0.5rem;
1143-
width: calc(100% + 1rem);
11441146
font-weight: 500;
1147+
margin: calc(-1 * var(--padding)) calc(-1 * var(--padding)) var(--padding)
1148+
calc(-1 * var(--padding));
1149+
1150+
padding: 0.25rem var(--padding);
11451151
}
11461152

11471153
br {
@@ -1157,6 +1163,9 @@ blockquote.caution {
11571163
background-color: oklch(var(--color-callout-caution-shadow));
11581164
border-bottom: 1px solid oklch(var(--color-callout-caution-primary));
11591165
}
1166+
.call-out-type .feather {
1167+
color: oklch(var(--color-callout-caution-primary));
1168+
}
11601169
}
11611170

11621171
blockquote.warning {
@@ -1167,6 +1176,9 @@ blockquote.warning {
11671176
background-color: oklch(var(--color-callout-warning-shadow));
11681177
border-bottom: 1px solid oklch(var(--color-callout-warning-primary));
11691178
}
1179+
.call-out-type .feather {
1180+
color: oklch(var(--color-callout-warning-primary));
1181+
}
11701182
}
11711183

11721184
blockquote.important {

layouts/partials/callout.html

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,18 +35,24 @@
3535

3636
{{/* Render a different block, if "loud" callouts are used */}}
3737
{{ $specialTitles := slice "Caution" "Warning" "Deprecated" "Important" }}
38+
{{ $specialTitleIcons := dict
39+
"Caution" "alert-triangle"
40+
"Warning" "alert-octagon"
41+
"Deprecated" "alert-octagon"
42+
"Important" "arrow-right-circle"
43+
}}
44+
{{ $icon := index $specialTitleIcons $title | default "" }}
45+
3846
{{ $isSpecialTitle := in $specialTitles $title }}
3947
{{ if $isSpecialTitle }}
4048
{{/* Loud callouts */}}
4149
<blockquote class="{{ $class }}" data-mf="true" style="display: none;">
4250
<div>
43-
{{ with $icon }}
44-
<i class="{{ . }}"></i>
45-
{{ end }}
4651
<div class="call-out-type">
52+
{{ partial "feather" (dict "context" . "icon" $icon) .}}
4753
{{ $title }}
4854
</div>
49-
<div class="special-content">
55+
<div class="callout-content">
5056
{{ .content | markdownify }}
5157
</div>
5258
</div>
@@ -59,11 +65,13 @@
5965
{{ $cleanTitle := strings.TrimSuffix ":" $title}}
6066

6167
<blockquote class="{{ $class }} note" data-mf="true" style="display: none;" data-title="{{ $cleanTitle }}">
62-
<div>
68+
<div class="callout-content">
6369
{{ with $icon }}
6470
<i class="{{ . }}"></i>
6571
{{ end }}
72+
<div class="callout-content">
6673
{{ .content | markdownify }}
74+
</div>
6775
</div>
6876
</blockquote>
6977

layouts/shortcodes/call-out.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{{</call-out>}}
77

88
Backwards compatibility usage:
9-
{{<call-out "warning" "Custom title""fa fa-check-circle" "true">}}
9+
{{<call-out "warning" "Custom title" "fa fa-check-circle" "true">}}
1010
This callout uses the icon check-circle. **This should be an inline callout.**
1111
{{</call-out>}}
1212

0 commit comments

Comments
 (0)