refactor: Modularize CSS and fix theme-aware text colors
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
This commit is contained in:
juanatsap
@@ -0,0 +1,36 @@
|
||||
/* ============================================================================
|
||||
CSS RESET - Normalize & Base Styles
|
||||
============================================================================ */
|
||||
|
||||
/* Box sizing reset */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Body base */
|
||||
body {
|
||||
background-color: var(--page-bg);
|
||||
background-image:
|
||||
linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(180deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
|
||||
linear-gradient(180deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
|
||||
background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
|
||||
background-attachment: fixed;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* Smooth scrolling */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-top: 70px; /* Account for fixed header */
|
||||
}
|
||||
|
||||
/* Ensure Iconify icons display properly */
|
||||
.iconify,
|
||||
iconify-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -0,0 +1,285 @@
|
||||
/* ==============================================================================
|
||||
COLOR THEME SYSTEM
|
||||
============================================================================== */
|
||||
/*
|
||||
IMPORTANT: This is the COLOR theme system (light/dark/auto)
|
||||
This is SEPARATE from the LAYOUT theme (.theme-clean)
|
||||
|
||||
- COLOR theme: Controls backgrounds, text colors, shadows
|
||||
- LAYOUT theme (.theme-clean): Controls sidebars, layout structure
|
||||
|
||||
Both systems work independently and can be combined.
|
||||
*/
|
||||
|
||||
/* ==============================================================================
|
||||
LIGHT THEME (DEFAULT)
|
||||
============================================================================== */
|
||||
:root {
|
||||
/* Page Background - Softer version of dark theme */
|
||||
--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 (unchanged in dark mode) */
|
||||
--accent-blue: #0066cc;
|
||||
--accent-green: #27ae60;
|
||||
|
||||
/* Sidebar (for non-clean theme) */
|
||||
--sidebar-bg: #d1d4d2;
|
||||
|
||||
/* Legacy CV content variables - theme-aware overrides */
|
||||
--text-dark: #1a1a1a; /* Dark text for light background */
|
||||
--text-gray: #333333; /* Secondary text for light background */
|
||||
}
|
||||
|
||||
/* ==============================================================================
|
||||
DARK THEME
|
||||
============================================================================== */
|
||||
[data-color-theme="dark"] {
|
||||
/* Page Background - Original background */
|
||||
--page-bg: rgb(82, 86, 89);
|
||||
|
||||
/* Paper/Card Backgrounds */
|
||||
--paper-bg: #1a1a1a;
|
||||
--paper-secondary-bg: #2a2a2a;
|
||||
|
||||
/* Text Colors */
|
||||
--text-primary: #e0e0e0;
|
||||
--text-secondary: #d0d0d0;
|
||||
--text-muted: #b0b0b0;
|
||||
--text-light: #808080;
|
||||
|
||||
/* Action Bar & Navigation */
|
||||
--action-bar-bg: #1a1a1a;
|
||||
--action-bar-text: #e0e0e0;
|
||||
--action-bar-text-muted: rgba(224, 224, 224, 0.85);
|
||||
|
||||
/* Borders & Dividers */
|
||||
--border-color: #404040;
|
||||
--border-light: #333333;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
|
||||
|
||||
/* Interactive Elements */
|
||||
--button-bg: transparent;
|
||||
--button-bg-hover: rgba(255, 255, 255, 0.05);
|
||||
--button-bg-active: rgba(255, 255, 255, 0.1);
|
||||
|
||||
/* Accent Colors - slightly brighter in dark mode */
|
||||
--accent-blue: #3399ff;
|
||||
--accent-green: #2ecc71;
|
||||
|
||||
/* Sidebar (for non-clean theme) */
|
||||
--sidebar-bg: #2a2a2a;
|
||||
|
||||
/* Legacy CV content variables - theme-aware overrides */
|
||||
--text-dark: #e0e0e0; /* Light text for dark background */
|
||||
--text-gray: #d0d0d0; /* Secondary text for dark background */
|
||||
}
|
||||
|
||||
/* ==============================================================================
|
||||
AUTO THEME - Follows System Preference
|
||||
============================================================================== */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
[data-color-theme="auto"] {
|
||||
/* Page Background - Original background */
|
||||
--page-bg: rgb(82, 86, 89);
|
||||
|
||||
/* Paper/Card Backgrounds */
|
||||
--paper-bg: #1a1a1a;
|
||||
--paper-secondary-bg: #2a2a2a;
|
||||
|
||||
/* Text Colors */
|
||||
--text-primary: #e0e0e0;
|
||||
--text-secondary: #d0d0d0;
|
||||
--text-muted: #b0b0b0;
|
||||
--text-light: #808080;
|
||||
|
||||
/* Action Bar & Navigation */
|
||||
--action-bar-bg: #1a1a1a;
|
||||
--action-bar-text: #e0e0e0;
|
||||
--action-bar-text-muted: rgba(224, 224, 224, 0.85);
|
||||
|
||||
/* Borders & Dividers */
|
||||
--border-color: #404040;
|
||||
--border-light: #333333;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
|
||||
|
||||
/* Interactive Elements */
|
||||
--button-bg: transparent;
|
||||
--button-bg-hover: rgba(255, 255, 255, 0.05);
|
||||
--button-bg-active: rgba(255, 255, 255, 0.1);
|
||||
|
||||
/* Accent Colors - slightly brighter in dark mode */
|
||||
--accent-blue: #3399ff;
|
||||
--accent-green: #2ecc71;
|
||||
|
||||
/* Sidebar (for non-clean theme) */
|
||||
--sidebar-bg: #2a2a2a;
|
||||
|
||||
/* Legacy CV content variables - theme-aware overrides */
|
||||
--text-dark: #e0e0e0; /* Light text for dark background */
|
||||
--text-gray: #d0d0d0; /* Secondary text for dark background */
|
||||
}
|
||||
}
|
||||
|
||||
/* ==============================================================================
|
||||
THEME SWITCHER BUTTON STYLES - Dynamic colors based on theme mode
|
||||
============================================================================== */
|
||||
.color-theme-switcher {
|
||||
position: fixed;
|
||||
bottom: 14rem; /* Middle position - between print (18rem) and shortcuts (10rem) */
|
||||
left: 2rem;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: var(--black-bar);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
z-index: 999;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Dynamic colors ONLY on hover based on active theme mode */
|
||||
.color-theme-switcher:hover[data-theme-mode="light"] {
|
||||
background: #d4b200 !important; /* Bright sun yellow (gold) for light mode */
|
||||
}
|
||||
|
||||
.color-theme-switcher:hover[data-theme-mode="dark"] {
|
||||
background: #013c77 !important; /* Dark nighty blue for dark mode */
|
||||
}
|
||||
|
||||
.color-theme-switcher:hover[data-theme-mode="auto"] {
|
||||
background: #9b59b6 !important; /* Purple for auto mode (mix of both) */
|
||||
}
|
||||
|
||||
.color-theme-switcher:hover {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* At-bottom state - dynamic colors based on theme mode (matches hover) */
|
||||
.color-theme-switcher.at-bottom[data-theme-mode="light"] {
|
||||
opacity: 1;
|
||||
background: #d4b200 !important; /* Bright sun yellow (gold) for light mode */
|
||||
}
|
||||
|
||||
.color-theme-switcher.at-bottom[data-theme-mode="dark"] {
|
||||
opacity: 1;
|
||||
background: #013c77 !important; /* Dark nighty blue for dark mode */
|
||||
}
|
||||
|
||||
.color-theme-switcher.at-bottom[data-theme-mode="auto"] {
|
||||
opacity: 1;
|
||||
background: #9b59b6 !important; /* Purple for auto mode */
|
||||
}
|
||||
|
||||
.color-theme-switcher iconify-icon {
|
||||
color: white !important;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.color-theme-switcher:hover iconify-icon {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Hide the internal theme buttons - we'll cycle through on click */
|
||||
.theme-option-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==============================================================================
|
||||
ICON COLOR PRESERVATION
|
||||
============================================================================== */
|
||||
/* Ensure all iconify icons keep their intended colors across themes */
|
||||
|
||||
/* Section icons - keep their brand colors */
|
||||
.section-icon iconify-icon,
|
||||
.project-icon iconify-icon,
|
||||
.course-icon iconify-icon,
|
||||
.default-project-icon iconify-icon {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
/* Toggle switch icons - keep their state-specific colors */
|
||||
/* Note: Already defined in main.css with !important - just ensure they're not overridden */
|
||||
|
||||
/* Hamburger menu and site icons */
|
||||
.site-icon iconify-icon,
|
||||
.site-icon-mobile iconify-icon {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* CV content icons */
|
||||
.cv-paper iconify-icon {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
/* Error toast icon */
|
||||
.error-icon iconify-icon {
|
||||
color: #dc3545 !important;
|
||||
}
|
||||
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 900px) {
|
||||
.color-theme-switcher {
|
||||
position: fixed !important;
|
||||
bottom: 1.5rem !important;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
width: 50px !important;
|
||||
height: 50px !important;
|
||||
opacity: 0.7 !important;
|
||||
transform: none !important;
|
||||
/* Position before info button: 5 buttons total */
|
||||
/* Download, Print, Shortcuts, Theme, Info */
|
||||
/* Total width: 5 * 50px + 4 * 10px = 290px */
|
||||
left: calc(50% + 35px) !important; /* Fourth button */
|
||||
}
|
||||
|
||||
.color-theme-switcher:hover {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(-3px) !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
/* ============================================================================
|
||||
TYPOGRAPHY - Fonts & Text Styles
|
||||
============================================================================ */
|
||||
|
||||
/* Font Imports */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Source+Sans+Pro:wght@400;600&family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
/* Base Typography */
|
||||
body {
|
||||
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, system-ui, sans-serif;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-smoothing: antialiased;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: var(--accent-blue);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
/* ============================================================================
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user