Husky-Bild auf streamer.html an Texthöhe angepasst statt fixem Mini-Deckel
Vorheriger max-height-Deckel (460px) fürs sehr hochkantige
streamer-mascot.jpg (900x2812) war zu knapp und ließ eine sichtbare
Lücke neben dem längeren Text ("die größe vom bild vom husky soll dem
text rechts nebendran angepasst werden"). Deckel auf 720px erhöht
(orientiert an der typischen Texthöhe in diesem Abschnitt), Grid-Stretch-
Ansatz ausprobiert und wegen Rückkopplung mit dem extremen
Seitenverhältnis verworfen (siehe Kommentare in main.css/streamer.html).
Cache-Busting-Version auf 20260821b erhöht (Cloudflare cached CSS/JS
sonst bis zu 4h am Edge).
Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
+16
-9
@@ -19,10 +19,10 @@
|
||||
<meta name="twitter:description" content="Die persönliche Geschichte hinter DogFather — Filipe, Streamer, Manager bei Spicy Media und Hundepapa von Husky Casper." />
|
||||
<meta name="twitter:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
|
||||
|
||||
<link rel="stylesheet" href="assets/css/main.css?v=20260821a" />
|
||||
<link rel="stylesheet" href="assets/css/theme-dogfather.css?v=20260821a" />
|
||||
<link rel="stylesheet" href="assets/css/theme-hasidog.css?v=20260821a" />
|
||||
<link rel="stylesheet" href="assets/css/theme-spicymedia.css?v=20260821a" />
|
||||
<link rel="stylesheet" href="assets/css/main.css?v=20260821b" />
|
||||
<link rel="stylesheet" href="assets/css/theme-dogfather.css?v=20260821b" />
|
||||
<link rel="stylesheet" href="assets/css/theme-hasidog.css?v=20260821b" />
|
||||
<link rel="stylesheet" href="assets/css/theme-spicymedia.css?v=20260821b" />
|
||||
</head>
|
||||
<body class="mit-hintergrund" style="--page-bg:url('/assets/img/bg-streamer.jpg');--page-bg-mobile:url('/assets/img/bg-streamer-mobile.jpg');">
|
||||
<div id="site-header"></div>
|
||||
@@ -77,9 +77,16 @@
|
||||
so riesig, einfach normal wie auf der startseite"): streamer-mascot.jpg ist
|
||||
900x2812 px, also extrem hochkant. Mit aspect-ratio:auto + height:auto lief
|
||||
es in voller natürlicher Höhe und war damit gut dreimal so hoch wie die
|
||||
Textspalte daneben. Die Klasse .collage-photo-kompakt (main.css) deckelt die
|
||||
Höhe auf ein normales Maß und lässt den Rahmen dabei eng am Bild sitzen --
|
||||
die ganze Figur bleibt sichtbar, nur eben in vernünftiger Größe. -->
|
||||
Textspalte daneben.
|
||||
Update 21.08.2026 (Nutzer-Report: "die größe vom bild vom husky soll dem
|
||||
text rechts nebendran angepasst werden"): der erste Deckel (460px) war zu
|
||||
knapp und ließ eine sichtbare Lücke unter dem Bild. Ein Grid-Stretch-Ansatz
|
||||
(align-items:stretch + height:100%) wurde ausprobiert, zieht bei einem so
|
||||
extremen Hochkant-Seitenverhältnis aber die ganze Zeile auf die riesige
|
||||
Eigenhöhe des Bildes hoch (Grid richtet 'auto'-Zeilen am Max-Content-Beitrag
|
||||
aus) -- daher verworfen. Stattdessen ein großzügigerer fester Deckel
|
||||
(siehe .collage-photo-kompakt in main.css, jetzt 720px statt 460px), der
|
||||
sich an der typischen Höhe der Textspalte in diesem Abschnitt orientiert. -->
|
||||
<div class="collage-photo collage-photo-kompakt frame-lila" style="border-radius:var(--radius);">
|
||||
<img src="assets/img/streamer-mascot.jpg" alt="DogFather Maskottchen" />
|
||||
</div>
|
||||
@@ -200,7 +207,7 @@
|
||||
</main>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
<script src="assets/js/i18n-streamer.js?v=20260821a"></script>
|
||||
<script src="assets/js/main.js?v=20260821a"></script>
|
||||
<script src="assets/js/i18n-streamer.js?v=20260821b"></script>
|
||||
<script src="assets/js/main.js?v=20260821b"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user