feat(docs): Enhance blog post typography and reading experience

[shivasurya]

Summary

• Refactored blog post layout to use external CSS for better maintainability
• Enhanced typography with modern font stacks and improved readability
• Implemented responsive design with better mobile experience
• Added proper semantic HTML structure with class-based styling

Changes Made

Layout Improvements (BlogPostLayout.astro)

• Replaced inline styles with semantic CSS classes
• Improved HTML structure for better accessibility
• Maintained all existing functionality (author info, tags, share buttons)

New Typography System (blog-post.css)

• Font Stack: System fonts for optimal performance and native feel
• Responsive Typography: Fluid font sizes using clamp() for all screen sizes
• Enhanced Readability: Improved line heights, spacing, and contrast
• Content Styling: Better formatting for headings, lists, code blocks, tables, and images
• Interactive Elements: Smooth hover effects on links and buttons
• Dark Mode Support: Proper color adjustments for dark theme

Key Features

• Modern heading hierarchy with proper weights and spacing
• Improved code block presentation with syntax highlighting support
• Better blockquote and table styling
• Responsive share buttons with visual feedback
• Mobile-optimized layout (breakpoint at 768px)

Test Plan

• Verify blog posts render correctly on desktop
• Test responsive behavior on mobile devices
• Confirm dark mode styling works properly
• Validate all interactive elements (share buttons, links)
• Check typography across different browsers

🤖 Generated with Claude Code

[safedep]

SafeDep Report Summary

No dependency changes detected. Nothing to scan.

_{This report is generated by SafeDep Github App}