tiennm99/HugoBlox-kit
1
0 Fork 0
mirror of https://github.com/tiennm99/HugoBlox-kit.git synced 2026-10-05 06:13:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(team-showcase): align headers, square avatars, respect sort order

Browse Source
This commit is contained in:
George Cushen committed 2026-01-09 01:04:21 +00:00
1 parent d1d1c8a77d
commit 2c2d7cd403
1 file changed
+15 -14
Download Patch File Download Diff File Expand all files Collapse all files
modules/blox/blox/team-showcase/block.html
+15 -14
View File
@@ -51,7 +51,10 @@
{{ $text := "" }}
{{ with index $content "text" }}{{ $text = printf "%v" . | emojify | $page.RenderString }}{{ end }}
{{ $alignClass := cond (eq $align "left") "items-start text-left" "items-center text-center" }}
{{ $headerWidthClass := cond (eq $align "left") "max-w-5xl" "max-w-3xl mx-auto" }}
{{ $headerContainerClass := cond (eq $align "left")
"flex flex-col gap-4 items-start text-left w-full max-w-5xl"
"flex flex-col gap-3 items-center text-center max-w-prose mx-auto justify-center px-6"
}}
{{ $ctaAlignClass := cond (eq $align "left") "text-left" "text-center" }}
{{ $columnsClasses := dict
@@ -65,21 +68,21 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{{/* Section Header */}}
<div class="flex flex-col gap-4 {{ $alignClass }} {{ $headerWidthClass }} mb-12">
<div class="{{ $headerContainerClass }} {{ $alignClass }} mb-12">
{{ with $title }}
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white tracking-tight">
<div class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white tracking-tight">
{{ . }}
</h2>
</div>
{{ end }}
{{ with $subtitle }}
<p class="mt-4 text-xl text-gray-600 dark:text-gray-400">
<p class="text-xl text-gray-600 dark:text-gray-400">
{{ . }}
</p>
{{ end }}
{{ with $text }}
<div class="mt-6 prose prose-lg lg:prose-xl dark:prose-invert max-w-3xl">
<div class="prose prose-lg lg:prose-xl dark:prose-invert max-w-prose">
{{ . }}
</div>
{{ end }}
@@ -217,16 +220,15 @@
<div class="group relative">
<div class="relative overflow-hidden rounded-2xl bg-white dark:bg-gray-800 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<a href="{{ $link }}" class="block relative aspect-[4/5] overflow-hidden" aria-label="{{ $profile.title }}">
<a href="{{ $link }}" class="block relative aspect-square overflow-hidden bg-gray-100 dark:bg-gray-800" aria-label="{{ $profile.title }}">
{{ if $avatar }}
{{ $image := $avatar.Fit "400x500 Center webp" }}
{{ $image := $avatar.Fit "600x600 Center q90" }}
<img src="{{ $image.RelPermalink }}"
alt="{{ $profile.title }}"
width="{{ $image.Width }}"
height="{{ $image.Height }}"
loading="lazy"
class="w-full h-full object-cover object-center transition-transform duration-300 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
class="w-full h-full object-contain object-center transition-transform duration-300 group-hover:scale-105">
{{ else }}
<div class="absolute inset-0 bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-4xl font-semibold text-gray-600 dark:text-gray-200">
{{ $initial }}
@@ -415,16 +417,15 @@
{{ $initial := cond (gt (len $nameSource) 0) (upper (substr $nameSource 0 1)) "?" }}
<div class="group relative">
<div class="relative overflow-hidden rounded-2xl bg-white dark:bg-gray-800 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<a href="{{ $link }}" class="block relative aspect-[4/5] overflow-hidden" aria-label="{{ $profile.title }}">
<a href="{{ $link }}" class="block relative aspect-square overflow-hidden bg-gray-100 dark:bg-gray-800" aria-label="{{ $profile.title }}">
{{ if $avatar }}
{{ $image := $avatar.Fit "400x500 Center webp" }}
{{ $image := $avatar.Fit "600x600 Center q90" }}
<img src="{{ $image.RelPermalink }}"
alt="{{ $profile.title }}"
width="{{ $image.Width }}"
height="{{ $image.Height }}"
loading="lazy"
class="w-full h-full object-cover object-center transition-transform duration-300 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
class="w-full h-full object-contain object-center transition-transform duration-300 group-hover:scale-105">
{{ else }}
<div class="absolute inset-0 bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-4xl font-semibold text-gray-600 dark:text-gray-200">
{{ $initial }}