DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hintergrundmotive endlich richtig sichtbar

Browse Source 
Die Motive waren da, aber viel zu stark abgedunkelt und nur hinter dem
Kopfbereich - dadurch praktisch unsichtbar.

- Motiv traegt jetzt die GANZE Seite: fest hinter allem, leicht
  weichgezeichnet, sanft abgedunkelt. Beim Scrollen ueberall praesent.
- Im Kopfbereich zeigt es sich gestochen scharf und fast unabgedunkelt
  (vorher bis zu 88% schwarz, jetzt nur noch wenige Prozent in der Mitte)
- Lesbarkeit ueber kraeftige Schriftschatten statt ueber Abdunkeln
- Kopfbereich hoeher und mittig ausgerichtet, damit das Motiv wirkt
- Bildvariablen liegen jetzt am <body> und vererben sich nach unten;
  nahtloser Seitenwechsel und Reiter-Wechsel nehmen sie korrekt mit

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-07-31 06:10:13 +02:00
co-authored by Claude Opus 5
parent 100fcdcbd5
commit bd0c1eb4b0
17 changed files with 102 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+60 -11
View File
@@ -897,6 +897,38 @@ footer.site-footer {
Die Abdunkelung sorgt dafür, dass Überschriften immer lesbar bleiben und
der Rand sauber in die Seitenfarbe ausläuft.
========================================================================== */
/* ---- 1) Das Motiv trägt die GANZE Seite ----
Liegt fest hinter allem (position:fixed), leicht weichgezeichnet und
abgedunkelt. Dadurch ist das Bild beim Scrollen überall präsent, ohne
dass Texte und Karten darunter leiden. */
body.mit-hintergrund { background-color: transparent; }
body.mit-hintergrund::before {
content: "";
position: fixed;
inset: -2%;
z-index: -3;
background-image: var(--page-bg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(3px) saturate(1.05);
}
/* Abdunkelung für den Seitenkörper — stark genug für gute Lesbarkeit,
aber so, dass das Motiv deutlich durchkommt. */
body.mit-hintergrund::after {
content: "";
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background: linear-gradient(to bottom,
color-mix(in srgb, var(--bg) 62%, transparent) 0%,
color-mix(in srgb, var(--bg) 84%, transparent) 45%,
color-mix(in srgb, var(--bg) 90%, transparent) 100%);
}
/* ---- 2) Im Kopfbereich zeigt sich das Motiv gestochen scharf ----
Hier darf es wirken: kaum abgedunkelt, volle Schärfe. */
.page-bg {
position: relative;
isolation: isolate;
@@ -918,21 +950,38 @@ footer.site-footer {
inset: 0;
z-index: -1;
background:
radial-gradient(ellipse 115% 85% at 50% 45%,
rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .66) 66%, rgba(0, 0, 0, .88) 100%),
/* nur ganz leichte Vignette, damit die Ränder nicht hart abbrechen */
radial-gradient(ellipse 125% 95% at 50% 45%,
rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .26) 72%, rgba(0, 0, 0, .46) 100%),
/* oben etwas dunkler für die Navigation, unten weicher Übergang */
linear-gradient(to bottom,
rgba(0, 0, 0, .62) 0%,
rgba(0, 0, 0, .34) 30%,
rgba(0, 0, 0, .48) 72%,
var(--bg) 100%);
rgba(0, 0, 0, .42) 0%,
rgba(0, 0, 0, .06) 26%,
rgba(0, 0, 0, .14) 66%,
color-mix(in srgb, var(--bg) 88%, transparent) 100%);
}
/* Text auf Bildhintergrund immer mit weicher Abschattung */
.page-bg h1, .page-bg h2, .page-bg .lead, .page-bg .eyebrow {
text-shadow: 0 2px 18px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .9);
/* Damit die Schrift auf jedem Bildausschnitt sicher lesbar bleibt, bekommt
sie eine kräftige Abschattung statt das Bild abzudunkeln. */
.page-bg h1,
.page-bg h2,
.page-bg .lead,
.page-bg .eyebrow {
text-shadow:
0 2px 4px rgba(0, 0, 0, .95),
0 4px 22px rgba(0, 0, 0, .85),
0 0 42px rgba(0, 0, 0, .7);
}
.page-bg.hero { padding: clamp(4.5rem, 11vw, 7.5rem) 0; }
.page-bg.hero {
padding: clamp(5rem, 13vw, 9rem) 0;
min-height: clamp(340px, 46vh, 520px);
display: flex;
align-items: center;
}
.page-bg.hero > .container { width: 100%; }
@media (max-width: 760px) {
.page-bg::before { background-image: var(--page-bg-mobile, var(--page-bg)); }
.page-bg::before,
body.mit-hintergrund::before { background-image: var(--page-bg-mobile, var(--page-bg)); }
}
/* ==========================================================================