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 Die Abdunkelung sorgt dafür, dass Überschriften immer lesbar bleiben und
der Rand sauber in die Seitenfarbe ausläuft. 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 { .page-bg {
position: relative; position: relative;
isolation: isolate; isolation: isolate;
@@ -918,21 +950,38 @@ footer.site-footer {
inset: 0; inset: 0;
z-index: -1; z-index: -1;
background: background:
radial-gradient(ellipse 115% 85% at 50% 45%, /* nur ganz leichte Vignette, damit die Ränder nicht hart abbrechen */
rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .66) 66%, rgba(0, 0, 0, .88) 100%), 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, linear-gradient(to bottom,
rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .42) 0%,
rgba(0, 0, 0, .34) 30%, rgba(0, 0, 0, .06) 26%,
rgba(0, 0, 0, .48) 72%, rgba(0, 0, 0, .14) 66%,
var(--bg) 100%); color-mix(in srgb, var(--bg) 88%, transparent) 100%);
} }
/* Text auf Bildhintergrund immer mit weicher Abschattung */ /* Damit die Schrift auf jedem Bildausschnitt sicher lesbar bleibt, bekommt
.page-bg h1, .page-bg h2, .page-bg .lead, .page-bg .eyebrow { sie eine kräftige Abschattung statt das Bild abzudunkeln. */
text-shadow: 0 2px 18px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .9); .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) { @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)); }
} }
/* ========================================================================== /* ==========================================================================
assets/js/forms.js
+4 -4
View File
@@ -118,11 +118,11 @@ const TAB_HINTERGRUENDE = {
}; };
function setzeTabHintergrund(tabId) { function setzeTabHintergrund(tabId) {
const hero = document.querySelector(".hero.page-bg");
const basis = TAB_HINTERGRUENDE[tabId]; const basis = TAB_HINTERGRUENDE[tabId];
if (!hero || !basis) return; if (!basis) return;
hero.style.setProperty("--page-bg", `url('assets/img/${basis}.jpg')`); // Die Bildvariablen hängen am <body> — das Motiv trägt die ganze Seite.
hero.style.setProperty("--page-bg-mobile", `url('assets/img/${basis}-mobile.jpg')`); 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() { function setupTabs() {
assets/js/main.js
+10
View File
@@ -360,6 +360,16 @@
alterInhalt.replaceWith(neuerInhalt); 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 // Kopf der Seite mitziehen: Titel, Farbwelt, Beschreibung
document.title = dok.title; document.title = dok.title;
const themaNeu = dok.documentElement.getAttribute("data-theme"); const themaNeu = dok.documentElement.getAttribute("data-theme");
bewerben.html
+2 -2
View File
@@ -22,11 +22,11 @@
<link rel="stylesheet" href="assets/css/theme-hasidog.css" /> <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" /> <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
</head> </head>
<body> <body class="mit-hintergrund" style="--page-bg:url('assets/img/bg-bewerben.jpg');--page-bg-mobile:url('assets/img/bg-bewerben-mobile.jpg');">
<div id="site-header"></div> <div id="site-header"></div>
<main> <main>
<section class="hero page-bg" style="--page-bg:url('assets/img/bg-bewerben.jpg');--page-bg-mobile:url('assets/img/bg-bewerben-mobile.jpg');"> <section class="hero page-bg">
<div class="container"> <div class="container">
<span class="eyebrow">Manager Dogfather</span> <span class="eyebrow">Manager Dogfather</span>
<h1>Werde Teil vom Team</h1> <h1>Werde Teil vom Team</h1>
casper.html
+2 -2
View File
@@ -22,11 +22,11 @@
<link rel="stylesheet" href="assets/css/theme-hasidog.css" /> <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" /> <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
</head> </head>
<body> <body class="mit-hintergrund" style="--page-bg:url('assets/img/bg-casper.jpg');--page-bg-mobile:url('assets/img/bg-casper-mobile.jpg');">
<div id="site-header"></div> <div id="site-header"></div>
<main> <main>
<section class="hero page-bg" style="--page-bg:url('assets/img/bg-casper.jpg');--page-bg-mobile:url('assets/img/bg-casper-mobile.jpg');"> <section class="hero page-bg">
<div class="container"> <div class="container">
<span class="eyebrow">Welt 2 — HasiDog</span> <span class="eyebrow">Welt 2 — HasiDog</span>
<h1>Casper 🐾</h1> <h1>Casper 🐾</h1>
community.html
+2 -2
View File
@@ -22,11 +22,11 @@
<link rel="stylesheet" href="assets/css/theme-hasidog.css" /> <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" /> <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
</head> </head>
<body> <body class="mit-hintergrund" style="--page-bg:url('assets/img/bg-community.jpg');--page-bg-mobile:url('assets/img/bg-community-mobile.jpg');">
<div id="site-header"></div> <div id="site-header"></div>
<main> <main>
<section class="hero page-bg" style="--page-bg:url('assets/img/bg-community.jpg');--page-bg-mobile:url('assets/img/bg-community-mobile.jpg');"> <section class="hero page-bg">
<div class="container"> <div class="container">
<span class="eyebrow">Welt 2 — HasiDog</span> <span class="eyebrow">Welt 2 — HasiDog</span>
<h1>Die Community</h1> <h1>Die Community</h1>
creator.html
+2 -2
View File
@@ -22,11 +22,11 @@
<link rel="stylesheet" href="assets/css/theme-hasidog.css" /> <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" /> <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
</head> </head>
<body> <body class="mit-hintergrund" style="--page-bg:url('assets/img/bg-bewerben-creator.jpg');--page-bg-mobile:url('assets/img/bg-bewerben-creator-mobile.jpg');">
<div id="site-header"></div> <div id="site-header"></div>
<main> <main>
<section class="hero page-bg" style="--page-bg:url('assets/img/bg-bewerben-creator.jpg');--page-bg-mobile:url('assets/img/bg-bewerben-creator-mobile.jpg');"> <section class="hero page-bg">
<div class="container"> <div class="container">
<span class="eyebrow">Manager Dogfather — Team</span> <span class="eyebrow">Manager Dogfather — Team</span>
<h1>Creator im Team</h1> <h1>Creator im Team</h1>
dogfather.html
+2 -2
View File
@@ -22,11 +22,11 @@
<link rel="stylesheet" href="assets/css/theme-hasidog.css" /> <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" /> <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
</head> </head>
<body> <body class="mit-hintergrund" style="--page-bg:url('assets/img/bg-dogfather.jpg');--page-bg-mobile:url('assets/img/bg-dogfather-mobile.jpg');">
<div id="site-header"></div> <div id="site-header"></div>
<main> <main>
<section class="hero page-bg" style="--page-bg:url('assets/img/bg-dogfather.jpg');--page-bg-mobile:url('assets/img/bg-dogfather-mobile.jpg');"> <section class="hero page-bg">
<div class="container"> <div class="container">
<span class="eyebrow">Welt 1 — Dogfather</span> <span class="eyebrow">Welt 1 — Dogfather</span>
<h1>Die Person hinter Dogfather</h1> <h1>Die Person hinter Dogfather</h1>
hasidog.html
+2 -2
View File
@@ -22,11 +22,11 @@
<link rel="stylesheet" href="assets/css/theme-hasidog.css" /> <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" /> <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
</head> </head>
<body> <body class="mit-hintergrund" style="--page-bg:url('assets/img/bg-hasidog.jpg');--page-bg-mobile:url('assets/img/bg-hasidog-mobile.jpg');">
<div id="site-header"></div> <div id="site-header"></div>
<main> <main>
<section class="hero page-bg" style="--page-bg:url('assets/img/bg-hasidog.jpg');--page-bg-mobile:url('assets/img/bg-hasidog-mobile.jpg');"> <section class="hero page-bg">
<div class="container"> <div class="container">
<span class="eyebrow">Welt 2 — HasiDog</span> <span class="eyebrow">Welt 2 — HasiDog</span>
<h1>Willkommen in der HasiDog-Welt</h1> <h1>Willkommen in der HasiDog-Welt</h1>
manager.html
+2 -2
View File
@@ -22,11 +22,11 @@
<link rel="stylesheet" href="assets/css/theme-hasidog.css" /> <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" /> <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
</head> </head>
<body> <body class="mit-hintergrund" style="--page-bg:url('assets/img/bg-manager.jpg');--page-bg-mobile:url('assets/img/bg-manager-mobile.jpg');">
<div id="site-header"></div> <div id="site-header"></div>
<main> <main>
<section class="hero page-bg" style="--page-bg:url('assets/img/bg-manager.jpg');--page-bg-mobile:url('assets/img/bg-manager-mobile.jpg');"> <section class="hero page-bg">
<div class="container"> <div class="container">
<span class="eyebrow">Welt 3 — Manager Dogfather</span> <span class="eyebrow">Welt 3 — Manager Dogfather</span>
<h1>Manager Dogfather bei Spicy Media</h1> <h1>Manager Dogfather bei Spicy Media</h1>
stimmen.html
+2 -2
View File
@@ -22,11 +22,11 @@
<link rel="stylesheet" href="assets/css/theme-hasidog.css" /> <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" /> <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
</head> </head>
<body> <body class="mit-hintergrund" style="--page-bg:url('assets/img/bg-stimmen.jpg');--page-bg-mobile:url('assets/img/bg-stimmen-mobile.jpg');">
<div id="site-header"></div> <div id="site-header"></div>
<main> <main>
<section class="hero page-bg" style="--page-bg:url('assets/img/bg-stimmen.jpg');--page-bg-mobile:url('assets/img/bg-stimmen-mobile.jpg');"> <section class="hero page-bg">
<div class="container"> <div class="container">
<span class="eyebrow">Welt 2 — HasiDog</span> <span class="eyebrow">Welt 2 — HasiDog</span>
<h1>Stimmen über Dogfather</h1> <h1>Stimmen über Dogfather</h1>
streamplan.html
+2 -2
View File
@@ -22,11 +22,11 @@
<link rel="stylesheet" href="assets/css/theme-hasidog.css" /> <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" /> <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
</head> </head>
<body> <body class="mit-hintergrund" style="--page-bg:url('assets/img/bg-streamplan.jpg');--page-bg-mobile:url('assets/img/bg-streamplan-mobile.jpg');">
<div id="site-header"></div> <div id="site-header"></div>
<main> <main>
<section class="hero page-bg" style="--page-bg:url('assets/img/bg-streamplan.jpg');--page-bg-mobile:url('assets/img/bg-streamplan-mobile.jpg');"> <section class="hero page-bg">
<div class="container"> <div class="container">
<span class="eyebrow">Welt 1 — Dogfather</span> <span class="eyebrow">Welt 1 — Dogfather</span>
<h1>Streamplan &amp; Livebereich</h1> <h1>Streamplan &amp; Livebereich</h1>
team-modis.html
+2 -2
View File
@@ -22,11 +22,11 @@
<link rel="stylesheet" href="assets/css/theme-hasidog.css" /> <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" /> <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
</head> </head>
<body> <body class="mit-hintergrund" style="--page-bg:url('assets/img/bg-dogfather.jpg');--page-bg-mobile:url('assets/img/bg-dogfather-mobile.jpg');">
<div id="site-header"></div> <div id="site-header"></div>
<main> <main>
<section class="hero page-bg" style="--page-bg:url('assets/img/bg-dogfather.jpg');--page-bg-mobile:url('assets/img/bg-dogfather-mobile.jpg');"> <section class="hero page-bg">
<div class="container"> <div class="container">
<span class="eyebrow">🩵 Team Dogi</span> <span class="eyebrow">🩵 Team Dogi</span>
<h1>Das Modi-Team</h1> <h1>Das Modi-Team</h1>
team-scouts.html
+2 -2
View File
@@ -22,11 +22,11 @@
<link rel="stylesheet" href="assets/css/theme-hasidog.css" /> <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" /> <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
</head> </head>
<body> <body class="mit-hintergrund" style="--page-bg:url('assets/img/bg-scouts.jpg');--page-bg-mobile:url('assets/img/bg-scouts-mobile.jpg');">
<div id="site-header"></div> <div id="site-header"></div>
<main> <main>
<section class="hero page-bg" style="--page-bg:url('assets/img/bg-scouts.jpg');--page-bg-mobile:url('assets/img/bg-scouts-mobile.jpg');"> <section class="hero page-bg">
<div class="container"> <div class="container">
<span class="eyebrow">Manager Dogfather — Spicy Media</span> <span class="eyebrow">Manager Dogfather — Spicy Media</span>
<h1>Unser Scout-Team</h1> <h1>Unser Scout-Team</h1>
vanvan.html
+2 -2
View File
@@ -22,11 +22,11 @@
<link rel="stylesheet" href="assets/css/theme-hasidog.css" /> <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" /> <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
</head> </head>
<body> <body class="mit-hintergrund" style="--page-bg:url('assets/img/bg-vanvan.jpg');--page-bg-mobile:url('assets/img/bg-vanvan-mobile.jpg');">
<div id="site-header"></div> <div id="site-header"></div>
<main> <main>
<section class="hero page-bg" style="--page-bg:url('assets/img/bg-vanvan.jpg');--page-bg-mobile:url('assets/img/bg-vanvan-mobile.jpg');"> <section class="hero page-bg">
<div class="container"> <div class="container">
<span class="eyebrow">🩵 Exklusive Seite</span> <span class="eyebrow">🩵 Exklusive Seite</span>
<h1>VanVan</h1> <h1>VanVan</h1>
werte.html
+2 -2
View File
@@ -22,11 +22,11 @@
<link rel="stylesheet" href="assets/css/theme-hasidog.css" /> <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" /> <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
</head> </head>
<body> <body class="mit-hintergrund" style="--page-bg:url('assets/img/bg-werte.jpg');--page-bg-mobile:url('assets/img/bg-werte-mobile.jpg');">
<div id="site-header"></div> <div id="site-header"></div>
<main> <main>
<section class="hero page-bg" style="--page-bg:url('assets/img/bg-werte.jpg');--page-bg-mobile:url('assets/img/bg-werte-mobile.jpg');"> <section class="hero page-bg">
<div class="container"> <div class="container">
<span class="eyebrow">Welt 3 — Manager Dogfather</span> <span class="eyebrow">Welt 3 — Manager Dogfather</span>
<h1>Werte als Manager</h1> <h1>Werte als Manager</h1>
zeitreise.html
+2 -2
View File
@@ -22,11 +22,11 @@
<link rel="stylesheet" href="assets/css/theme-hasidog.css" /> <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" /> <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
</head> </head>
<body> <body class="mit-hintergrund" style="--page-bg:url('assets/img/bg-zeitreise.jpg');--page-bg-mobile:url('assets/img/bg-zeitreise-mobile.jpg');">
<div id="site-header"></div> <div id="site-header"></div>
<main> <main>
<section class="hero page-bg" style="--page-bg:url('assets/img/bg-zeitreise.jpg');--page-bg-mobile:url('assets/img/bg-zeitreise-mobile.jpg');"> <section class="hero page-bg">
<div class="container"> <div class="container">
<span class="eyebrow">Welt 1 — Dogfather</span> <span class="eyebrow">Welt 1 — Dogfather</span>
<h1>Zeitreise</h1> <h1>Zeitreise</h1>