Refactor website layout

[ethull]

Major Site Layout & Navigation Improvements

Summary

Complete overhaul of site layout with dynamic sidebars, enhanced
categories page, and responsive design improvements.

✨ Key Features

🧭 Post Navigation Sidebar

• Auto-generated table of contents from H2/H3 headers
• Direct anchor links to post sections
• Clean styling with hierarchical indentation

📊 Site Index Sidebar

• Featured posts (tagged "Highlight")
• Recent posts (excludes featured)
• Top categories by post count with direct links

🏷️ Enhanced Categories Page

• Interactive tab filtering with URL support
  (/categories/#category-name)
• Categories sorted by popularity
• 2-column post layout with descriptions
• External JavaScript (category-filter.js)

🎨 Design Improvements

• Responsive 3-column layout: Sidebars hidden on mobile, visible on
  desktop
• 1400px container: Prevents ultrawide layout issues
• Post previews: Now use description field instead of auto-excerpts
• Consistent styling: Unified typography and spacing

🔧 Technical

• Build-time processing: Categories sorted during Jekyll build
• Clean URLs: Proper fragment navigation
• Progressive enhancement: Works without JavaScript
• Semantic CSS: Proper class naming and separation of concerns

📋 Files Changed

• _layouts/default.html - Sidebar implementations
• categories.html - Complete rewrite with filtering
• assets/css/application.scss - New component styling
• assets/js/category-filter.js - Category filtering logic
• index.html & blog.html - Updated preview logic

Transforms the site from basic blog to modern website with comprehensive
navigation and content discovery.