Set up book project: Markdown→CSS→PDF pipeline for KDP

Adds the full authoring and build toolchain for "Das Kaleidoskop der Schlummerwelten" — all 12 story content files in Markdown, Nunjucks HTML templates, CSS print layout, and Puppeteer-based PDF generation targeting Amazon KDP (8.5×8.5 in, 0.125in bleed). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-03 15:38:07 +02:00
parent b5582a65d6
commit a8ade90ffb
26 changed files with 2219 additions and 1 deletions
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Das Kaleidoskop der Schlummerwelten</title>
+  <link rel="stylesheet" href="../styles/print.css">
+  <link rel="stylesheet" href="../styles/layout.css">
+  <link rel="stylesheet" href="../styles/typography.css">
+</head>
+<body>
+
+  {# ── Title page ── #}
+  <div class="page page--title">
+    <div class="title-content">
+      <p class="title-eyebrow">Eine Sammlung von</p>
+      <h1 class="title-main">Das Kaleidoskop<br>der Schlummerwelten</h1>
+      <p class="title-sub">Zwölf magische Geschichten für die Nacht</p>
+    </div>
+  </div>
+
+  {# ── Copyright / imprint page ── #}
+  <div class="page page--imprint">
+    <div class="imprint-content">
+      <p>Erste Ausgabe</p>
+      <p>Alle Rechte vorbehalten.</p>
+      <p>Illustrationen: KI-generiert (Dreamy Watercolor / Whimsical Storybook)</p>
+    </div>
+  </div>
+
+  {# ── Table of contents ── #}
+  <div class="page page--toc">
+    <h2 class="toc-title">Die zwölf Welten</h2>
+    <ol class="toc-list">
+      {% for story in stories %}
+        {% if story.type != 'front-matter' and story.type != 'finale' %}
+          <li>{{ story.title }}</li>
+        {% endif %}
+      {% endfor %}
+    </ol>
+  </div>
+
+  {# ── Stories ── #}
+  {% for story in stories %}
+    {% if story.type == 'front-matter' or story.type == 'finale' %}
+      {# skip — handled separately #}
+    {% else %}
+      {% include "story-spread.html" %}
+    {% endif %}
+  {% endfor %}
+
+  {# ── Finale page ── #}
+  <div class="page page--finale">
+    {% if finale.image %}
+      <img class="finale-image" src="{{ finale.image }}" alt="Das Kaleidoskop – alle zwölf Welten">
+    {% else %}
+      <div class="placeholder-image placeholder-image--finale">
+        <span>Finale-Illustration (alle 12 Welten)</span>
+      </div>
+    {% endif %}
+    <div class="finale-overlay">
+      <h2>Das Kaleidoskop</h2>
+      <p>Alle zwölf Welten auf einen Blick</p>
+    </div>
+  </div>
+
+</body>
+</html>
@@ -0,0 +1,40 @@
+{% 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 %}