From 4e26aabccc2432b4670e874017f55261506d59bb Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Fri, 26 Jun 2026 17:16:10 +0200 Subject: feat: slackware hub list layout with project rows --- layouts/partials/project-row.html | 65 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 layouts/partials/project-row.html (limited to 'layouts/partials/project-row.html') diff --git a/layouts/partials/project-row.html b/layouts/partials/project-row.html new file mode 100644 index 0000000..82a3481 --- /dev/null +++ b/layouts/partials/project-row.html @@ -0,0 +1,65 @@ +{{ $p := .page }} +{{ $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 }} +{{ if eq $status "wip" }}{{ $bgVar = "--type-life" }}{{ $txtVar = "--type-life-text" }}{{ end }} +{{ if eq $status "archived" }}{{ $bgVar = "--text-dim" }}{{ $txtVar = "--bg" }}{{ end }} + +{{ $imageURL := "" }} +{{ if $p.Params.image }} + {{ $res := $p.Resources.GetMatch $p.Params.image }} + {{ if $res }}{{ $imageURL = $res.RelPermalink }}{{ else }}{{ $imageURL = $p.Params.image }}{{ end }} +{{ end }} +{{ $glyph := substr (upper $p.Title) 0 2 }} + +
+ + + + +
+
+

+ {{ $p.Title }} +

+ + {{ i18n (printf "status-%s" $status) }} + +
+ + {{ with $p.Params.tagline }} +

{{ . }}

+ {{ end }} + + {{ with $p.Params.tags }} +
    + {{ range . }} +
  • {{ . }}
    • + {{ end }} +
+ {{ end }} + +
+ + {{ i18n "readMore" }} + + + {{ with $p.Params.repo_url }} + + {{ i18n "viewRepo" }} + + {{ i18n "opensInNewTab" }} + + {{ end }} +
+
+
-- cgit v1.2.3 From 43edbdb66bc6c8e80deb1b67b688acba21286534 Mon Sep 17 00:00:00 2001 From: "Danilo M." 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(-) (limited to 'layouts/partials/project-row.html') 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 @@ {{ .Title }} {{ end }} -
+

{{ .Title }}

- + {{ i18n (printf "status-%s" $status) }}
@@ -27,7 +29,7 @@

{{ . }}

{{ end }} -
+
{{ with .Params.repo_url }} {{ i18n "viewRepo" }} @@ -36,7 +38,7 @@ {{ end }} {{ with .Params.tags }} -
    +
      {{ range . }}
    • {{ . }}
      • {{ 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 @@

      {{ $p.Title }}

      - + {{ i18n (printf "status-%s" $status) }}
-- cgit v1.2.3 From f5e6e6ecb2fa0dee24b701e53daebaac677687f3 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Fri, 26 Jun 2026 17:55:30 +0200 Subject: feat: infer thumbnail.* (2:3 row) and header.* (wide banner) page resources Row uses a thumbnail.* page resource; project page shows a full-width header.* banner above the title instead of a small inline logo. Both inferred by filename from the project bundle, no front-matter needed (image param kept as thumbnail fallback). --- layouts/partials/project-header.html | 11 ++++------- layouts/partials/project-row.html | 7 ++++++- 2 files changed, 10 insertions(+), 8 deletions(-) (limited to 'layouts/partials/project-row.html') diff --git a/layouts/partials/project-header.html b/layouts/partials/project-header.html index f153a26..17fe7db 100644 --- a/layouts/partials/project-header.html +++ b/layouts/partials/project-header.html @@ -7,15 +7,12 @@ {{ 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 }} - {{ $res := .Resources.GetMatch .Params.image }} - {{ if $res }}{{ $imageURL = $res.RelPermalink }}{{ else }}{{ $imageURL = .Params.image }}{{ end }} -{{ end }} +{{/* Full-width banner: page resource named header.* in the project bundle. */}} +{{ $headerImg := .Resources.GetMatch "header.*" }}
- {{ if $imageURL }} - {{ .Title }} + {{ with $headerImg }} + {{ end }}
diff --git a/layouts/partials/project-row.html b/layouts/partials/project-row.html index 89662ee..5a65f35 100644 --- a/layouts/partials/project-row.html +++ b/layouts/partials/project-row.html @@ -10,8 +10,13 @@ {{ if eq $status "archived" }}{{ $bgVar = "--text-dim" }}{{ $txtVar = "--bg" }}{{ end }} {{ $badgeStyle := printf "background-color: var(%s); color: var(%s);" $bgVar $txtVar | safeCSS }} +{{/* Row thumbnail (2:3): page resource named thumbnail.* in the project + bundle; fall back to an `image` param, else a mono-glyph block. */}} {{ $imageURL := "" }} -{{ if $p.Params.image }} +{{ $thumb := $p.Resources.GetMatch "thumbnail.*" }} +{{ if $thumb }} + {{ $imageURL = $thumb.RelPermalink }} +{{ else if $p.Params.image }} {{ $res := $p.Resources.GetMatch $p.Params.image }} {{ if $res }}{{ $imageURL = $res.RelPermalink }}{{ else }}{{ $imageURL = $p.Params.image }}{{ end }} {{ end }} -- cgit v1.2.3 From 9244ad0666c4859569801508348fa83c6e4648f4 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Fri, 26 Jun 2026 17:57:30 +0200 Subject: fix: row thumbnail cell is 3:2 landscape, holds its own aspect ratio Was stretching to body height via items-stretch; give the image cell aspect-[3/2] and self-start so a 3:2 thumbnail displays at its intended ratio instead of being cropped to the row height. --- assets/css/main.min.css | 43 +++++++++++++++++++-------------------- layouts/partials/project-row.html | 2 +- 2 files changed, 22 insertions(+), 23 deletions(-) (limited to 'layouts/partials/project-row.html') diff --git a/assets/css/main.min.css b/assets/css/main.min.css index 44735f9..048b8e7 100644 --- a/assets/css/main.min.css +++ b/assets/css/main.min.css @@ -1648,11 +1648,6 @@ button, /* Legacy type-* classes for compatibility (with badge styling) */ -.type-tech { - color: var(--type-tech); - background-color: rgba(168, 85, 247, 0.1); -} - .type-life { color: var(--type-life); background-color: rgba(245, 158, 11, 0.1); @@ -1663,6 +1658,11 @@ button, background-color: rgba(0, 255, 136, 0.1); } +.type-link { + color: var(--type-link); + background-color: rgba(56, 189, 248, 0.1); +} + /* Card component */ .card { @@ -2460,6 +2460,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay { margin-left: 0.5rem; } +.ml-auto { + margin-left: auto; +} + .mt-0\.5 { margin-top: 0.125rem; } @@ -2546,6 +2550,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay { display: none; } +.aspect-\[3\/2\] { + aspect-ratio: 3/2; +} + .aspect-video { aspect-ratio: 16 / 9; } @@ -2554,10 +2562,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay { height: 0.25rem; } -.h-24 { - height: 6rem; -} - .h-3 { height: 0.75rem; } @@ -2602,10 +2606,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay { max-height: 24rem; } -.min-h-\[10rem\] { - min-height: 10rem; -} - .min-h-\[calc\(100vh-200px\)\] { min-height: calc(100vh - 200px); } @@ -2622,10 +2622,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay { width: 5rem; } -.w-24 { - width: 6rem; -} - .w-3 { width: 0.75rem; } @@ -2856,6 +2852,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay { border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); } +.self-start { + align-self: flex-start; +} + .overflow-hidden { overflow: hidden; } @@ -2987,11 +2987,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay { background-color: var(--surface); } -.object-contain { - -o-object-fit: contain; - object-fit: contain; -} - .object-cover { -o-object-fit: cover; object-fit: cover; @@ -5279,6 +5274,10 @@ html.theme-light .hero-name { height: 12rem; } + .md\:h-64 { + height: 16rem; + } + .md\:w-1\/3 { width: 33.333333%; } diff --git a/layouts/partials/project-row.html b/layouts/partials/project-row.html index 5a65f35..7a1e209 100644 --- a/layouts/partials/project-row.html +++ b/layouts/partials/project-row.html @@ -24,7 +24,7 @@