diff options
| author | Danilo M. <danix@danix.xyz> | 2026-05-04 16:01:17 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-05-04 16:01:17 +0200 |
| commit | 5b66b809f891f39a2ddec6a80e72397c7692b64b (patch) | |
| tree | ac056ff72cbef79def40ac91b4d5875c06de3f9c | |
| parent | 976c36b0cbb6c8bb6f9a0a3398a4229da8cb5834 (diff) | |
| download | danixxyz-theme-5b66b809f891f39a2ddec6a80e72397c7692b64b.tar.gz danixxyz-theme-5b66b809f891f39a2ddec6a80e72397c7692b64b.zip | |
feat: upgrade actions shortcode to CTA block component
Replaces the minimal inline download button with a visually distinctive
CTA card. New `use` parameter drives icon and download attribute
("download", "site", "repo", "mail"). Optional `caption` param adds
description text above the button. Button uses .btn.btn-primary for
consistent styling. CSS adds .cta-block / .cta-block__caption with
accent border, glow, and light mode overrides per THEMING-STANDARD.md.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
| -rw-r--r-- | assets/css/main.css | 31 | ||||
| -rw-r--r-- | layouts/shortcodes/actions.html | 23 |
2 files changed, 47 insertions, 7 deletions
diff --git a/assets/css/main.css b/assets/css/main.css index 429d2f7..3dbf367 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1843,6 +1843,37 @@ 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); } +/* ============================================================ + CTA Block Shortcode + ============================================================ */ + +.cta-block { + position: relative; + margin: 2rem 0; + padding: 1.25rem 1.5rem; + background: rgba(168, 85, 247, 0.06); + border: 1px solid rgba(168, 85, 247, 0.2); + border-left: 3px solid var(--accent); + border-radius: 0.5rem; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.75rem; + box-shadow: 0 0 20px var(--accent-glow); +} + +.cta-block__caption { + font-size: 0.9rem; + color: var(--text-dim); + margin: 0; + line-height: 1.6; +} + +html.theme-light .cta-block { + background: rgba(124, 58, 237, 0.04); + box-shadow: none; +} + /* Motion Safety - Respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { diff --git a/layouts/shortcodes/actions.html b/layouts/shortcodes/actions.html index 7badab3..2c2b07e 100644 --- a/layouts/shortcodes/actions.html +++ b/layouts/shortcodes/actions.html @@ -1,16 +1,25 @@ -{{- $url := .Get "url" -}} -{{- $desc := .Get "desc" | default "Download" -}} +{{- $url := .Get "url" -}} +{{- $desc := .Get "desc" | default (i18n "actions_cta") -}} +{{- $caption := .Get "caption" | default "" -}} +{{- $use := .Get "use" | default "site" -}} {{- $outclass := .Get "outclass" | default "" -}} -{{- $inclass := .Get "inclass" | default "" -}} +{{- $inclass := .Get "inclass" | default "" -}} + +{{- $icons := dict "download" "download" "site" "external-link" "repo" "git-branch" "mail" "mail" -}} +{{- $icon := index $icons $use | default "external-link" -}} +{{- $isDownload := eq $use "download" -}} {{- if $url -}} -<div class="my-6 {{ $outclass }}"> +<div class="cta-block {{ $outclass }}"> + {{- with $caption -}} + <p class="cta-block__caption">{{ . }}</p> + {{- end -}} <a href="{{ $url }}" - class="inline-flex items-center gap-2 px-4 py-2 rounded border border-accent/30 text-accent font-medium hover:border-accent/50 hover:bg-accent/10 transition-colors {{ $inclass }}" - download + class="btn btn-primary {{ $inclass }}" + {{- if $isDownload }} download{{- end }} > - <i data-feather="download" class="w-4 h-4"></i> + <i data-feather="{{ $icon }}" class="w-5 h-5" aria-hidden="true"></i> {{ $desc }} </a> </div> |