the home site for me: also iteration 3 or 4 of my site
feat: add callouts
+125
+83
sass/css/suCSS.css
+83
sass/css/suCSS.css
···
533
533
font-style: italic;
534
534
}
535
535
536
+
/* Callout styles */
537
+
.callout {
538
+
margin: 1.5rem 0;
539
+
padding: 1rem;
540
+
border-left: 0.25rem solid;
541
+
border-radius: 0.25rem;
542
+
background-color: var(--bg-light);
543
+
}
544
+
545
+
.callout-title {
546
+
display: flex;
547
+
align-items: center;
548
+
gap: 0.5rem;
549
+
margin-bottom: 0.5rem;
550
+
font-size: 1rem;
551
+
}
552
+
553
+
.callout-icon {
554
+
display: inline-flex;
555
+
width: 1.25rem;
556
+
height: 1.25rem;
557
+
flex-shrink: 0;
558
+
}
559
+
560
+
.callout-icon svg {
561
+
width: 100%;
562
+
height: 100%;
563
+
}
564
+
565
+
.callout-content {
566
+
font-style: normal;
567
+
color: var(--text);
568
+
}
569
+
570
+
.callout-content p:first-child {
571
+
margin-top: 0;
572
+
}
573
+
574
+
.callout-content p:last-child {
575
+
margin-bottom: 0;
576
+
}
577
+
578
+
.callout-blue {
579
+
border-color: #8aadf4;
580
+
}
581
+
582
+
.callout-blue .callout-icon {
583
+
color: #8aadf4;
584
+
}
585
+
586
+
.callout-yellow {
587
+
border-color: #eed49f;
588
+
}
589
+
590
+
.callout-yellow .callout-icon {
591
+
color: #eed49f;
592
+
}
593
+
594
+
.callout-red {
595
+
border-color: #ed8796;
596
+
}
597
+
598
+
.callout-red .callout-icon {
599
+
color: #ed8796;
600
+
}
601
+
602
+
.callout-green {
603
+
border-color: #a6da95;
604
+
}
605
+
606
+
.callout-green .callout-icon {
607
+
color: #a6da95;
608
+
}
609
+
610
+
.callout-gray {
611
+
border-color: #6e738d;
612
+
}
613
+
614
+
.callout-gray .callout-icon {
615
+
color: #6e738d;
616
+
}
617
+
618
+
536
619
p:has(cite) {
537
620
text-align: right;
538
621
font-size: 0.875rem;
+42
templates/shortcodes/callout.html
+42
templates/shortcodes/callout.html
···
1
+
{%- set type = type | default(value="info") | lower -%}
2
+
{%- set title = title | default(value="") -%}
3
+
4
+
{%- if type == "info" -%}
5
+
{%- set icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>' -%}
6
+
{%- set color = "blue" -%}
7
+
{%- set default_title = "Info" -%}
8
+
{%- elif type == "warning" or type == "warn" -%}
9
+
{%- set icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>' -%}
10
+
{%- set color = "yellow" -%}
11
+
{%- set default_title = "Warning" -%}
12
+
{%- elif type == "danger" or type == "error" -%}
13
+
{%- set icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>' -%}
14
+
{%- set color = "red" -%}
15
+
{%- set default_title = "Danger" -%}
16
+
{%- elif type == "tip" or type == "hint" -%}
17
+
{%- set icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></svg>' -%}
18
+
{%- set color = "green" -%}
19
+
{%- set default_title = "Tip" -%}
20
+
{%- elif type == "note" -%}
21
+
{%- set icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"></path></svg>' -%}
22
+
{%- set color = "gray" -%}
23
+
{%- set default_title = "Note" -%}
24
+
{%- else -%}
25
+
{%- set icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>' -%}
26
+
{%- set color = "blue" -%}
27
+
{%- set default_title = "Info" -%}
28
+
{%- endif -%}
29
+
30
+
{%- if title == "" -%}
31
+
{%- set title = default_title -%}
32
+
{%- endif -%}
33
+
34
+
<div class="callout callout-{{ color }}">
35
+
<div class="callout-title">
36
+
<span class="callout-icon">{{ icon | safe }}</span>
37
+
<strong>{{ title }}</strong>
38
+
</div>
39
+
<div class="callout-content">
40
+
{{ body | markdown | safe }}
41
+
</div>
42
+
</div>