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/story-spread.html
+5 -18
View File
@@ -1,17 +1,8 @@
{% 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 }};
">
<div class="page page--image" data-story="{{ story.number }}" style="--color-primary: {{ story.palette.primary }};">
{% if scene.imageExists %}
<img
class="scene-image"
src="{{ scene.image }}"
alt="{{ scene.alt }}"
>
<img class="scene-image" src="{{ scene.image }}" alt="{{ scene.alt }}">
{% else %}
<div class="placeholder-image" style="background: {{ story.palette.primary }};">
<div class="placeholder-label">
@@ -23,18 +14,14 @@
</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="page page--text" data-story="{{ story.number }}">
<div class="text-page-inner">
{% if loop.first %}
<span class="story-number">Geschichte {% if story.number < 10 %}0{{ story.number }}{% else %}{{ story.number }}{% endif %}</span>
<h2 class="story-title">{{ story.title }}</h2>
{% endif %}
<div class="scene-text">{{ scene.html | safe }}</div>
<div class="scene-ornament">✦</div>
<div class="scene-ornament">❧</div>
</div>
</div>
{% endfor %}