Profilseite: Weltmotiv-Banner deutlich verkleinert, Person hat Priorität
Das Banner-Bild auf profil.html nahm bisher seine volle Original-Höhe ein (analog zu den anderen Seiten) und schob das eigentliche Profil weit nach unten. Jetzt begrenzt auf 240px (Desktop) / 150px (Mobil), object-fit:cover statt height:auto, plus stärkerer Verlaufs-Overlay — das Bild wirkt jetzt als Stimmungsstreifen im Hintergrund, das Profil (Foto/Name/Bio) ist sofort sichtbar.
This commit is contained in:
+27
-1
@@ -28,6 +28,32 @@
|
||||
.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; }
|
||||
}
|
||||
|
||||
/* Ausführliche Vorstellung (bioHtml) — eigener, breiterer Lesebereich
|
||||
unterhalb der kurzen Steckbrief-Zeile, statt in die schmale 2-Spalten-
|
||||
Box gequetscht zu werden. Gedacht für Texte in beliebiger Länge. */
|
||||
@@ -53,7 +79,7 @@
|
||||
<div id="site-header"></div>
|
||||
|
||||
<main>
|
||||
<section class="hero page-bg">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user