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/03-components/_courses.css
+8 -8
View File
@@ -24,7 +24,7 @@
height: 80px;
object-fit: contain;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent;
padding: 4px;
}
@@ -36,9 +36,9 @@
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent;
color: var(--text-light);
color: var(--text-light, #999999);
padding: 10px;
}
@@ -55,7 +55,7 @@
font-weight: 600;
margin: 0 0 0.3rem 0;
line-height: 1.4;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
}
.course-title-text {
@@ -72,17 +72,17 @@
.course-separator,
.course-location,
.course-duration {
color: var(--text-muted);
color: var(--text-muted, #666666);
font-size: 0.9em;
}
.course-separator {
color: var(--text-light);
color: var(--text-light, #999999);
}
.course-desc {
font-size: 0.85em;
color: var(--text-gray);
color: var(--text-gray, #333333);
margin-top: 0.4rem;
line-height: 1.4;
text-align: justify;
@@ -97,7 +97,7 @@
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent !important;
padding: 8px;
}