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

fix(cover): improve readability and brightness based on test print feedback

Browse Source 
- Strengthen front overlay tint so subtitle and author text read clearly
  against the artwork (was 20% centre tint, now 30%; bottom band 40%→60%)
- Set front subtitle to white and front author to gold2, both with
  triple-layer text-shadow for maximum contrast
- Increase back content padding from 0.125 in to 0.25 in on all trim edges
- Change back tagline colour from 50%-opacity gold to full --color-text
  with solid black shadow so the quote is legible
- Raise back artwork opacity 0.35→0.55 and reduce overlay darkness so
  the back image is no longer too dark

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-05-12 21:09:39 +02:00
parent 564a70494e
commit 3537baa230
1 changed files with 23 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/cover.html
+23 -24
View File
@@ -138,11 +138,10 @@
/* ── Back cover content ─────────────────────────────────── */
.back-content {
position: absolute;
/* safe zone: bleed + safe from left, safe from right, bleed+safe from top/bottom */
top: calc(var(--bleed) + var(--safe));
left: calc(var(--bleed) + var(--safe));
right: var(--safe);
bottom: calc(var(--bleed) + var(--safe));
top: calc(var(--bleed) + 0.25in);
left: calc(var(--bleed) + 0.25in);
right: 0.25in;
bottom: calc(var(--bleed) + 0.25in);
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -205,10 +204,10 @@
font-style: italic;
font-weight: 300;
font-size: 0.118in;
color: var(--color-muted);
color: var(--color-text);
max-width: 60%;
line-height: 1.6;
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
text-shadow: 0 1px 6px rgba(0,0,0,1), 0 2px 16px rgba(0,0,0,1);
}
@@ -219,7 +218,7 @@
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.35;
opacity: 0.55;
}
/* Gradient vignette — mirrors front-overlay for depth and legibility */
@@ -231,12 +230,12 @@
background:
radial-gradient(ellipse 90% 90% at 50% 50%,
transparent 30%,
rgba(6, 6, 24, 0.55) 100%),
rgba(6, 6, 24, 0.45) 100%),
linear-gradient(to bottom,
rgba(6, 6, 24, 0.40) 0%,
rgba(6, 6, 24, 0.15) 35%,
rgba(6, 6, 24, 0.15) 65%,
rgba(6, 6, 24, 0.50) 100%);
rgba(6, 6, 24, 0.30) 0%,
rgba(6, 6, 24, 0.10) 35%,
rgba(6, 6, 24, 0.10) 65%,
rgba(6, 6, 24, 0.35) 100%);
}
/* ── Spine content ──────────────────────────────────────── */
@@ -307,14 +306,14 @@
background:
/* deep vignette around all edges */
radial-gradient(ellipse 90% 90% at 50% 50%,
transparent 30%,
rgba(6, 6, 24, 0.55) 100%),
/* uniform dark tint to lift text off the image */
transparent 20%,
rgba(6, 6, 24, 0.65) 100%),
/* stronger tint in the text bands (top + bottom) */
linear-gradient(to bottom,
rgba(6, 6, 24, 0.35) 0%,
rgba(6, 6, 24, 0.20) 40%,
rgba(6, 6, 24, 0.20) 60%,
rgba(6, 6, 24, 0.40) 100%);
rgba(6, 6, 24, 0.50) 0%,
rgba(6, 6, 24, 0.30) 35%,
rgba(6, 6, 24, 0.30) 55%,
rgba(6, 6, 24, 0.60) 100%);
}
.front-content {
@@ -363,8 +362,8 @@
font-weight: 300;
font-size: 0.17in;
letter-spacing: 0.1em;
color: rgba(232, 228, 216, 0.92);
text-shadow: 0 1px 6px rgba(0,0,0,1), 0 2px 16px rgba(0,0,0,0.8);
color: #ffffff;
text-shadow: 0 1px 8px rgba(0,0,0,1), 0 2px 24px rgba(0,0,0,1), 0 0 0.3in rgba(0,0,0,0.9);
}
/* Placeholder box shown when no front artwork is provided */
@@ -396,8 +395,8 @@
font-weight: 300;
font-size: 0.15in;
letter-spacing: 0.12em;
color: rgba(184,154,78,0.85);
text-shadow: 0 1px 6px rgba(0,0,0,1), 0 2px 16px rgba(0,0,0,0.8);
color: var(--color-gold2);
text-shadow: 0 1px 8px rgba(0,0,0,1), 0 2px 24px rgba(0,0,0,1), 0 0 0.3in rgba(0,0,0,0.9);
}
.front-ornament {