diff options
| author | Danilo M. <danix@danix.xyz> | 2026-06-26 17:42:58 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-06-26 17:42:58 +0200 |
| commit | 43edbdb66bc6c8e80deb1b67b688acba21286534 (patch) | |
| tree | a64e2b87873be29f4ae40bcdfcc24a24157389dd /layouts/partials/project-header.html | |
| parent | 13a8ee5f0a0db661fadc3f5f02b07b52e270a86d (diff) | |
| download | danixxyz-theme-43edbdb66bc6c8e80deb1b67b688acba21286534.tar.gz danixxyz-theme-43edbdb66bc6c8e80deb1b67b688acba21286534.zip | |
fix: status badge color (safeCSS) + right-align badge and tags
Hugo escaped the CSS-var style to ZgotmplZ, so badge colors never applied;
build the style string through safeCSS instead. active=green now. On the
project page, right-align the status badge with the title and push tags to
the right, matching the list-view layout.
Diffstat (limited to 'layouts/partials/project-header.html')
| -rw-r--r-- | layouts/partials/project-header.html | 16 |
1 files changed, 9 insertions, 7 deletions
diff --git a/layouts/partials/project-header.html b/layouts/partials/project-header.html index c727458..f153a26 100644 --- a/layouts/partials/project-header.html +++ b/layouts/partials/project-header.html @@ -1,9 +1,11 @@ {{ $status := .Params.status | default "active" }} -{{/* status -> theme-aware bg/text var pair (all defined in main.css) */}} -{{ $bgVar := "--type-tech" }}{{ $txtVar := "--type-tech-text" }} -{{ if eq $status "maintained" }}{{ $bgVar = "--type-quote" }}{{ $txtVar = "--type-quote-text" }}{{ end }} +{{/* status -> theme-aware bg/text var pair (all defined in main.css). + active=green, maintained=blue, wip=amber, archived=muted. */}} +{{ $bgVar := "--type-quote" }}{{ $txtVar := "--type-quote-text" }} +{{ if eq $status "maintained" }}{{ $bgVar = "--type-link" }}{{ $txtVar = "--type-link-text" }}{{ end }} {{ if eq $status "wip" }}{{ $bgVar = "--type-life" }}{{ $txtVar = "--type-life-text" }}{{ end }} {{ if eq $status "archived" }}{{ $bgVar = "--text-dim" }}{{ $txtVar = "--bg" }}{{ end }} +{{ $badgeStyle := printf "background-color: var(%s); color: var(%s);" $bgVar $txtVar | safeCSS }} {{ $imageURL := "" }} {{ if .Params.image }} @@ -16,9 +18,9 @@ <img src="{{ $imageURL }}" alt="{{ .Title }}" class="w-24 h-24 object-contain rounded-lg mb-4 bg-surface/50" loading="lazy" /> {{ end }} - <div class="flex flex-wrap items-center gap-3 mb-2"> + <div class="flex flex-wrap items-center justify-between gap-3 mb-2"> <h1 class="text-4xl md:text-5xl font-bold text-accent font-oxanium">{{ .Title }}</h1> - <span class="px-3 py-1 rounded-full text-xs font-semibold" style="background-color: var({{ $bgVar }}); color: var({{ $txtVar }});"> + <span class="flex-shrink-0 px-3 py-1 rounded-full text-xs font-semibold" style="{{ $badgeStyle }}"> {{ i18n (printf "status-%s" $status) }} </span> </div> @@ -27,7 +29,7 @@ <p class="text-xl text-text-dim mb-4">{{ . }}</p> {{ end }} - <div class="flex flex-wrap items-center gap-3"> + <div class="flex flex-wrap items-center justify-between gap-3"> {{ with .Params.repo_url }} <a href="{{ . }}" target="_blank" rel="noopener noreferrer" class="btn btn-sm inline-flex items-center gap-2"> {{ i18n "viewRepo" }} @@ -36,7 +38,7 @@ </a> {{ end }} {{ with .Params.tags }} - <ul class="flex flex-wrap gap-2"> + <ul class="flex flex-wrap gap-2 ml-auto"> {{ range . }} <li><a href="/tags/{{ . | urlize }}/" class="px-2 py-1 rounded text-xs bg-surface text-text hover:text-accent transition-colors focus:outline-none focus:ring-2 focus:ring-accent">{{ . }}</a></li> {{ end }} |
