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

fix: Scale floating button icons proportionally on mobile viewports

Browse Source 
Remove hardcoded width/height HTML attributes from iconify-icon elements
that were overriding CSS sizing. The iconify-icon component uses HTML
attributes for SVG rendering, ignoring CSS width/height.

- Remove width="28" height="28" from 8 button templates
- Remove conflicting 768px media query from _buttons.css
- Add default desktop icon sizes (24px) in _scroll-behavior.css
- Icons now scale via clamp() from 18px (380px) to 24px (900px)
This commit is contained in:
juanatsap
2025-12-01 12:31:31 +00:00
parent 5f85a7cc8d
commit 976b8ae2e2
14 changed files with 658 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/05-responsive/_breakpoints.css
+21 -3
View File
@@ -1030,18 +1030,36 @@
visibility: visible !important;
}
/* Adjust bottom button bar for landscape - smaller buttons */
/* Adjust bottom button bar for landscape - fluid sizing
Buttons: clamp(32px, calc(2.2vw + 19.6px), 40px) - scales from 32px at 380px to 40px at 915px
Icons: clamp(16px, calc(1.1vw + 9.8px), 20px) - scales from 16px at 380px to 20px at 915px */
.cmd-k-btn,
.download-btn,
.print-friendly-btn,
.fixed-btn.contact-btn,
.shortcuts-btn,
.info-button,
.back-to-top,
.color-theme-switcher {
width: 40px !important;
height: 40px !important;
width: clamp(32px, calc(2.2vw + 19.6px), 40px) !important;
height: clamp(32px, calc(2.2vw + 19.6px), 40px) !important;
bottom: 1rem !important;
}
/* Scale icons proportionally for landscape buttons */
.cmd-k-btn iconify-icon,
.download-btn iconify-icon,
.print-friendly-btn iconify-icon,
.fixed-btn.contact-btn iconify-icon,
.shortcuts-btn iconify-icon,
.info-button iconify-icon,
.back-to-top iconify-icon,
.color-theme-switcher iconify-icon {
width: clamp(16px, calc(1.1vw + 9.8px), 20px) !important;
height: clamp(16px, calc(1.1vw + 9.8px), 20px) !important;
font-size: clamp(16px, calc(1.1vw + 9.8px), 20px) !important;
}
/* Recalculate button positions for smaller 40px buttons */
/* 6 buttons: 6 * 40px + 5 * 10px = 290px total */
.download-btn {