Add gradient overlay to front cover for text legibility over artwork

Inserts a .front-overlay div (shown only when frontImage is present)
with a radial vignette + linear tint that darkens the image behind the
title/subtitle/author without obscuring the artwork. Also strengthens
text-shadow on all three text elements and bumps their opacity slightly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-03 20:03:21 +02:00
parent 364cc249dc
commit 06cf495479
+28 -5
View File
@@ -260,6 +260,25 @@
object-fit: cover; object-fit: cover;
} }
/* Gradient vignette over front artwork — ensures text legibility */
.front-overlay {
position: absolute;
top: 0; left: 0;
width: var(--trim-w);
height: var(--total-h);
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 */
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%);
}
.front-content { .front-content {
position: absolute; position: absolute;
top: calc(var(--bleed) + var(--safe)); top: calc(var(--bleed) + var(--safe));
@@ -287,7 +306,10 @@
font-size: 0.54in; font-size: 0.54in;
line-height: 1.18; line-height: 1.18;
color: var(--color-gold2); color: var(--color-gold2);
text-shadow: 0 0 0.18in rgba(184,154,78,0.45), 0 2px 10px rgba(0,0,0,0.9); text-shadow:
0 0 0.22in rgba(184,154,78,0.6),
0 2px 8px rgba(0,0,0,1),
0 4px 24px rgba(0,0,0,0.9);
letter-spacing: 0.01em; letter-spacing: 0.01em;
} }
@@ -303,8 +325,8 @@
font-weight: 300; font-weight: 300;
font-size: 0.17in; font-size: 0.17in;
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: rgba(232, 228, 216, 0.75); color: rgba(232, 228, 216, 0.92);
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,0.8);
} }
/* Placeholder box shown when no front artwork is provided */ /* Placeholder box shown when no front artwork is provided */
@@ -336,8 +358,8 @@
font-weight: 300; font-weight: 300;
font-size: 0.15in; font-size: 0.15in;
letter-spacing: 0.12em; letter-spacing: 0.12em;
color: rgba(184,154,78,0.65); color: rgba(184,154,78,0.85);
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,0.8);
} }
.front-ornament { .front-ornament {
@@ -448,6 +470,7 @@
{% if frontImage %} {% if frontImage %}
<img class="front-artwork" src="{{ frontImage }}" alt="Front cover artwork"> <img class="front-artwork" src="{{ frontImage }}" alt="Front cover artwork">
<div class="front-overlay"></div>
{% else %} {% else %}
<div class="front-art-placeholder"> <div class="front-art-placeholder">
<span>Cover-Illustration<br>→ images/cover/front.png</span> <span>Cover-Illustration<br>→ images/cover/front.png</span>