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:
2026-08-01 10:56:05 +02:00
parent 5d24d6fc15
commit 888de712de
+27 -1
View File
@@ -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>