pivoine.art/layouts/posts/single.html

{{- define "page-background" -}}
{{- with .Params.background -}}
<div class="fixed inset-0 -z-10 overflow-hidden" aria-hidden="true">
  {{- partial "media.html" (dict "media" . "class" "w-full h-full object-cover opacity-[0.15] blur-md scale-110" "lazy" false) -}}
  <div class="absolute inset-0" style="background: rgba(5,5,16,0.7)"></div>
</div>
{{- end -}}
{{- end -}}

{{- define "main" -}}

<!-- ── ARTICLE HEADER ────────────────────────────────────────── -->
<header class="gutter-x pt-36 pb-12 max-w-5xl mx-auto relative overflow-hidden">

  <!-- Faded decorative category text -->
  {{- with index .Params.categories 0 -}}
  <div class="graffiti-tag absolute -top-2 -right-4 select-none pointer-events-none"
    style="-webkit-text-stroke-color: rgba(155,0,255,0.08);" aria-hidden="true">{{ . }}</div>
  {{- end -}}

  <!-- Categories -->
  {{- with .Params.categories -}}
  <div class="flex flex-wrap gap-2 mb-6">
    {{- range . -}}
    <a
      href="/categories/{{ . | urlize }}/"
      class="badge badge-outline hover:bg-heat hover:text-white hover:border-heat transition-all"
    >{{ . }}</a>
    {{- end -}}
  </div>
  {{- end -}}

  <!-- Title -->
  <h1 class="font-display text-5xl md:text-7xl lg:text-8xl text-paper text-balance mb-8 leading-none">
    {{- .Title -}}
  </h1>

  <!-- Description -->
  {{- with .Description -}}
  <p class="text-chalk text-xl md:text-2xl max-w-2xl mb-10 leading-relaxed text-pretty font-body font-light">
    {{ . }}
  </p>
  {{- end -}}

  <!-- Author byline -->
  {{- with .Params.author -}}
    {{- $authorPage := site.GetPage (printf "authors/%s" .) -}}
    {{- with $authorPage -}}
      {{- partial "author-card.html" . -}}
    {{- end -}}
  {{- end -}}

  <!-- Date + reading info -->
  <div class="flex flex-wrap items-center gap-6">
    <time class="label text-fog" datetime="{{ .Date.Format "2006-01-02" }}">
      {{- .Date.Format "January 2, 2006" -}}
    </time>
    {{- $imgCount  := len (.Resources.Match "[0-9]*.png") -}}
    {{- $itemCount := $imgCount -}}
    {{- if and (eq $imgCount 0) .Params.items -}}{{- $itemCount = len .Params.items -}}{{- end -}}
    {{- if gt $itemCount 0 -}}
    <span class="label text-fog">{{ $itemCount }} {{ if eq $itemCount 1 }}Work{{ else }}Works{{ end }}</span>
    {{- end -}}
  </div>

</header>

<!-- ── GRADIENT DIVIDER ──────────────────────────────────────── -->
<div class="gradient-line mb-0"></div>

<!-- ── BANNER MEDIA — bundle banner.png → 01.png → .Params.banner ── -->
{{- $bannerImg := .Resources.GetMatch "banner.png" -}}
{{- if not $bannerImg -}}{{- $bannerImg = .Resources.GetMatch "01.png" -}}{{- end -}}
{{- if $bannerImg -}}
<div class="w-full overflow-hidden mb-16 md:mb-24" style="max-height: 75vh">
  {{- partial "img.html" (dict "res" $bannerImg "widths" (slice 1200 1800) "sizes" "100vw" "class" "w-full object-cover" "alt" .Title "loading" "eager") -}}
</div>
{{- else -}}{{- with .Params.banner -}}
<div class="w-full overflow-hidden mb-16 md:mb-24" style="max-height: 75vh">
  {{- partial "media.html" (dict "media" . "class" "w-full h-full object-cover" "lazy" false) -}}
</div>
{{- end -}}{{- end -}}

<!-- ── PROSE BODY ────────────────────────────────────────────── -->
{{- with .Content -}}
<article class="gutter-x mb-20 md:mb-28">
  <div class="max-w-5xl mx-auto">
    <div class="max-w-3xl prose-editorial">
      {{ . }}
    </div>
  </div>
</article>
{{- end -}}

<!-- ── GALLERY ───────────────────────────────────────────────── -->
{{- $bundleImages := .Resources.Match "[0-9]*.png" -}}
{{- $legacyItems  := slice -}}
{{- with .Params.items -}}{{- $legacyItems = . -}}{{- end -}}
{{- if or $bundleImages $legacyItems -}}
<section class="gutter-x pb-24 md:pb-32" aria-label="Gallery">
  <div class="max-w-5xl mx-auto">

  {{- if $bundleImages -}}
  <div class="flex items-center gap-5 mb-10">
    <span class="badge badge-gradient">Gallery</span>
    <span class="label text-fog">{{ len $bundleImages }} {{ if eq (len $bundleImages) 1 }}work{{ else }}works{{ end }}</span>
    <div class="flex-1 gradient-line ml-2"></div>
  </div>
  <!-- Numbered png+mp4 pairs from page bundle -->
  <div class="columns-1 sm:columns-2 lg:columns-3 gap-5 space-y-5">
    {{- range $bundleImages -}}
    {{- $stem  := .Name | strings.TrimSuffix ".png" -}}
    {{- $video := $.Resources.GetMatch (printf "%s.mp4" $stem) -}}
    <figure class="break-inside-avoid group card-comic">
      <div class="card-media min-h-48">
        {{- if $video -}}
        <video class="w-full" src="{{ $video.RelPermalink }}" poster="{{ .RelPermalink }}" autoplay loop muted playsinline></video>
        {{- else -}}
        {{- partial "img.html" (dict "res" . "widths" (slice 800 1200) "sizes" "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" "class" "w-full") -}}
        {{- end -}}
      </div>
    </figure>
    {{- end -}}
  </div>

  {{- else -}}
  <!-- Legacy front-matter items -->
  <div class="flex items-center gap-5 mb-10">
    <span class="badge badge-gradient">Gallery</span>
    <span class="label text-fog">{{ len $legacyItems }} {{ if eq (len $legacyItems) 1 }}work{{ else }}works{{ end }}</span>
    <div class="flex-1 gradient-line ml-2"></div>
  </div>
  <div x-data="{ selected: null }" class="columns-1 sm:columns-2 lg:columns-3 gap-5 space-y-5">
    {{- range $i, $item := $legacyItems -}}
    <figure class="break-inside-avoid group cursor-pointer card-comic" @click="selected = selected === {{ $i }} ? null : {{ $i }}">
      <div class="card-media">
        {{- partial "media.html" (dict "media" $item "class" "w-full") -}}
      </div>
      {{- with $item.description -}}
      <figcaption class="px-4 py-3 text-fog text-sm leading-relaxed font-body transition-colors group-hover:text-chalk">{{ . }}</figcaption>
      {{- end -}}
    </figure>
    {{- end -}}
  </div>
  {{- end -}}

  </div>
</section>
{{- end -}}

<!-- ── TAGS ─────────────────────────────────────────────────── -->
{{- with .Params.tags -}}
<footer class="gutter-x border-t border-zinc pt-10 pb-20">
  <div class="max-w-5xl mx-auto flex flex-wrap gap-3 items-center">
    <span class="label text-fog">Tagged:</span>
    {{- range . -}}
    <a
      href="/tags/{{ . | urlize }}/"
      class="badge badge-outline hover:bg-heat hover:text-white hover:border-heat transition-all"
    ># {{ . }}</a>
    {{- end -}}
  </div>
</footer>
{{- end -}}

<!-- ── RELATED POSTS ─────────────────────────────────────────── -->
{{- $related := .Site.RegularPages.Related . | first 3 -}}
{{- with $related -}}
<section class="bg-concrete border-t border-zinc gutter-x py-16 md:py-24 spray-bg">
  <div class="max-w-5xl mx-auto">
  <div class="flex items-center gap-5 mb-10">
    <h2 class="font-display text-3xl md:text-4xl text-paper leading-none">
      More <span class="text-gradient">Drops</span>
    </h2>
    <div class="flex-1 gradient-line ml-2"></div>
  </div>
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
    {{- range . -}}
    {{- partial "post-card.html" . -}}
    {{- end -}}
  </div>
  </div>
</section>
{{- end -}}

{{- end -}}