ffe46a146c
Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously an unversioned directory inside ~/src/blockninja-themes/kindergarten. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
79 lines
4.5 KiB
Plaintext
79 lines
4.5 KiB
Plaintext
package main
|
|
|
|
// mascotHeroComponent renders the mascot hero panel.
|
|
templ mascotHeroComponent(data MascotHeroData) {
|
|
<section class="kg-section" data-block="kindergarten:mascot_hero">
|
|
<div class="kg-container">
|
|
<div class="kg-hero-panel">
|
|
<div class="kg-confetti" aria-hidden="true"></div>
|
|
<div style="position: relative; z-index: 1; display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center;" class="kg-mascot-hero-grid">
|
|
<div>
|
|
if data.Headline != "" {
|
|
<h1 class="kg-display kg-crayon-underline" style="font-size: clamp(2.5rem, 6vw, 4rem); margin: 0;">{ data.Headline }</h1>
|
|
} else {
|
|
<h1 class="kg-display" style="font-size: clamp(2.5rem, 6vw, 4rem); margin: 0;" data-empty="true">Welcome!</h1>
|
|
}
|
|
if data.Tagline != "" {
|
|
<p class="kg-text" style="font-size: 1.25rem; margin-top: 1.5rem;">{ data.Tagline }</p>
|
|
}
|
|
if data.CTALabel != "" && data.CTAHref != "" {
|
|
<div style="margin-top: 2rem;">
|
|
<a href={ templ.SafeURL(data.CTAHref) } class="kg-pill">{ data.CTALabel }</a>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div style="display: flex; justify-content: center; align-items: center;">
|
|
@mascotSVG(data.Mascot)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
// mascotSVG renders a primitive, license-free mascot illustration.
|
|
// The SVGs intentionally use `currentColor` (and the theme primary) so they
|
|
// inherit colorways from the active preset.
|
|
templ mascotSVG(name string) {
|
|
switch name {
|
|
case "blocks":
|
|
<svg viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Alphabet blocks mascot">
|
|
<rect x="20" y="60" width="60" height="60" rx="12" fill="hsl(var(--primary))" />
|
|
<rect x="90" y="40" width="60" height="60" rx="12" fill="hsl(var(--secondary))" />
|
|
<rect x="60" y="120" width="60" height="60" rx="12" fill="hsl(var(--accent))" />
|
|
<text x="50" y="98" text-anchor="middle" font-family="var(--font-heading, Quicksand)" font-weight="700" font-size="32" fill="hsl(var(--primary-foreground))">A</text>
|
|
<text x="120" y="78" text-anchor="middle" font-family="var(--font-heading, Quicksand)" font-weight="700" font-size="32" fill="hsl(var(--secondary-foreground))">B</text>
|
|
<text x="90" y="158" text-anchor="middle" font-family="var(--font-heading, Quicksand)" font-weight="700" font-size="32" fill="hsl(var(--accent-foreground))">C</text>
|
|
</svg>
|
|
case "star":
|
|
<svg viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Friendly star mascot">
|
|
<polygon points="100,10 122,75 190,75 135,115 155,180 100,140 45,180 65,115 10,75 78,75" fill="hsl(var(--accent))" stroke="hsl(var(--foreground))" stroke-width="4" stroke-linejoin="round" />
|
|
<circle cx="80" cy="95" r="6" fill="hsl(var(--foreground))" />
|
|
<circle cx="120" cy="95" r="6" fill="hsl(var(--foreground))" />
|
|
<path d="M 80 120 Q 100 135 120 120" stroke="hsl(var(--foreground))" stroke-width="4" fill="none" stroke-linecap="round" />
|
|
</svg>
|
|
case "balloon":
|
|
<svg viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Balloon mascot">
|
|
<ellipse cx="100" cy="80" rx="50" ry="60" fill="hsl(var(--primary))" stroke="hsl(var(--foreground))" stroke-width="4" />
|
|
<path d="M 100 140 L 95 150 L 100 145 L 105 150 Z" fill="hsl(var(--foreground))" />
|
|
<path d="M 100 150 Q 90 175 100 195" stroke="hsl(var(--foreground))" stroke-width="2" fill="none" />
|
|
<circle cx="85" cy="65" r="6" fill="hsl(var(--foreground))" />
|
|
<circle cx="115" cy="65" r="6" fill="hsl(var(--foreground))" />
|
|
<path d="M 85 90 Q 100 105 115 90" stroke="hsl(var(--foreground))" stroke-width="4" fill="none" stroke-linecap="round" />
|
|
</svg>
|
|
default:
|
|
<svg viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Pip the mascot">
|
|
<circle cx="100" cy="115" r="70" fill="hsl(var(--accent))" stroke="hsl(var(--foreground))" stroke-width="4" />
|
|
<circle cx="78" cy="100" r="8" fill="hsl(var(--foreground))" />
|
|
<circle cx="122" cy="100" r="8" fill="hsl(var(--foreground))" />
|
|
<circle cx="78" cy="98" r="3" fill="hsl(var(--background))" />
|
|
<circle cx="122" cy="98" r="3" fill="hsl(var(--background))" />
|
|
<path d="M 75 130 Q 100 155 125 130" stroke="hsl(var(--foreground))" stroke-width="5" fill="none" stroke-linecap="round" />
|
|
<circle cx="60" cy="115" r="6" fill="hsl(var(--secondary))" />
|
|
<circle cx="140" cy="115" r="6" fill="hsl(var(--secondary))" />
|
|
<path d="M 50 60 L 60 35 L 80 50 Z" fill="hsl(var(--primary))" />
|
|
<path d="M 150 60 L 140 35 L 120 50 Z" fill="hsl(var(--primary))" />
|
|
</svg>
|
|
}
|
|
}
|