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: style changes

Browse Source
This commit is contained in:
Steve
2025-09-30 19:59:34 -04:00
parent c59f9b9214
commit eb13cbfe76
1 changed files with 15 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
site/index.html
View File

@@ -37,24 +37,10 @@
}
</style>
</head>
<body class="overflow-x-hidden overflow-y-scroll min-h-screen sm:py-0 py-8">
<!-- Navigation Buttons -->
<button id="prevBtn" class="fixed sm:left-4 left-2 top-1/2 transform -translate-y-1/2 z-10 hover:text-black text-black/40 p-3 transition-all duration-300">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
<button id="nextBtn" class="fixed sm:right-4 right-2 top-1/2 transform -translate-y-1/2 z-10 hover:text-black text-black/40 p-3 transition-all duration-300">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
<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 sm:justify-center justify-start items-center px-8 snap-center">
<div class="max-w-4xl space-y-4">
<body class="min-h-screen sm:py-0 py-8">
<div id="scrollContainer" class="flex flex-col">
<section class="flex flex-col gap-12 items-center px-4 py-24 sm:min-h-screen sm:justify-center">
<div class="max-w-xl space-y-4">
<p>Tired of social media?</p>
<p>Keep doom scrolling through addicting feeds?</p>
@@ -66,7 +52,7 @@
</div>
</section>
<section class="min-h-screen w-screen flex-shrink-0 flex flex-col sm:justify-center justify-start items-center px-12 sm:px-8 snap-center">
<section class="flex flex-col items-center px-4 py-24">
<div class="max-w-xl space-y-4">
<p>No this isn't another platform.</p>
<p>
@@ -83,9 +69,9 @@
</div>
</section>
<section class="min-h-screen w-screen flex-shrink-0 flex flex-col sm:justify-center justify-start items-center sm:px-8 px-12 snap-center">
<section class="flex flex-col items-center px-4 py-24">
<div class="max-w-xl space-y-4">
<img src="blog.svg" alt="Blog" id="blog" class="w-full mx-auto" />
<img src="blog.svg" alt="Blog" id="blog" class="w-5/6 mx-auto py-4" />
<p>Starting a blog is actually a lot simpler than what you're probably thinking. This doesn't have to be some well polished highly viewed monetization machine, or even something professional or formal. It's just a simple website where you can casually talk about whatever you want to talk about! It can be long, short, a list of small things, or just a quote. It should be how you talk with other people in your own life, or how you communicate with the outside world. It should be you on a page. Here's a few places you can make a blog that are RSS enabled:</p>
@@ -119,9 +105,9 @@
</div>
</section>
<section class="min-h-screen w-screen flex-shrink-0 flex flex-col sm:justify-center justify-start items-center sm:px-8 px-12 snap-center">
<section class="flex flex-col items-center px-4 py-24">
<div class="max-w-xl space-y-4">
<img src="rss.svg" alt="RSS" id="rss" class="w-full mx-auto" />
<img src="rss.svg" alt="RSS" id="rss" class="w-5/6 mx-auto py-4" />
<p>RSS is actually already familiar to you if you have ever subscribed to a newsletter. You put your email into someone’s website, and when they have updates, they send you emails to your inbox so you can stay in the loop. In the case of RSS, you have a dedicated app, called an RSS reader usually, and you can put in someone’s website into the app to subscribe. When they make a new post, just open your news reader app, and their posts will be retrieved and ready to read. Some reader apps even let you make folders and tags to organize blogs you are subscribed to, similar to how an email app lets you make folders to sort mail. Would highly recommend trying a few of the apps or services and seeing which works best!</p>
@@ -135,25 +121,25 @@
</div>
</section>
<section class="min-h-screen w-screen flex-shrink-0 flex flex-col sm:justify-center justify-start items-center sm:px-8 px-12 snap-center">
<section class="flex flex-col items-center px-4 py-24">
<div class="max-w-xl space-y-4">
<img src="feeds.svg" alt="Feeds" id="feeds" class="w-full mx-auto" />
<img src="feeds.svg" alt="Feeds" id="feeds" class="w-5/6 mx-auto py-4" />
<p>This takes us to our final point: Feeds. You can probably get away with just the first two items and then sharing it with people you already know, but what about meeting or talking to people you don't know? That's where Feeds come in. The idea is to create another page on your blog that has all the RSS feeds you're subscribed to. By keeping this public and always up to date, someone can visit your page, find someone new and follow them. Perhaps that person also has a feeds page, and the cycle continues until there is a natural and organic network of people all sharing with each other. So if you have a blog, consider making a feeds page and sharing it! If your RSS reader supports OPML file exports and imports, perhaps you can share that file as well to make it easier to share your feeds.</p>
<p>Here's an <a class="underline" href="https://bearblog.stevedylan.dev/feeds" target="_blank">example Feeds Page</a> which should help get the idea across!</p>
</div>
</section>
<section class="min-h-screen w-screen flex-shrink-0 flex flex-col sm:justify-center justify-start items-center sm:px-8 px-12 snap-center">
<section class="flex flex-col items-center px-4 py-24">
<div class="max-w-xl space-y-4">
<img src="idea.svg" class="w-full mx-auto" />
<img src="idea.svg" class="w-5/6 mx-auto py-4" />
<p>The best part about blog feeds? It's just an idea. There's no central authority. There's no platform. No massive tech giant trying to take your data. It's just you, basic web standards, and the people you care about.</p>
</div>
</section>
<section class="min-h-screen w-screen flex-shrink-0 flex flex-col sm:justify-center justify-start items-start sm:px-8 px-12 snap-center">
<section class="flex flex-col items-start px-4 py-24">
<div class="max-w-xl space-y-4 w-full mx-auto">
<img src="frequentlyaskedquestions.svg" class="w-full mx-auto" />
<img src="frequentlyaskedquestions.svg" class="w-5/6 mx-auto py-4" />
<div class="space-y-6 w-full">
<details class="w-full">
@@ -234,66 +220,6 @@
</section>
</div>
<script>
const scrollContainer = document.getElementById('scrollContainer');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
//const backToStartBtn = document.getElementById('backToStartBtn');
let currentSection = 0;
const totalSections = scrollContainer.children.length;
function updateButtons() {
// Hide/show buttons based on current position
prevBtn.style.display = currentSection === 0 ? 'none' : 'block';
nextBtn.style.display = currentSection === totalSections - 1 ? 'none' : 'block';
}
function scrollToSection(index) {
if (index >= 0 && index < totalSections) {
const sectionWidth = window.innerWidth;
scrollContainer.scrollTo({
left: index * sectionWidth,
behavior: 'smooth'
});
currentSection = index;
updateButtons();
}
}
prevBtn.addEventListener('click', () => {
scrollToSection(currentSection - 1);
});
nextBtn.addEventListener('click', () => {
scrollToSection(currentSection + 1);
});
// backToStartBtn.addEventListener('click', () => {
// scrollToSection(0);
// });
// Update current section when user manually scrolls
scrollContainer.addEventListener('scroll', () => {
const sectionWidth = window.innerWidth;
const newSection = Math.round(scrollContainer.scrollLeft / sectionWidth);
if (newSection !== currentSection) {
currentSection = newSection;
updateButtons();
}
});
// Initialize buttons
updateButtons();
// Handle keyboard navigation
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
scrollToSection(currentSection - 1);
} else if (e.key === 'ArrowRight') {
scrollToSection(currentSection + 1);
}
});
</script>
</body>
</html>