Alle TikTok-Buttons/-Karten site-weit im neuen TikTok-Farbschema
Der neue .btn-tiktok-Stil (Cyan #25F4EE + Pink/Rot #FE2C55 Polarlicht, bisher nur auf vanvan.html/dogfather.html) wird jetzt konsequent überall angewendet, wo es einen echten TikTok-Link gibt: - profil.html: TikTok-Social-Link (Diene/Miss/Ghost) nutzt .btn-tiktok statt generischem .btn-outline, andere Plattformen unverändert. - streamplan.html: "Zur Dogi TikTok-Seite"-Button jetzt .btn-tiktok. - links.html: neue .card-tiktok-Variante wendet denselben Polarlicht- Mechanismus auf die TikTok-Karte im Karten-Grid an (Kartenform bleibt erhalten, damit das Grid nicht durcheinanderkommt), alle anderen Plattform-Karten (Instagram/Snapchat/Discord/Shop/Bewerben) bleiben im normalen Karten-Stil. Bewusst NUR TikTok — keine andere Plattform bekommt diese Farben.
This commit is contained in:
@@ -510,6 +510,54 @@ header.site-header {
|
|||||||
.btn-tiktok::before, .btn-tiktok::after { animation: none; }
|
.btn-tiktok::before, .btn-tiktok::after { animation: none; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* TikTok-Karte (z.B. links.html-Übersicht): gleicher Polarlicht-
|
||||||
|
Mechanismus wie .btn-tiktok, nur auf die normale .card-Form angewendet,
|
||||||
|
damit sie sich in ein Karten-Grid mit anderen Plattformen einfügt.
|
||||||
|
Bewusst NUR für die TikTok-Karte, keine andere Plattform-Karte. */
|
||||||
|
.card-tiktok {
|
||||||
|
position: relative;
|
||||||
|
isolation: isolate;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #0b0e14;
|
||||||
|
border-color: rgba(255, 255, 255, .16);
|
||||||
|
}
|
||||||
|
.card-tiktok h3, .card-tiktok p {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .35);
|
||||||
|
}
|
||||||
|
.card-tiktok::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: -60%;
|
||||||
|
z-index: 0;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 22% 30%, rgba(37, 244, 238, .85), transparent 55%),
|
||||||
|
radial-gradient(circle at 78% 68%, rgba(254, 44, 85, .85), transparent 58%);
|
||||||
|
filter: blur(11px) saturate(1.35);
|
||||||
|
animation: nav-cta-aurora 9s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
.card-tiktok::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 1;
|
||||||
|
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 49%, transparent 63%);
|
||||||
|
background-size: 240% 100%;
|
||||||
|
mix-blend-mode: overlay;
|
||||||
|
animation: nav-cta-shimmer 4.5s linear infinite;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.card-tiktok:hover {
|
||||||
|
border-color: rgba(255, 255, 255, .32);
|
||||||
|
box-shadow: 0 10px 26px rgba(0, 0, 0, .45),
|
||||||
|
0 0 22px rgba(37, 244, 238, .3),
|
||||||
|
0 0 22px rgba(254, 44, 85, .28);
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.card-tiktok::before, .card-tiktok::after { animation: none; }
|
||||||
|
}
|
||||||
|
|
||||||
.nav-toggle {
|
.nav-toggle {
|
||||||
display: none;
|
display: none;
|
||||||
background: none;
|
background: none;
|
||||||
|
|||||||
+1
-1
@@ -38,7 +38,7 @@
|
|||||||
<section class="section-tight">
|
<section class="section-tight">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="grid grid-3" style="max-width:800px;margin:0 auto;">
|
<div class="grid grid-3" style="max-width:800px;margin:0 auto;">
|
||||||
<a class="card text-center" href="https://www.tiktok.com/@dogfather0804" target="_blank" rel="noopener">
|
<a class="card card-tiktok text-center" href="https://www.tiktok.com/@dogfather0804" target="_blank" rel="noopener">
|
||||||
<h3>🎥 TikTok</h3>
|
<h3>🎥 TikTok</h3>
|
||||||
<p>@dogfather0804</p>
|
<p>@dogfather0804</p>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
+13
-1
@@ -262,10 +262,22 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||||||
Object.entries(person.social || {}).forEach(([plattform, url]) => {
|
Object.entries(person.social || {}).forEach(([plattform, url]) => {
|
||||||
if (!url) return;
|
if (!url) return;
|
||||||
const a = document.createElement("a");
|
const a = document.createElement("a");
|
||||||
a.className = "btn btn-outline";
|
|
||||||
a.href = url;
|
a.href = url;
|
||||||
a.target = "_blank";
|
a.target = "_blank";
|
||||||
a.rel = "noopener";
|
a.rel = "noopener";
|
||||||
|
// TikTok-Links bekommen den eigenen Polarlicht-Button im TikTok-
|
||||||
|
// Farbschema (siehe .btn-tiktok in main.css) — bewusst NUR TikTok,
|
||||||
|
// alle anderen Plattformen (Instagram/Spotify/Discord) behalten den
|
||||||
|
// normalen Outline-Button-Stil.
|
||||||
|
if (plattform === "tiktok") {
|
||||||
|
a.className = "btn-tiktok";
|
||||||
|
const span = document.createElement("span");
|
||||||
|
span.textContent = socialLabels[plattform];
|
||||||
|
a.appendChild(span);
|
||||||
|
socialWrap.appendChild(a);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
a.className = "btn btn-outline";
|
||||||
a.textContent = socialLabels[plattform] || plattform;
|
a.textContent = socialLabels[plattform] || plattform;
|
||||||
socialWrap.appendChild(a);
|
socialWrap.appendChild(a);
|
||||||
});
|
});
|
||||||
|
|||||||
+1
-1
@@ -33,7 +33,7 @@
|
|||||||
<h1 data-i18n="sp_h1">Streamplan & Livebereich</h1>
|
<h1 data-i18n="sp_h1">Streamplan & Livebereich</h1>
|
||||||
<p class="lead worlds" data-i18n="sp_lead">Wann ist DogFather live?</p>
|
<p class="lead worlds" data-i18n="sp_lead">Wann ist DogFather live?</p>
|
||||||
<div class="btn-row" style="justify-content:center;">
|
<div class="btn-row" style="justify-content:center;">
|
||||||
<a class="btn btn-primary" href="https://www.tiktok.com/@dogfather0804" target="_blank" rel="noopener" data-i18n="sp_btn_tiktok">Zur Dogi TikTok-Seite</a>
|
<a class="btn-tiktok" href="https://www.tiktok.com/@dogfather0804" target="_blank" rel="noopener"><span data-i18n="sp_btn_tiktok">Zur Dogi TikTok-Seite</span></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user