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/_cv-section.css
+15 -15
View File
@@ -16,7 +16,7 @@
line-height: 1.2em;
margin: 20px 0 25px 0;
padding: 0;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
}
/* Collapsible Section Styles */
@@ -63,7 +63,7 @@
.cv-section summary .section-title::after {
content: '▼';
font-size: 0.8em;
color: var(--text-muted);
color: var(--text-muted, #666666);
transition: transform 0.2s ease, opacity 0.2s ease;
opacity: 0;
margin-left: 0.5rem;
@@ -82,7 +82,7 @@
/* Hover effect on summary */
.cv-section summary:hover .section-title {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
}
.summary-text {
@@ -91,7 +91,7 @@
text-align: justify;
font-size: 0.9em;
font-weight: 400;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
}
/* Experience */
@@ -109,7 +109,7 @@
font-size: 1rem;
font-weight: 500;
margin: 0;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
margin-bottom: 4px;
}
@@ -184,7 +184,7 @@
.experience-separator,
.experience-location,
.experience-duration {
color: var(--text-muted);
color: var(--text-muted, #666666);
font-weight: 600;
display: inline-block;
font-size: 1.05rem;
@@ -195,14 +195,14 @@
}
.short-desc {
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
font-size: 0.95rem;
line-height: 1.6;
margin-top: 0.5rem;
}
.duration-text {
color: var(--text-light);
color: var(--text-light, #999999);
font-weight: 500;
}
@@ -217,7 +217,7 @@
margin-bottom: 0.4rem;
position: relative;
font-size: 0.95rem;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
line-height: 1.5;
}
@@ -225,7 +225,7 @@
content: "•";
position: absolute;
left: 0;
color: var(--text-gray);
color: var(--text-gray, #333333);
}
/* Responsibilities with company icons (similar to main experience layout) */
@@ -249,7 +249,7 @@
height: 60px;
object-fit: contain;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent;
padding: 4px;
}
@@ -261,9 +261,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: 8px;
}
@@ -288,7 +288,7 @@
margin-bottom: 1rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
}
@@ -301,7 +301,7 @@
.language-item {
font-size: 0.95rem!important;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
margin-bottom: 0.3rem!important;
line-height: 1.4!important;
margin-left: 2rem!important;