block/themes-kindergarten
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: replace hand-rolled utility CSS with Tailwind classes (host build now scans theme templates)

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Alex Dunmow 2026-07-05 17:54:28 +08:00
parent ca4e132f41
commit d7d7e1a7a3
4 changed files with 3 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
blocks/art_wall.ninjatpl
View File

@ -1 +1 @@
<section class="kg-section" data-block="kindergarten:art_wall"><div class="kg-container">{% set showNames = true %}{% if showChildName == false %}{% set showNames = false %}{% endif %}{% if title %}<h2 class="kg-display mb-6" style="font-size: 2rem;"><span class="kg-crayon-underline">{{ title }}</span></h2>{% endif %}{% if not items %}<div class="kg-empty" data-empty="true">No artworks yet — pin a few pieces to fill the wall.</div>{% else %}<div class="kg-gallery-grid">{% for art in items %}<figure class="kg-polaroid">{% if art.image %}<img src="{{ art.image|mediaURL }}" alt="{% if showNames and art.childName %}Artwork by {{ art.childName }}{% else %}Children's artwork{% endif %}">{% else %}<span class="kg-polaroid-image" role="img" aria-label="Placeholder for a child's artwork"></span>{% endif %}<figcaption class="kg-polaroid-caption">{% if showNames and art.childName %}<span>{{ art.childName }}</span>{% endif %}{% if showNames and art.childName and art.age %}, {% endif %}{% if art.age %}<span>age {{ art.age }}</span>{% endif %}</figcaption></figure>{% endfor %}</div>{% endif %}</div></section>
<section class="kg-section" data-block="kindergarten:art_wall"><div class="kg-container">{% set showNames = true %}{% if showChildName == false %}{% set showNames = false %}{% endif %}{% if title %}<h2 class="kg-display mb-6" style="font-size: 2rem;"><span class="kg-crayon-underline">{{ title }}</span></h2>{% endif %}{% if not items %}<div class="kg-empty" data-empty="true">No artworks yet — pin a few pieces to fill the wall.</div>{% else %}<div class="kg-gallery-grid grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">{% for art in items %}<figure class="kg-polaroid">{% if art.image %}<img src="{{ art.image|mediaURL }}" alt="{% if showNames and art.childName %}Artwork by {{ art.childName }}{% else %}Children's artwork{% endif %}">{% else %}<span class="kg-polaroid-image" role="img" aria-label="Placeholder for a child's artwork"></span>{% endif %}<figcaption class="kg-polaroid-caption">{% if showNames and art.childName %}<span>{{ art.childName }}</span>{% endif %}{% if showNames and art.childName and art.age %}, {% endif %}{% if art.age %}<span>age {{ art.age }}</span>{% endif %}</figcaption></figure>{% endfor %}</div>{% endif %}</div></section>

2
blocks/story_time.ninjatpl
View File

@ -1 +1 @@
<section class="kg-section" data-block="kindergarten:story_time"><div class="kg-container"><figure class="kg-storybook">{% if cover %}<img class="kg-storybook-illustration" src="{{ cover|mediaURL }}" alt="Cover of {{ bookTitle|default:'the story' }}">{% else %}<svg viewBox="0 0 200 150" width="100%" height="auto" class="kg-storybook-illustration" role="img" aria-label="Open storybook"><rect width="200" height="150" rx="18" fill="hsl(var(--muted))"></rect><path d="M100 28 C 78 20 46 20 30 28 L 30 122 C 46 114 78 114 100 122 C 122 114 154 114 170 122 L 170 28 C 154 20 122 20 100 28 Z" fill="hsl(var(--card))" stroke="hsl(var(--foreground))" stroke-width="4" stroke-linejoin="round"></path><line x1="100" y1="28" x2="100" y2="122" stroke="hsl(var(--foreground))" stroke-width="4"></line><circle cx="60" cy="60" r="12" fill="hsl(var(--accent))"></circle><rect x="46" y="82" width="30" height="6" rx="3" fill="hsl(var(--primary))"></rect><rect x="122" y="52" width="34" height="6" rx="3" fill="hsl(var(--secondary))"></rect><rect x="122" y="70" width="26" height="6" rx="3" fill="hsl(var(--primary))"></rect></svg>{% endif %}<div><span class="kg-sticker">Story time</span>{% if bookTitle %}<h2 class="kg-display mt-3" style="font-size: clamp(1.5rem, 3.5vw, 2.25rem);">{{ bookTitle }}</h2>{% endif %}{% if line %}<p class="kg-storybook-quote mt-3">"{{ line }}"</p>{% else %}<p class="kg-storybook-quote mt-3" data-empty="true">Add a line from the story to read together.</p>{% endif %}{% if author %}<figcaption class="kg-body mt-3 text-muted-foreground">by {{ author }}</figcaption>{% endif %}</div></figure></div></section>
<section class="kg-section" data-block="kindergarten:story_time"><div class="kg-container"><figure class="kg-storybook md:grid-cols-2 md:items-center">{% if cover %}<img class="kg-storybook-illustration" src="{{ cover|mediaURL }}" alt="Cover of {{ bookTitle|default:'the story' }}">{% else %}<svg viewBox="0 0 200 150" width="100%" height="auto" class="kg-storybook-illustration" role="img" aria-label="Open storybook"><rect width="200" height="150" rx="18" fill="hsl(var(--muted))"></rect><path d="M100 28 C 78 20 46 20 30 28 L 30 122 C 46 114 78 114 100 122 C 122 114 154 114 170 122 L 170 28 C 154 20 122 20 100 28 Z" fill="hsl(var(--card))" stroke="hsl(var(--foreground))" stroke-width="4" stroke-linejoin="round"></path><line x1="100" y1="28" x2="100" y2="122" stroke="hsl(var(--foreground))" stroke-width="4"></line><circle cx="60" cy="60" r="12" fill="hsl(var(--accent))"></circle><rect x="46" y="82" width="30" height="6" rx="3" fill="hsl(var(--primary))"></rect><rect x="122" y="52" width="34" height="6" rx="3" fill="hsl(var(--secondary))"></rect><rect x="122" y="70" width="26" height="6" rx="3" fill="hsl(var(--primary))"></rect></svg>{% endif %}<div><span class="kg-sticker">Story time</span>{% if bookTitle %}<h2 class="kg-display mt-3" style="font-size: clamp(1.5rem, 3.5vw, 2.25rem);">{{ bookTitle }}</h2>{% endif %}{% if line %}<p class="kg-storybook-quote mt-3">"{{ line }}"</p>{% else %}<p class="kg-storybook-quote mt-3" data-empty="true">Add a line from the story to read together.</p>{% endif %}{% if author %}<figcaption class="kg-body mt-3 text-muted-foreground">by {{ author }}</figcaption>{% endif %}</div></figure></div></section>

19
manifest.yaml
View File

@ -308,15 +308,6 @@ css:
.kg-section { padding-block: clamp(2rem, 5vw, 3rem); }
.kg-sect { padding-block: clamp(2.25rem, 5vw, 3.5rem); position: relative; }
.kg-cols { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) {
.kg-cols-2, .kg-cols-3, .kg-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.kg-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kg-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Hero — full sizing + type in CSS so it never depends on the
(unreliable) min-h-screen / responsive Tailwind in the template. */
.kg-hero {
@ -440,13 +431,6 @@ css:
.kg-schedule-icon { color: hsl(var(--primary)); }
/* Art-wall polaroid (persona block). */
.kg-gallery-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 640px) { .kg-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kg-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.kg-polaroid {
background-color: hsl(var(--card));
border-radius: 1rem;
@ -500,9 +484,6 @@ css:
background-color: hsl(var(--card));
border: 3px solid hsl(var(--border));
}
@media (min-width: 768px) {
.kg-storybook { grid-template-columns: 1fr 1fr; align-items: center; }
}
.kg-storybook-quote {
font-family: var(--font-heading, "Baloo 2", "Quicksand", sans-serif);
font-size: clamp(1.25rem, 3vw, 2rem);

2
templates/overrides/kindergarten/feature-grid.ninjatpl
View File

@ -4,7 +4,7 @@
{% if eyebrow %}<p class="kg-mono text-center text-xs font-semibold text-accent">{{ eyebrow }}</p>{% endif %}
{% if heading %}<h2 class="kg-display mt-2 text-center text-3xl font-semibold tracking-tight md:text-4xl">{{ heading }}</h2>{% endif %}
{% if intro %}<p class="mx-auto mt-4 max-w-2xl text-center text-lg text-muted-foreground">{{ intro }}</p>{% endif %}
<div class="mt-10 kg-cols {% if columns == 2 %}kg-cols-2{% elif columns == 4 %}kg-cols-4{% else %}kg-cols-3{% endif %}">
<div class="mt-10 grid grid-cols-1 gap-6 {% if columns == 2 %}sm:grid-cols-2{% elif columns == 4 %}sm:grid-cols-2 lg:grid-cols-4{% else %}sm:grid-cols-2 lg:grid-cols-3{% endif %}">
{% for item in items %}
<div class="{% if layout == "card" %}rounded-2xl border border-primary/40 bg-card p-6 text-card-foreground kg-crayon-shadow transition-transform hover:-translate-y-0.5{% elif layout == "centered" %}text-center{% endif %}">
{% if item.icon %}<div class="mb-4 inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-primary/10 text-primary{% if layout == "centered" %} mx-auto{% endif %}"><svg class="h-6 w-6" aria-hidden="true"><use href="/icons/{{ item.icon|split:":"|first }}.svg#{{ item.icon|split:":"|last }}"></use></svg></div>{% endif %}