summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/main.min.css195
1 files changed, 169 insertions, 26 deletions
diff --git a/assets/css/main.min.css b/assets/css/main.min.css
index c335eb9..cbb0029 100644
--- a/assets/css/main.min.css
+++ b/assets/css/main.min.css
@@ -2392,6 +2392,10 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
height: 0.25rem;
}
+.h-3\.5 {
+ height: 0.875rem;
+}
+
.h-32 {
height: 8rem;
}
@@ -2440,6 +2444,10 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
width: 5rem;
}
+.w-3\.5 {
+ width: 0.875rem;
+}
+
.w-32 {
width: 8rem;
}
@@ -3101,24 +3109,31 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
--type-quote-text: #000000;
--type-link-text: #000000;
--type-photo-text: #000000;
+ /* Callout shortcode colors */
+ --callout-note: var(--accent);
+ --callout-tip: var(--accent2);
+ --callout-info: var(--type-link);
+ --callout-warning: var(--type-life);
+ --callout-danger: #ef4444;
+ --callout-success: var(--accent2);
}
/* Light theme overrides */
html.theme-light {
- --bg: #ffffff;
- --bg2: #f8f9fa;
- --bg2-rgb: 248, 249, 250;
- --surface: #f0f3f7;
- --surface-rgb: 240, 243, 247;
- --border: #d9dfe8;
- --accent: #9333ea;
- --accent-rgb: 147, 51, 234;
- --accent2: #10b981;
- --accent-glow: rgba(147, 51, 234, 0.1);
- --text: #1f2937;
- --text-dim: #374151;
- --muted: #d1d5db;
+ --bg: #f0f4f8;
+ --bg2: #e2eaf4;
+ --bg2-rgb: 226, 234, 244;
+ --surface: #d4dff0;
+ --surface-rgb: 212, 223, 240;
+ --border: #a8bdd8;
+ --accent: #7c3aed;
+ --accent-rgb: 124, 58, 237;
+ --accent2: #008f5a;
+ --accent-glow: rgba(124, 58, 237, 0.1);
+ --text: #0d1b2a;
+ --text-dim: #2e4a6a;
+ --muted: #6888a8;
/* Article type colors - light */
--type-tech: #7c3aed;
--type-life: #d97706;
@@ -3131,25 +3146,27 @@ html.theme-light {
--type-quote-text: #000000;
--type-link-text: #000000;
--type-photo-text: #ffffff;
+ /* Callout shortcode colors */
+ --callout-danger: #ef4444;
}
/* No-JS fallback: prefers-color-scheme light */
@media (prefers-color-scheme: light) {
html:not(.theme-dark) {
- --bg: #ffffff;
- --bg2: #f8f9fa;
- --bg2-rgb: 248, 249, 250;
- --surface: #f0f3f7;
- --surface-rgb: 240, 243, 247;
- --border: #d9dfe8;
- --accent: #9333ea;
- --accent-rgb: 147, 51, 234;
- --accent2: #10b981;
- --accent-glow: rgba(147, 51, 234, 0.1);
- --text: #1f2937;
- --text-dim: #374151;
- --muted: #d1d5db;
+ --bg: #f0f4f8;
+ --bg2: #e2eaf4;
+ --bg2-rgb: 226, 234, 244;
+ --surface: #d4dff0;
+ --surface-rgb: 212, 223, 240;
+ --border: #a8bdd8;
+ --accent: #7c3aed;
+ --accent-rgb: 124, 58, 237;
+ --accent2: #008f5a;
+ --accent-glow: rgba(124, 58, 237, 0.1);
+ --text: #0d1b2a;
+ --text-dim: #2e4a6a;
+ --muted: #6888a8;
--type-tech: #7c3aed;
--type-life: #d97706;
--type-quote: #008f5a;
@@ -3160,6 +3177,8 @@ html.theme-light {
--type-quote-text: #000000;
--type-link-text: #000000;
--type-photo-text: #ffffff;
+ /* Callout shortcode colors */
+ --callout-danger: #ef4444;
}
}
@@ -4267,6 +4286,130 @@ html.theme-light .banner-obsolete {
border-left-color: var(--type-life);
}
+/* ============================================================
+ Callout Shortcode
+ ============================================================ */
+
+.callout {
+ position: relative;
+ margin-top: 1.5rem;
+ margin-bottom: 1.5rem;
+ border-top-right-radius: 0.375rem;
+ border-bottom-right-radius: 0.375rem;
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+
+.callout::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 50%;
+ height: 1px;
+ background: linear-gradient(to right, var(--callout-color), transparent);
+}
+
+.callout-title {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ margin-bottom: 0.375rem;
+}
+
+.callout-title span {
+ font-family: var(--font-mono, 'JetBrains Mono', monospace);
+ font-size: 11px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ color: var(--callout-color);
+}
+
+.callout-title svg,
+.callout-title i {
+ width: 14px;
+ height: 14px;
+ color: var(--callout-color);
+ flex-shrink: 0;
+}
+
+.callout-body {
+ color: var(--text);
+ font-size: 0.875rem;
+ line-height: 1.6;
+}
+
+.callout-body p:last-child {
+ margin-bottom: 0;
+}
+
+/* Type variants - sets --callout-color for border, title, icon, and ::after gradient */
+
+.callout-note {
+ --callout-color: var(--callout-note);
+ border-left: 4px solid var(--callout-note);
+ background: rgba(168, 85, 247, 0.08);
+}
+
+.callout-tip {
+ --callout-color: var(--callout-tip);
+ border-left: 4px solid var(--callout-tip);
+ background: rgba(0, 255, 136, 0.08);
+}
+
+.callout-info {
+ --callout-color: var(--callout-info);
+ border-left: 4px solid var(--callout-info);
+ background: rgba(56, 189, 248, 0.08);
+}
+
+.callout-warning {
+ --callout-color: var(--callout-warning);
+ border-left: 4px solid var(--callout-warning);
+ background: rgba(245, 158, 11, 0.08);
+}
+
+.callout-danger {
+ --callout-color: var(--callout-danger);
+ border-left: 4px solid var(--callout-danger);
+ background: rgba(239, 68, 68, 0.08);
+}
+
+.callout-success {
+ --callout-color: var(--callout-success);
+ border-left: 4px solid var(--callout-success);
+ background: rgba(0, 255, 136, 0.08);
+}
+
+/* Light mode - reduce opacity to 0.06 per theming standard */
+
+html.theme-light .callout-note {
+ background: rgba(124, 58, 237, 0.06);
+}
+
+html.theme-light .callout-tip {
+ background: rgba(0, 143, 90, 0.06);
+}
+
+html.theme-light .callout-info {
+ background: rgba(2, 132, 199, 0.06);
+}
+
+html.theme-light .callout-warning {
+ background: rgba(217, 119, 6, 0.06);
+}
+
+html.theme-light .callout-danger {
+ background: rgba(239, 68, 68, 0.06);
+}
+
+html.theme-light .callout-success {
+ background: rgba(0, 143, 90, 0.06);
+}
+
/* Motion Safety - Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {