- Complete redesign to match minimal, clean look inspired by pawel.orzech.me - Support for both short microblog posts and long-form articles - Beautiful image display with proper loading and hover effects - Removed complex gradients and animations in favor of clean typography - Implemented chronological post feed layout - Added proper post differentiation (short vs long posts) - Minimal navigation and clean spacing throughout - Responsive design optimized for readability - Added sample digital minimalism blog post 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
59 lines
No EOL
1.9 KiB
JavaScript
59 lines
No EOL
1.9 KiB
JavaScript
// Minimal blog functionality
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Image loading optimization
|
|
const images = document.querySelectorAll('img[loading="lazy"]');
|
|
|
|
if ('IntersectionObserver' in window) {
|
|
const imageObserver = new IntersectionObserver((entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const img = entry.target;
|
|
img.style.opacity = '1';
|
|
observer.unobserve(img);
|
|
}
|
|
});
|
|
});
|
|
|
|
images.forEach(img => {
|
|
img.style.opacity = '0';
|
|
img.style.transition = 'opacity 0.3s ease';
|
|
imageObserver.observe(img);
|
|
});
|
|
}
|
|
|
|
// Simple fade-in animation for posts on scroll
|
|
const posts = document.querySelectorAll('.post');
|
|
|
|
const postObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
});
|
|
|
|
posts.forEach(post => {
|
|
post.style.opacity = '0';
|
|
post.style.transform = 'translateY(20px)';
|
|
post.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
|
|
postObserver.observe(post);
|
|
});
|
|
});
|
|
|
|
// Simple smooth scrolling for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
}); |