Duda17/social
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
nadja
2026-11-01 23:01:58 +01:00
parent 2e7d3d299c
commit 69895d7e68
8 changed files with 338 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.idea/.gitignore generated vendored Normal file
View File

@@ -0,0 +1,10 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Ignored default folder with query files
/queries/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

7
.idea/misc.xml generated Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="KubernetesApiProvider">{}</component>
<component name="ProjectRootManager" version="2" languageLevel="JDK_24" default="true" project-jdk-name="24" project-jdk-type="JavaSDK">
<output url="file://$PROJECT_DIR$/out" />
</component>
</project>

8
.idea/modules.xml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/social_webseite.iml" filepath="$PROJECT_DIR$/.idea/social_webseite.iml" />
</modules>
</component>
</project>

9
.idea/social_webseite.iml generated Normal file
View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
.idea/vcs.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

27
app.js
View File

@@ -128,9 +128,36 @@
}
}
/* ------------------------------------------------------------------
* Discord Copy-to-Clipboard Button
* ------------------------------------------------------------------ */
function initDiscordCopy() {
var copyBtn = document.getElementById("copy-discord");
var copyText = document.getElementById("copy-text");
var discordTag = document.getElementById("discord-tag");
if (!copyBtn || !discordTag) return;
copyBtn.addEventListener("click", function () {
var textToCopy = discordTag.innerText.trim();
navigator.clipboard.writeText(textToCopy).then(function () {
copyText.innerText = "Kopiert! ✓";
copyBtn.classList.add("copied");
setTimeout(function () {
copyText.innerText = "Kopieren";
copyBtn.classList.remove("copied");
}, 2000);
}).catch(function () {
// Fallback
copyText.innerText = "Fehler";
});
});
}
document.addEventListener("DOMContentLoaded", function () {
loadYouTube();
loadTwitch();
initNavigation();
initDiscordCopy();
});
})();

27
index.html
View File

@@ -26,6 +26,7 @@
<a href="#twitch" class="nav-link" data-section="twitch">
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z"/></svg>
Twitch
<span class="live-dot" title="Stream-Status"></span>
</a>
<a href="#discord" class="nav-link" data-section="discord">
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.947 2.418-2.157 2.418z"/></svg>
@@ -60,6 +61,24 @@
Discord
</a>
</div>
<!-- Stats Bar (Social Proof) -->
<div class="stats-bar">
<div class="stat-item">
<span class="stat-num">Content</span>
<span class="stat-label">Gaming & Vlogs</span>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<span class="stat-num">Aktiv</span>
<span class="stat-label">Fast täglich neu</span>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<span class="stat-num">Community</span>
<span class="stat-label">Wachsend & Treu</span>
</div>
</div>
</div>
</header>
@@ -162,7 +181,13 @@
<img src="https://yt3.googleusercontent.com/ytc/AIdro_nV0BeUU6X1nvBat082Xuau7R-DzRHMX0hBHONIGmStA9w=s160-c-k-c0x00ffffff-no-rj"
alt="Duda17" class="channel-avatar">
<div>
<h3>19duda98_66649</h3>
<div class="discord-tag-wrap">
<h3 id="discord-tag">19duda98_66649</h3>
<button class="btn-copy" id="copy-discord" title="Namen kopieren">
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
<span id="copy-text">Kopieren</span>
</button>
</div>
<p>Schreibe mich direkt an oder vernetze dich mit mir!</p>
</div>
</div>

309
style.css
View File

@@ -7,7 +7,7 @@
:root {
--bg-primary: #0a0a0a;
--bg-secondary: #111111;
--bg-card: #1a1a1a;
--bg-card: #161616;
--text-primary: #ffffff;
--text-secondary: #a0a0a0;
--youtube-red: #FF0000;
@@ -15,7 +15,7 @@
--tiktok-pink: #ff0050;
--twitch-purple: #9146FF;
--discord-blurple: #5865F2;
--border: #2a2a2a;
--border: rgba(255, 255, 255, 0.08);
}
html {
@@ -36,7 +36,7 @@ body {
padding: 0 20px;
}
/* Hero */
/* Hero mit animiertem Mesh-Hintergrund */
.hero {
min-height: 100vh;
display: flex;
@@ -46,11 +46,35 @@ body {
text-align: center;
padding: 60px 20px;
scroll-margin-top: 0;
position: relative;
background:
radial-gradient(ellipse at 15% 30%, rgba(255, 0, 0, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 50% 70%, rgba(0, 242, 234, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 85% 30%, rgba(145, 70, 255, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 70% 85%, rgba(88, 101, 242, 0.08) 0%, transparent 50%);
radial-gradient(ellipse at 15% 30%, rgba(255, 0, 0, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 50% 70%, rgba(0, 242, 234, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 85% 30%, rgba(145, 70, 255, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 70% 85%, rgba(88, 101, 242, 0.06) 0%, transparent 50%);
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(145, 70, 255, 0.15) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(0, 242, 234, 0.12) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(255, 0, 80, 0.08) 0%, transparent 50%);
filter: blur(60px);
opacity: 0.6;
animation: mesh-move 15s ease-in-out infinite alternate;
z-index: -1;
pointer-events: none;
}
@keyframes mesh-move {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(-30px, 20px) scale(1.1); }
}
.hero-avatar {
@@ -58,8 +82,8 @@ body {
height: 140px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--border);
box-shadow: 0 0 0 4px rgba(145, 70, 255, 0.3), 0 0 40px rgba(88, 101, 242, 0.3);
border: 3px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 0 0 4px rgba(145, 70, 255, 0.2), 0 0 50px rgba(88, 101, 242, 0.25);
margin-bottom: 24px;
}
@@ -68,7 +92,7 @@ body {
font-weight: 900;
letter-spacing: -2px;
margin-bottom: 16px;
background: linear-gradient(135deg, #fff 0%, #c0c0c0 100%);
background: linear-gradient(135deg, #fff 0%, #a0a0a0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -90,32 +114,80 @@ body {
flex-wrap: wrap;
}
/* Buttons */
/* Stats Bar (Social Proof) */
.stats-bar {
display: flex;
justify-content: center;
align-items: center;
gap: 32px;
padding: 24px 20px;
margin-top: -20px;
margin-bottom: 40px;
position: relative;
z-index: 10;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.stat-num {
font-size: 1.1rem;
font-weight: 800;
color: var(--text-primary);
letter-spacing: -0.5px;
}
.stat-label {
font-size: 0.8rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
}
.stat-divider {
width: 1px;
height: 32px;
background: var(--border);
}
/* Buttons & Mikro-Interaktionen */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border-radius: 12px;
border-radius: 14px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, background 0.25s ease;
border: none;
cursor: pointer;
}
.btn:hover {
transform: translateY(-3px) scale(1.02);
}
.btn:active {
transform: translateY(-1px) scale(0.98);
}
.btn-youtube { background: var(--youtube-red); color: #fff; }
.btn-youtube:hover { background: #cc0000; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255, 0, 0, 0.3); }
.btn-youtube:hover { background: #e60000; box-shadow: 0 10px 30px -5px rgba(255, 0, 0, 0.4); }
.btn-tiktok { background: linear-gradient(135deg, var(--tiktok-cyan), var(--tiktok-pink)); color: #fff; }
.btn-tiktok:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 242, 234, 0.3); }
.btn-tiktok:hover { box-shadow: 0 10px 30px -5px rgba(0, 242, 234, 0.4); }
.btn-twitch { background: var(--twitch-purple); color: #fff; }
.btn-twitch:hover { background: #7a38d6; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(145, 70, 255, 0.3); }
.btn-twitch:hover { background: #7a38d6; box-shadow: 0 10px 30px -5px rgba(145, 70, 255, 0.4); }
.btn-discord { background: var(--discord-blurple); color: #fff; }
.btn-discord:hover { background: #4752c4; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(88, 101, 242, 0.3); }
.btn-discord:hover { background: #4752c4; box-shadow: 0 10px 30px -5px rgba(88, 101, 242, 0.4); }
.btn-outline {
background: transparent;
@@ -123,10 +195,10 @@ body {
color: var(--text-primary);
}
.btn-youtube-outline:hover { border-color: var(--youtube-red); color: var(--youtube-red); background: rgba(255, 0, 0, 0.05); }
.btn-tiktok-outline:hover { border-color: var(--tiktok-cyan); color: var(--tiktok-cyan); background: rgba(0, 242, 234, 0.05); }
.btn-twitch-outline:hover { border-color: var(--twitch-purple); color: var(--twitch-purple); background: rgba(145, 70, 255, 0.05); }
.btn-discord-outline:hover { border-color: var(--discord-blurple); color: var(--discord-blurple); background: rgba(88, 101, 242, 0.05); }
.btn-youtube-outline:hover { border-color: var(--youtube-red); color: var(--youtube-red); background: rgba(255, 0, 0, 0.08); }
.btn-tiktok-outline:hover { border-color: var(--tiktok-cyan); color: var(--tiktok-cyan); background: rgba(0, 242, 234, 0.08); }
.btn-twitch-outline:hover { border-color: var(--twitch-purple); color: var(--twitch-purple); background: rgba(145, 70, 255, 0.08); }
.btn-discord-outline:hover { border-color: var(--discord-blurple); color: var(--discord-blurple); background: rgba(88, 101, 242, 0.08); }
.btn-lg { padding: 18px 36px; font-size: 1.1rem; }
@@ -137,12 +209,12 @@ body {
left: 0;
right: 0;
z-index: 1000;
background: rgba(10, 10, 10, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: rgba(10, 10, 10, 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
transform: translateY(-100%);
transition: transform 0.3s ease;
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sticky-nav.visible {
@@ -151,35 +223,34 @@ body {
.nav-inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
height: 56px;
height: 60px;
}
.nav-brand {
font-weight: 900;
font-size: 1.2rem;
letter-spacing: -1px;
background: linear-gradient(135deg, #fff 0%, #c0c0c0 100%);
background: linear-gradient(135deg, #fff 0%, #a0a0a0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: opacity 0.2s ease, width 0.2s ease;
overflow: hidden;
white-space: nowrap;
text-decoration: none;
transition: opacity 0.2s ease;
}
.nav-brand:hover {
opacity: 0;
width: 0;
padding: 0;
opacity: 0.8;
}
.nav-links {
display: flex;
gap: 4px;
gap: 6px;
}
.nav-link {
@@ -187,7 +258,7 @@ body {
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 8px;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-secondary);
@@ -205,6 +276,29 @@ body {
background: rgba(255, 255, 255, 0.1);
}
/* Live Dot Indicator */
.live-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #444;
margin-left: 6px;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.live-dot.is-live {
background: #ff0000;
box-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
animation: pulse-live 1.5s infinite;
}
@keyframes pulse-live {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
}
/* Back-to-Top Button */
.back-to-top {
position: fixed;
@@ -224,8 +318,8 @@ body {
opacity: 0;
visibility: hidden;
transform: translateY(16px);
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.back-to-top.visible {
@@ -237,13 +331,20 @@ body {
.back-to-top:hover {
background: var(--twitch-purple);
border-color: var(--twitch-purple);
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(145, 70, 255, 0.4);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(145, 70, 255, 0.4);
}
/* Sections */
.section { padding: 90px 0; scroll-margin-top: 64px; }
.section-alt { background: var(--bg-secondary); }
/* Sections & Glassmorphism */
.section {
padding: 100px 0;
scroll-margin-top: 60px;
border-top: 1px solid rgba(255, 255, 255, 0.03);
}
.section-alt {
background: var(--bg-secondary);
}
.channel-head {
display: flex;
@@ -258,7 +359,7 @@ body {
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--border);
border: 2px solid rgba(255, 255, 255, 0.1);
}
.section-title {
@@ -271,9 +372,15 @@ body {
flex-wrap: wrap;
}
.section-subtitle { color: var(--text-secondary); font-size: 1.05rem; }
.section-subtitle {
color: var(--text-secondary);
font-size: 1.05rem;
}
.section-cta { text-align: center; margin-top: 40px; }
.section-cta {
text-align: center;
margin-top: 40px;
}
/* YouTube Video Grid */
.video-grid {
@@ -284,15 +391,17 @@ body {
.video-card {
background: var(--bg-card);
border-radius: 16px;
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--border);
transition: transform 0.3s, border-color 0.3s;
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.video-card:hover {
transform: translateY(-4px);
border-color: var(--youtube-red);
transform: translateY(-6px);
border-color: rgba(255, 0, 0, 0.4);
box-shadow: 0 12px 35px rgba(255, 0, 0, 0.15);
}
.video-wrapper {
@@ -314,7 +423,7 @@ body {
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
padding: 16px;
}
.video-meta p {
@@ -353,15 +462,19 @@ body {
/* TikTok Embed */
.tiktok-embed-wrap {
background: var(--bg-card);
border-radius: 16px;
border-radius: 20px;
border: 1px solid var(--border);
padding: 28px;
display: flex;
justify-content: center;
transition: border-color 0.3s;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.tiktok-embed-wrap:hover { border-color: var(--tiktok-cyan); }
.tiktok-embed-wrap:hover {
border-color: rgba(0, 242, 234, 0.4);
box-shadow: 0 12px 35px rgba(0, 242, 234, 0.1);
}
.tiktok-embed-wrap .tiktok-embed {
margin: 0 auto;
@@ -372,14 +485,18 @@ body {
position: relative;
width: 100%;
padding-bottom: 56.25%;
border-radius: 16px;
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--border);
background: #0f0e11;
transition: border-color 0.3s;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.twitch-embed-wrap:hover { border-color: var(--twitch-purple); }
.twitch-embed-wrap:hover {
border-color: rgba(145, 70, 255, 0.4);
box-shadow: 0 12px 35px rgba(145, 70, 255, 0.15);
}
.twitch-embed-wrap iframe {
position: absolute;
@@ -401,16 +518,20 @@ body {
/* Discord Card */
.discord-card {
background: var(--bg-card);
border-radius: 16px;
border-radius: 20px;
border: 1px solid var(--border);
padding: 40px;
max-width: 620px;
margin: 0 auto;
text-align: center;
transition: border-color 0.3s;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.discord-card:hover { border-color: var(--discord-blurple); }
.discord-card:hover {
border-color: rgba(88, 101, 242, 0.4);
box-shadow: 0 12px 35px rgba(88, 101, 242, 0.15);
}
.discord-profile {
display: flex;
@@ -421,24 +542,72 @@ body {
margin-bottom: 24px;
}
.discord-tag-wrap {
display: flex;
align-items: center;
gap: 12px;
justify-content: center;
margin-bottom: 6px;
}
.btn-copy {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 8px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.05);
color: var(--text-secondary);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-copy:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--text-primary);
border-color: var(--discord-blurple);
}
.btn-copy.copied {
background: rgba(88, 101, 242, 0.2);
border-color: var(--discord-blurple);
color: var(--discord-blurple);
}
.discord-info h3 {
font-size: 1.6rem;
margin-bottom: 6px;
color: var(--discord-blurple);
}
.discord-info p { color: var(--text-secondary); font-size: 1rem; }
.discord-info p {
color: var(--text-secondary);
font-size: 1rem;
}
/* Footer */
.footer {
padding: 40px 0;
padding: 50px 0;
border-top: 1px solid var(--border);
text-align: center;
background: var(--bg-primary);
}
.footer p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 16px; }
.footer p {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: 16px;
}
.footer-links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.footer-links {
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
}
.footer-links a {
color: var(--text-secondary);
@@ -447,7 +616,9 @@ body {
transition: color 0.3s;
}
.footer-links a:hover { color: var(--text-primary); }
.footer-links a:hover {
color: var(--text-primary);
}
/* Responsive */
@media (max-width: 768px) {
@@ -468,6 +639,16 @@ body {
.nav-link svg { display: none; }
.back-to-top { bottom: 20px; right: 20px; width: 42px; height: 42px; }
.stats-bar {
flex-direction: column;
gap: 16px;
}
.stat-divider {
width: 32px;
height: 1px;
}
}
@media (max-width: 480px) {