9fbedf5ba1
Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously an unversioned directory inside ~/src/blockninja-themes/art-deco. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
55 lines
2.1 KiB
Plaintext
55 lines
2.1 KiB
Plaintext
package main
|
|
|
|
// galleryFanGridCols maps the column count to a tailwind grid class with single-column collapse below 640px.
|
|
func galleryFanGridCols(cols int) string {
|
|
switch cols {
|
|
case 2:
|
|
return "grid-cols-1 sm:grid-cols-2"
|
|
case 4:
|
|
return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
|
|
default:
|
|
return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
|
|
}
|
|
}
|
|
|
|
// fallbackImage returns a tiny transparent svg data URI used when no image src is supplied.
|
|
func fallbackImage() string {
|
|
return "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%23222%22%2F%3E%3C%2Fsvg%3E"
|
|
}
|
|
|
|
// galleryFanComponent renders the mirrored gallery framed by sunburst rays.
|
|
templ galleryFanComponent(data GalleryFanData) {
|
|
<section data-block="art-deco:gallery_fan" class="py-16">
|
|
<div class="max-w-6xl mx-auto px-4">
|
|
<div class="relative deco-grain">
|
|
<div class="absolute inset-x-0 -top-2 h-12 pointer-events-none deco-sunburst" aria-hidden="true"></div>
|
|
<div class={ "grid gap-4 pt-12", galleryFanGridCols(data.Columns) }>
|
|
if len(data.Images) == 0 {
|
|
<div class="col-span-full text-center text-sm py-12" style="color: hsl(var(--muted-foreground));">
|
|
Add images to populate the fan gallery.
|
|
</div>
|
|
}
|
|
for _, img := range data.Images {
|
|
<figure class="deco-step">
|
|
if img.Src != "" {
|
|
<img src={ img.Src } alt={ img.Caption } class="block w-full h-auto object-cover" style="background-color: hsl(var(--muted));"/>
|
|
} else {
|
|
<img src={ fallbackImage() } alt="" class="block w-full h-auto" style="background-color: hsl(var(--muted));"/>
|
|
}
|
|
if img.Caption != "" {
|
|
<figcaption
|
|
class="mt-2 text-center italic text-sm"
|
|
style="color: hsl(var(--muted-foreground));"
|
|
>
|
|
{ img.Caption }
|
|
</figcaption>
|
|
}
|
|
</figure>
|
|
}
|
|
</div>
|
|
<div class="absolute inset-x-0 -bottom-2 h-12 pointer-events-none deco-sunburst rotate-180" aria-hidden="true"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|