Alex Dunmow 85d95d0545 fix(kindergarten): repair hero, grids, empty media + mobile whitespace
Remediate broken layout on the demo home page (persona intact):

- Hero rendered with no height: it relied on min-h-screen /
  responsive Tailwind that the host JIT drops on a cold provision.
  Drive hero sizing + type through compiled .kg-hero* CSS classes
  (input_css_append is compiled every build). Mascot repositioned to
  bottom-center behind readable content; confetti/ABC/reduced-motion
  fallback preserved. All builtin field reads unchanged.
- Landing header was position:absolute and overlapped the feature
  grid when the hero collapsed -> switch to the default's in-flow
  sticky header (collision gone).
- feature-grid columns never formed (lg:grid-cols-3 not compiled) ->
  route through compiled .kg-cols/.kg-cols-3 media-query grid.
- Empty art-wall polaroids ballooned into large blank squares ->
  graceful 4:3 capped placeholder with a playful crayon wash.
- Define .kg-section (was only in the dead assets/style.css, so
  persona sections had no padding) and add a consistent .kg-sect
  rhythm; trim oversized section padding.
- Alphabet strip now a single scrollable row (was flex-wrap) so the
  sticky header stays compact on mobile.
- Mobile: all layout-critical grids are compiled media-query CSS
  (mobile-first, 1 col), no fixed widths > viewport, tap targets ok.

No .reveal/scroll-hide pattern in this theme; whitespace was real
layout void. Colors stay semantic tokens; check-safety 32 checks OK.
No version bump.

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

12 lines
755 B
Plaintext

<!doctype html>
<html lang="en" class="{% if theme_mode == "dark" %}dark{% endif %}">
{{ head_html|safe }}
<body class="kg-page kg-dotted-paper min-h-screen flex flex-col antialiased">
{{ admin_banner_html|safe }}
<header class="w-full sticky top-0 z-40" style="background-color: hsl(var(--background) / 0.9); backdrop-filter: blur(6px); border-bottom: 3px solid hsl(var(--primary) / 0.25);">{{ slots.header|safe }}</header>
<main class="flex-grow w-full">{% if slots.main %}{{ slots.main|safe }}{% else %}<div class="max-w-6xl mx-auto px-4 py-12"><div class="kg-empty">No content blocks assigned to this page yet.</div></div>{% endif %}</main>
<footer class="w-full mt-auto">{{ slots.footer|safe }}</footer>
{{ body_end_html|safe }}
</body>
</html>