chore: added back to beginning button and added fonts
f859181b
1 file(s) · +18 −0
| 5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
| 6 | 6 | <title>Blog Feeds</title> |
|
| 7 | 7 | <link rel="stylesheet" href="tailwindcss" /> |
|
| 8 | + | <link rel="preconnect" href="https://fonts.googleapis.com"> |
|
| 9 | + | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
| 10 | + | <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet"> |
|
| 8 | 11 | <meta name="description" content=""> |
|
| 9 | 12 | ||
| 10 | 13 | <!-- Facebook Meta Tags --> |
|
| 22 | 25 | <meta name="twitter:description" content=""> |
|
| 23 | 26 | <meta name="twitter:image" content="/og.png"> |
|
| 24 | 27 | <style> |
|
| 28 | + | * { |
|
| 29 | + | font-family: 'DM Sans', sans-serif; |
|
| 30 | + | } |
|
| 25 | 31 | details[open] summary svg { |
|
| 26 | 32 | transform: rotate(90deg); |
|
| 27 | 33 | } |
|
| 40 | 46 | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> |
|
| 41 | 47 | </svg> |
|
| 42 | 48 | </button> |
|
| 49 | + | ||
| 43 | 50 | ||
| 44 | 51 | <div id="scrollContainer" class="flex snap-x snap-mandatory overflow-x-scroll"> |
|
| 45 | 52 | <section class="min-h-screen w-screen flex-shrink-0 flex flex-col gap-12 justify-center items-center px-8 snap-center"> |
|
| 213 | 220 | </div> |
|
| 214 | 221 | </details> |
|
| 215 | 222 | </div> |
|
| 223 | + | ||
| 224 | + | <div class="text-center mt-8"> |
|
| 225 | + | <button id="backToStartBtn" class="underline font-medium transition-colors"> |
|
| 226 | + | Back to the beginning |
|
| 227 | + | </button> |
|
| 228 | + | </div> |
|
| 216 | 229 | </div> |
|
| 217 | 230 | </section> |
|
| 218 | 231 | </div> |
|
| 221 | 234 | const scrollContainer = document.getElementById('scrollContainer'); |
|
| 222 | 235 | const prevBtn = document.getElementById('prevBtn'); |
|
| 223 | 236 | const nextBtn = document.getElementById('nextBtn'); |
|
| 237 | + | const backToStartBtn = document.getElementById('backToStartBtn'); |
|
| 224 | 238 | ||
| 225 | 239 | let currentSection = 0; |
|
| 226 | 240 | const totalSections = scrollContainer.children.length; |
|
| 249 | 263 | ||
| 250 | 264 | nextBtn.addEventListener('click', () => { |
|
| 251 | 265 | scrollToSection(currentSection + 1); |
|
| 266 | + | }); |
|
| 267 | + | ||
| 268 | + | backToStartBtn.addEventListener('click', () => { |
|
| 269 | + | scrollToSection(0); |
|
| 252 | 270 | }); |
|
| 253 | 271 | ||
| 254 | 272 | // Update current section when user manually scrolls |
|