Profilseite: scharfes Banner-Bild komplett entfernt, Profil sofort im Fokus

Das auf 240px verkleinerte Banner war laut Dogi immer noch zu dominant -
man sah beim Öffnen zuerst das Bild statt die Person. Jetzt gibt es auf
profil.html gar kein scharfes Kopfbanner mehr, nur noch die ohnehin
vorhandene weichgezeichnete Hintergrundstimmung (body.mit-hintergrund,
liegt fest hinter allem und nimmt keinen Platz im Textfluss ein). Direkt
nach dem kompakten Titel kommt sofort das Profilfoto mit Name und Bio.
This commit is contained in:
2026-08-01 11:07:00 +02:00
parent e910017e51
commit 9d47a1e425
+12 -32
View File
@@ -28,31 +28,14 @@
.profil-social { margin-top: 1.4rem; }
@media (max-width: 760px) { .profil-photo { max-width: 320px; } }
/* Auf der Profilseite ist die Person das Wichtigste, nicht das
Weltmotiv-Banner. Das Banner-Bild bekommt hier deshalb bewusst nur
noch einen schmalen Streifen als Stimmungsbild im Hintergrund, statt
wie auf den anderen Seiten seine volle, hohe Originalgröße
einzunehmen — das Profil (Foto, Name, Bio) rückt dadurch sofort in
den Vordergrund. */
#profil-banner { max-height: 240px; overflow: hidden; }
#profil-banner img {
height: 240px;
width: 100%;
object-fit: cover;
object-position: center 30%;
filter: saturate(1.05);
}
#profil-banner::after {
background: linear-gradient(to bottom,
rgba(0, 0, 0, .25) 0%,
color-mix(in srgb, var(--bg) 45%, transparent) 55%,
var(--bg) 100%);
}
.profil-hero.page-bg { padding: clamp(1.4rem, 3vw, 2rem) 0 clamp(1.6rem, 3.5vw, 2.4rem); }
@media (max-width: 760px) {
#profil-banner { max-height: 150px; }
#profil-banner img { height: 150px; }
}
/* Auf der Profilseite ist die Person das Wichtigste — kein scharfes
Weltmotiv-Banner mehr im Weg. Das Motiv bleibt nur noch als
weichgezeichnete Stimmung ganz im Hintergrund sichtbar (über
body.mit-hintergrund, sitzt fest hinter allem und nimmt keinen
eigenen Platz im Textfluss ein). Dadurch ist Fotos/Name/Bio der
Person direkt beim Öffnen der Seite sofort im Blick, ohne dass
erst ein Banner-Bild "weggescrollt" werden muss. */
.profil-hero.page-bg { padding: clamp(1.2rem, 2.5vw, 1.8rem) 0 clamp(.8rem, 2vw, 1.2rem); }
/* Ausführliche Vorstellung (bioHtml) — eigener, breiterer Lesebereich
unterhalb der kurzen Steckbrief-Zeile, statt in die schmale 2-Spalten-
@@ -80,7 +63,6 @@
<main>
<section class="hero page-bg profil-hero">
<div class="hero-banner" id="profil-banner" style="display:none;"><img id="profil-banner-img" src="" alt="" loading="eager" /></div>
<div class="container">
<span class="eyebrow" id="profil-eyebrow">🩵 Team Dogi</span>
<h1 id="profil-hero-name">Profil</h1>
@@ -154,15 +136,13 @@ document.addEventListener("DOMContentLoaded", () => {
const welt = istScout || istCreator ? "spicymedia" : "dogfather";
document.documentElement.setAttribute("data-theme", welt);
// Passendes Weltmotiv im Hintergrund, wie auf den Team-Übersichtsseiten.
// Ambiente-Ebene (weichgezeichnet, body-weit) UND der scharfe Banner
// oben im Kopfbereich (echtes <img>, dadurch immer komplett sichtbar
// und randlos breit — siehe main.css .hero-banner).
// Passendes Weltmotiv nur noch als weichgezeichnete Stimmung ganz im
// Hintergrund (body.mit-hintergrund) — bewusst KEIN scharfes Banner-Bild
// mehr oben im Kopfbereich, damit das Profil der Person (Foto/Name/Bio)
// sofort beim Öffnen der Seite im Fokus steht, ohne Banner davor.
const bgBasis = istScout || istCreator ? "bg-scouts" : "bg-dogfather";
document.body.style.setProperty("--page-bg", `url('/assets/img/${bgBasis}.jpg')`);
document.body.style.setProperty("--page-bg-mobile", `url('/assets/img/${bgBasis}-mobile.jpg')`);
document.getElementById("profil-banner-img").src = `/assets/img/${bgBasis}.jpg`;
document.getElementById("profil-banner").style.display = "";
document.title = `${person.name} — DOGFATHER UNIVERSE`;
// Für die Meta-Beschreibung reicht immer ein kurzer Textauszug, auch