@smbcloud / fatapp-web
Code Commits Issues Pulls Cloud Agent CI/CD
main
dependabot/npm_and_yarn/astro-7.4.0 dependabot/npm_and_yarn/astrojs/mdx-7.0.8 dependabot/npm_and_yarn/astrojs/sitemap-3.7.4 dependabot/npm_and_yarn/katex-0.19.0 dependabot/npm_and_yarn/prettier-3.9.10 dependabot/npm_and_yarn/sharp-0.35.5 dependabot/npm_and_yarn/tsx-4.23.15 dependabot/npm_and_yarn/typescript-eslint-8.71.2 dependabot/npm_and_yarn/typescript-eslint/parser-8.71.2 development main
astro 53 lines 1.02 KB
Raw
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>