Alex Dunmow 98293cf8ab feat(magazine-bold): Wave A theme lane (WO-TF-021) — streetwear / fashion drops
Full Wave A build to the OVERRIDE-CONTRACT (frozen cms a0f07e2ae):

- 49 mandatory builtin overrides in templates/overrides/magazine-bold/,
  re-skinned to streetwear cover-story chrome (massive condensed uppercase
  Archivo Black headlines, heavy 2px rules, hard square edges, mono datelines,
  fluoro accent slabs). Every content field, provider var, custom tag and JS
  block preserved verbatim from the frozen builtin defaults; legacy button
  (link/style/label) and card (media/text) field reads already reconciled.
- 7 page templates: default, full-width, landing, article, blog-index,
  contact, auth.
- 4 persona blocks (deleted masthead/photo_essay/pull_quote/issue_archive/
  colophon — now overrides of navbar/gallery/quote/post-index/footer):
  cover_story, lookbook, drop_calendar, credits_ticker.
- 5 dual-mode presets (newsprint+voltage light / ink-black+fluoro dark), all
  19 tokens, dark tuned not inverted.
- Bundled OFL woff2: Archivo Black (display), Inter (body), IBM Plex Mono
  (labels); fonts.json + assets/fonts/LICENSES.md. All font-family via
  var(--font-heading|body|mono, fallback).
- Themed email-safe wrapper (tables, inline styles, streetwear defaults).
- Master pages (navbar/footer/slot chrome) + seed demo site (OFFCUT label:
  home, about, blog + 3 posts, contact with data table + row_inserted →
  email-admins workflow, login) in fashion-label voice.
- MID motion tier: marquee ticker, scroll reveal, duotone hover, scroll
  progress bar — all prefers-reduced-motion honored with static fallback,
  no canvas.
- Icon packs (lucide, simple-icons) declared in plugin.mod + RECOMMENDED_ICONS.

Verified: `make build` exit 0; `check-safety` 32 checks 19 ok 13 skip -> OK.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-05 12:38:05 +08:00

24 lines
3.2 KiB
Plaintext

{# video-embed override — magazine-bold hairline frame; fluoro play medallion. Fields + facade JS mirror builtin verbatim: aspect, url, media, poster, title, caption. #}
{% with aspect=aspect|default:"16:9" %}<figure data-block-override="magazine-bold:video-embed" class="bn-video my-8{% if class %} {{ class }}{% endif %}"><div class="bn-video-frame relative w-full overflow-hidden bg-muted {% if aspect == "4:3" %}aspect-[4/3]{% elif aspect == "1:1" %}aspect-square{% elif aspect == "21:9" %}aspect-[21/9]{% else %}aspect-video{% endif %}" data-bn-video data-video-url="{{ url|default:"" }}" data-video-media="{% if media %}{{ media|mediaURL }}{% endif %}"><button type="button" data-bn-video-play class="group absolute inset-0 flex h-full w-full items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring" aria-label="Play video{% if title %}: {{ title }}{% endif %}">{% if poster %}{% img poster alt=title|default:"" class="absolute inset-0 h-full w-full object-cover" %}{% endif %}<span class="absolute inset-0 bg-foreground/10 transition-colors group-hover:bg-foreground/20" aria-hidden="true"></span><span class="relative inline-flex h-16 w-16 items-center justify-center rounded-full bg-background/90 text-[hsl(var(--accent))] transition-transform group-hover:scale-105 motion-reduce:transform-none">::lucide:play:xl::</span></button></div>{% if caption %}<figcaption class="mt-3 text-center text-sm italic" style="color:hsl(var(--muted-foreground));font-family:var(--font-body, 'Inter', system-ui, sans-serif);">{{ caption }}</figcaption>{% endif %}</figure><script>
(function(){
if(window.__bnVideoFacade)return;window.__bnVideoFacade=true;
function yt(u){var m=u.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([\w-]{6,})/);return m?m[1]:null;}
function vim(u){var m=u.match(/vimeo\.com\/(?:video\/)?(\d+)/);return m?m[1]:null;}
document.addEventListener('click',function(e){
var btn=e.target.closest('[data-bn-video-play]');if(!btn)return;
var frame=btn.closest('[data-bn-video]');if(!frame)return;
e.preventDefault();
var url=frame.getAttribute('data-video-url')||'',media=frame.getAttribute('data-video-media')||'',node;
var vstyle='position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:rgba(0,0,0,1);';
if(media){node=document.createElement('video');node.src=media;node.controls=true;node.autoplay=true;node.setAttribute('playsinline','');node.style.cssText=vstyle;}
else{var y=yt(url),v=vim(url),embed;
if(y)embed='https://www.youtube-nocookie.com/embed/'+y+'?autoplay=1&rel=0';
else if(v)embed='https://player.vimeo.com/video/'+v+'?autoplay=1';
if(embed){node=document.createElement('iframe');node.src=embed;node.allow='autoplay; fullscreen; picture-in-picture';node.setAttribute('allowfullscreen','');node.setAttribute('title',btn.getAttribute('aria-label')||'Video');node.style.cssText='position:absolute;inset:0;width:100%;height:100%;border:0;';}
else if(url){node=document.createElement('video');node.src=url;node.controls=true;node.autoplay=true;node.setAttribute('playsinline','');node.style.cssText=vstyle;}
}
if(node){btn.remove();frame.appendChild(node);}
});
})();
</script>{% endwith %}