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">{{ . }}</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 -->
    <time class="label text-fog" datetime="{{ .Date.Format "2006-01-02" }}">
      {{- .Date.Format "January 2, 2006" -}}
    </time>
  </header>

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

  <!-- ── BANNER MEDIA — video if available, lightbox on click ──── -->
  {{- $bannerImg := .Resources.GetMatch "banner.png" -}}
  {{- if not $bannerImg -}}{{- $bannerImg = .Resources.GetMatch "01.png" -}}{{- end -}}
  {{- if $bannerImg -}}
    {{- $stem       := $bannerImg.Name | strings.TrimSuffix ".png" -}}
    {{- $bannerVid  := $.Resources.GetMatch (printf "%s.mp4" $stem) -}}
    {{- $webp       := $bannerImg.Resize "1200x webp" -}}
    {{- $lbItems    := slice (dict "img" $webp.RelPermalink "video" "") -}}
    {{- if $bannerVid -}}
      {{- $lbItems = $lbItems | append (dict "img" $webp.RelPermalink "video" $bannerVid.RelPermalink) -}}
    {{- end -}}
    <div
      class="w-full overflow-hidden mb-16 md:mb-24 cursor-zoom-in"
      style="height: clamp(320px, 60vh, 75vh)"
      x-data="{ items: {{ $lbItems | jsonify }} }"
      @click="$dispatch('lightbox:open', { items, idx: 0 })"
    >
      {{- if $bannerVid -}}
        <video
          class="w-full h-full object-cover object-center pointer-events-none"
          src="{{ $bannerVid.RelPermalink }}"
          poster="{{ $bannerImg.RelPermalink }}"
          autoplay
          loop
          muted
          playsinline
        ></video>
      {{- else -}}
        {{- partial "img.html" (dict "res" $bannerImg "widths" (slice 1200 1800) "sizes" "100vw" "class" "w-full h-full object-cover object-center pointer-events-none" "alt" .Title "loading" "eager") -}}
      {{- end -}}
    </div>
  {{- 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 -}}


  <!-- ── GENERATION NOTES (disabled — remove comment tags to enable)
{{- with .Params.prompt -}}
    <section class="gutter-x mb-20 md:mb-28">
      <div class="max-w-5xl mx-auto">
        <div class="flex items-center gap-5 mb-8">
          <span class="badge badge-outline">Generation Notes</span>
          <div class="flex-1 gradient-line"></div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-zinc">
          {{- with .scene -}}
            <div class="bg-concrete p-6 md:p-8">
              <p class="label text-fog mb-4">Scene</p>
              <p class="font-body text-sm text-chalk leading-relaxed">{{ . }}</p>
            </div>
          {{- end -}}
          {{- with .environment -}}
            <div class="bg-concrete p-6 md:p-8">
              <p class="label text-fog mb-4">Environment</p>
              <p class="font-body text-sm text-chalk leading-relaxed">{{ . }}</p>
            </div>
          {{- end -}}
          {{- with .style -}}
            <div class="bg-concrete p-6 md:p-8">
              <p class="label text-fog mb-4">Lighting & Style</p>
              <p class="font-body text-sm text-chalk leading-relaxed">{{ . }}</p>
            </div>
          {{- end -}}
        </div>
      </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"># {{ . }}</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 -}}