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/_projects.css
+14 -14
View File
@@ -22,7 +22,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;
}
@@ -34,9 +34,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;
}
@@ -53,7 +53,7 @@
font-weight: 600;
margin: 0 0 0.3rem 0;
line-height: 1.4;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
}
.project-title-text {
@@ -61,7 +61,7 @@
}
.project-title-text a {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
text-decoration: none;
}
@@ -72,18 +72,18 @@
.project-period,
.project-separator,
.project-location {
color: var(--text-muted);
color: var(--text-muted, #666666);
font-size: 0.9em;
font-weight: 600;
}
.project-separator {
color: var(--text-light);
color: var(--text-light, #999999);
}
.project-desc {
font-size: 0.95rem;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
margin-top: 0.5rem;
line-height: 1.6;
text-align: justify;
@@ -91,7 +91,7 @@
.project-technologies {
font-size: 0.85em;
color: var(--text-gray);
color: var(--text-gray, #333333);
margin-top: 0.5rem;
line-height: 1.4;
}
@@ -101,7 +101,7 @@
padding-top: 0rem;
text-align: center;
font-size: 0.95rem;
color: var(--text-gray);
color: var(--text-gray, #333333);
}
.projects-footer p {
@@ -109,7 +109,7 @@
}
.projects-footer a {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
text-decoration: none;
}
@@ -127,7 +127,7 @@
.reference-item a {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
text-decoration: none;
word-break: break-word;
}
@@ -139,7 +139,7 @@
.ref-type {
display: block;
font-size: 0.8em;
color: var(--text-gray);
color: var(--text-gray, #333333);
font-style: italic;
margin-top: 0.2rem;
}
@@ -236,7 +236,7 @@ footer {
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;
}