d9961a76ad
Fixes duplicate placeholder cover image on the 3 newest blog posts, broken aspect-ratio classes on the albums listing page, and a non-responsive fixed sidebar on the chat page.
35 lines
1.7 KiB
HTML
35 lines
1.7 KiB
HTML
{{ define "main" }}
|
|
<div class="bg-gray-900 py-16 px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-7xl mx-auto text-center">
|
|
<h1 class="text-4xl font-extrabold text-gray-100 tracking-tight sm:text-5xl">Photo Albums</h1>
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-300 mx-auto">
|
|
Visual documentation of successful grows and sterile setups.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-12 max-w-7xl mx-auto grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
|
{{ range .Pages }}
|
|
<a href="{{ .RelPermalink }}" class="group relative block rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all transform hover:-translate-y-1">
|
|
<div class="aspect-[4/3] bg-gray-800">
|
|
<!-- Cover Image (First image from params or fallback) -->
|
|
{{ $cover := "/images/IMG_0599.jpeg" }}
|
|
{{ if .Params.cover }}
|
|
{{ $cover = .Params.cover }}
|
|
{{ else if .Params.images }}
|
|
{{ range first 1 .Params.images }}
|
|
{{ $cover = .url }}
|
|
{{ end }}
|
|
{{ end }}
|
|
<img src="{{ $cover }}" alt="{{ .Title }}" class="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500">
|
|
</div>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-white">{{ .Title }}</h3>
|
|
<p class="text-gray-200 text-sm mt-1">{{ .Params.description }}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{ end }} |