From 2167e0cc09afdba7c0cc893ea7399e8345d9596f Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Wed, 29 Apr 2026 15:53:55 +0200 Subject: feat: add callout shortcode (note/tip/info/warning/danger/success) - Single shortcode with type param, CSS-only variants - Left border + fading bottom border (::after gradient) - Colors mapped to existing theme tokens (--accent, --accent2, --type-link, --type-life) - --callout-danger: #ef4444 hardcoded exception (approved) - role=alert for danger, role=note for all others (WCAG AA) - aria-hidden on Feather icons, title overridable via param - EN/IT i18n keys Also fixes html.theme-light CSS vars to match THEMING-STANDARD.md: - --bg, --bg2, --surface, --border, --text, --text-dim, --muted - --accent (#7c3aed), --accent2 (#008f5a) --- assets/css/main.css | 79 +++++++++++++++++++++++++++++++++++++++++ i18n/en.yaml | 8 +++++ i18n/it.yaml | 8 +++++ layouts/shortcodes/callout.html | 15 ++++++++ 4 files changed, 110 insertions(+) create mode 100644 layouts/shortcodes/callout.html diff --git a/assets/css/main.css b/assets/css/main.css index 20626a2..bdf0f6c 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -29,6 +29,13 @@ --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 */ @@ -58,6 +65,8 @@ 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 */ @@ -86,6 +95,8 @@ html.theme-light { --type-quote-text: #000000; --type-link-text: #000000; --type-photo-text: #ffffff; + /* Callout shortcode colors */ + --callout-danger: #ef4444; } } @@ -1764,6 +1775,74 @@ html.theme-light .banner-obsolete { border-left-color: var(--type-life); } +/* ============================================================ + Callout Shortcode + ============================================================ */ + +.callout { + @apply relative my-6 py-3 px-4 rounded-r-md; +} + +.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) { diff --git a/i18n/en.yaml b/i18n/en.yaml index 0dfb811..c328748 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -177,3 +177,11 @@ repo_example_2_desc: other: "SlackBuild scripts for Example Package 2. A comprehensive package with full documentation and support." repo_example_3_desc: other: "SlackBuild scripts for Example Package 3. Utility package for system administration and configuration." + +# Callout shortcode titles +callout_note: "Note" +callout_tip: "Tip" +callout_info: "Info" +callout_warning: "Warning" +callout_danger: "Danger" +callout_success: "Success" diff --git a/i18n/it.yaml b/i18n/it.yaml index 3114c57..ff3a80a 100644 --- a/i18n/it.yaml +++ b/i18n/it.yaml @@ -179,3 +179,11 @@ repo_example_2_desc: other: "Script SlackBuild per Pacchetto Esempio 2. Un pacchetto completo con documentazione e supporto completi." repo_example_3_desc: other: "Script SlackBuild per Pacchetto Esempio 3. Pacchetto di utilità per amministrazione di sistema e configurazione." + +# Titoli shortcode callout +callout_note: "Nota" +callout_tip: "Suggerimento" +callout_info: "Informazione" +callout_warning: "Attenzione" +callout_danger: "Pericolo" +callout_success: "Successo" diff --git a/layouts/shortcodes/callout.html b/layouts/shortcodes/callout.html new file mode 100644 index 0000000..b492267 --- /dev/null +++ b/layouts/shortcodes/callout.html @@ -0,0 +1,15 @@ +{{- $type := .Get "type" | default "note" -}} +{{- $title := .Get "title" | default (i18n (printf "callout_%s" $type)) -}} +{{- $role := cond (eq $type "danger") "alert" "note" -}} +{{- $icons := dict "note" "edit-2" "tip" "zap" "info" "info" "warning" "alert-triangle" "danger" "x-circle" "success" "check-circle" -}} +{{- $icon := index $icons $type | default "info" -}} + +
+
+ + {{ $title }} +
+
+ {{- .Inner | markdownify -}} +
+
-- cgit v1.2.3