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:
+28
-5
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user