Initial commit — Bar Pivoine cocktail recipe site
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>
This commit is contained in:
@@ -0,0 +1,134 @@
|
||||
{{ define "main" }}
|
||||
{{- $img := .Resources.GetMatch "cocktail.*" -}}
|
||||
{{- $ingredients := .Params.ingredients | default (slice) -}}
|
||||
{{- $measures := .Params.ingredientMeasures | default (slice) -}}
|
||||
{{- $categories := .Params.categories | default (slice) -}}
|
||||
{{- $glasses := .Params.glasses | default (slice) -}}
|
||||
|
||||
{{/* Split instructions into numbered steps */}}
|
||||
{{- $steps := split .Content "\n" -}}
|
||||
|
||||
{{/* Related: same category via where, shuffle, exclude self */}}
|
||||
{{- $related := where .Site.RegularPages "Params.categories" "intersect" $categories -}}
|
||||
{{- $related = where $related "Title" "ne" .Title -}}
|
||||
{{- $related = first 4 (shuffle $related) -}}
|
||||
|
||||
<article class="max-w-[1280px] mx-auto px-8 max-[860px]:px-5 pb-10">
|
||||
|
||||
<!-- Breadcrumbs -->
|
||||
<nav class="flex gap-[11px] items-center font-mono text-[11px] tracking-[0.1em] uppercase text-ink-faint pt-10 pb-7 flex-wrap">
|
||||
<a href="/" class="text-ink-mute hover:text-gold-2 transition-colors duration-[160ms]">Bar Pivoine</a>
|
||||
<span>/</span>
|
||||
<a href="/recipes/" class="text-ink-mute hover:text-gold-2 transition-colors duration-[160ms]">Cellar</a>
|
||||
<span>/</span>
|
||||
<span class="text-gold">{{ .Title }}</span>
|
||||
</nav>
|
||||
|
||||
<!-- Detail grid -->
|
||||
<div class="grid grid-cols-[0.92fr_1.08fr] gap-14 items-start max-[900px]:grid-cols-1 max-[900px]:gap-8">
|
||||
|
||||
<!-- Left: sticky art frame -->
|
||||
<div class="sticky top-24 max-[900px]:static">
|
||||
<div class="relative aspect-square rounded-[18px] overflow-hidden border border-warm/18 shadow-[0_50px_90px_-45px_#000] frame-overlay">
|
||||
{{- if $img -}}
|
||||
{{- partial "img.html" (dict
|
||||
"res" $img
|
||||
"widths" (slice 800 1200)
|
||||
"sizes" "(max-width: 900px) 100vw, 45vw"
|
||||
"class" "w-full h-full object-cover"
|
||||
"alt" .Title
|
||||
"loading" "eager"
|
||||
) -}}
|
||||
{{- else -}}
|
||||
<img
|
||||
src="{{ .Params.drinkThumbnail }}"
|
||||
alt="{{ .Title }}"
|
||||
loading="eager"
|
||||
decoding="sync"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
{{- end -}}
|
||||
</div>
|
||||
<!-- Caption -->
|
||||
<div class="flex justify-between pt-[14px] px-1 font-mono text-[11px] tracking-[0.1em] uppercase text-ink-mute">
|
||||
<span>{{ range $glasses }}{{ . }}{{ end }}</span>
|
||||
<span class="text-gold">{{ if $img }}Photographed{{ else }}House pour{{ end }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: info column -->
|
||||
<div>
|
||||
<!-- Category eyebrow -->
|
||||
<div class="eyebrow">{{ range first 1 $categories }}{{ . }}{{ end }}</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="display text-[clamp(48px,6vw,84px)] mt-[14px]">{{ .Title }}</h1>
|
||||
|
||||
<!-- Chips -->
|
||||
<div class="flex flex-wrap gap-[9px] mt-[26px] mb-2">
|
||||
{{- with .Params.alcoholic -}}
|
||||
<span class="chip"><span class="dot"></span>{{ . }}</span>
|
||||
{{- end -}}
|
||||
{{- range $glasses -}}
|
||||
<a href="/glasses/{{ . | urlize }}/" class="chip"><span class="dot"></span>{{ . }}</a>
|
||||
{{- end -}}
|
||||
{{- range $categories -}}
|
||||
<a href="/categories/{{ . | urlize }}/" class="chip"><span class="dot"></span>{{ . }}</a>
|
||||
{{- end -}}
|
||||
</div>
|
||||
|
||||
<!-- Two columns: ingredients + method -->
|
||||
<div class="grid grid-cols-[1fr_1.15fr] gap-11 mt-10 max-[900px]:grid-cols-1 max-[900px]:gap-8">
|
||||
|
||||
<!-- Ingredients -->
|
||||
<div>
|
||||
<h4 class="font-mono text-[11px] tracking-[0.2em] uppercase text-gold mb-[18px] pb-3 border-b border-warm/10">Ingredients</h4>
|
||||
<ul class="list-none m-0 p-0">
|
||||
{{- range $i, $ingredient := $ingredients -}}
|
||||
<li class="flex justify-between items-baseline gap-3.5 py-3 border-b border-warm/[0.05]">
|
||||
<a
|
||||
href="/ingredients/{{ $ingredient | urlize }}/"
|
||||
class="font-serif text-[20px] text-ink transition-colors duration-[160ms] hover:text-gold-2"
|
||||
>{{ $ingredient }}</a>
|
||||
<span class="font-mono text-[12px] text-ink-mute text-right whitespace-nowrap tracking-[0.02em]">
|
||||
{{- if lt $i (len $measures) -}}{{ index $measures $i }}{{- else -}} {{- end -}}
|
||||
</span>
|
||||
</li>
|
||||
{{- end -}}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Method -->
|
||||
<div>
|
||||
<h4 class="font-mono text-[11px] tracking-[0.2em] uppercase text-gold mb-[18px] pb-3 border-b border-warm/10">Method</h4>
|
||||
<ol class="list-none m-0 p-0">
|
||||
{{ .Content }}
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- ══ RELATED ════════════════════════════════════════════════════════════ -->
|
||||
{{- if gt (len $related) 0 -}}
|
||||
<div class="max-w-[1280px] mx-auto px-8 max-[860px]:px-5 mt-[84px] pt-[10px]">
|
||||
|
||||
<div class="flex items-end justify-between gap-6 mb-[38px]">
|
||||
<div>
|
||||
<div class="eyebrow">From the same shelf</div>
|
||||
<h2 class="font-serif font-medium text-[clamp(34px,5vw,56px)] leading-none tracking-[-0.015em] mt-[10px] mb-0">You may also pour</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid [grid-template-columns:repeat(auto-fill,minmax(258px,1fr))] gap-[22px] max-[560px]:[grid-template-columns:repeat(auto-fill,minmax(150px,1fr))] max-[560px]:gap-3.5">
|
||||
{{- range $related -}}
|
||||
{{- partial "cocktail-card.html" . -}}
|
||||
{{- end -}}
|
||||
</div>
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user