juanatsap
f7cda5dba3
CSS Restructuring: - Reorganize monolithic main.css into modular architecture - Create foundation/ (reset, variables, typography, themes) - Create layout/ (container, page, grid, paper) - Create components/ (8 component files) - Create interactive/ (toggles, remaining for future split) - Create effects/ (skeleton loading) - Create contexts/ (print styles) Theme Support Fixes: - Replace all hardcoded text colors with CSS variables - Fix .section-title: rgb(51,51,51) → var(--text-primary) - Fix .cv-name, .intro-text: hardcoded → theme-aware - Fix .experience-period, .duration-text: #555/#aaa → variables - Fix course/project/experience text colors - Support proper light/dark theme text contrast Icon & Layout Fixes: - Standardize all icon sizes to 80×80px - Change all icon backgrounds to transparent - Fix award section layout (missing flexbox) - Update HTML templates (experience.html, awards.html) to width='80' - Fix default icon sizing conflicts View Switcher Fix: - Fix toggleTheme() to target .cv-container instead of body - Ensures clean/default theme toggle works correctly Files: 40+ CSS files modularized, 3 templates updated, 7 tests added
56 lines
1.4 KiB
CSS
56 lines
1.4 KiB
CSS
/* ============================================================================
|
|
CSS CUSTOM PROPERTIES - Design Tokens
|
|
============================================================================ */
|
|
|
|
:root {
|
|
/* Brand Colors */
|
|
--bg-gray: rgb(82, 86, 89);
|
|
--sidebar-gray: #d1d4d2;
|
|
--black-bar: #2b2b2b;
|
|
--paper-white: #ffffff;
|
|
--text-dark: rgb(0, 0, 0);
|
|
--text-gray: rgb(51, 51, 51);
|
|
--accent-blue: #0066cc;
|
|
--border-gray: #dddddd;
|
|
|
|
/* Theme System - These get overridden by color-theme.css */
|
|
/* Page Background */
|
|
--page-bg: #b8bbbe;
|
|
|
|
/* Paper/Card Backgrounds */
|
|
--paper-bg: #ffffff;
|
|
--paper-secondary-bg: #f5f5f5;
|
|
|
|
/* Text Colors */
|
|
--text-primary: #1a1a1a;
|
|
--text-secondary: #333333;
|
|
--text-muted: #666666;
|
|
--text-light: #999999;
|
|
|
|
/* Action Bar & Navigation */
|
|
--action-bar-bg: #2b2b2b;
|
|
--action-bar-text: #ffffff;
|
|
--action-bar-text-muted: rgba(255, 255, 255, 0.85);
|
|
|
|
/* Borders & Dividers */
|
|
--border-color: #333333;
|
|
--border-light: #e0e0e0;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
--shadow-lg: 2px 2px 9px rgba(0, 0, 0, 0.5);
|
|
|
|
/* Interactive Elements */
|
|
--button-bg: transparent;
|
|
--button-bg-hover: rgba(0, 0, 0, 0.05);
|
|
--button-bg-active: rgba(0, 0, 0, 0.1);
|
|
|
|
/* Accent Colors */
|
|
--accent-blue: #0066cc;
|
|
--accent-green: #27ae60;
|
|
|
|
/* Sidebar */
|
|
--sidebar-bg: #d1d4d2;
|
|
}
|