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/js/forms.js
+4 -4
View File
@@ -118,11 +118,11 @@ const TAB_HINTERGRUENDE = {
};
function setzeTabHintergrund(tabId) {
const hero = document.querySelector(".hero.page-bg");
const basis = TAB_HINTERGRUENDE[tabId];
if (!hero || !basis) return;
hero.style.setProperty("--page-bg", `url('assets/img/${basis}.jpg')`);
hero.style.setProperty("--page-bg-mobile", `url('assets/img/${basis}-mobile.jpg')`);
if (!basis) return;
// Die Bildvariablen hängen am <body> — das Motiv trägt die ganze Seite.
document.body.style.setProperty("--page-bg", `url('assets/img/${basis}.jpg')`);
document.body.style.setProperty("--page-bg-mobile", `url('assets/img/${basis}-mobile.jpg')`);
}
function setupTabs() {
assets/js/main.js
+10
View File
@@ -360,6 +360,16 @@
alterInhalt.replaceWith(neuerInhalt);
// Seitenmotiv mitnehmen: Die Bildvariablen hängen am <body>, damit das
// Motiv die ganze Seite trägt — beim Wechsel also mit übernehmen.
const bodyNeu = dok.body;
document.body.classList.toggle("mit-hintergrund", bodyNeu.classList.contains("mit-hintergrund"));
["--page-bg", "--page-bg-mobile"].forEach((v) => {
const wert = bodyNeu.style.getPropertyValue(v);
if (wert) document.body.style.setProperty(v, wert);
else document.body.style.removeProperty(v);
});
// Kopf der Seite mitziehen: Titel, Farbwelt, Beschreibung
document.title = dok.title;
const themaNeu = dok.documentElement.getAttribute("data-theme");