From 43edbdb66bc6c8e80deb1b67b688acba21286534 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Fri, 26 Jun 2026 17:42:58 +0200
Subject: 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.
---
 layouts/partials/project-header.html | 16 +++++++++-------
 layouts/partials/project-row.html    | 10 ++++++----
 2 files changed, 15 insertions(+), 11 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 }}
diff --git a/layouts/partials/project-row.html b/layouts/partials/project-row.html
index 82a3481..89662ee 100644
--- a/layouts/partials/project-row.html
+++ b/layouts/partials/project-row.html
@@ -2,11 +2,13 @@
 {{ $reverse := eq (mod .index 2) 1 }}
 
 {{ $status := $p.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 $p.Params.image }}
@@ -31,7 +33,7 @@
       <h2 class="text-2xl font-bold font-oxanium">
         <a href="{{ $p.RelPermalink }}" class="group-hover:text-accent transition-colors rounded focus:outline-none focus:ring-2 focus:ring-accent">{{ $p.Title }}</a>
       </h2>
-      <span class="flex-shrink-0 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>
-- 
cgit v1.2.3