2f7239b76a
- Reveal: shorten scroll-reveal safety timeout below the capture settle and reveal-all when viewport height is unknown (headless), so main content is no longer stranded mid-fade at ~0.25 opacity in both modes; give the article template the robust reveal script it was missing. Fixes the washed-out light-mode body/quote copy AND the H1-over-first-line overlap (the translateY mid-transition was dropping the heading onto the body). - Headings: add bottom margin per level so H1 no longer butts the first paragraph. - Article: collapse the aside rail (and its divider border) when empty; populate each case article's aside with case-file marginalia. - Light mode: bump muted-foreground contrast across all five presets (~L38->L30) for comfortable AA on secondary text; dark palettes untouched. - Media: wire 6 licensed noir stock shots as seed media — harbour-night hero (with readable light-on-scrim hero text in both modes), per-article lead photos, typewriter on About. - SVG geometry guard: explicit width/height on 26 <use> icon SVGs; replace 15 unsized ::icon:: shortcodes with sized <svg><use> markup. - Declare required_icon_packs (lucide, simple-icons). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
41 lines
4.0 KiB
Plaintext
41 lines
4.0 KiB
Plaintext
{# noir override — contact-form; ALL form wiring preserved verbatim from builtin: bid, #contact-form-{{ bid }}, form.submitted/errors/message, {% form %} action/hx attrs, field loop (textarea/select/input), honeypot website input, submit target. Only inputs restyled to noir. #}
|
|
{% with bid=_block_id|default:context.blockId %}
|
|
<section data-block-override="noir:contact-form" id="contact-form-{{ bid }}" class="py-16 md:py-24 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
|
|
<div class="mx-auto max-w-2xl px-4">
|
|
{% if form.submitted %}
|
|
<div class="noir-file p-10 text-center">
|
|
<div class="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full" style="box-shadow:inset 0 0 0 1px hsl(var(--primary));color:hsl(var(--primary));"><svg width="24" height="24" class="h-6 w-6" aria-hidden="true"><use href="/icons/lucide.svg#check"></use></svg></div>
|
|
<p class="noir-body text-lg" style="color:hsl(var(--card-foreground));">{{ form.message|default:successMessage|default:"Thanks — your message has been sent." }}</p>
|
|
</div>
|
|
{% else %}
|
|
{% if heading %}<h2 class="noir-heading text-3xl md:text-4xl" style="color:hsl(var(--foreground));">{{ heading }}</h2>{% endif %}
|
|
{% if description %}<p class="noir-body mt-3 text-lg" style="color:hsl(var(--muted-foreground));">{{ description }}</p>{% endif %}
|
|
{% if form.errors._form %}<div class="mt-6 border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive">{{ form.errors._form }}</div>{% endif %}
|
|
{% with formAction="/api/blocks/"|add:bid|add:"/submit" formTarget="#contact-form-"|add:bid %}
|
|
{% form action=formAction hx_target=formTarget hx_swap="outerHTML" class="mt-8 grid grid-cols-1 gap-5 sm:grid-cols-2" %}
|
|
{% for field in fields %}
|
|
<div class="{% if field.width == "half" %}sm:col-span-1{% else %}sm:col-span-2{% endif %}">
|
|
{% if field.label %}<label for="cf-{{ bid }}-{{ field.name }}" class="noir-label mb-1.5 block" style="color:hsl(var(--primary));">{{ field.label }}{% if field.required %} <span class="text-destructive">*</span>{% endif %}</label>{% endif %}
|
|
{% if field.type == "textarea" %}
|
|
<textarea id="cf-{{ bid }}-{{ field.name }}" name="{{ field.name }}" rows="5"{% if field.required %} required{% endif %}{% if field.placeholder %} placeholder="{{ field.placeholder }}"{% endif %} class="w-full rounded-none border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:border-[hsl(var(--primary))] focus:ring-1 focus:ring-ring"></textarea>
|
|
{% elif field.type == "select" %}
|
|
<select id="cf-{{ bid }}-{{ field.name }}" name="{{ field.name }}"{% if field.required %} required{% endif %} class="w-full rounded-none border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:border-[hsl(var(--primary))] focus:ring-1 focus:ring-ring">
|
|
{% if field.placeholder %}<option value="">{{ field.placeholder }}</option>{% endif %}
|
|
{% for opt in field.options %}<option value="{{ opt.value }}">{{ opt.label|default:opt.value }}</option>{% endfor %}
|
|
</select>
|
|
{% else %}
|
|
<input id="cf-{{ bid }}-{{ field.name }}" name="{{ field.name }}" type="{{ field.type|default:"text" }}"{% if field.required %} required{% endif %}{% if field.placeholder %} placeholder="{{ field.placeholder }}"{% endif %} class="w-full rounded-none border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:border-[hsl(var(--primary))] focus:ring-1 focus:ring-ring">
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
<div class="hidden" aria-hidden="true"><label>Leave this field empty<input type="text" name="website" tabindex="-1" autocomplete="off"></label></div>
|
|
<div class="sm:col-span-2">
|
|
<button type="submit" class="noir-btn noir-btn-solid inline-flex items-center justify-center">{{ submitLabel|default:"Send message" }}</button>
|
|
</div>
|
|
{% endform %}
|
|
{% endwith %}
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
{% endwith %}
|