block/themes-gotham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: replace hand-rolled utility CSS with Tailwind classes (host build now scans theme templates)

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Alex Dunmow 2026-07-05 17:53:54 +08:00
parent 486d3a283e
commit 6b8367377b
3 changed files with 2 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
blocks/membership_tiers.ninjatpl
View File

@ -7,7 +7,7 @@
{% if intro %}<p class="mx-auto mt-4 max-w-2xl text-lg italic" style="color:hsl(var(--muted-foreground));font-family:var(--font-body, 'Cormorant Garamond', Georgia, serif);">{{ intro }}</p>{% endif %}
</div>
{% if tiers %}
<div class="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div class="mt-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
{% for tier in tiers %}
<article class="reveal reel-frame flex flex-col bg-card text-card-foreground {% if tier.featured %}reel-foil{% endif %}">
<div class="flex items-baseline justify-between gap-2">

12
manifest.yaml
View File

@ -227,16 +227,4 @@ css:
/* Raw CSS (outside @layer, JIT-scan-independent) — layout guarantees the
* host Tailwind scan may not reliably emit from theme .ninjatpl files.
* Imageless hero: a compact letterboxed text plate, never a 75vh void. */
.gotham-hero-plate { min-height: 520px; }
@media (max-width: 640px) { .gotham-hero-plate { min-height: 380px; } }
/* Mobile collapse safety net — guarantee persona/override grids fall to a
* single column at ~<=640px even if the responsive prefix classes are not
* compiled from the theme templates. Base is already 1-col in the markup;
* this hard-forces it so a dropped sm:/md:/lg: prefix can never strand a
* wide multi-column grid on a phone (no horizontal overflow). */
@media (max-width: 640px) {
[data-block="gotham:events_marquee"] ul > li { grid-template-columns: 1fr !important; }
[data-block="gotham:membership_tiers"] .grid,
[data-block-override="gotham:feature-grid"] .grid { grid-template-columns: 1fr !important; }
}

2
templates/overrides/gotham/hero.ninjatpl
View File

@ -32,7 +32,7 @@
{% else %}
{% set align = "center" %}
{% if variant == "left-aligned" %}{% set align = "left" %}{% endif %}
<section data-block-override="gotham:hero" data-spotlight class="hero relative flex flex-col overflow-hidden bg-background text-foreground film-grain {% if not hasImage %}spotlight gotham-hero-plate{% elif minHeight == "screen" %}min-h-screen{% elif minHeight == "50vh" %}min-h-[50vh]{% elif minHeight == "auto" %}min-h-[400px]{% else %}min-h-[75vh]{% endif %} {% if verticalAlign == "top" %}justify-start pt-20{% elif verticalAlign == "bottom" %}justify-end pb-20{% else %}justify-center{% endif %}{% if class %} {{ class }}{% endif %}">
<section data-block-override="gotham:hero" data-spotlight class="hero relative flex flex-col overflow-hidden bg-background text-foreground film-grain {% if not hasImage %}spotlight gotham-hero-plate min-h-[520px]{% elif minHeight == "screen" %}min-h-screen{% elif minHeight == "50vh" %}min-h-[50vh]{% elif minHeight == "auto" %}min-h-[400px]{% else %}min-h-[75vh]{% endif %} {% if verticalAlign == "top" %}justify-start pt-20{% elif verticalAlign == "bottom" %}justify-end pb-20{% else %}justify-center{% endif %}{% if class %} {{ class }}{% endif %}">
{% if hasImage %}<div class="absolute inset-0 z-0">{% img backgroundImage alt=headlineText class="h-full w-full object-cover" layout="hero" %}{% if showOverlay %}<div class="absolute inset-0 {% if overlayColor == "light" %}bg-background/60{% elif overlayColor == "primary" %}bg-primary/50{% elif overlayOpacity <= 30 %}bg-black/30{% elif overlayOpacity <= 50 %}bg-black/50{% elif overlayOpacity <= 70 %}bg-black/70{% else %}bg-black/80{% endif %}"></div>{% endif %}<div class="absolute inset-0 letterbox-scrim" aria-hidden="true"></div></div>{% endif %}
<div class="pointer-events-none absolute inset-x-0 top-0 z-[2] h-px bg-[hsl(var(--primary))]" aria-hidden="true"></div>
<div class="pointer-events-none absolute inset-x-0 bottom-0 z-[2] h-px bg-[hsl(var(--primary))]" aria-hidden="true"></div>