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/_action-bar.css
+3 -3
View File
@@ -1,11 +1,11 @@
/* Single Black Top Bar */
.action-bar {
background: var(--action-bar-bg);
color: var(--action-bar-text);
background: var(--action-bar-bg, #2b2b2b);
color: var(--action-bar-text, #ffffff);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow-md);
box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.15));
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
overflow: visible; /* Allow tooltips to extend beyond action bar */
}
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;
}
static/css/03-components/_cv-header.css
+4 -4
View File
@@ -44,7 +44,7 @@
/* font-style: italic; */
line-height: 1.1;
margin-bottom: 8px;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
text-align: right;
}
@@ -53,7 +53,7 @@
font-size: 0.9em;
font-weight: 500;
line-height: 1.5;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
margin: 0;
}
@@ -61,7 +61,7 @@
font-family: 'Quicksand', sans-serif;
font-size: 1.25em;
font-weight: 400;
color: var(--text-muted);
color: var(--text-muted, #666666);
margin: 4px 0 0 0;
line-height: 1.4;
text-align: right;
@@ -72,7 +72,7 @@
font-family: 'Quicksand', sans-serif;
font-size: 1.0em;
line-height: 1.6;
color: var(--text-secondary);
color: var(--text-secondary, #333333);
margin-top: 20px;
text-align: justify;
font-style: italic;
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;
static/css/03-components/_education.css
+2 -2
View File
@@ -3,7 +3,7 @@
margin-bottom: 1rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
}
@@ -16,7 +16,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;
static/css/03-components/_experience.css
+37 -37
View File
@@ -13,7 +13,7 @@
font-size: 1rem;
font-weight: 500;
margin: 0;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
margin-bottom: 4px;
}
@@ -88,7 +88,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;
@@ -99,14 +99,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;
}
@@ -121,7 +121,7 @@
margin-bottom: 0.4rem;
position: relative;
font-size: 0.95rem;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
line-height: 1.5;
}
@@ -129,7 +129,7 @@
content: "•";
position: absolute;
left: 0;
color: var(--text-gray);
color: var(--text-gray, #333333);
}
/* Responsibilities with company icons (similar to main experience layout) */
@@ -153,7 +153,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;
}
@@ -165,9 +165,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;
}
@@ -176,7 +176,7 @@
margin-bottom: 1rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
}
@@ -189,7 +189,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;
@@ -206,7 +206,7 @@
.experience-item {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--item-separator);
border-bottom: 1px solid var(--item-separator, rgba(0,0,0,0.1));
}
/* Keep border on all experience items including last one */
@@ -218,7 +218,7 @@
align-items: flex-start;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--item-separator);
border-bottom: 1px solid var(--item-separator, rgba(0,0,0,0.1));
}
/* Keep border on all course items including last one */
@@ -237,7 +237,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;
}
@@ -249,9 +249,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;
}
@@ -268,7 +268,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 {
@@ -285,17 +285,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;
@@ -308,7 +308,7 @@
align-items: flex-start;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--item-separator);
border-bottom: 1px solid var(--item-separator, rgba(0,0,0,0.1));
}
.project-icon {
@@ -325,7 +325,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;
}
@@ -337,9 +337,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;
}
@@ -356,7 +356,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 {
@@ -364,7 +364,7 @@
}
.project-title-text a {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
text-decoration: none;
}
@@ -375,18 +375,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;
@@ -394,7 +394,7 @@
.project-technologies {
font-size: 0.85em;
color: var(--text-gray);
color: var(--text-gray, #333333);
margin-top: 0.5rem;
line-height: 1.4;
}
@@ -404,7 +404,7 @@
padding-top: 0rem;
text-align: center;
font-size: 0.95rem;
color: var(--text-gray);
color: var(--text-gray, #333333);
}
.projects-footer p {
@@ -412,7 +412,7 @@
}
.projects-footer a {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
text-decoration: none;
}
@@ -430,7 +430,7 @@
.reference-item a {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
text-decoration: none;
word-break: break-word;
}
@@ -442,7 +442,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;
}
@@ -451,18 +451,18 @@
footer {
text-align: center;
padding: 2rem;
color: var(--text-muted); /* Theme-aware color (light: #666666, dark: #b0b0b0) */
color: var(--text-muted, #666666); /* Theme-aware color (light: #666666, dark: #b0b0b0) */
font-size: 0.85rem;
}
/* GitHub repository link styling */
.github-repo-link {
color: var(--text-secondary) !important; /* Theme-aware link color */
color: var(--text-secondary, #333333) !important; /* Theme-aware link color */
transition: color 0.2s ease-in-out;
}
.github-repo-link:hover {
color: var(--accent-blue) !important;
color: var(--accent-blue, #0066cc) !important;
}
static/css/03-components/_languages.css
+1 -1
View File
@@ -7,7 +7,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;
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;
}
static/css/03-components/_sidebar.css
+7 -7
View File
@@ -4,7 +4,7 @@
/* Sidebar - Left/Right columns */
.cv-sidebar {
background: var(--sidebar-bg);
background: var(--sidebar-bg, #d1d4d2);
padding: 4rem 1.5rem;
font-size: 0.9rem;
}
@@ -68,7 +68,7 @@
}
&:hover .sidebar-title {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
}
&:hover::after,
@@ -85,7 +85,7 @@
line-height: 1.3em;
margin-bottom: 10px;
padding: 0;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
text-align: left;
}
@@ -94,12 +94,12 @@
font-size: 0.95rem;
font-weight: 400;
line-height: 1.5;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
}
.skill-item {
margin-bottom: 0.15rem;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
font-weight: 400;
}
@@ -108,7 +108,7 @@
.sidebar-section summary::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: 15px;
@@ -139,7 +139,7 @@
&::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-right: 15px;