Skip to content

Commit b195dcf

Browse files
committed
Vary card fallback gradients
1 parent 86bb960 commit b195dcf

1 file changed

Lines changed: 31 additions & 1 deletion

File tree

layouts/_partials/card.html

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,44 @@
88
{{ if and (not $image) (not $hideCardImage) }}
99
{{ $image = index (.Resources.ByType "image") 0 }}
1010
{{ end }}
11+
{{ $backgroundGradients := slice
12+
"from-slate-950 to-amber-950"
13+
"from-indigo-950 to-rose-950"
14+
"from-sky-950 to-teal-950"
15+
"from-violet-950 to-fuchsia-950"
16+
"from-emerald-950 to-cyan-950"
17+
"from-orange-950 to-red-950"
18+
"from-blue-950 to-violet-950"
19+
"from-teal-950 to-lime-950"
20+
"from-rose-950 to-pink-950"
21+
"from-cyan-950 to-blue-950"
22+
"from-stone-950 to-orange-950"
23+
"from-purple-950 to-indigo-950"
24+
}}
25+
{{ $gradientDirections := slice
26+
"bg-gradient-to-br"
27+
"bg-gradient-to-bl"
28+
"bg-gradient-to-tr"
29+
"bg-gradient-to-tl"
30+
"bg-gradient-to-r"
31+
"bg-gradient-to-b"
32+
}}
33+
{{ $backgroundGradient := "from-slate-950 to-amber-950" }}
34+
{{ $gradientDirection := "bg-gradient-to-br" }}
35+
{{ if not $image }}
36+
{{ $gradientHash := hash.FNV32a .RelPermalink }}
37+
{{ $backgroundGradient = index $backgroundGradients (mod $gradientHash (len $backgroundGradients)) }}
38+
{{ $gradientDirection = index $gradientDirections (mod (div $gradientHash (len $backgroundGradients)) (len $gradientDirections)) }}
39+
{{ end }}
40+
1141

1242
<a
1343
href="{{ $href }}"
1444
{{ if $absolute_url }}
1545
target="_blank"
1646
ref="noopener noreferrer"
1747
{{ end }}
18-
class="h-60 w-full max-w-[422px] group transition-all duration-200 translate-y-0 hover:-translate-y-[2px] group block overflow-hidden relative shadow-md hover:shadow-xl rounded-md border-solid border border-gray-900 bg-gradient-to-br from-slate-800 to-amber-950"
48+
class="h-60 w-full max-w-[422px] group transition-all duration-200 translate-y-0 hover:-translate-y-[2px] group block overflow-hidden relative shadow-md hover:shadow-xl rounded-md border-solid border border-gray-900 {{ $gradientDirection }} {{ $backgroundGradient }}"
1949
>
2050
{{ if $image }}
2151
<div class="absolute inset-0 w-full h-full overflow-hidden flex items-center justify-center rounded-md -z-10 brightness-50">

0 commit comments

Comments
 (0)