kemko/blogfeeds.net
1
0
Fork 0
mirror of https://github.com/kemko/blogfeeds.net.git synced 2026-01-01 16:05:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: added back to beginning button and added fonts

Browse Source
This commit is contained in:
Steve
2025-09-29 13:20:40 -04:00
parent a1e024cedf
commit f859181b59
1 changed files with 18 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
site/index.html
View File

@@ -5,6 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Feeds</title> <title>Blog Feeds</title>
<link rel="stylesheet" href="tailwindcss" /> <link rel="stylesheet" href="tailwindcss" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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">
<meta name="description" content=""> <meta name="description" content="">
<!-- Facebook Meta Tags --> <!-- Facebook Meta Tags -->
@@ -22,6 +25,9 @@
<meta name="twitter:description" content=""> <meta name="twitter:description" content="">
<meta name="twitter:image" content="/og.png"> <meta name="twitter:image" content="/og.png">
<style> <style>
* {
font-family: 'DM Sans', sans-serif;
}
details[open] summary svg { details[open] summary svg {
transform: rotate(90deg); transform: rotate(90deg);
} }
@@ -41,6 +47,7 @@
</svg> </svg>
</button> </button>
<div id="scrollContainer" class="flex snap-x snap-mandatory overflow-x-scroll"> <div id="scrollContainer" class="flex snap-x snap-mandatory overflow-x-scroll">
<section class="min-h-screen w-screen flex-shrink-0 flex flex-col gap-12 justify-center items-center px-8 snap-center"> <section class="min-h-screen w-screen flex-shrink-0 flex flex-col gap-12 justify-center items-center px-8 snap-center">
<div class="max-w-4xl space-y-4"> <div class="max-w-4xl space-y-4">
@@ -213,6 +220,12 @@
</div> </div>
</details> </details>
</div> </div>
<div class="text-center mt-8">
<button id="backToStartBtn" class="underline font-medium transition-colors">
Back to the beginning
</button>
</div>
</div> </div>
</section> </section>
</div> </div>
@@ -221,6 +234,7 @@
const scrollContainer = document.getElementById('scrollContainer'); const scrollContainer = document.getElementById('scrollContainer');
const prevBtn = document.getElementById('prevBtn'); const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn'); const nextBtn = document.getElementById('nextBtn');
const backToStartBtn = document.getElementById('backToStartBtn');
let currentSection = 0; let currentSection = 0;
const totalSections = scrollContainer.children.length; const totalSections = scrollContainer.children.length;
@@ -251,6 +265,10 @@
scrollToSection(currentSection + 1); scrollToSection(currentSection + 1);
}); });
backToStartBtn.addEventListener('click', () => {
scrollToSection(0);
});
// Update current section when user manually scrolls // Update current section when user manually scrolls
scrollContainer.addEventListener('scroll', () => { scrollContainer.addEventListener('scroll', () => {
const sectionWidth = window.innerWidth; const sectionWidth = window.innerWidth;