32264deb5a
- Hugo site configured and working - Story page with interactive collapsible timeline - CSS styling for journey/timeline layout - JavaScript for dynamic markdown-to-timeline conversion - Theme with responsive design - Content structure for Bitcoin education site Features: - Collapsible year sections with animations - Quick jump navigation between years - Mobile responsive design - Interactive timeline functionality
60 lines
No EOL
2.1 KiB
JavaScript
60 lines
No EOL
2.1 KiB
JavaScript
// Minimal JavaScript for functionality
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Mobile navigation toggle
|
|
const navToggle = document.querySelector('.nav-toggle');
|
|
const navMenu = document.querySelector('.nav-menu');
|
|
|
|
if (navToggle && navMenu) {
|
|
navToggle.addEventListener('click', function() {
|
|
navMenu.classList.toggle('active');
|
|
|
|
// Animate hamburger menu
|
|
const spans = navToggle.querySelectorAll('span');
|
|
spans.forEach((span, index) => {
|
|
if (navMenu.classList.contains('active')) {
|
|
if (index === 0) span.style.transform = 'rotate(45deg) translate(5px, 5px)';
|
|
if (index === 1) span.style.opacity = '0';
|
|
if (index === 2) span.style.transform = 'rotate(-45deg) translate(7px, -6px)';
|
|
} else {
|
|
span.style.transform = '';
|
|
span.style.opacity = '';
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Smooth scrolling for anchor links
|
|
const links = document.querySelectorAll('a[href^="#"]');
|
|
links.forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add scroll effect to header
|
|
let lastScroll = 0;
|
|
const header = document.querySelector('.header');
|
|
|
|
window.addEventListener('scroll', function() {
|
|
const currentScroll = window.pageYOffset;
|
|
|
|
if (header) {
|
|
if (currentScroll > 100) {
|
|
header.style.backgroundColor = 'rgba(0, 0, 0, 0.95)';
|
|
} else {
|
|
header.style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
|
|
}
|
|
}
|
|
|
|
lastScroll = currentScroll;
|
|
});
|
|
});
|
|
|
|
// Security: No external dependencies, no eval(), no inline scripts
|