2 lines
1.6 KiB
Plaintext
2 lines
1.6 KiB
Plaintext
<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>
|