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

Replace section-title page with proper title page (p.2)

Browse Source 
Page structure: imprint (p.1) → title page (p.2) → TOC (p.3) → stories (p.4+).
Title page shows title/subtitle/author in Cormorant Garamond. Removes the
artificial section-title buffer in favour of a meaningful front matter page.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-05-03 19:18:12 +02:00
parent 6b61cf206a
commit 0ced340519
3 changed files with 40 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/layout.css
+5 -11
View File
@@ -102,27 +102,21 @@
flex-shrink: 0; flex-shrink: 0;
} }
/* ── Section title page ── */ /* ── Title page ── */
.page--section { .page--titlepage {
background: var(--cream, #faf8f2); background: var(--cream, #faf8f2);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.section-title-inner { .titlepage-inner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 0.8rem; gap: 1rem;
text-align: center; text-align: center;
} padding: 0 0.8in;
.section-rule {
display: block;
width: 3rem;
height: 1px;
background: rgba(30, 27, 24, 0.25);
} }
/* ── Finale page ── */ /* ── Finale page ── */
styles/typography.css
+23 -6
View File
@@ -155,20 +155,37 @@ body {
padding-top: 0.5rem; padding-top: 0.5rem;
} }
/* ── Section title page ── */ /* ── Title page ── */
.section-ornament { .titlepage-ornament {
font-family: var(--font-display); font-family: var(--font-display);
font-size: 1.8rem; font-size: 1.6rem;
color: var(--ink-muted); color: var(--ink-muted);
} }
.section-title { .titlepage-title {
font-family: var(--font-display); font-family: var(--font-display);
font-style: italic; font-style: italic;
font-weight: 300; font-weight: 300;
font-size: 2.2rem; font-size: 2.4rem;
line-height: 1.2;
color: var(--ink); color: var(--ink);
letter-spacing: 0.03em; }
.titlepage-subtitle {
font-family: var(--font-display);
font-style: italic;
font-size: 1rem;
color: var(--ink-muted);
letter-spacing: 0.08em;
}
.titlepage-author {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--ink-muted);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-top: 0.5rem;
} }
/* ── Finale overlay ── */ /* ── Finale overlay ── */
templates/book.html
+12 -11
View File
@@ -9,7 +9,7 @@
</head> </head>
<body> <body>
{# ── Copyright / imprint page ── #} {# ── Page 1 (right): Copyright / imprint ── #}
<div class="page page--imprint"> <div class="page page--imprint">
<div class="imprint-content"> <div class="imprint-content">
<p>{{ frontMatter.title or 'Das Kaleidoskop der Schlummerwelten' }}</p> <p>{{ frontMatter.title or 'Das Kaleidoskop der Schlummerwelten' }}</p>
@@ -18,7 +18,17 @@
</div> </div>
</div> </div>
{# ── Table of contents ── #} {# ── Page 2 (left): Title page ── #}
<div class="page page--titlepage">
<div class="titlepage-inner">
<span class="titlepage-ornament">❧</span>
<h1 class="titlepage-title">{{ frontMatter.title or 'Das Kaleidoskop der Schlummerwelten' }}</h1>
<p class="titlepage-subtitle">{{ frontMatter.subtitle or '' }}</p>
<p class="titlepage-author">{{ frontMatter.author or '' }}</p>
</div>
</div>
{# ── Page 3 (right): Table of contents ── #}
<div class="page page--toc"> <div class="page page--toc">
<h2 class="toc-title">Die zwölf Schlummerwelten</h2> <h2 class="toc-title">Die zwölf Schlummerwelten</h2>
<ol class="toc-list"> <ol class="toc-list">
@@ -28,15 +38,6 @@
</ol> </ol>
</div> </div>
{# ── Section title — keeps stories starting on an even (left) page ── #}
<div class="page page--section">
<div class="section-title-inner">
<span class="section-ornament">❧</span>
<h2 class="section-title">Die Geschichten</h2>
<span class="section-rule"></span>
</div>
</div>
{# ── Stories ── #} {# ── Stories ── #}
{% for story in stories %} {% for story in stories %}
{% include "story-spread.html" %} {% include "story-spread.html" %}