Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously an unversioned directory inside ~/src/blockninja-themes/noir. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
31 lines
1.1 KiB
Plaintext
31 lines
1.1 KiB
Plaintext
package main
|
|
|
|
// imagePairComponent renders a 50/50 photograph diptych with a shared caption.
|
|
templ imagePairComponent(data ImagePairData) {
|
|
<section data-block="noir:image_pair" class="py-12">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4" style="grid-template-columns: 1fr 1fr;">
|
|
if data.Left != "" {
|
|
<figure class="noir-figure">
|
|
<img src={ data.Left } alt={ data.Caption } loading="lazy" class="w-full h-auto block"/>
|
|
</figure>
|
|
} else {
|
|
<div class="hairline aspect-[4/5]" style="background-color: hsl(var(--muted));"></div>
|
|
}
|
|
if data.Right != "" {
|
|
<figure class="noir-figure">
|
|
<img src={ data.Right } alt={ data.Caption } loading="lazy" class="w-full h-auto block"/>
|
|
</figure>
|
|
} else {
|
|
<div class="hairline aspect-[4/5]" style="background-color: hsl(var(--muted));"></div>
|
|
}
|
|
</div>
|
|
if data.Caption != "" {
|
|
<p class="tracked-mono mt-3 text-center" style="color: hsl(var(--mutedForeground));">
|
|
{ data.Caption }
|
|
</p>
|
|
}
|
|
</div>
|
|
</section>
|
|
}
|