c2dd751f6b
Layout/whitespace bugs:
- .coffee-torn-top/bottom used mask-size:100% 100%, stretching the 12px torn
SVG over the whole element and masking away ~40% of tall cards as a wavy
transparent cut-out — the cause of the clipped hero region, featured_pour
and footer. Reworked to a fixed ~13px deckled band per edge over a solid
gradient (plus a combined top+bottom selector).
- featured_pour showed an editor-style "Add a hero image" placeholder to
visitors when the demo seed ships no image; now a tasteful token-based coffee
glyph on the secondary surface. Same for the image block ("Add an image").
- hours today-highlight was accent-foreground text over a 15% accent tint
(light-on-light, unreadable "Sunday"); now a readable full-row band with an
accent left edge (class moved from <th> to <tr>).
Mobile responsiveness / JIT robustness (host Tailwind does not reliably compile
arbitrary/responsive utilities out of theme templates):
- Replaced min-h-[50vh|75vh|400px|320px], md:grid-cols-[2fr_3fr] and
md:grid-cols-2 in hero/featured_pour/menu-list/hours with explicit CSS helper
classes carrying real media queries; base is single-column so every grid
collapses to 1 col on mobile regardless of the JIT.
Semantic tokens only; no version bump.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
9 lines
984 B
Plaintext
9 lines
984 B
Plaintext
{% with size=size|default:"full" align=align|default:"center" %}
|
|
<figure class="my-8 flex flex-1 flex-col {% if align == "left" %}items-start{% elif align == "right" %}items-end{% else %}items-center{% endif %}{% if class %} {{ class }}{% endif %}">
|
|
<div class="coffee-frame coffee-torn-bottom relative overflow-hidden p-2 {% if size == "xs" %}max-w-[200px] w-full{% elif size == "sm" %}max-w-[400px] w-full{% elif size == "md" %}max-w-[600px] w-full{% elif size == "lg" %}max-w-[800px] w-full{% else %}w-full{% endif %}">
|
|
{% if src %}{% img src alt=alt class="block h-auto w-full rounded-sm object-cover" layout=size %}{% else %}<div class="flex h-48 w-full items-center justify-center bg-secondary text-primary/20"><svg class="h-12 w-12" aria-hidden="true"><use href="/icons/lucide.svg#image"></use></svg></div>{% endif %}
|
|
</div>
|
|
{% if caption %}<figcaption class="coffee-hand mt-3 text-center text-xl text-accent">{{ caption }}</figcaption>{% endif %}
|
|
</figure>
|
|
{% endwith %}
|