valknar/kaleidoskop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign book interior: Illuminated Nocturne aesthetic

Browse Source 
Replaces Georgia + per-story color theming with a unified premium
fairytale look: Cormorant Garamond (display/titles) + Lora (body),
warm cream text pages (#faf8f2 with paper noise texture), deep ink
typography (#1e1b18) throughout — no per-story text color variation.

- fonts/: committed WOFF2 files via @fontsource packages; auto-copied
  by scripts/setup-fonts.js (runs as postinstall)
- Typography: story number in small caps, hairline rule, ❧ ornament
- Layout: cream background replaces per-story bg, radial glow on title
- build.js: passes frontMatter (author, year) to templates
- Templates: author byline on title page, cleaner imprint page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-05-03 18:39:42 +02:00
parent fa1a133f94
commit 87a3925c3e
18 changed files with 292 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/book.html
+14 -13
View File
@@ -2,7 +2,6 @@
<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">
@@ -14,16 +13,22 @@
<div class="page page--title">
<div class="title-content">
<p class="title-eyebrow">Eine Sammlung von</p>
<div class="title-rule"></div>
<h1 class="title-main">Das Kaleidoskop<br>der Schlummerwelten</h1>
<div class="title-rule"></div>
<p class="title-sub">Zwölf magische Geschichten für die Nacht</p>
{% if frontMatter.author %}
<p class="title-author">{{ frontMatter.author }}</p>
{% endif %}
</div>
</div>
{# ── Copyright / imprint page ── #}
<div class="page page--imprint">
<div class="imprint-content">
<p>Erste Ausgabe</p>
<p>Alle Rechte vorbehalten.</p>
<p>{{ frontMatter.title or 'Das Kaleidoskop der Schlummerwelten' }}</p>
<p>{% if frontMatter.author %}{{ frontMatter.author }}{% endif %}{% if frontMatter.year %}, {{ frontMatter.year }}{% endif %}</p>
<p>Erste Ausgabe · Alle Rechte vorbehalten.</p>
<p>Illustrationen: KI-generiert (Dreamy Watercolor / Whimsical Storybook)</p>
</div>
</div>
@@ -33,20 +38,14 @@
<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 %}
<li>{{ story.title }}</li>
{% 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 %}
{% include "story-spread.html" %}
{% endfor %}
{# ── Finale page ── #}
@@ -54,8 +53,10 @@
{% 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 class="placeholder-image" style="background: #0d0d2b; width:100%; height:100%;">
<div class="placeholder-label">
<span class="placeholder-scene">Finale-Illustration (alle 12 Welten)</span>
</div>
</div>
{% endif %}
<div class="finale-overlay">