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

feat: Darker icon borders/separators in dark theme + invert LIV Golf logo

Browse Source 
- Add --icon-border variable: #ddd (light) / #2a2a2a (dark)
- Add --item-separator variable: rgba(0,0,0,0.1) / rgba(255,255,255,0.05)
- Replace 6 hardcoded icon borders with var(--icon-border)
- Replace 3 hardcoded separators with var(--item-separator)
- Add CSS filter to invert LIV Golf logo in dark themes for visibility
- LIV Golf logo filter: invert(1) in dark/auto(dark), none in light
This commit is contained in:
juanatsap
2025-11-19 15:26:19 +00:00
parent 85de5b621f
commit ac73b49d8d
2 changed files with 31 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/01-foundation/_themes.css
+22
View File
@@ -36,6 +36,8 @@
/* Borders & Dividers */
--border-color: #333333;
--border-light: #e0e0e0;
--icon-border: #ddd; /* Light visible border for icons */
--item-separator: rgba(0, 0, 0, 0.1); /* Light separator between items */
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -84,6 +86,8 @@
/* Borders & Dividers */
--border-color: #404040;
--border-light: #333333;
--icon-border: #2a2a2a; /* Much darker, less visible border for icons */
--item-separator: rgba(255, 255, 255, 0.05); /* Very subtle separator in dark theme */
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
@@ -133,6 +137,8 @@
/* Borders & Dividers */
--border-color: #404040;
--border-light: #333333;
--icon-border: #2a2a2a; /* Much darker, less visible border for icons */
--item-separator: rgba(255, 255, 255, 0.05); /* Very subtle separator in dark theme */
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
@@ -283,3 +289,19 @@
transform: translateY(-3px) !important;
}
}
/* ==============================================================================
SPECIFIC LOGO FIXES FOR DARK THEME
============================================================================== */
/* LIV Golf logo is black - invert it in dark themes for visibility */
[data-color-theme="dark"] img[src*="livgolf"],
[data-color-theme="auto"] img[src*="livgolf"] {
filter: invert(1);
}
/* Only apply invert to auto theme when system is in dark mode */
@media (prefers-color-scheme: light) {
[data-color-theme="auto"] img[src*="livgolf"] {
filter: none;
}
}
static/css/03-components/_experience.css
+9 -9
View File
@@ -153,7 +153,7 @@
height: 60px;
object-fit: contain;
border-radius: 4px;
border: 1px solid #ddd;
border: 1px solid var(--icon-border);
background: transparent;
padding: 4px;
}
@@ -165,7 +165,7 @@
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid #ddd;
border: 1px solid var(--icon-border);
background: transparent;
color: var(--text-light);
padding: 8px;
@@ -206,7 +206,7 @@
.experience-item {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid var(--item-separator);
}
/* 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 rgba(0, 0, 0, 0.1);
border-bottom: 1px solid var(--item-separator);
}
/* Keep border on all course items including last one */
@@ -237,7 +237,7 @@
height: 80px;
object-fit: contain;
border-radius: 4px;
border: 1px solid #ddd;
border: 1px solid var(--icon-border);
background: transparent;
padding: 4px;
}
@@ -249,7 +249,7 @@
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid #ddd;
border: 1px solid var(--icon-border);
background: transparent;
color: var(--text-light);
padding: 10px;
@@ -308,7 +308,7 @@
align-items: flex-start;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid var(--item-separator);
}
.project-icon {
@@ -325,7 +325,7 @@
height: 80px;
object-fit: contain;
border-radius: 4px;
border: 1px solid #ddd;
border: 1px solid var(--icon-border);
background: transparent;
padding: 4px;
}
@@ -337,7 +337,7 @@
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid #ddd;
border: 1px solid var(--icon-border);
background: transparent;
color: var(--text-light);
padding: 10px;