Improve HTML Templates Styling and Formatting

[sunr4y]

Description

The current HTML templates (especially docs.html and other core templates) have basic styling that could be significantly improved. The current implementation is functional but lacks polish and modern design patterns.

Current State

• Basic CSS with CSS variables for theming
• Simple sidebar and content layout
• Minimal responsive design
• Basic dark mode implementation
• Limited visual hierarchy and spacing

Goals

Visual Improvements

• Improve typography (font choices, sizes, line heights)
• Better spacing and padding throughout
• Enhanced color scheme and contrast
• Improved visual hierarchy
• Better code block styling
• Enhanced table styling
• Improved link styling and hover effects
• Better button and interactive element styling

Layout Improvements

• Better responsive design for mobile devices
• Improved sidebar behavior (collapsible on mobile)
• Better content width and max-width constraints
• Improved spacing between sections
• Better footer styling

UX Improvements

• Smooth transitions and animations
• Better loading states
• Improved accessibility (ARIA labels, keyboard navigation)
• Better focus states for interactive elements
• Improved scroll behavior

Technical Improvements

• Consider using a CSS framework (Tailwind, Bootstrap) or CSS-in-JS
• Better organization of CSS (separate stylesheet or CSS modules)
• Remove inline styles where possible
• Better browser compatibility
• Performance optimizations (CSS minification, critical CSS)

Affected Files

• fkapi/core/templates/core/docs.html - Main documentation template
• Other HTML templates in fkapi/core/templates/ (if any)

Acceptance Criteria

• All templates have consistent, modern styling
• Responsive design works well on mobile, tablet, and desktop
• Dark mode is fully functional and visually appealing
• Accessibility standards are met (WCAG 2.1 AA minimum)
• Code is maintainable and well-organized
• No visual regressions in existing functionality

Notes

• This is a low-priority enhancement task
• Can be done incrementally
• Consider user feedback if available
• May want to create a design system/style guide first