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>
2026-06-07 11:53:45 +02:00
commit b3b9fb7ac6
462 changed files with 9012 additions and 0 deletions
@@ -0,0 +1,58 @@
+{{/* Usage: {{ partial "cocktail-card.html" . }} — pass a cocktail Page */}}
+{{- $cocktail := . -}}
+{{- $img := $cocktail.Resources.GetMatch "cocktail.*" -}}
+{{- $nob := "Optional" -}}
+{{- with $cocktail.Params.alcoholic -}}
+  {{- if eq . "Alcoholic" -}}{{- $nob = "Spirited" -}}
+  {{- else if eq . "Non alcoholic" -}}{{- $nob = "Zero-proof" -}}
+  {{- end -}}
+{{- end -}}
+
+<a
+  href="{{ $cocktail.RelPermalink }}"
+  class="block border border-warm/10 rounded-[14px] overflow-hidden bg-surface transition-[transform,border-color,box-shadow] duration-[260ms] ease-[cubic-bezier(.2,.7,.3,1)] relative hover:-translate-y-1 hover:border-warm/18 hover:shadow-[0_24px_50px_-24px_rgba(0,0,0,.8)] card-wrap"
+  aria-label="{{ $cocktail.Title }}"
+>
+  <!-- Thumbnail -->
+  <div class="aspect-square relative overflow-hidden">
+    {{- if $img -}}
+      {{- partial "img.html" (dict
+        "res"   $img
+        "widths" (slice 500 900)
+        "sizes"  "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+        "class"  "card-img"
+        "alt"    $cocktail.Title
+      ) -}}
+    {{- else -}}
+      <img
+        src="{{ $cocktail.Params.drinkThumbnail }}"
+        alt="{{ $cocktail.Title }}"
+        loading="lazy"
+        decoding="async"
+        class="card-img"
+      />
+    {{- end -}}
+    <!-- Nob badge -->
+    <span class="absolute top-[11px] left-[11px] z-[2] font-mono text-[9px] tracking-[0.12em] uppercase px-[9px] py-1 rounded-full bg-[rgba(13,10,7,0.6)] backdrop-blur-[6px] border border-warm/10 text-ink-soft">
+      {{ $nob }}
+    </span>
+  </div>
+
+  <!-- Body -->
+  <div class="px-[17px] pt-4 pb-[18px]">
+    <div class="font-mono text-[10px] tracking-[0.16em] uppercase text-gold">
+      {{- with $cocktail.Params.categories -}}{{ index . 0 }}{{- end -}}
+    </div>
+    <h3 class="font-serif font-semibold text-[23px] leading-[1.05] tracking-tight mt-[7px] mb-[10px]">
+      {{ $cocktail.Title }}
+    </h3>
+    <div class="flex flex-wrap gap-1.5 font-mono text-[10px] text-ink-mute tracking-[0.04em]">
+      {{- with $cocktail.Params.glasses -}}
+        <span>{{ index . 0 }}</span>
+      {{- end -}}
+      {{- with $cocktail.Params.ingredients -}}
+        <span class="before:content-['·'] before:mr-1.5 before:opacity-60">{{ len . }} ingredients</span>
+      {{- end -}}
+    </div>
+  </div>
+</a>