marsultor/public-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Callout component with note/tip/warning/danger variants

Browse Source
This commit is contained in:
kbot
2026-06-03 21:48:39 -05:00
parent c617ee4438
commit 7c653f3852
3 changed files with 84 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/globals.css
View File

@@ -632,3 +632,46 @@ body, body *, [class*="bg-"], [class*="border-"], [class*="text-"] {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Callout/Admonition styles */
.callout {
@apply my-6 rounded-lg border p-4 text-sm leading-relaxed;
}
.callout-title {
@apply flex items-center gap-2 font-semibold mb-2;
}
.callout-icon {
@apply text-base;
}
.callout-content {
@apply pl-6;
}
/* Type variants */
.callout-note {
@apply border-accent/30 bg-accent/[0.06];
}
.callout-note .callout-title {
@apply text-accent;
}
.callout-tip {
@apply border-emerald-500/30 bg-emerald-500/[0.06];
}
.callout-tip .callout-title {
@apply text-emerald-600 dark:text-emerald-400;
}
.callout-warning {
@apply border-amber-500/30 bg-amber-500/[0.06];
}
.callout-warning .callout-title {
@apply text-amber-600 dark:text-amber-400;
}
.callout-danger {
@apply border-red-500/30 bg-red-500/[0.06];
}
.callout-danger .callout-title {
@apply text-red-600 dark:text-red-400;
}