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

Seiten wieder deutlich dunkler und augenschonender

Browse Source 
- Seitenkoerper: Motiv staerker weichgezeichnet und abgedunkelt
  (Helligkeit 62%), Abdunkelung von 62-90% auf 80-95% angehoben
- Kopfbereich: Vignette und Verlauf kraeftiger, Mitte aber hell genug
  dass das Motiv weiter klar erkennbar bleibt
- Ziel: langes Lesen soll angenehm sein, das Bild bleibt Stimmung

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-07-31 06:24:59 +02:00
co-authored by Claude Opus 5
parent 2279f3e4e4
commit d05cc43e85
1 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+15 -13
View File
@@ -911,10 +911,12 @@ body.mit-hintergrund::before {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(3px) saturate(1.05);
/* Weichzeichnen + leicht abdunkeln: ruhiger Untergrund, der die Augen
beim Lesen nicht anstrengt. */
filter: blur(4px) brightness(.62) saturate(.95);
}
/* Abdunkelung für den Seitenkörper — stark genug für gute Lesbarkeit,
aber so, dass das Motiv deutlich durchkommt. */
/* Abdunkelung für den Seitenkörper — bewusst kräftig, damit langes Lesen
angenehm bleibt. Das Motiv bleibt als ruhige Stimmung im Hintergrund. */
body.mit-hintergrund::after {
content: "";
position: fixed;
@@ -922,9 +924,9 @@ body.mit-hintergrund::after {
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%);
color-mix(in srgb, var(--bg) 80%, transparent) 0%,
color-mix(in srgb, var(--bg) 92%, transparent) 45%,
color-mix(in srgb, var(--bg) 95%, transparent) 100%);
}
/* ---- 2) Im Kopfbereich zeigt sich das Motiv gestochen scharf ----
@@ -950,15 +952,15 @@ body.mit-hintergrund::after {
inset: 0;
z-index: -1;
background:
/* nur ganz leichte Vignette, damit die Ränder nicht hart abbrechen */
/* Vignette: Mitte hell genug, dass das Motiv wirkt, Ränder ruhig dunkel */
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 */
rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .50) 72%, rgba(0, 0, 0, .70) 100%),
/* oben dunkler für die Navigation, unten weicher Übergang in die Seite */
linear-gradient(to bottom,
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%);
rgba(0, 0, 0, .58) 0%,
rgba(0, 0, 0, .26) 26%,
rgba(0, 0, 0, .36) 66%,
color-mix(in srgb, var(--bg) 94%, transparent) 100%);
}
/* Damit die Schrift auf jedem Bildausschnitt sicher lesbar bleibt, bekommt
sie eine kräftige Abschattung statt das Bild abzudunkeln. */