txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Add CSS variable fallbacks for better browser compatibility

Browse Source 
Following LogRocket CSS best practices:
- Added fallback values to 150+ CSS variable usages across 22 files
- Fallbacks use light theme defaults for consistent behavior
- Improves compatibility with older browsers
- Example: var(--text-primary) → var(--text-primary, #1a1a1a)

Variables with fallbacks:
- Colors: text-primary, text-secondary, text-muted, accent-blue, etc.
- Backgrounds: page-bg, paper-bg, action-bar-bg, sidebar-bg
- Shadows: shadow-sm, shadow-md, shadow-lg
- Borders: border-color, border-light, icon-border

CSS Variables Best Practices compliance: 6/7 recommendations now followed
This commit is contained in:
juanatsap
2025-11-30 14:35:02 +00:00
parent 58c1237326
commit 0956c78d00
22 changed files with 152 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/04-interactive/_modals.css
+8 -8
View File
@@ -78,7 +78,7 @@
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
transition: all 0.2s ease;
z-index: 10;
}
@@ -96,7 +96,7 @@
.info-modal-header h2 {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
margin: 0 0 1.5rem 0;
}
@@ -511,7 +511,7 @@
.shortcut-desc {
flex: 1;
font-size: 0.95rem;
color: var(--text-gray);
color: var(--text-gray, #333333);
line-height: 1.4;
}
@@ -573,7 +573,7 @@
/* Modal Subtitle */
.pdf-modal-subtitle {
font-size: 0.95rem;
color: var(--text-gray);
color: var(--text-gray, #333333);
margin-top: 0.5rem;
font-weight: 400;
}
@@ -744,13 +744,13 @@
.pdf-option-info h3 {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
margin: 0 0 4px 0;
}
.pdf-option-info p {
font-size: 0.875rem;
color: var(--text-gray);
color: var(--text-gray, #333333);
margin: 0;
line-height: 1.4;
}
@@ -1106,13 +1106,13 @@
.pdf-loading-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
margin: 0 0 0.5rem 0;
}
.pdf-loading-message {
font-size: 0.95rem;
color: var(--text-gray);
color: var(--text-gray, #333333);
margin: 0 0 0.5rem 0;
line-height: 1.5;
}