valknar
b3b9fb7ac6
Hugo Extended site with 426 cocktail recipes from the open cocktail dataset. Dark amber/gold editorial aesthetic, Tailwind CSS v4, Alpine.js client-side search and filtering, HTMX page transitions, Docker + nginx production build. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
30 lines
1.4 KiB
HTML
30 lines
1.4 KiB
HTML
{{ define "main" }}
|
|
<div class="bg-bg-deep border-b border-warm/10">
|
|
<div class="max-w-[1280px] mx-auto px-8 max-[860px]:px-5 py-16">
|
|
<div class="eyebrow mb-3">{{ .Type | title }}</div>
|
|
<h1 class="display text-[clamp(36px,6vw,72px)] mb-4">{{ .Title }}</h1>
|
|
<p class="text-ink-soft text-lg">{{ len .Pages }} {{ .Type | singularize }} types across {{ len .Site.RegularPages }} recipes.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-[1280px] mx-auto px-8 max-[860px]:px-5 py-16">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
{{- range .Pages.ByTitle -}}
|
|
<a
|
|
href="{{ .RelPermalink }}"
|
|
class="group flex items-center justify-between p-4 rounded-xl border border-warm/10 bg-surface hover:border-gold/40 hover:bg-surface-2 transition-all duration-200"
|
|
>
|
|
<div>
|
|
<div class="font-serif font-medium text-xl group-hover:text-gold transition-colors">{{ .Title }}</div>
|
|
{{- $cnt := len .Pages -}}
|
|
<div class="font-mono text-[11px] text-ink-mute mt-1">{{ $cnt }} {{ if eq $cnt 1 }}recipe{{ else }}recipes{{ end }}</div>
|
|
</div>
|
|
<div class="text-ink-faint group-hover:text-gold transition-colors">
|
|
{{- partial "icon.html" "arrow-right" -}}
|
|
</div>
|
|
</a>
|
|
{{- end -}}
|
|
</div>
|
|
</div>
|
|
{{ end }}
|