# Zenith Documentation - CSS File Structure
## 📁 CSS Organization
All CSS files are now properly organized in the `css/` directory:
### Core Files (Load in Order):
1. **layout.css** - Layout & positioning (LOAD FIRST)
- Sidebar positioning
- Content area
- Responsive breakpoints
- Grid systems
2. **main.css** - Base styles
- Variables & themes
- Typography
- Buttons & cards
- General components
3. **playground.css** - Playground specific
- Code editor
- Output pane
- Syntax highlighting
4. **comparison.css** - Comparison page
- Comparison cards
- Feature matrix
- Performance charts
5. **responsive.css** - Animations & responsive (LOAD LAST)
- Advanced animations
- Mobile optimizations
- Accessibility
## 🔗 How to Link in HTML
Add these links in the `` section of index.html:
```html
```
## 📐 Layout Structure
```
┌─────────────────────────────────────┐
│ Sidebar (280px fixed) │
│ ┌──────────────────────┐ │
│ │ Logo │ │
│ │ Theme Switch │ │
│ │ Navigation │ │
│ │ - Getting Started │ │
│ │ - Variables & Data │ │
│ │ - Control Flow │ │
│ │ - Functions │ │
│ │ - Modules │ │
│ │ - Advanced │ │
│ │ - Tools │ │
│ └──────────────────────┘ │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ Content Area (calc(100% - 280px)) │
│ ┌──────────────────────┐ │
│ │ Container (1200px) │ │
│ │ - Hero Section │ │
│ │ - Features │ │
│ │ - Playground │ │
│ │ - Documentation │ │
│ │ - Comparison │ │
│ │ - Footer │ │
│ └──────────────────────┘ │
└─────────────────────────────────────┘
```
## 📱 Responsive Behavior
### Desktop (≥992px)
- Sidebar: Fixed 280px left
- Content: margin-left 280px
- Full features
### Tablet (768px-991px)
- Sidebar: Hidden, slides in
- Content: Full width
- Menu toggle visible
### Mobile (≤767px)
- Sidebar: Full screen overlay
- Content: Full width, reduced padding
- Touch-optimized
### Small Mobile (≤575px)
- Sidebar: 100% width
- Content: Minimal padding
- Single column layouts
## ✅ Fixed Issues
1. **Sidebar Position** ✅
- Now properly fixed on left
- Doesn't overlap content
- Scrolls independently
2. **Content Width** ✅
- Proper margin-left
- Responsive width calculation
- No horizontal scroll
3. **Mobile Menu** ✅
- Toggle button added
- Smooth slide animation
- Overlay background
4. **Grid Layouts** ✅
- Proper responsive grids
- No overflow
- Correct spacing
5. **Container** ✅
- Max-width 1200px
- Centered content
- Proper padding
## 🎨 CSS Variables Used
```css
--bg-body: Background color
--bg-panel: Sidebar/panel background
--bg-card: Card background
--text-main: Main text color
--text-muted: Muted text color
--primary: Primary brand color
--secondary: Secondary brand color
--border: Border color
--transition-speed: Animation speed
```
## 📊 File Sizes
- layout.css: ~4KB
- main.css: ~15KB
- playground.css: ~3KB
- comparison.css: ~5KB
- responsive.css: ~8KB
- main.js: ~6KB
**Total:** ~41KB (minified: ~18KB)
## 🚀 Performance
- ✅ CSS loaded in optimal order
- ✅ Minimal reflows
- ✅ GPU-accelerated animations
- ✅ Efficient selectors
- ✅ No !important overrides
## ♿ Accessibility
- ✅ Skip to main content link
- ✅ Keyboard navigation
- ✅ Focus indicators
- ✅ ARIA labels
- ✅ Screen reader support
---
**Status:** ✅ Layout Fixed & Optimized
**Version:** 2.0.0
**Last Updated:** 2025-11-29