22 lines
2.3 KiB
Plaintext
22 lines
2.3 KiB
Plaintext
{# menu-list override — sectioned price list; tabular-numeral prices right-aligned, dietary badges as hairline pills. #}
|
|
<section class="sc-section {{ class }}"><div class="sc-content-well">
|
|
{% if heading %}<h2 class="sc-heading" style="font-size:clamp(1.75rem, 3vw, 2.25rem);margin:0 0 0.75rem 0;"><span class="sc-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
|
|
{% if intro %}<p class="sc-lede" style="max-width:60ch;margin:0 0 2.5rem 0;color:hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
|
|
<div style="display:grid;gap:2.5rem 3rem;{% if columns == 2 %}grid-template-columns:repeat(2, minmax(0, 1fr));{% endif %}">
|
|
{% for section in sections %}<div class="sc-menu-section" style="break-inside:avoid;">
|
|
{% if section.title %}<h3 class="sc-display" style="font-size:1.25rem;border-bottom:1px solid hsl(var(--border));padding-bottom:0.5rem;margin:0 0 1rem 0;">{{ section.title }}</h3>{% endif %}
|
|
{% if section.note %}<p style="margin:0 0 1rem 0;font-size:0.875rem;color:hsl(var(--muted-foreground));">{{ section.note }}</p>{% endif %}
|
|
<ul style="list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.25rem;">
|
|
{% for item in section.items %}<li class="sc-menu-item" style="display:flex;align-items:baseline;gap:1rem;">
|
|
<div style="min-width:0;flex:1;">
|
|
<div style="display:flex;flex-wrap:wrap;align-items:baseline;gap:0.5rem;"><span class="sc-display" style="font-size:1rem;color:hsl(var(--foreground));">{{ item.name }}</span>{% for badge in item.badges %}{% if badge.label %}<span style="display:inline-block;border:1px solid hsl(var(--border));border-radius:4px;padding:0.05rem 0.4rem;font-size:0.6875rem;text-transform:uppercase;letter-spacing:0.05em;color:hsl(var(--muted-foreground));">{{ badge.label }}</span>{% endif %}{% endfor %}</div>
|
|
{% if item.description %}<p style="margin:0.25rem 0 0 0;font-size:0.875rem;color:hsl(var(--muted-foreground));">{{ item.description }}</p>{% endif %}
|
|
</div>
|
|
{% if item.price %}<span class="sc-menu-price sc-mono numeric-tabular" style="flex:0 0 auto;color:hsl(var(--foreground));">{% if currency %}{{ currency }}{% endif %}{{ item.price }}</span>{% endif %}
|
|
</li>{% endfor %}
|
|
</ul>
|
|
</div>{% endfor %}
|
|
</div>
|
|
{% if footnote %}<p class="sc-stat-label" style="margin-top:2.5rem;">{{ footnote }}</p>{% endif %}
|
|
</div></section>
|