block/themes-art-deco
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
This commit is contained in:
Alex Dunmow 2026-07-05 17:54:25 +08:00
parent 3b3adfdf43
commit def29b6e9c
4 changed files with 2 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/style.css
View File

@ -17,16 +17,6 @@
margin: 0;
}
/* deco-hero-compact — image-less hero: comfortable padding, no viewport-height balloon. */
.deco-hero-compact { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 768px) {
.deco-hero-compact { padding-top: 6rem; padding-bottom: 6rem; }
}
/* deco-stats — capacity/minimum figure row: guaranteed column gap so values never collide. */
.deco-stats { display: flex; flex-wrap: wrap; gap: 0.75rem 3rem; }
.deco-stats-center { justify-content: center; }
/* deco-frame — stepped ziggurat frame, layered borders + clipped corners. */
.deco-frame {
position: relative;

2
blocks/private_dining.ninjatpl
View File

@ -7,7 +7,7 @@
{% if eyebrow %}<div class="mb-3 flex items-center gap-4 {% if not hasImage %}justify-center{% endif %}"><span class="deco-rule w-10"></span><span class="deco-caps text-xs" style="color:hsl(var(--primary));">{{ eyebrow }}</span>{% if not hasImage %}<span class="deco-rule w-10"></span>{% endif %}</div>{% endif %}
{% if title %}<h2 class="deco-caps text-3xl md:text-4xl" style="font-family:var(--font-heading, 'Cinzel', 'Italiana', Georgia, serif);color:hsl(var(--foreground));">{{ title }}</h2>{% endif %}
{% if description %}<div class="mt-4 space-y-4 text-lg italic {% if not hasImage %}mx-auto max-w-xl{% endif %}" style="color:hsl(var(--muted-foreground));font-family:var(--font-body, 'Cormorant Garamond', Georgia, serif);">{{ description|safe }}</div>{% endif %}
{% if seats or minimum %}<dl class="deco-stats mt-6 {% if not hasImage %}deco-stats-center{% endif %}">{% if seats %}<div><dt class="deco-caps text-xs" style="color:hsl(var(--primary));">Capacity</dt><dd class="mt-1">{{ seats }}</dd></div>{% endif %}{% if minimum %}<div><dt class="deco-caps text-xs" style="color:hsl(var(--primary));">Minimum</dt><dd class="mt-1">{{ minimum }}</dd></div>{% endif %}</dl>{% endif %}
{% if seats or minimum %}<dl class="flex flex-wrap gap-x-12 gap-y-3 mt-6 {% if not hasImage %}justify-center{% endif %}">{% if seats %}<div><dt class="deco-caps text-xs" style="color:hsl(var(--primary));">Capacity</dt><dd class="mt-1">{{ seats }}</dd></div>{% endif %}{% if minimum %}<div><dt class="deco-caps text-xs" style="color:hsl(var(--primary));">Minimum</dt><dd class="mt-1">{{ minimum }}</dd></div>{% endif %}</dl>{% endif %}
{% if enquireUrl %}<a href="{{ enquireUrl }}" class="deco-pill mt-8 inline-flex items-center gap-2">{{ enquireLabel|default:"Enquire" }}</a>{% endif %}
</div>
</div>

10
manifest.yaml
View File

@ -128,16 +128,6 @@ css:
margin: 0;
}
/* deco-hero-compact — image-less hero: comfortable padding, no viewport-height balloon. */
.deco-hero-compact { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 768px) {
.deco-hero-compact { padding-top: 6rem; padding-bottom: 6rem; }
}
/* deco-stats — capacity/minimum figure row: guaranteed column gap so values never collide. */
.deco-stats { display: flex; flex-wrap: wrap; gap: 0.75rem 3rem; }
.deco-stats-center { justify-content: center; }
/* deco-frame — stepped ziggurat frame, layered borders + clipped corners. */
.deco-frame {
position: relative;

2
templates/overrides/art-deco/hero.ninjatpl
View File

@ -32,7 +32,7 @@
{% else %}
{% set align = "center" %}
{% if variant == "left-aligned" %}{% set align = "left" %}{% endif %}
<section data-block-override="art-deco:hero" class="hero relative flex flex-col overflow-hidden bg-background text-foreground deco-grain {% if hasImage %}{% if minHeight == "screen" %}min-h-screen{% elif minHeight == "50vh" %}min-h-[50vh]{% elif minHeight == "auto" %}min-h-[400px]{% else %}min-h-[75vh]{% endif %}{% else %}deco-hero-compact{% 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="art-deco:hero" class="hero relative flex flex-col overflow-hidden bg-background text-foreground deco-grain {% if hasImage %}{% if minHeight == "screen" %}min-h-screen{% elif minHeight == "50vh" %}min-h-[50vh]{% elif minHeight == "auto" %}min-h-[400px]{% else %}min-h-[75vh]{% endif %}{% else %}py-16 md:py-24{% 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>{% endif %}
<div class="pointer-events-none absolute inset-x-0 top-0 z-[1] h-40 opacity-40 deco-sunburst" aria-hidden="true"></div>
<div class="relative z-10 mx-auto w-full max-w-4xl px-4 sm:px-6 lg:px-8 {% if variant == "left-aligned" %}text-left{% else %}text-center{% endif %}"><div class="deco-frame bg-transparent px-6 py-10 sm:px-10 sm:py-14">{{ herocontent(align) }}</div></div>