valknar
3b359d2b37
A "View full image" button appears in the single-post hero alongside the return link. Clicking the lightbox main image also opens the same overlay from any page. The overlay is pure image on a near-black backdrop; click backdrop, close button, or Escape to dismiss. Escape is layered: closes zoom first, then lightbox if zoom is not open. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
82 lines
3.1 KiB
HTML
82 lines
3.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
{{- partial "head.html" . }}
|
|
</head>
|
|
<body>
|
|
{{- partial "header.html" . }}
|
|
|
|
<main id="content">
|
|
{{- block "main" . }}{{- end }}
|
|
</main>
|
|
|
|
{{- partial "footer.html" . }}
|
|
|
|
{{- partial "lightbox.html" . }}
|
|
|
|
<div id="ribbon"
|
|
class="ribbon fixed bottom-0 inset-x-0 z-[100]
|
|
flex items-center justify-between gap-4
|
|
px-[var(--pad)] py-3
|
|
bg-ink text-paper
|
|
font-sans font-medium text-[11px] leading-none tracking-[.16em] uppercase
|
|
transition-transform duration-300">
|
|
<span>Roux № {{ .Site.Params.issueNumber }} — out now. <a href="/issues/01/" class="border-b border-current ml-1">See the plates →</a></span>
|
|
<button id="ribbonClose" aria-label="Dismiss"
|
|
class="w-6 h-6 shrink-0 grid place-items-center border border-current/30 rounded-full
|
|
opacity-60 hover:opacity-100 transition-opacity duration-200">
|
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
{{/* Inline posts data for JS search + lightbox */}}
|
|
<script id="roux-data" type="application/json">
|
|
{{- $posts := slice }}
|
|
{{- range (where .Site.RegularPages "Section" "posts") }}
|
|
{{- $img := .Resources.GetMatch "*.png" }}
|
|
{{- $thumb := "" }}
|
|
{{- $card := "" }}
|
|
{{- if $img }}
|
|
{{- $t := $img.Resize "300x450 webp" }}
|
|
{{- $c := $img.Resize "900x1350 webp" }}
|
|
{{- $thumb = $t.RelPermalink }}
|
|
{{- $card = $c.RelPermalink }}
|
|
{{- end }}
|
|
{{- $post := dict
|
|
"id" .Params.plate
|
|
"slug" .Params.slug
|
|
"issue" (index (.Params.issues | default (slice "01")) 0)
|
|
"title" .Title
|
|
"description" .Params.description
|
|
"categories" .Params.categories
|
|
"tags" .Params.tags
|
|
"thumb" $thumb
|
|
"card" $card
|
|
"url" .RelPermalink
|
|
}}
|
|
{{- $posts = $posts | append $post }}
|
|
{{- end }}
|
|
{{- $posts | jsonify | safeJS }}
|
|
</script>
|
|
|
|
{{/* Pure image zoom — opened by hero button or clicking the lightbox main image */}}
|
|
<div id="imgZoom" class="img-zoom" role="dialog" aria-modal="true" aria-label="Full size image">
|
|
<button id="imgZoomClose"
|
|
class="absolute top-4 right-4 z-10
|
|
w-10 h-10 grid place-items-center
|
|
border border-white/20 rounded-full
|
|
text-white/60 hover:text-white hover:bg-white/10
|
|
transition-colors duration-200"
|
|
aria-label="Close full image">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M18 6 6 18"/><path d="m6 6 12 12"/>
|
|
</svg>
|
|
</button>
|
|
<img id="imgZoomImg" src="" alt="" class="max-w-[96vw] max-h-[96vh] object-contain select-none" />
|
|
</div>
|
|
|
|
<script src="/js/app.js" defer></script>
|
|
</body>
|
|
</html>
|