themes-art-deco/blocks/private_dining.ninjatpl
Alex Dunmow 3b3adfdf43 fix(art-deco): remediate empty-media balloons, dead whitespace + mobile layout
- Hero: image-less heroes no longer reserve min-h-[75vh]; use guaranteed
  .deco-hero-compact padding (kills the tall empty band above the fold).
- Landing template: stop double-wrapping main in max-w-5xl/py-16/text-center
  (double padding + clamped full-bleed sections + forced centering); render
  section blocks and the footer full-bleed so each self-manages width/rhythm.
- private_dining: with no image, collapse the 2-col grid to a single centred
  column instead of stranding text beside an empty media half; route the
  capacity/minimum figures through guaranteed .deco-stats gap so values no
  longer collide ("14From").
- Reservation strip: populate phone/hours/book link so it reads as a proper
  gilded bar instead of a cramped empty dark strip under the nav.
- default/article templates: full-bleed header + footer (navbar no longer
  narrowed to max-w-3xl/5xl; dark footer spans edge-to-edge, not a floating
  box with dead vertical space).
- chef_signature: trim md:py-24 -> md:py-20 for tighter section rhythm.
- Layout-critical rules added as explicit CSS (manifest css.input_css_append
  + assets/style.css) rather than JIT-fragile theme-template Tailwind combos.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-05 17:23:35 +08:00

15 lines
2.2 KiB
Plaintext

{# private_dining persona block — framed room image + gilded details panel. Media via {% img %}. With no image, collapses to a single centred column so the empty media half never balloons. #}
{% set hasImage = image %}
<section data-block="art-deco:private_dining" class="py-16 md:py-20 bg-background text-foreground">
<div class="mx-auto grid items-center gap-10 px-4 {% if hasImage %}max-w-6xl md:grid-cols-2 md:gap-16{% else %}max-w-3xl{% endif %}">
{% if hasImage %}<div class="{% if mediaPosition == "right" %}md:order-2{% else %}md:order-1{% endif %}"><div class="deco-step">{% img image alt=title class="w-full h-auto object-cover" %}</div></div>{% endif %}
<div class="{% if hasImage %}{% if mediaPosition == "right" %}md:order-1{% else %}md:order-2{% endif %}{% else %}text-center{% endif %}">
{% 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 enquireUrl %}<a href="{{ enquireUrl }}" class="deco-pill mt-8 inline-flex items-center gap-2">{{ enquireLabel|default:"Enquire" }}</a>{% endif %}
</div>
</div>
</section>