diff --git a/assets/css/main.css b/assets/css/main.css index 299bc7a..aad3afe 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -510,6 +510,54 @@ header.site-header { .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 { display: none; background: none; diff --git a/links.html b/links.html index 4588cf1..b1c37ea 100644 --- a/links.html +++ b/links.html @@ -38,7 +38,7 @@
- +

🎥 TikTok

@dogfather0804

diff --git a/profil.html b/profil.html index a45369e..de17a24 100644 --- a/profil.html +++ b/profil.html @@ -262,10 +262,22 @@ document.addEventListener("DOMContentLoaded", () => { Object.entries(person.social || {}).forEach(([plattform, url]) => { if (!url) return; const a = document.createElement("a"); - a.className = "btn btn-outline"; a.href = url; a.target = "_blank"; 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; socialWrap.appendChild(a); }); diff --git a/streamplan.html b/streamplan.html index f71c917..af9202b 100644 --- a/streamplan.html +++ b/streamplan.html @@ -33,7 +33,7 @@

Streamplan & Livebereich

Wann ist DogFather live?