41 lines
1.3 KiB
HTML
41 lines
1.3 KiB
HTML
|
{% for scene in story.scenes %}
|
||
|
|
{# ── Left page: full-bleed illustration ── #}
|
||
|
|
<div class="page page--image" data-story="{{ story.number }}" style="
|
||
|
|
--color-primary: {{ story.palette.primary }};
|
||
|
|
--color-secondary: {{ story.palette.secondary }};
|
||
|
|
--color-text: {{ story.palette.text }};
|
||
|
|
--color-bg: {{ story.palette.background }};
|
||
|
|
">
|
||
|
|
{% if scene.imageExists %}
|
||
|
|
<img
|
||
|
|
class="scene-image"
|
||
|
|
src="{{ scene.image }}"
|
||
|
|
alt="{{ scene.alt }}"
|
||
|
|
>
|
||
|
|
{% else %}
|
||
|
|
<div class="placeholder-image" style="background: {{ story.palette.primary }};">
|
||
|
|
<div class="placeholder-label">
|
||
|
|
<span class="placeholder-story">Geschichte {{ story.number }}</span>
|
||
|
|
<span class="placeholder-scene">{{ scene.alt }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# ── Right page: story text ── #}
|
||
|
|
<div class="page page--text" data-story="{{ story.number }}" style="
|
||
|
|
--color-primary: {{ story.palette.primary }};
|
||
|
|
--color-secondary: {{ story.palette.secondary }};
|
||
|
|
--color-text: {{ story.palette.text }};
|
||
|
|
--color-bg: {{ story.palette.background }};
|
||
|
|
">
|
||
|
|
<div class="text-page-inner">
|
||
|
|
{% if loop.first %}
|
||
|
|
<h2 class="story-title">{{ story.title }}</h2>
|
||
|
|
{% endif %}
|
||
|
|
<div class="scene-text">{{ scene.html | safe }}</div>
|
||
|
|
<div class="scene-ornament">✦</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|