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

Apply Illuminated Nocturne style to cover template

Browse Source 
Replaces Georgia with Cormorant Garamond (display, 300 italic) + Lora
(body) across all cover text. Adds @font-face declarations pointing to
fonts/ (same as interior). Updates gold tokens to match interior palette.

Visual changes: front title in Cormorant light italic with gold gradient
rule below, ❧ ornament replacing ✦, synopsis body in Lora.
cover.js now reads 00-front-matter.md to inject author name into spine,
front, and removes the [AUTOR] placeholder.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-05-03 18:44:19 +02:00
parent 87a3925c3e
commit 96ba26559b
3 changed files with 115 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/cover.html
+107 -44
View File
@@ -19,18 +19,60 @@
--spine-left: calc(var(--bleed) + var(--trim-w));
--front-left: calc(var(--bleed) + var(--trim-w) + var(--spine-w));
/* Design tokens */
/* Design tokens — matches interior "Illuminated Nocturne" palette */
--color-bg: #080820;
--color-mid: #111138;
--color-gold: #c8a84b;
--color-gold2: #f0d080;
--color-mid: #0f0f30;
--color-gold: #b89a4e;
--color-gold2: #e8c96a;
--color-text: #e8e4d8;
--color-muted: rgba(200,168,75,0.45);
--color-muted: rgba(184,154,78,0.5);
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Lora', Georgia, serif;
}
/* ── Fonts ─────────────────────────────────────────────── */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
src: url('../fonts/cormorant-garamond-400-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
src: url('../fonts/cormorant-garamond-300-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
src: url('../fonts/cormorant-garamond-400-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 600;
src: url('../fonts/cormorant-garamond-600-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
src: url('../fonts/lora-400-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 400;
src: url('../fonts/lora-400-italic.woff2') format('woff2');
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
font-family: var(--font-body);
width: var(--total-w);
height: var(--total-h);
background: var(--color-bg);
@@ -107,18 +149,19 @@
}
.back-headline {
font-family: Georgia, serif;
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 0.22in;
color: var(--color-gold);
letter-spacing: 0.02em;
margin-bottom: 0.12in;
letter-spacing: 0.03em;
margin-bottom: 0.14in;
}
.back-synopsis {
font-family: Georgia, serif;
font-size: 0.145in;
line-height: 1.7;
font-family: var(--font-body);
font-size: 0.138in;
line-height: 1.8;
color: var(--color-text);
flex: 1;
}
@@ -132,12 +175,13 @@
}
.back-tagline {
font-family: Georgia, serif;
font-family: var(--font-display);
font-style: italic;
font-size: 0.115in;
font-weight: 300;
font-size: 0.118in;
color: var(--color-muted);
max-width: 60%;
line-height: 1.5;
line-height: 1.6;
}
/* Barcode placeholder — KDP places the barcode here if left blank */
@@ -175,23 +219,27 @@
}
.spine-title {
font-family: Georgia, serif;
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 0.13in;
color: var(--color-gold);
letter-spacing: 0.04em;
}
.spine-divider {
font-family: var(--font-display);
font-size: 0.1in;
color: var(--color-muted);
}
.spine-author {
font-family: Georgia, serif;
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 0.1in;
color: var(--color-text);
letter-spacing: 0.05em;
color: rgba(232, 228, 216, 0.7);
letter-spacing: 0.06em;
}
.spine-too-narrow {
@@ -233,19 +281,29 @@
}
.front-title {
font-family: Georgia, serif;
font-family: var(--font-display);
font-style: italic;
font-size: 0.52in;
line-height: 1.2;
font-weight: 300;
font-size: 0.54in;
line-height: 1.18;
color: var(--color-gold2);
text-shadow: 0 0 0.15in rgba(200,168,75,0.4), 0 2px 8px rgba(0,0,0,0.8);
text-shadow: 0 0 0.18in rgba(184,154,78,0.45), 0 2px 10px rgba(0,0,0,0.9);
letter-spacing: 0.01em;
}
.front-rule {
width: 1.6in;
height: 1px;
background: linear-gradient(to right, transparent, var(--color-gold), transparent);
}
.front-subtitle {
font-family: Georgia, serif;
font-size: 0.18in;
letter-spacing: 0.08em;
color: var(--color-text);
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 0.17in;
letter-spacing: 0.1em;
color: rgba(232, 228, 216, 0.75);
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
@@ -259,29 +317,33 @@
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(ellipse at center, #1a1a4a 0%, #080820 70%);
background: radial-gradient(ellipse at 50% 40%, #1a1a4a 0%, #080820 70%);
}
.front-art-placeholder span {
font-family: monospace;
font-size: 0.12in;
color: rgba(200,168,75,0.4);
border: 1px dashed rgba(200,168,75,0.2);
padding: 0.15in 0.3in;
font-family: var(--font-display);
font-style: italic;
font-size: 0.13in;
color: rgba(184,154,78,0.4);
border: 1px solid rgba(184,154,78,0.15);
padding: 0.15in 0.35in;
letter-spacing: 0.05em;
}
.front-author {
font-family: Georgia, serif;
font-size: 0.16in;
letter-spacing: 0.1em;
color: rgba(200,168,75,0.7);
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 0.15in;
letter-spacing: 0.12em;
color: rgba(184,154,78,0.65);
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.front-ornament-bottom {
font-size: 0.14in;
.front-ornament {
font-family: var(--font-display);
font-size: 0.16in;
color: var(--color-muted);
letter-spacing: 0.4em;
}
/* ── Safe-zone & bleed guides overlay ───────────────────── */
@@ -372,8 +434,8 @@
{% if hasSpineText %}
<div class="spine-text">
<span class="spine-title">Das Kaleidoskop der Schlummerwelten</span>
<span class="spine-divider">✦</span>
<span class="spine-author">[AUTOR]</span>
<span class="spine-divider">❧</span>
{% if author %}<span class="spine-author">{{ author }}</span>{% endif %}
</div>
{% else %}
<span class="spine-too-narrow">too narrow ({{ pageCount }}p &lt; 79)</span>
@@ -393,11 +455,12 @@
{% endif %}
<div class="front-content">
<p class="front-ornament-top">✦ ✦ ✦</p>
<p class="front-ornament">❧</p>
<h1 class="front-title">Das Kaleidoskop<br>der Schlummerwelten</h1>
<div class="front-rule"></div>
<p class="front-subtitle">Zwölf magische Einschlafgeschichten</p>
<p class="front-author">[AUTOR]</p>
<p class="front-ornament-bottom">· · ·</p>
{% if author %}<p class="front-author">{{ author }}</p>{% endif %}
<p class="front-ornament">· · ·</p>
</div>
</div>{# end front #}