0e54864687
Layout/whitespace (home page): - feature-grid rendered as 3 full-width ballooning rows because the host Tailwind scan covers rendered block HTML, not theme override .ninjatpl files, so lg:grid-cols-* utilities in overrides are purge-fragile and collapsed to one column. Move multi-column layout to plain CSS in css.input_css_append (.tty-grid*, never purged) and apply to feature-grid, stats, pricing, contact-card + a .tty-form-grid for contact-form (col-span utilities were equally fragile). - code_console / boot_log persona blocks shipped no max-width wrapper and ran edge-to-edge on the full-width landing page while sibling sections were contained; wrap both in a centred .tty-console-shell with a mobile side gutter. - CTA heading read dark-on-green (fails contrast): .terminal-heading in assets/style.css hardcoded color:foreground, overriding the band's primary-foreground. Change to color:inherit so headings on inverted bands read correctly. - Trim oversized section padding (py-16 md:py-24 -> py-12 md:py-20; the window-nested contact sections -> py-8 md:py-12). Mobile: - All multi-column grids now collapse to 1 column via CSS media queries (minmax(0,1fr) prevents long/monospace content forcing horizontal overflow); console blocks keep overflow-x scroll inside their own box. - Pin hero min-heights to CSS (.tty-hero*) since min-h-screen / arbitrary min-h-[..] utilities are also purge-fragile. Persona (phosphor TTY, window chrome, man-page, canvas hero) unchanged. No version bump. make + check-safety both exit 0. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
41 lines
4.0 KiB
Plaintext
41 lines
4.0 KiB
Plaintext
{# contact-form terminal override: terminal console chrome. The {% form %} block, honeypot, field loop, form.submitted/errors reads and _block_id/bid submit wiring are preserved byte-for-byte — only presentational classes change. #}
|
|
{% with bid=_block_id|default:context.blockId %}
|
|
<section id="contact-form-{{ bid }}" class="py-8 md:py-12 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
|
|
<div class="mx-auto max-w-2xl px-4">
|
|
{% if form.submitted %}
|
|
<div class="tty-corners rounded-md border border-primary/50 bg-card p-8 text-center text-card-foreground tty-frame">
|
|
<div class="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-md bg-primary/10 text-primary"><svg class="h-6 w-6" aria-hidden="true"><use href="/icons/lucide.svg#check"></use></svg></div>
|
|
<p class="terminal-heading text-lg font-medium">{{ form.message|default:successMessage|default:"Thanks — your message has been sent." }}</p>
|
|
</div>
|
|
{% else %}
|
|
{% if heading %}<h2 class="terminal-heading text-3xl font-semibold tracking-tight md:text-4xl" data-text="{{ heading }}">{{ heading }}</h2>{% endif %}
|
|
{% if description %}<p class="mt-3 text-lg text-muted-foreground">{{ description }}</p>{% endif %}
|
|
{% if form.errors._form %}<div class="mt-6 rounded-md 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 tty-form-grid" %}
|
|
{% for field in fields %}
|
|
<div class="{% if field.width == "half" %}tty-col-half{% else %}tty-col-full{% endif %}">
|
|
{% if field.label %}<label for="cf-{{ bid }}-{{ field.name }}" class="terminal-mono mb-1.5 block text-sm font-medium uppercase tracking-wide text-accent">{{ 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-md border border-primary/40 bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 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-md border border-primary/40 bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 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-md border border-primary/40 bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 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="tty-col-full">
|
|
<button type="submit" class="terminal-mono inline-flex items-center justify-center rounded-md bg-primary px-6 py-2.5 text-sm font-medium uppercase tracking-wider text-primary-foreground transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">{{ submitLabel|default:"Send message" }}</button>
|
|
</div>
|
|
{% endform %}
|
|
{% endwith %}
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
{% endwith %}
|