Neuer Hintergrund für "Die Person", Creator-Satz korrigiert, Pyramiden-Karten gleich hoch

- dogfather.html: neues, extra dafür erstelltes Hero-Bild als eigene Datei
  (bg-dogfather-person.jpg) - bewusst NICHT die geteilte bg-dogfather.jpg
  überschrieben, die noch auf 3 weiteren Seiten (bewerben-modi, profil,
  team-modis) mitverwendet wird
- creator.html: "Content Creator, die bei Spicy Media / Team Dogi
  mitmachen" -> "...die bei Dogfather / Spicy Media mitmachen" (Meta-Tags
  entsprechend mitkorrigiert)
- Pyramiden-Karten (team-modis.html) sind jetzt pro Ebene gleich hoch,
  unabhängig von Textlänge (z.B. Diene/Funny): .pyramid-tier auf
  align-items:stretch, .profile-card darin als Flex-Spalte mit dem
  "Profil ansehen"-Button per margin-top:auto immer ganz unten
This commit is contained in:
2026-08-01 14:32:00 +02:00
parent 0d31fb8bb0
commit 58d1e6fa52
6 changed files with 18 additions and 8 deletions
+11 -1
View File
@@ -1102,7 +1102,10 @@ body.mit-hintergrund::after {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-items: flex-start; /* stretch statt flex-start: alle Karten einer Ebene werden gleich hoch,
egal ob der Name/die Rolle bei der einen Person länger ist als bei
der anderen (z.B. Diene/Funny) — Wunsch von Dogi. */
align-items: stretch;
gap: clamp(1rem, 3vw, 2rem); gap: clamp(1rem, 3vw, 2rem);
} }
/* Leuchtender Knoten pro Ebene, sitzt genau auf der Linie */ /* Leuchtender Knoten pro Ebene, sitzt genau auf der Linie */
@@ -1122,8 +1125,15 @@ body.mit-hintergrund::after {
} }
.pyramid-tier .profile-card { .pyramid-tier .profile-card {
width: 100%; width: 100%;
/* Flex-Spalte, damit der "Profil ansehen"-Button per margin-top:auto immer
ganz unten sitzt — dadurch wirken alle Karten einer Ebene gleich hoch
und gleich aufgebaut, auch wenn Name/Rolle unterschiedlich lang sind. */
display: flex;
flex-direction: column;
align-items: center;
transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease; transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
} }
.pyramid-tier .profile-card .btn { margin-top: auto; }
.pyramid-tier .profile-card:hover { transform: translateY(-6px) scale(1.02); } .pyramid-tier .profile-card:hover { transform: translateY(-6px) scale(1.02); }
/* Fünf Größenstufen — je tiefer, desto kompakter */ /* Fünf Größenstufen — je tiefer, desto kompakter */
Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 306 KiB

+4 -4
View File
@@ -4,17 +4,17 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Creator im Team — DOGFATHER UNIVERSE</title> <title>Creator im Team — DOGFATHER UNIVERSE</title>
<meta name="description" content="Content Creator, die Teil von Spicy Media / Team Dogi sind." /> <meta name="description" content="Content Creator, die Teil von Dogfather / Spicy Media sind." />
<link rel="icon" type="image/png" href="assets/img/favicon.png" /> <link rel="icon" type="image/png" href="assets/img/favicon.png" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:site_name" content="DOGFATHER UNIVERSE" /> <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
<meta property="og:title" content="Creator im Team — DOGFATHER UNIVERSE" /> <meta property="og:title" content="Creator im Team — DOGFATHER UNIVERSE" />
<meta property="og:description" content="Content Creator, die Teil von Spicy Media / Team Dogi sind." /> <meta property="og:description" content="Content Creator, die Teil von Dogfather / Spicy Media sind." />
<meta property="og:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" /> <meta property="og:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
<meta property="og:url" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/creator.html" /> <meta property="og:url" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/creator.html" />
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Creator im Team — DOGFATHER UNIVERSE" /> <meta name="twitter:title" content="Creator im Team — DOGFATHER UNIVERSE" />
<meta name="twitter:description" content="Content Creator, die Teil von Spicy Media / Team Dogi sind." /> <meta name="twitter:description" content="Content Creator, die Teil von Dogfather / Spicy Media sind." />
<meta name="twitter:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" /> <meta name="twitter:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
<link rel="stylesheet" href="assets/css/main.css" /> <link rel="stylesheet" href="assets/css/main.css" />
@@ -31,7 +31,7 @@
<div class="container"> <div class="container">
<span class="eyebrow">Manager Dogfather — Team</span> <span class="eyebrow">Manager Dogfather — Team</span>
<h1>Creator im Team</h1> <h1>Creator im Team</h1>
<p class="lead worlds">Content Creator, die bei Spicy Media / Team Dogi mitmachen.</p> <p class="lead worlds">Content Creator, die bei Dogfather / Spicy Media mitmachen.</p>
</div> </div>
</section> </section>
+2 -2
View File
@@ -22,12 +22,12 @@
<link rel="stylesheet" href="assets/css/theme-hasidog.css" /> <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" /> <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
</head> </head>
<body class="mit-hintergrund" style="--page-bg:url('/assets/img/bg-dogfather.jpg');--page-bg-mobile:url('/assets/img/bg-dogfather-mobile.jpg');"> <body class="mit-hintergrund" style="--page-bg:url('/assets/img/bg-dogfather-person.jpg');--page-bg-mobile:url('/assets/img/bg-dogfather-person-mobile.jpg');">
<div id="site-header"></div> <div id="site-header"></div>
<main> <main>
<section class="hero page-bg"> <section class="hero page-bg">
<div class="hero-banner"><img src="/assets/img/bg-dogfather.jpg" alt="" loading="eager" /></div> <div class="hero-banner"><img src="/assets/img/bg-dogfather-person.jpg" alt="" loading="eager" /></div>
<div class="container"> <div class="container">
<span class="eyebrow">Welt 1 — Dogfather</span> <span class="eyebrow">Welt 1 — Dogfather</span>
<h1>Die Person hinter Dogfather</h1> <h1>Die Person hinter Dogfather</h1>
+1 -1
View File
@@ -89,7 +89,7 @@ document.addEventListener("DOMContentLoaded", () => {
<span class="badge" style="margin-bottom:.5rem;">Stufe ${m.rankLabel || m.rank}</span> <span class="badge" style="margin-bottom:.5rem;">Stufe ${m.rankLabel || m.rank}</span>
<h3>${m.name}</h3> <h3>${m.name}</h3>
<div class="role">${m.role}</div> <div class="role">${m.role}</div>
<span class="btn btn-outline" style="margin-top:.7rem;pointer-events:none;">Profil ansehen</span> <span class="btn btn-outline" style="pointer-events:none;">Profil ansehen</span>
</a>` </a>`
) )
.join(""); .join("");