Full LCARS library-computer interface for a sci-fi podcast/media outfit. Codeless .bnp. Re-skins every mandatory builtin inside LCARS framing and ships the full Wave A surface. - 49 mandatory template overrides (chrome, marketing, primitives, commerce, blog family, auth, page-suggestions), field-faithful re-skins of the frozen builtin defaults; identity carried by the lcars-* class system. - 8 page templates (default+sidebar rail, full-width, full-display, landing, article, blog-index, contact, auth) with elbow-frame chrome. - 4 persona blocks: episode_console, crew_roster, stardate_log, transmission_status. Legacy lcars_header/sidebar/panel removed (now overrides + page chrome). - 5 dual-mode presets (canonical black + daylight-ops cream), all 19 tokens. - Bundled Antonio + Share Tech Mono (OFL); email-safe LCARS wrapper. - Seed "Subspace Signal": home, about, 3 episodes+articles, contact (hail_signals table + row_inserted email-admins workflow), login. - GO BIG motion: dependency-free canvas panel-sweep on the hero (lazy-init, reduced-motion static frame, no-JS fallback). Build + check-safety green. Visual UNVERIFIED until Wave B. Known frozen-cms limits (contract §11 auth/404 non-dispatch, §12 provider-backed empty lists) authored faithfully. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
32 lines
3.6 KiB
Plaintext
32 lines
3.6 KiB
Plaintext
{# event-list override — dates shown VERBATIM in each event's own timezone (never converted); list rows or card grid. #}
|
|
<section class="lcars-section {{ class }}"><div class="lcars-content-well">
|
|
{% if heading %}<h2 class="lcars-heading" style="font-size:clamp(1.75rem, 3vw, 2.25rem);margin:0 0 0.75rem 0;"><span class="lcars-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
|
|
{% if intro %}<p class="lcars-lede" style="max-width:60ch;margin:0 0 2.5rem 0;color:hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
|
|
{% if layout == "cards" %}
|
|
<div class="lcars-grid lcars-grid-3" style="margin-top:2.5rem;display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:1.5rem;">
|
|
{% for event in events %}{% if not (hidePast and event.past) %}<article class="lcars-card" style="display:flex;flex-direction:column;padding:0;overflow:hidden;{% if event.past %}opacity:0.6;{% endif %}">
|
|
{% if event.media %}<div class="lcars-media-frame" style="aspect-ratio:16 / 9;overflow:hidden;border-bottom:1px solid hsl(var(--border));">{% img event.media alt=event.title|default:"" class="lcars-event-media" %}</div>{% endif %}
|
|
<div style="display:flex;flex-direction:column;gap:0.5rem;padding:1.25rem;flex:1;">
|
|
<div class="lcars-mono numeric-tabular" style="font-size:0.8125rem;color:hsl(var(--accent));"><time{% if event.datetime %} datetime="{{ event.datetime }}"{% endif %}>{{ event.start }}{% if event.end %} – {{ event.end }}{% endif %}</time>{% if event.timezone %} <span style="color:hsl(var(--muted-foreground));">{{ event.timezone }}</span>{% endif %}</div>
|
|
<h3 class="lcars-feature-title" style="font-size:1.125rem;margin:0;">{{ event.title }}</h3>
|
|
{% if event.venue %}<p style="margin:0;font-size:0.875rem;color:hsl(var(--muted-foreground));">{{ event.venue }}</p>{% endif %}
|
|
{% if event.description %}<p style="margin:0;font-size:0.875rem;color:hsl(var(--muted-foreground));">{{ event.description }}</p>{% endif %}
|
|
{% if event.link %}<a class="lcars-btn-ghost" href="{{ event.link }}" style="margin-top:auto;display:inline-flex;align-items:center;gap:0.375rem;">{{ event.linkLabel|default:"Details" }}::lucide:arrow-right:sm::</a>{% endif %}
|
|
</div>
|
|
</article>{% endif %}{% endfor %}
|
|
</div><style>.lcars-event-media{display:block;width:100%;height:100%;object-fit:cover;}</style>
|
|
{% else %}
|
|
<ul class="lcars-hairline-top" style="list-style:none;margin:2.5rem 0 0 0;padding:0;">
|
|
{% for event in events %}{% if not (hidePast and event.past) %}<li class="lcars-hairline-bottom" style="display:flex;flex-wrap:wrap;align-items:baseline;gap:0.75rem 1.5rem;padding:1.25rem 0;{% if event.past %}opacity:0.6;{% endif %}">
|
|
<div class="lcars-mono numeric-tabular" style="flex:0 0 12rem;font-size:0.875rem;"><time{% if event.datetime %} datetime="{{ event.datetime }}"{% endif %}>{{ event.start }}</time>{% if event.end %}<div style="font-size:0.75rem;color:hsl(var(--muted-foreground));">to {{ event.end }}</div>{% endif %}{% if event.timezone %}<div style="font-size:0.75rem;color:hsl(var(--muted-foreground));">{{ event.timezone }}</div>{% endif %}</div>
|
|
<div style="min-width:0;flex:1;">
|
|
<h3 class="lcars-feature-title" style="font-size:1rem;margin:0;">{{ event.title }}</h3>
|
|
{% if event.venue %}<p style="margin:0.125rem 0 0 0;font-size:0.875rem;color:hsl(var(--muted-foreground));">{{ event.venue }}</p>{% endif %}
|
|
{% if event.description %}<p style="margin:0.25rem 0 0 0;font-size:0.875rem;color:hsl(var(--muted-foreground));">{{ event.description }}</p>{% endif %}
|
|
</div>
|
|
{% if event.link %}<a class="lcars-btn-outline lcars-btn-sm" href="{{ event.link }}" style="flex:0 0 auto;">{{ event.linkLabel|default:"Details" }}</a>{% endif %}
|
|
</li>{% endif %}{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
</div></section>
|