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:
+12
-32
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user