refactor: Modularize CSS into ITCSS architecture + update documentation

CSS Refactoring:
- Split 2,287-line monolith into 6 focused modules
- New structure: Navigation, Scroll, Buttons, Modals, Zoom, Breakpoints
- Organized by ITCSS layers (Interactive + Responsive)
- 245 lines saved through better organization
- Site verified working at localhost:1999

New CSS Files:
- 04-interactive/_navigation.css (357 lines, 8.2KB)
- 04-interactive/_scroll-behavior.css (200 lines, 5.0KB)
- 04-interactive/_buttons.css (184 lines, 4.7KB)
- 04-interactive/_modals.css (487 lines, 16KB)
- 04-interactive/_zoom-control.css (253 lines, 6.3KB)
- 05-responsive/_breakpoints.css (561 lines, 14KB)

Documentation Updates:
- Added doc/12-CSS-ARCHITECTURE.md (comprehensive CSS guide)
- Updated doc/README.md (new entry + correct numbering)
- Updated tests/README.md (test count 8 → 27)
- Updated tests/TEST-SUMMARY.md (coverage expansion)
- Rewrote tests/mjs/README.md (complete test listing)

Removed:
- static/css/04-interactive/_remaining.css (replaced by modules)
This commit is contained in:
juanatsap
2025-11-20 12:34:42 +00:00
parent d93e37ddc9
commit 1258d61d05
13 changed files with 2912 additions and 2341 deletions
+9 -2
View File
@@ -25,9 +25,16 @@
@import './03-components/_education.css';
@import './03-components/_languages.css';
/* 04 - Interactive (includes hamburger, buttons, modals, zoom - TO BE SPLIT LATER) */
/* 04 - Interactive */
@import './04-interactive/_toggles.css';
@import './04-interactive/_remaining.css';
@import './04-interactive/_navigation.css';
@import './04-interactive/_scroll-behavior.css';
@import './04-interactive/_buttons.css';
@import './04-interactive/_modals.css';
@import './04-interactive/_zoom-control.css';
/* 05 - Responsive */
@import './05-responsive/_breakpoints.css';
/* 06 - Effects */
@import './06-effects/_skeleton.css';