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/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;