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; }
|
.profil-social { margin-top: 1.4rem; }
|
||||||
@media (max-width: 760px) { .profil-photo { max-width: 320px; } }
|
@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
|
/* Ausführliche Vorstellung (bioHtml) — eigener, breiterer Lesebereich
|
||||||
unterhalb der kurzen Steckbrief-Zeile, statt in die schmale 2-Spalten-
|
unterhalb der kurzen Steckbrief-Zeile, statt in die schmale 2-Spalten-
|
||||||
Box gequetscht zu werden. Gedacht für Texte in beliebiger Länge. */
|
Box gequetscht zu werden. Gedacht für Texte in beliebiger Länge. */
|
||||||
@@ -53,7 +79,7 @@
|
|||||||
<div id="site-header"></div>
|
<div id="site-header"></div>
|
||||||
|
|
||||||
<main>
|
<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="hero-banner" id="profil-banner" style="display:none;"><img id="profil-banner-img" src="" alt="" loading="eager" /></div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<span class="eyebrow" id="profil-eyebrow">🩵 Team Dogi</span>
|
<span class="eyebrow" id="profil-eyebrow">🩵 Team Dogi</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user