valknar/roux
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add full-image zoom overlay to single post pages

Browse Source 
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>
This commit is contained in:
Sebastian Krüger
2026-06-07 14:46:24 +02:00
parent 81e7417a1d
commit 3b359d2b37
4 changed files with 95 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/_default/single.html
+24 -2
View File
@@ -1,15 +1,37 @@
{{ define "main" }}
{{- $issue := index (.Params.issues | default (slice "01")) 0 }}
{{- $issueURL := printf "/issues/%s/" $issue }}
{{- $img := .Resources.GetMatch "*.png" }}
{{- $cardSrc := "" }}
{{- if $img }}{{- $c := $img.Resize "900x1350 webp" }}{{- $cardSrc = $c.RelPermalink }}{{- end }}
<section id="hero" class="px-[var(--pad)] pt-[clamp(36px,5vw,64px)] pb-[clamp(28px,3.5vw,48px)] border-b border-[var(--rule)]">
<div class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink-soft mb-4">
№ {{ $issue }} · {{ index (.Params.categories | default (slice "Plate")) 0 }}
</div>
<h1 class="font-display font-normal text-[clamp(48px,7vw,96px)] leading-[0.94] m-0 mb-4"><em>{{ .Title }}</em></h1>
<p class="font-serif italic text-[clamp(13px,1vw,16px)] leading-[1.65] text-ink-2 max-w-[55ch] m-0">
<p class="font-serif italic text-[clamp(13px,1vw,16px)] leading-[1.65] text-ink-2 max-w-[55ch] m-0 mb-5">
{{ .Params.description }}
<a href="{{ $issueURL }}" class="border-b border-current ml-1">Return to issue →</a>
</p>
<div class="flex items-center gap-5 flex-wrap">
<a href="{{ $issueURL }}"
class="font-sans font-medium text-[11px] leading-none tracking-[.16em] uppercase text-ink-soft
border-b border-[var(--rule)] pb-px transition-colors duration-200 hover:text-ink hover:border-ink">
← Return to issue
</a>
{{- if $cardSrc }}
<button id="viewFull" data-src="{{ $cardSrc }}"
class="inline-flex items-center gap-[7px]
font-sans font-medium text-[11px] leading-none tracking-[.16em] uppercase text-ink-soft
border-b border-[var(--rule)] pb-px transition-colors duration-200 hover:text-ink hover:border-ink">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
</svg>
View full image
</button>
{{- end }}
</div>
</section>
<section id="grid" data-density="default"