fix(magazine-bold): remediate layout/whitespace + mobile responsiveness
Layout/whitespace:
- cover_story: fix hero deck ragged one-word-per-line wrap (44px text-deck in
a narrow 3-col rail) via a right-sized inline standfirst; keep proven grid
spans; trim doubled vertical padding.
- card: story titles were rendered by .mb-caps at 0.72rem tracked mono-caps,
reading as cramped tiny strips; restore a real Archivo Black headline size.
- newsletter-signup: replace the twin stray dash artifact (two mb-rule bars)
with a single fluoro accent bar; tighten padding.
- landing: constrain the story river to a cohesive editorial column (mb-river)
instead of full 80rem (killed the dead space beside text-only cards); trim
stacked section padding across lead/river/drop_calendar/lookbook/newsletter.
Empty-media graceful states (demo seed ships no images):
- hero (split): stop rendering the min-h-[320px] bg-muted half-panel when no
backgroundImage; text takes full width instead.
- video-embed: gate the whole aspect frame on url|media (was a full empty box
with a dead play button).
- image: guard the sizing box on src so an absent image collapses.
- logo-strip / hero trustLogos: defensive {% if logo.image %} guards.
Mobile responsiveness (JIT does not reliably scan theme .ninjatpl, so
layout-critical responsive rules are literal manifest CSS, not theme utility
classes):
- text-folio: break-word + lower clamp floor (54px) to prevent horizontal
overflow of giant headlines at ~375px.
- lookbook grid + river column driven by guaranteed .mb-grid-resp/.mb-river.
- stats: drop divide-x (spurious divider on row-wrap on mobile).
Scroll-reveal hardening (.mb-reveal was opacity:0 with the observer script only
in cover_story, so lookbook on /about stayed permanently hidden; .no-js
fallback was dead): default visible, JS opts in to hide-then-reveal, safety-net
full reveal on timeout + window load, reduced-motion/no-JS/no-observer all show.
No version bump. Build + verify + check-safety all exit 0.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Alex Dunmow
parent
70fe2b2641
commit
921fa33f6b
@ -1,23 +1,30 @@
|
||||
{# cover_story (magazine-bold) — asymmetric cover: mono folio kicker, massive condensed headline, deck, duotone cover image, shop/read CTA. Fields: kicker, headline (richtext), deck (richtext), image (media), link, linkLabel. Image via {% img %} (media filter not registered in block render path). MID motion: mb-reveal + duotone hover, reduced-motion safe. #}
|
||||
<section data-block="magazine-bold:cover_story" class="w-full py-12 md:py-16">
|
||||
<section data-block="magazine-bold:cover_story" class="w-full overflow-hidden py-10 md:py-12">
|
||||
<div class="mx-auto max-w-6xl px-4 sm:px-6">
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-12 lg:items-end">
|
||||
<div class="lg:col-span-2">{% if kicker %}<div class="mb-caps text-muted-foreground">{{ kicker }}</div>{% endif %}</div>
|
||||
<div class="lg:col-span-7"><h1 class="text-folio text-foreground">{% if headline %}{{ headline|safe }}{% else %}Cover story{% endif %}</h1></div>
|
||||
<div class="lg:col-span-3">{% if deck %}<div class="text-deck text-muted-foreground">{{ deck|safe }}</div>{% endif %}</div>
|
||||
<div class="lg:col-span-3">{% if deck %}<div class="text-muted-foreground" style="font-family:var(--font-body, 'Inter', system-ui, sans-serif);font-size:clamp(1.05rem,1.6vw,1.5rem);line-height:1.3;">{{ deck|safe }}</div>{% endif %}</div>
|
||||
</div>
|
||||
{% if image %}<div class="mb-reveal mb-duotone mt-10 aspect-[16/9] w-full overflow-hidden">{% img image alt="" class="h-full w-full object-cover" layout="hero" %}</div>{% endif %}
|
||||
{% if link %}<div class="mt-6"><a href="{{ link }}" class="mb-button">{{ linkLabel|default:"Read the story" }}</a></div>{% endif %}
|
||||
{% if image %}<div class="mb-reveal mb-duotone mt-8 aspect-[16/9] w-full overflow-hidden">{% img image alt="" class="h-full w-full object-cover" layout="hero" %}</div>{% endif %}
|
||||
{% if link %}<div class="mt-7"><a href="{{ link }}" class="mb-button">{{ linkLabel|default:"Read the story" }}</a></div>{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
(function(){
|
||||
if(window.__mbReveal)return;window.__mbReveal=1;
|
||||
document.documentElement.classList.remove('no-js');
|
||||
function run(){
|
||||
var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
var els=document.querySelectorAll('.mb-reveal');
|
||||
if(!els.length)return;
|
||||
if(reduce||!('IntersectionObserver' in window)){els.forEach(function(el){el.classList.add('mb-in');});return;}
|
||||
var io=new IntersectionObserver(function(entries){entries.forEach(function(e){if(e.isIntersecting){e.target.classList.add('mb-in');io.unobserve(e.target);}});},{threshold:0.15});
|
||||
els.forEach(function(el){el.classList.add('mb-armed');});
|
||||
var io=new IntersectionObserver(function(entries){entries.forEach(function(e){if(e.isIntersecting){e.target.classList.add('mb-in');io.unobserve(e.target);}});},{threshold:0.12,rootMargin:'0px 0px -8% 0px'});
|
||||
els.forEach(function(el){io.observe(el);});
|
||||
var revealAll=function(){els.forEach(function(el){el.classList.add('mb-in');});};
|
||||
setTimeout(revealAll,900);
|
||||
window.addEventListener('load',revealAll,{once:true});
|
||||
}
|
||||
if(document.readyState!='loading')run();else document.addEventListener('DOMContentLoaded',run);
|
||||
})();
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{# drop_calendar (magazine-bold) — dated list of drops: mono datelines, condensed names, a status tag. Fields: heading, intro, drops[].date/.name/.detail/.status(live|soon|sold)/.link/.linkLabel. Static, no motion. #}
|
||||
<section data-block="magazine-bold:drop_calendar" class="w-full py-12 md:py-16">
|
||||
<section data-block="magazine-bold:drop_calendar" class="w-full overflow-hidden py-10 md:py-12">
|
||||
<div class="mx-auto max-w-4xl px-4 sm:px-6">
|
||||
{% if heading %}<h2 class="mb-heading text-3xl md:text-5xl text-foreground">{{ heading }}</h2>{% endif %}
|
||||
{% if intro %}<p class="mt-4 max-w-2xl text-deck text-muted-foreground">{{ intro }}</p>{% endif %}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
{# lookbook (magazine-bold) — grid of duotone look frames with mono numbering, captions and optional shop links. Fields: heading, intro, looks[].image/.caption/.credit/.link/.linkLabel. Image via {% img %} (media filter not registered in block render path). MID motion: duotone hover + mb-reveal, reduced-motion safe. #}
|
||||
<section data-block="magazine-bold:lookbook" class="w-full py-12 md:py-16">
|
||||
<section data-block="magazine-bold:lookbook" class="w-full overflow-hidden py-10 md:py-12">
|
||||
<div class="mx-auto max-w-6xl px-4 sm:px-6">
|
||||
{% if heading %}<h2 class="mb-heading text-3xl md:text-5xl text-foreground">{{ heading }}</h2>{% endif %}
|
||||
{% if intro %}<p class="mt-4 max-w-2xl text-deck text-muted-foreground">{{ intro }}</p>{% endif %}
|
||||
{% if looks %}
|
||||
<div class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div class="mt-10 mb-grid-resp mb-cols-3">
|
||||
{% for look in looks %}
|
||||
<figure class="mb-reveal flex flex-col">
|
||||
{% if look.image %}<div class="mb-duotone aspect-[3/4] w-full overflow-hidden">{% img look.image alt=look.caption|default:"" class="h-full w-full object-cover" %}</div>{% endif %}
|
||||
@ -22,3 +22,21 @@
|
||||
{% else %}<div class="mb-caption py-12">No looks yet.</div>{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
(function(){
|
||||
if(window.__mbReveal)return;window.__mbReveal=1;
|
||||
function run(){
|
||||
var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
var els=document.querySelectorAll('.mb-reveal');
|
||||
if(!els.length)return;
|
||||
if(reduce||!('IntersectionObserver' in window)){els.forEach(function(el){el.classList.add('mb-in');});return;}
|
||||
els.forEach(function(el){el.classList.add('mb-armed');});
|
||||
var io=new IntersectionObserver(function(entries){entries.forEach(function(e){if(e.isIntersecting){e.target.classList.add('mb-in');io.unobserve(e.target);}});},{threshold:0.12,rootMargin:'0px 0px -8% 0px'});
|
||||
els.forEach(function(el){io.observe(el);});
|
||||
var revealAll=function(){els.forEach(function(el){el.classList.add('mb-in');});};
|
||||
setTimeout(revealAll,900);
|
||||
window.addEventListener('load',revealAll,{once:true});
|
||||
}
|
||||
if(document.readyState!='loading')run();else document.addEventListener('DOMContentLoaded',run);
|
||||
})();
|
||||
</script>
|
||||
|
||||
@ -359,10 +359,12 @@ css:
|
||||
/* --- Display size utilities (folio / deck / kicker) --- */
|
||||
.text-folio {
|
||||
font-family: var(--font-heading, "Archivo Black", "Arial Black", sans-serif);
|
||||
font-size: clamp(72px, 16vw, 220px);
|
||||
font-size: clamp(54px, 15vw, 220px);
|
||||
line-height: 0.82;
|
||||
letter-spacing: -0.04em;
|
||||
text-transform: uppercase;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
.text-deck {
|
||||
font-family: var(--font-body, "Inter", system-ui, sans-serif);
|
||||
@ -390,6 +392,26 @@ css:
|
||||
.mb-frame-half, .mb-frame-full, .mb-frame-tall { grid-column: 1 / -1; grid-row: auto; }
|
||||
}
|
||||
|
||||
/* --- Guaranteed responsive helpers — host Tailwind JIT does NOT reliably scan
|
||||
* theme .ninjatpl files, so any layout-critical responsive rule lives here as
|
||||
* literal CSS (always emitted) instead of interpolated/utility classes that
|
||||
* could be dropped (grids that then never collapse on mobile). --- */
|
||||
.mb-river {
|
||||
max-width: 64rem;
|
||||
margin-left: auto; margin-right: auto;
|
||||
padding-left: 1rem; padding-right: 1rem;
|
||||
}
|
||||
.mb-grid-resp { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
|
||||
@media (min-width: 640px) {
|
||||
.mb-grid-resp.mb-cols-2, .mb-grid-resp.mb-cols-3, .mb-grid-resp.mb-cols-4 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.mb-grid-resp.mb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.mb-grid-resp.mb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
/* --- Color-block accent panel --- */
|
||||
.colorblock-accent { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
|
||||
|
||||
@ -412,13 +434,16 @@ css:
|
||||
.mb-duotone:hover::after { opacity: 0.55; }
|
||||
}
|
||||
|
||||
/* --- Scroll reveal (MID motion; static fallback) --- */
|
||||
.mb-reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; }
|
||||
.mb-reveal.mb-in { opacity: 1; transform: none; }
|
||||
/* --- Scroll reveal (MID motion) — ROBUST: visible by default (no-JS / no-observer
|
||||
* / reduced-motion / un-scrolled full-page capture all show content). JS opts
|
||||
* IN to the hidden-then-reveal animation by adding .mb-armed, and a safety net
|
||||
* force-reveals everything. Never leaves content permanently hidden. --- */
|
||||
.mb-reveal { opacity: 1; transform: none; }
|
||||
.mb-reveal.mb-armed { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; }
|
||||
.mb-reveal.mb-armed.mb-in { opacity: 1; transform: none; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.mb-reveal { opacity: 1; transform: none; transition: none; }
|
||||
.mb-reveal, .mb-reveal.mb-armed { opacity: 1; transform: none; transition: none; }
|
||||
}
|
||||
.no-js .mb-reveal { opacity: 1; transform: none; }
|
||||
|
||||
/* --- Marquee ticker (MID motion; paused on hover; static fallback) --- */
|
||||
.mb-marquee { overflow: hidden; white-space: nowrap; }
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
<body class="antialiased min-h-screen flex flex-col bg-background text-foreground" style="font-family: var(--font-body, "Inter", system-ui, sans-serif);">
|
||||
{{ admin_banner_html|safe }}
|
||||
{% if slots.masthead %}<header class="w-full">{{ slots.masthead|safe }}</header>{% endif %}
|
||||
<main class="flex-grow w-full">
|
||||
{% if slots.lead %}<section class="mb-wide py-10 md:py-14">{{ slots.lead|safe }}</section>{% endif %}
|
||||
{% if slots.river %}<section class="mb-wide pb-10 md:pb-16"><hr class="mb-rule mb-10">{{ slots.river|safe }}</section>{% endif %}
|
||||
<main class="flex-grow w-full overflow-x-hidden">
|
||||
{% if slots.lead %}<section class="mb-wide py-8 md:py-12">{{ slots.lead|safe }}</section>{% endif %}
|
||||
{% if slots.river %}<section class="mb-river pb-10 md:pb-14"><hr class="mb-rule mb-8">{{ slots.river|safe }}</section>{% endif %}
|
||||
</main>
|
||||
{% if slots.footer %}<footer class="w-full mt-auto">{{ slots.footer|safe }}</footer>{% endif %}
|
||||
{{ body_end_html|safe }}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{# card override — magazine-bold hairline panel; accent border on hover, fluoro link. Fields mirror builtin: layout, link, media, title, text, linkLabel. Media via {% img %}. #}
|
||||
{% with layout=layout|default:"vertical" %}
|
||||
<article data-block-override="magazine-bold:card" class="bn-card mb-panel overflow-hidden bg-card text-card-foreground transition-colors hover:border-[hsl(var(--accent))] {% if layout == "horizontal" %}flex flex-col sm:flex-row{% endif %}{% if class %} {{ class }}{% endif %}">{% if link %}<a href="{{ link }}" class="contents">{% endif %}{% if media %}<div class="overflow-hidden bg-muted {% if layout == "horizontal" %}sm:w-2/5 sm:shrink-0{% endif %}">{% if layout == "horizontal" %}{% img media alt=title|default:"" class="h-full w-full object-cover" %}{% else %}{% img media alt=title|default:"" class="aspect-video h-full w-full object-cover" %}{% endif %}</div>{% endif %}<div class="flex flex-col gap-2 p-5 md:p-6 {% if layout == "horizontal" %}justify-center{% endif %}">{% if title %}<h3 class="mb-caps text-lg" style="font-family:var(--font-heading, 'Archivo Black', 'Arial Black', sans-serif);color:hsl(var(--foreground));">{{ title }}</h3>{% endif %}{% if text %}<div class="text-sm leading-relaxed" style="color:hsl(var(--muted-foreground));font-family:var(--font-body, 'Inter', system-ui, sans-serif);">{{ text|safe }}</div>{% endif %}{% if linkLabel and link %}<span class="mt-2 inline-flex items-center gap-1 text-sm mb-link">{{ linkLabel }}::lucide:arrow-right:sm::</span>{% endif %}</div>{% if link %}</a>{% endif %}</article>
|
||||
<article data-block-override="magazine-bold:card" class="bn-card mb-panel overflow-hidden bg-card text-card-foreground transition-colors hover:border-[hsl(var(--accent))] {% if layout == "horizontal" %}flex flex-col sm:flex-row{% endif %}{% if class %} {{ class }}{% endif %}">{% if link %}<a href="{{ link }}" class="contents">{% endif %}{% if media %}<div class="overflow-hidden bg-muted {% if layout == "horizontal" %}sm:w-2/5 sm:shrink-0{% endif %}">{% if layout == "horizontal" %}{% img media alt=title|default:"" class="h-full w-full object-cover" %}{% else %}{% img media alt=title|default:"" class="aspect-video h-full w-full object-cover" %}{% endif %}</div>{% endif %}<div class="flex flex-col gap-2 p-5 md:p-6 {% if layout == "horizontal" %}justify-center{% endif %}">{% if title %}<h3 style="font-family:var(--font-heading, 'Archivo Black', 'Arial Black', sans-serif);color:hsl(var(--foreground));font-size:1.25rem;line-height:1.12;letter-spacing:-0.01em;text-transform:uppercase;">{{ title }}</h3>{% endif %}{% if text %}<div class="text-sm leading-relaxed" style="color:hsl(var(--muted-foreground));font-family:var(--font-body, 'Inter', system-ui, sans-serif);">{{ text|safe }}</div>{% endif %}{% if linkLabel and link %}<span class="mt-2 inline-flex items-center gap-1 text-sm mb-link">{{ linkLabel }}::lucide:arrow-right:sm::</span>{% endif %}</div>{% if link %}</a>{% endif %}</article>
|
||||
{% endwith %}
|
||||
|
||||
@ -21,13 +21,13 @@
|
||||
</div>{% endif %}
|
||||
{% if trustLogos %}<div class="mt-10">
|
||||
<p class="mb-caps text-xs text-muted-foreground mb-3">Acclaim</p>
|
||||
<div class="flex flex-wrap items-center gap-6{% if align == "center" %} justify-center{% endif %}">{% for logo in trustLogos %}{% if logo.url %}<a href="{{ logo.url }}" target="_blank" rel="noopener noreferrer" class="opacity-60 transition-opacity hover:opacity-100">{% img logo.image alt=logo.alt class="h-8 w-auto" %}</a>{% else %}{% img logo.image alt=logo.alt class="h-8 w-auto opacity-60" %}{% endif %}{% endfor %}</div>
|
||||
<div class="flex flex-wrap items-center gap-6{% if align == "center" %} justify-center{% endif %}">{% for logo in trustLogos %}{% if logo.image %}{% if logo.url %}<a href="{{ logo.url }}" target="_blank" rel="noopener noreferrer" class="opacity-60 transition-opacity hover:opacity-100">{% img logo.image alt=logo.alt class="h-8 w-auto" %}</a>{% else %}{% img logo.image alt=logo.alt class="h-8 w-auto opacity-60" %}{% endif %}{% endif %}{% endfor %}</div>
|
||||
</div>{% endif %}
|
||||
{% endmacro %}
|
||||
{% if variant == "split" %}
|
||||
<section data-block-override="magazine-bold:hero" class="hero grid grid-cols-1 lg:grid-cols-2 overflow-hidden bg-background text-foreground{% if class %} {{ class }}{% endif %}">
|
||||
<div class="relative min-h-[320px] bg-muted {% if mediaPosition == "left" %}order-1 lg:order-1{% else %}order-1 lg:order-2{% endif %}">{% if hasImage %}{% img backgroundImage alt=headlineText class="absolute inset-0 h-full w-full object-cover" layout="hero" %}{% endif %}</div>
|
||||
<div class="flex flex-col justify-center px-6 py-16 lg:px-12 {% if mediaPosition == "left" %}order-2 lg:order-2{% else %}order-2 lg:order-1{% endif %}"><div class="max-w-lg text-left">{{ herocontent("left") }}</div></div>
|
||||
<section data-block-override="magazine-bold:hero" class="hero grid grid-cols-1 overflow-hidden bg-background text-foreground{% if hasImage %} lg:grid-cols-2{% endif %}{% if class %} {{ class }}{% endif %}">
|
||||
{% if hasImage %}<div class="relative min-h-[320px] bg-muted {% if mediaPosition == "left" %}order-1 lg:order-1{% else %}order-1 lg:order-2{% endif %}">{% img backgroundImage alt=headlineText class="absolute inset-0 h-full w-full object-cover" layout="hero" %}</div>{% endif %}
|
||||
<div class="flex flex-col justify-center px-6 py-16 lg:px-12 {% if mediaPosition == "left" %}order-2 lg:order-2{% else %}order-2 lg:order-1{% endif %}"><div class="{% if hasImage %}max-w-lg{% else %}mx-auto max-w-3xl{% endif %} text-left">{{ herocontent("left") }}</div></div>
|
||||
</section>
|
||||
{% else %}
|
||||
{% set align = "center" %}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
{# image override — plain magazine-bold plate, no ornament frame. Fields mirror builtin: src, alt, caption, size, align, aspectRatio, objectFit. Media resolved via {% img %} (media filter is not registered in the block render path). #}
|
||||
{% with size=size|default:"full" align=align|default:"center" objectFit=objectFit|default:"cover" %}
|
||||
<figure data-block-override="magazine-bold:image" class="my-8 flex-1 {% if align == "left" %}flex justify-start{% elif align == "right" %}flex justify-end{% else %}flex justify-center{% endif %}{% if class %} {{ class }}{% endif %}">
|
||||
<div class="{% if size == "xs" %}max-w-[200px] w-full{% elif size == "sm" %}max-w-[400px] w-full{% elif size == "md" %}max-w-[600px] w-full{% elif size == "lg" %}max-w-[800px] w-full{% else %}w-full{% endif %}">
|
||||
{% if src %}<div class="{% if size == "xs" %}max-w-[200px] w-full{% elif size == "sm" %}max-w-[400px] w-full{% elif size == "md" %}max-w-[600px] w-full{% elif size == "lg" %}max-w-[800px] w-full{% else %}w-full{% endif %}">
|
||||
<div class="relative overflow-hidden bg-muted {% if aspectRatio == "square" %}aspect-square{% elif aspectRatio == "video" %}aspect-video{% elif aspectRatio == "portrait" %}aspect-[3/4]{% elif aspectRatio == "wide" %}aspect-[21/9]{% endif %}">
|
||||
{% if objectFit == "contain" %}{% img src alt=alt class="w-full h-full object-contain" layout=size %}{% elif objectFit == "fill" %}{% img src alt=alt class="w-full h-full object-fill" layout=size %}{% elif objectFit == "none" %}{% img src alt=alt class="w-full h-full object-none" layout=size %}{% else %}{% img src alt=alt class="w-full h-full object-cover" layout=size %}{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>{% endif %}
|
||||
{% 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>
|
||||
{% endwith %}
|
||||
|
||||
@ -3,11 +3,11 @@
|
||||
{% if heading %}<div class="mb-8 flex items-center justify-center gap-4"><span class="mb-rule w-12"></span><p class="mb-caps text-xs text-muted-foreground">{{ heading }}</p><span class="mb-rule w-12"></span></div>{% endif %}
|
||||
<div class="mt-8 {% if marquee %}group relative overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]{% endif %}">
|
||||
<div class="flex flex-wrap items-center justify-center gap-x-10 gap-y-6 {% if marquee %}flex-nowrap [animation:logo-marquee_30s_linear_infinite] motion-reduce:[animation:none] group-hover:[animation-play-state:paused]{% endif %}">
|
||||
{% for logo in logos %}
|
||||
{% for logo in logos %}{% if logo.image %}
|
||||
{% if logo.url %}<a href="{{ logo.url }}" class="block shrink-0 opacity-80 transition hover:opacity-100">{% endif %}
|
||||
<span class="inline-flex h-8 items-center{% if grayscale %} grayscale transition-[filter] hover:grayscale-0{% endif %}">{% img logo.image alt=logo.alt class="h-8 w-auto object-contain" %}</span>
|
||||
{% if logo.url %}</a>{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
{# newsletter-signup (magazine-bold) — the {% signup_form %} tag carries the #}
|
||||
{# untouchable subscribe wiring (/api/lists/subscribe HTMX post + honeypot); #}
|
||||
{# this template wraps it in a quiet mb-panel — no loud filled band. #}
|
||||
<section data-block-override="magazine-bold:newsletter-signup" class="py-12 bg-background text-foreground md:py-16{% if class %} {{ class }}{% endif %}">
|
||||
<section data-block-override="magazine-bold:newsletter-signup" class="py-8 bg-background text-foreground md:py-12{% if class %} {{ class }}{% endif %}">
|
||||
<div class="mx-auto max-w-3xl px-4">
|
||||
<div class="mb-panel {% if layout == "inline" %}bg-card px-6 py-12 text-card-foreground md:px-12{% else %}bg-card px-6 py-12 text-card-foreground md:px-10{% endif %} text-center">
|
||||
<div class="mb-4 flex items-center justify-center gap-4"><span class="mb-rule w-12"></span><span class="mb-rule w-12"></span></div>
|
||||
<div class="mb-panel {% if layout == "inline" %}bg-card px-6 py-10 text-card-foreground md:px-12{% else %}bg-card px-6 py-10 text-card-foreground md:px-10{% endif %} text-center">
|
||||
<div class="mb-5 flex justify-center"><span style="display:inline-block;height:4px;width:4rem;background-color:hsl(var(--accent));"></span></div>
|
||||
{% if title %}<h2 class="mb-caps text-2xl md:text-3xl" style="font-family:var(--font-heading, "Archivo Black", 'Arial Black', sans-serif)">{{ title }}</h2>{% endif %}
|
||||
{% if description %}<p class="mx-auto mt-4 max-w-xl {% if layout == "inline" %}text-muted-foreground{% else %}text-muted-foreground{% endif %}" style="font-family:var(--font-body, "Inter", system-ui, sans-serif)">{{ description }}</p>{% endif %}
|
||||
<div class="mx-auto mt-6 max-w-md">{% signup_form list=listSlug source=source submit=submitText success_message=successMessage placeholder=placeholder %}</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="mx-auto max-w-6xl px-4">
|
||||
{% if heading %}<h2 class="mb-caps text-center text-3xl text-foreground md:text-4xl" style="font-family:var(--font-heading, 'Archivo Black', 'Arial Black', sans-serif)">{{ heading }}</h2>{% endif %}
|
||||
{% if intro %}<p class="mx-auto mt-4 max-w-2xl text-center text-lg text-muted-foreground" style="font-family:var(--font-body, 'Inter', system-ui, sans-serif)">{{ intro }}</p>{% endif %}
|
||||
<dl class="mt-12 grid grid-cols-2 gap-8 divide-x divide-[hsl(var(--border))] {% if columns == 2 %}md:grid-cols-2{% elif columns == 3 %}md:grid-cols-3{% else %}md:grid-cols-4{% endif %}">
|
||||
<dl class="mt-12 grid grid-cols-2 gap-8 {% if columns == 2 %}md:grid-cols-2{% elif columns == 3 %}md:grid-cols-3{% else %}md:grid-cols-4{% endif %}">
|
||||
{% for item in items %}
|
||||
<div class="px-2 text-center">
|
||||
<dd class="text-4xl font-bold tracking-tight text-[hsl(var(--accent))] md:text-5xl" style="font-family:var(--font-heading)">{% if item.prefix %}{{ item.prefix }}{% endif %}<span{% if countUp %} data-countup-value="{{ item.value }}"{% endif %}>{{ item.value }}</span>{% if item.suffix %}{{ item.suffix }}{% endif %}</dd>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{# 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>
|
||||
{% with aspect=aspect|default:"16:9" %}<figure data-block-override="magazine-bold:video-embed" class="bn-video my-8{% if class %} {{ class }}{% endif %}">{% if url or media %}<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>{% endif %}{% 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;}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user