forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
1<div class="callout-card">
2 <div class="callout-container">
3 <div class="callout">
4 <span class="callout-icon">🙊</span>
5 <span class="callout-text">Ape shall never kill ape.</span>
6 </div>
7 </div>
8</div>
9
10<style>
11 .callout-card {
12 border: 1px solid var(--border);
13 width: 100%;
14 height: 12rem;
15 display: flex;
16 align-items: center;
17 justify-content: center;
18 border-radius: 10px;
19 }
20
21 .callout-container {
22 display: flex;
23 justify-content: center;
24 align-items: center;
25 width: 100%;
26 padding: 0 4rem;
27 }
28
29 .callout {
30 background-color: var(--astro-code-background);
31 border: 1px solid var(--code-bg);
32 border-radius: 10px;
33 padding: 1rem;
34 display: flex;
35 align-items: center;
36 gap: 0.5rem;
37 width: 100%;
38 min-width: 13rem;
39 }
40
41 .callout-icon {
42 padding-right: 0.5rem;
43 font-size: 1.25rem;
44 line-height: 1;
45 display: flex;
46 align-items: center;
47 }
48
49 .callout-text {
50 color: var(--text-primary);
51 line-height: 1.5;
52 }
53</style>