valknar
54a87dc4ed
Remove all BEM component classes (hero__*, card__*, issue-card__*, foot__*, masthead__*, searchpop__*, lb__*) from CSS and templates. Replace with Tailwind v4 utility classes inline in HTML. Create card.html partial to avoid repeating verbose utility strings across grid templates. Rename lightbox CSS to flat lb-* and search popup to sp-*. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
32 lines
3.1 KiB
HTML
32 lines
3.1 KiB
HTML
<div class="lb" id="lb" data-open="false" role="dialog" aria-modal="true" aria-label="Roux plate viewer">
|
|
<div class="lb-topbar">
|
|
<div class="lb-brand">
|
|
<svg viewBox="0 0 64 64" aria-hidden="true" style="height:24px;width:24px;flex:0 0 auto">
|
|
<defs><radialGradient id="lbBloom" cx="50%" cy="46%" r="58%"><stop offset="0" stop-color="#b34a30"/><stop offset=".6" stop-color="#8a3322"/><stop offset="1" stop-color="#5a1d15"/></radialGradient></defs>
|
|
<g fill="#6e2519" transform="translate(32 32)"><ellipse cx="0" cy="-16" rx="10.5" ry="14"/><ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(60)"/><ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(120)"/><ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(180)"/><ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(240)"/><ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(300)"/></g>
|
|
<g fill="url(#lbBloom)" transform="translate(32 32) rotate(30)"><ellipse cx="0" cy="-11" rx="8" ry="11"/><ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(60)"/><ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(120)"/><ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(180)"/><ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(240)"/><ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(300)"/></g>
|
|
<g fill="#9a3a26" transform="translate(32 32)"><ellipse cx="0" cy="-6" rx="5" ry="7.5"/><ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(72)"/><ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(144)"/><ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(216)"/><ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(288)"/></g>
|
|
<circle cx="32" cy="32" r="3.2" fill="#3a120c"/>
|
|
<circle cx="32" cy="31.4" r="1.2" fill="#c0573c" opacity=".7"/>
|
|
</svg>
|
|
<span style="font:400 22px/1 'Italiana',serif;letter-spacing:.04em;color:#f5f0e6">Roux</span>
|
|
<span style="opacity:.55">№ {{ .Site.Params.issueNumber }} · The Plates</span>
|
|
</div>
|
|
<div class="lb-index" id="lbIndex">000 / 100</div>
|
|
<button class="lb-close" data-act="close" aria-label="Close">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="lb-stage">
|
|
<button class="lb-nav lb-nav-prev" data-act="prev" aria-label="Previous">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
|
|
</button>
|
|
<div class="lb-track" id="lbTrack"></div>
|
|
<button class="lb-nav lb-nav-next" data-act="next" aria-label="Next">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>
|
|
</button>
|
|
</div>
|
|
<aside class="lb-meta" id="lbMeta"></aside>
|
|
<div class="lb-thumbs" id="lbThumbs"></div>
|
|
</div>
|