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

fix: mobile sprite icons overflow in experience section

Browse Source 
Sprite icons (.icon-sprite.icon-section) had fixed 80px dimensions
while mobile breakpoint set container to 60px, causing overflow.
Added mobile-specific rules to scale sprites to 60px with proper
background-size and positioning calculations.
This commit is contained in:
juanatsap
2025-12-06 11:59:39 +00:00
parent c63ce6dd91
commit 6172ada527
3 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/05-responsive/_breakpoints.css
+23 -2
View File
@@ -402,6 +402,7 @@
width: 60px !important;
height: 60px !important;
flex-shrink: 0;
overflow: hidden; /* Prevent any child overflow */
}
.company-logo img,
@@ -413,8 +414,28 @@
object-fit: contain;
}
/* Default icons inherit base 80px size from _toggles.css */
/* Removed !important to allow base styles to apply */
/* Sprite icons must also scale down to 60px on mobile */
.company-logo .icon-sprite.icon-section,
.course-icon .icon-sprite.icon-section,
.project-icon .icon-sprite.icon-section,
.award-logo .icon-sprite.icon-section {
width: 60px !important;
height: 60px !important;
padding: 6px !important;
background-size: auto 48px !important; /* 60px - 2*6px padding = 48px */
}
.company-logo .icon-sprite.icon-section.icon-company {
background-position-x: calc(var(--icon-index, 0) * -48px) !important;
}
.project-icon .icon-sprite.icon-section.icon-project {
background-position-x: calc(var(--icon-index, 0) * -48px) !important;
}
.course-icon .icon-sprite.icon-section.icon-course {
background-position-x: calc(var(--icon-index, 0) * -48px) !important;
}
/* ========================================
CONSISTENT ITEM LAYOUT - Uniform spacing
static/dist/bundle.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
templates/partials/layout/head-styles.html
+1 -1
View File
@@ -1,7 +1,7 @@
{{define "head-styles"}}
<!-- CSS - Always use bundled CSS (built via 'make css-prod') -->
<!-- Individual CSS files are merged into one bundle to reduce HTTP requests -->
<link rel="stylesheet" href="/static/dist/bundle.min.css?v=20251206">
<link rel="stylesheet" href="/static/dist/bundle.min.css?v=20251206b">
<!-- Print styles - loaded separately, only applied when printing -->
<link rel="stylesheet" href="/static/css/print.css" media="print">
{{end}}