polish: align back cover CSS design with front cover
- Add .back-overlay gradient vignette (mirrors front-overlay) - Add .back-ornament-top (❧) and .back-ornament-bottom (· · ·) - Add .back-rule decorative gold divider (mirrors front-rule) - Add text-shadow to headline, synopsis and tagline for legibility - Wrap bottom strip in container so ornament sits above tagline/barcode row Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+56
-6
@@ -148,6 +148,14 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.back-ornament-top {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.16in;
|
||||
color: var(--color-gold);
|
||||
letter-spacing: 0.3em;
|
||||
margin-bottom: 0.12in;
|
||||
}
|
||||
|
||||
.back-headline {
|
||||
font-family: var(--font-display);
|
||||
font-style: italic;
|
||||
@@ -155,6 +163,15 @@
|
||||
font-size: 0.22in;
|
||||
color: var(--color-gold);
|
||||
letter-spacing: 0.03em;
|
||||
margin-bottom: 0.12in;
|
||||
text-shadow: 0 1px 6px rgba(0,0,0,1), 0 2px 16px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
/* Decorative rule — mirrors .front-rule */
|
||||
.back-rule {
|
||||
width: 1.2in;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, var(--color-gold), transparent);
|
||||
margin-bottom: 0.14in;
|
||||
}
|
||||
|
||||
@@ -164,10 +181,19 @@
|
||||
line-height: 1.8;
|
||||
color: var(--color-text);
|
||||
flex: 1;
|
||||
text-shadow: 0 1px 4px rgba(0,0,0,0.9);
|
||||
}
|
||||
|
||||
.back-synopsis p { margin-bottom: 0.1in; }
|
||||
|
||||
.back-ornament-bottom {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.12in;
|
||||
color: var(--color-muted);
|
||||
letter-spacing: 0.25em;
|
||||
margin-bottom: 0.1in;
|
||||
}
|
||||
|
||||
.back-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -182,6 +208,7 @@
|
||||
color: var(--color-muted);
|
||||
max-width: 60%;
|
||||
line-height: 1.6;
|
||||
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
/* Barcode placeholder — KDP places the barcode here if left blank */
|
||||
@@ -202,6 +229,23 @@
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
/* Gradient vignette — mirrors front-overlay for depth and legibility */
|
||||
.back-overlay {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
radial-gradient(ellipse 90% 90% at 50% 50%,
|
||||
transparent 30%,
|
||||
rgba(6, 6, 24, 0.55) 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%);
|
||||
}
|
||||
|
||||
/* ── Spine content ──────────────────────────────────────── */
|
||||
.spine-content {
|
||||
position: absolute;
|
||||
@@ -422,10 +466,13 @@
|
||||
{% if backImage %}
|
||||
<img class="back-artwork" src="{{ backImage }}" alt="Back cover artwork">
|
||||
{% endif %}
|
||||
<div class="back-overlay"></div>
|
||||
|
||||
<div class="back-content">
|
||||
<div>
|
||||
<p class="back-ornament-top">❧</p>
|
||||
<p class="back-headline">Zwölf magische Reisen in die Welt der Träume</p>
|
||||
<div class="back-rule"></div>
|
||||
<div class="back-synopsis">
|
||||
<p>
|
||||
Jede Nacht beginnt eine neue Reise – und dieses Buch hat gleich zwölf davon.
|
||||
@@ -440,12 +487,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="back-bottom">
|
||||
<p class="back-tagline">
|
||||
„Die schönsten Welten sind nur<br>mit geschlossenen Augen zu erreichen."
|
||||
</p>
|
||||
{# Empty white box — KDP places the ISBN barcode here automatically #}
|
||||
<div class="barcode-placeholder"></div>
|
||||
<div>
|
||||
<p class="back-ornament-bottom">· · ·</p>
|
||||
<div class="back-bottom">
|
||||
<p class="back-tagline">
|
||||
„Die schönsten Welten sind nur<br>mit geschlossenen Augen zu erreichen."
|
||||
</p>
|
||||
{# Empty white box — KDP places the ISBN barcode here automatically #}
|
||||
<div class="barcode-placeholder"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user