Layout/whitespace remediation (no redesign; LCARS persona intact):
- hero: styled-text reads used `field.text|default:field`, which HARD-ERRORS
in ninjatpl when the field is a bare string (resolveIdentifier errors on
reflect.String, and nodeFilteredVariable returns before the default filter
runs). The demo seed passes bare strings for eyebrow/headline/subheadline,
so the hero aborted on its first {% set %} and rendered nothing — a dead
band on the home page. Switch to `field|get:"text"|default:field` (the
global jutsu `get` filter tolerates non-maps), which resolves both the
{text,color} object and bare-string forms. Same defensive fix in navbar
logoText.
- hero split: guard the empty media frame so an image-less split hero drops to
a single column instead of leaving a blank muted panel.
- episode_console: empty cover rendered a full 1:1 square that ballooned to
~600px and, with align-items:stretch, stretched the text column to match,
leaving a large void beside the copy. Switch to align-items:start and render
a compact, capped, on-brand LCARS readout placeholder (.lcars-console-art)
when no cover ships.
- cta: band variant left a large empty region right of the button; use
justify-content:space-between and trim the oversized 4rem band padding to 3rem.
- manifest css: add .lcars-console-art (explicit CSS, semantic tokens) + cap
.lcars-img-empty height.
Mobile responsiveness audited from CSS/templates: all grids/rails collapse via
explicit @media rules in manifest css.input_css_append (not Tailwind JIT-scanned
theme classes); no horizontal overflow at 375-390px. Content is never gated by
IntersectionObserver (canvas IO drives only the decorative hero background;
.lcars-reveal is a load-time CSS animation with a reduced-motion opacity:1
fallback), so no reveal-hidden dead bands.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
15 lines
1.8 KiB
Plaintext
15 lines
1.8 KiB
Plaintext
<section class="lcars-section {{ class }}" data-block="lcars:episode_console"><div class="lcars-well">
|
|
<div class="lcars-panel lcars-panel-accent" style="border-radius:0 0.75rem 0.75rem 0;padding:1.5rem;">
|
|
<div class="lcars-hero-split" style="gap:1.75rem;align-items:start;">
|
|
{% if cover %}<div class="lcars-media-frame" style="aspect-ratio:1 / 1;max-height:22rem;align-self:start;">{% img cover alt=title|default:"Episode cover" %}</div>{% else %}<div class="lcars-console-art" aria-hidden="true"><span class="lcars-console-art-scope"><i></i><i></i><i></i><i></i><i></i></span></div>{% endif %}
|
|
<div class="lcars-stack-sm" style="min-width:0;">
|
|
<div class="lcars-panel-header"><span class="lcars-pill lcars-pill-accent" aria-hidden="true"></span>{% if eyebrow %}<span class="lcars-panel-title">{{ eyebrow }}</span>{% else %}<span class="lcars-panel-title">Now Broadcasting</span>{% endif %}<span class="lcars-panel-header-bar"></span></div>
|
|
<div style="display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center;">{% if episodeNumber %}<span class="lcars-badge">EP {{ episodeNumber }}</span>{% endif %}{% if stardate %}<span class="lcars-stardate">Stardate {{ stardate }}</span>{% endif %}{% if duration %}<span class="lcars-readout">{{ duration }}</span>{% endif %}</div>
|
|
{% if title %}<h2 class="lcars-heading lcars-heading-2">{{ title }}</h2>{% endif %}
|
|
{% if description %}<p class="lcars-text" style="color:hsl(var(--muted-foreground));">{{ description }}</p>{% endif %}
|
|
<div class="lcars-btn-row" style="margin-top:0.25rem;">{% if listenUrl %}<a class="lcars-btn-primary" href="{{ listenUrl }}">::lucide:play:sm::{{ listenLabel|default:"Listen now" }}</a>{% endif %}{% for p in platforms %}<a class="lcars-btn-outline lcars-btn-sm" href="{{ p.url|default:'#' }}">{{ p.label }}</a>{% endfor %}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div></section>
|