Javi/saborflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix marquee loop gap on ultra-wide screens

Browse Source 
4 repetitions (was 2) + translateX(-25%) so one cycle always shifts exactly
one set of items. Covers monitors up to ~4800px without a visible seam.
Perceived scroll speed unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Javier Blanco
2026-05-01 10:01:09 +07:00
parent 461bea46cc
commit 5fb9372c89
2 changed files with 62 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/style.css
View File

@@ -218,7 +218,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
50% { opacity: 0.4; transform: scale(0.65); } 50% { opacity: 0.4; transform: scale(0.65); }
} }
@keyframes sfB-mq { @keyframes sfB-mq {
to { transform: translateX(-50%); } to { transform: translateX(-25%); }
} }
/* ── Hero ── */ /* ── Hero ── */

79
index.html
View File

@@ -1,16 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<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>Sabor Flow Da Nang — Latin Dance Community</title> <title>Sabor Flow Da Nang — Dance community</title>
<meta name="description" content="Da Nang's Latin dance community. Weekly socials, studios, classes, and festivals for Salsa, Bachata, Kizomba, and Zouk."> <meta name="description"
content="Da Nang'sDance community. Weekly socials, studios, classes, and festivals for Salsa, Bachata, Kizomba, and Zouk.">
<link rel="icon" type="image/jpeg" href="assets/logo.jpg"> <link rel="icon" type="image/jpeg" href="assets/logo.jpg">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <link
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<!-- Background blobs --> <!-- Background blobs -->
@@ -32,7 +37,7 @@
<a href="/" class="logo"> <a href="/" class="logo">
<div class="mark"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div> <div class="mark"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
<div class="name"> <div class="name">
SABOR FLOW Sabor Flow
<span class="city">Da Nang</span> <span class="city">Da Nang</span>
</div> </div>
</a> </a>
@@ -48,7 +53,12 @@
<div class="topbar-right"> <div class="topbar-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig"> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
</svg>
@saborflowdanang @saborflowdanang
</a> </a>
<button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu"> <button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu">
@@ -62,22 +72,27 @@
<div class="left"> <div class="left">
<div class="kicker"> <div class="kicker">
<span class="dot"></span> <span class="dot"></span>
Latin Social Dance · Da Nang · Hoi An Dance Community · Da Nang · Hoi An
</div> </div>
<h1> <h1>
Feel the <em class="glow">Sabor</em> <em class="glow">Sabor Flow</em>
<span class="vn">DA NANG · <span>VIETNAM</span></span> <span class="vn"><span>DA NANG</span></span>
</h1> </h1>
<p class="lead"> <p class="lead">
Latin social dance almost every night of the week. Salsa, Bachata, Kizomba, Zouk — at bars and restaurants across Da Nang and Hoi An. Everyone welcome, no partner needed. Latin social dance almost every night of the week. Salsa, Bachata, Kizomba, Zouk — at bars and restaurants
across Da Nang and Hoi An. Everyone welcome, no partner needed.
</p> </p>
<div class="ctas"> <div class="ctas">
<a href="schedule.html" class="sfB-btn primary"> <a href="schedule.html" class="sfB-btn primary">
Weekly Schedule Weekly Schedule
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12" />
<polyline points="12 5 19 12 12 19" />
</svg>
</a> </a>
<a href="festivals.html" class="sfB-btn ghost">Upcoming Festivals</a> <a href="festivals.html" class="sfB-btn ghost">Upcoming Festivals</a>
</div> </div>
@@ -144,6 +159,18 @@
<span>Zouk</span> <span>Zouk</span>
<span>Da Nang</span> <span>Da Nang</span>
<span>Hoi An</span> <span>Hoi An</span>
<span>Salsa</span>
<span>Bachata</span>
<span>Kizomba</span>
<span>Zouk</span>
<span>Da Nang</span>
<span>Hoi An</span>
<span>Salsa</span>
<span>Bachata</span>
<span>Kizomba</span>
<span>Zouk</span>
<span>Da Nang</span>
<span>Hoi An</span>
</div> </div>
</div> </div>
@@ -158,19 +185,22 @@
<span class="num">01</span> <span class="num">01</span>
<div class="arr">→</div> <div class="arr">→</div>
<h3>Social <em>Dancing</em></h3> <h3>Social <em>Dancing</em></h3>
<p>Almost-daily gatherings at bars, clubs, and restaurants. Small cover charge, great music, warm people. Beginner or pro — everyone is welcome.</p> <p>Almost-daily gatherings at bars, clubs, and restaurants. Small cover charge, great music, warm people.
Beginner or pro — everyone is welcome.</p>
</div> </div>
<div class="sfB-pcard c2"> <div class="sfB-pcard c2">
<span class="num">02</span> <span class="num">02</span>
<div class="arr">→</div> <div class="arr">→</div>
<h3>4 <em>Styles</em></h3> <h3>4 <em>Styles</em></h3>
<p>Salsa, Bachata, Kizomba, and the fast-growing Zouk. Each night has its own vibe and music ratio — find the scene that moves you.</p> <p>Salsa, Bachata, Kizomba, and the fast-growing Zouk. Each night has its own vibe and music ratio — find the
scene that moves you.</p>
</div> </div>
<div class="sfB-pcard c3"> <div class="sfB-pcard c3">
<span class="num">03</span> <span class="num">03</span>
<div class="arr">→</div> <div class="arr">→</div>
<h3><em>Community</em> First</h3> <h3><em>Community</em> First</h3>
<p>A free, non-profit initiative by two Vietnamese women passionate about dance. Here to support and grow Da Nang's Latin dance scene.</p> <p>A free, non-profit initiative by two Vietnamese women passionate about dance. Here to support and grow Da
Nang's Latin dance scene.</p>
</div> </div>
</div> </div>
</section> </section>
@@ -181,7 +211,11 @@
<h2>Coming up <em>this week</em></h2> <h2>Coming up <em>this week</em></h2>
<a href="schedule.html"> <a href="schedule.html">
Full schedule Full schedule
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12" />
<polyline points="12 5 19 12 12 19" />
</svg>
</a> </a>
</div> </div>
<div class="sfB-coming-row" id="sfB-coming-row"></div> <div class="sfB-coming-row" id="sfB-coming-row"></div>
@@ -198,11 +232,19 @@
<div class="cta-right"> <div class="cta-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener"> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">
Follow on Instagram Follow on Instagram
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
</svg>
</a> </a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="alt"> <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="alt">
Join Facebook Group Join Facebook Group
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
</svg>
</a> </a>
</div> </div>
</div> </div>
@@ -210,7 +252,7 @@
<!-- Footer --> <!-- Footer -->
<footer class="sfB-foot"> <footer class="sfB-foot">
<div> <div>
<strong>SABOR FLOW</strong> Da Nang &mdash; Latin dance community &copy; 2025 <strong>Sabor Flow</strong> Da Nang &mdash;Dance community &copy; <span id="footer-year">2025</span>
</div> </div>
<nav class="foot-links"> <nav class="foot-links">
<a href="/">Home</a> <a href="/">Home</a>
@@ -228,4 +270,5 @@
<script src="js/main.js"></script> <script src="js/main.js"></script>
</body> </body>
</html>
</html>