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/04-interactive/_buttons.css
+86 -10
View File
@@ -78,7 +78,7 @@
/* Print-Friendly Button (second from top) */
.print-friendly-btn {
position: fixed;
bottom: 18rem; /* Below download button (22rem) */
bottom: 22rem; /* Below download button (26rem) */
left: 2rem;
width: 50px;
height: 50px;
@@ -127,7 +127,7 @@
/* Download Button (TOP POSITION) */
.download-btn {
position: fixed;
bottom: 22rem; /* Top button position */
bottom: 26rem; /* Top button position */
left: 2rem;
width: 50px;
height: 50px;
@@ -172,13 +172,89 @@
background: #cd6060 !important; /* PDF red - matches hover */
}
/* Mobile adjustments */
@media (max-width: 768px) {
.shortcuts-btn {
bottom: 5.5rem; /* Above back-to-top button (1.5rem + 45px + gap) */
left: 1.5rem; /* LEFT SIDE on mobile too */
width: 45px;
height: 45px;
}
/* CMD+K Command Bar Button (TOP position - first button) */
.cmd-k-btn {
position: fixed;
bottom: 30rem; /* TOP position - above download button */
left: 2rem; /* Left side */
width: 50px;
height: 50px;
background: var(--black-bar, #2b2b2b);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
z-index: 999;
opacity: 0.6;
}
.cmd-k-btn:hover {
opacity: 1;
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
background: #00897b; /* Teal - distinct from zoom button purple */
}
.cmd-k-btn.at-bottom {
opacity: 1;
background: #00897b; /* Teal - distinct from zoom button purple */
}
.cmd-k-btn:active {
transform: translateY(-1px);
}
/* Mobile adjustments - now handled by fluid sizing in _scroll-behavior.css
The 900px media query there uses clamp() for smooth scaling of all buttons and icons */
/* =============================================================================
NINJA-KEYS COMMAND BAR STYLING
============================================================================= */
ninja-keys {
--ninja-font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif;
--ninja-accent-color: #667eea;
--ninja-z-index: 10000;
--ninja-width: 640px;
--ninja-backdrop-filter: blur(8px);
/* Light mode colors */
--ninja-modal-background: rgba(255, 255, 255, 0.95);
--ninja-modal-shadow: 0 16px 70px rgba(0, 0, 0, 0.2);
--ninja-text-color: #1a1a1a;
--ninja-secondary-text-color: #666;
--ninja-actions-background: #f5f5f5;
--ninja-selected-background: #667eea;
--ninja-selected-text-color: white;
--ninja-key-background: #e0e0e0;
--ninja-key-text-color: #333;
--ninja-footer-background: #f9f9f9;
--ninja-placeholder-color: #999;
}
/* Dark mode colors */
[data-color-theme="dark"] ninja-keys {
--ninja-modal-background: rgba(40, 40, 40, 0.95);
--ninja-text-color: #e0e0e0;
--ninja-secondary-text-color: #999;
--ninja-actions-background: #2a2a2a;
--ninja-key-background: #444;
--ninja-key-text-color: #e0e0e0;
--ninja-footer-background: #2a2a2a;
--ninja-placeholder-color: #777;
}
/* Shortcut highlight in shortcuts modal */
.shortcut-highlight {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
border-radius: 8px;
padding: 0.5rem;
margin: -0.5rem;
}
static/css/04-interactive/_scroll-behavior.css
+125 -33
View File
@@ -109,6 +109,20 @@
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
/* Default icon sizes for floating buttons (desktop) */
.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: 24px;
height: 24px;
font-size: 24px;
}
/* Hide keyboard shortcuts button on real mobile devices (no keyboard) */
.is-mobile-device .shortcuts-btn,
.is-mobile-device .zoom-toggle-btn,
@@ -125,21 +139,56 @@
}
/* Reset fixed positioning for FLEXBOX buttons on mobile (exclude back-to-top) */
/* Use fluid sizing: at 900px = 50px, at 380px = 36px, scales linearly */
/* Formula: 2.7vw + 25.7px gives 36px at 380px and 50px at 900px */
.cmd-k-btn,
.download-btn,
.print-friendly-btn,
.fixed-btn.contact-btn,
.shortcuts-btn,
.info-button {
position: fixed !important;
bottom: 1.5rem !important;
left: auto !important;
right: auto !important;
width: 50px !important;
height: 50px !important;
/* Fluid button size: 36px at 380px, 50px at 900px */
width: clamp(36px, calc(2.7vw + 25.7px), 50px) !important;
height: clamp(36px, calc(2.7vw + 25.7px), 50px) !important;
/* Removed opacity: 1 !important to allow .footer-hovered to work */
transform: none !important;
}
/* Also apply fluid sizing to back-to-top */
.back-to-top {
width: clamp(36px, calc(2.7vw + 25.7px), 50px) !important;
height: clamp(36px, calc(2.7vw + 25.7px), 50px) !important;
}
/* Scale icons to fit buttons properly */
/* Icons ~50% of button size: 18px at 36px button, 24px at 50px button */
/* Formula: 1.15vw + 13.6px gives 18px at 380px and 24px at 900px */
.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(18px, calc(1.15vw + 13.6px), 24px) !important;
height: clamp(18px, calc(1.15vw + 13.6px), 24px) !important;
font-size: clamp(18px, calc(1.15vw + 13.6px), 24px) !important;
/* Force override HTML width/height attributes */
min-width: 0 !important;
max-width: clamp(18px, calc(1.15vw + 13.6px), 24px) !important;
}
/* Mobile: Show colors at full opacity (no transparency with blur bar) */
.cmd-k-btn {
background: rgba(0, 137, 123, 1) !important; /* Teal - full opacity */
opacity: 1 !important; /* Override base opacity */
}
.download-btn {
background: rgba(205, 96, 96, 1) !important; /* PDF red - full opacity */
opacity: 1 !important; /* Override base opacity */
@@ -154,6 +203,11 @@
color: #27ae60 !important; /* Green icon */
}
.fixed-btn.contact-btn {
background: rgba(52, 152, 219, 1) !important; /* Blue - full opacity */
opacity: 1 !important; /* Override base opacity */
}
.shortcuts-btn {
background: rgba(243, 156, 18, 1) !important; /* Orange - full opacity */
opacity: 1 !important; /* Override base opacity */
@@ -170,63 +224,82 @@
}
/* Flexbox container behavior - buttons arrange themselves */
/* Buttons will be positioned using JavaScript or individual positioning */
/* For now, use fixed spacing from center */
/* Fluid positioning that scales with viewport */
/* At 900px: 8 * 50px + 7 * 8px = 456px total, start at -228px */
/* At 380px: 8 * 36px + 7 * 4px = 316px total, start at -158px */
/* 6 buttons: Download, Print, Shortcuts, Theme, Info, Back-to-top */
/* Spacing: 10px gap between buttons, centered horizontally */
/* Total width: 6 * 50px + 5 * 10px = 350px */
/* Start position: 50% - 175px */
.cmd-k-btn {
/* First button: -228px at 900px, -158px at 380px */
left: calc(50% - clamp(158px, calc(158px + (228 - 158) * ((100vw - 380px) / (900 - 380))), 228px)) !important;
}
.download-btn {
left: calc(50% - 175px) !important; /* First button */
/* Second button: -170px at 900px, -118px at 380px */
left: calc(50% - clamp(118px, calc(118px + (170 - 118) * ((100vw - 380px) / (900 - 380))), 170px)) !important;
}
.print-friendly-btn {
left: calc(50% - 115px) !important; /* Second button */
/* Third button: -112px at 900px, -78px at 380px */
left: calc(50% - clamp(78px, calc(78px + (112 - 78) * ((100vw - 380px) / (900 - 380))), 112px)) !important;
}
.fixed-btn.contact-btn {
/* Fourth button: -54px at 900px, -38px at 380px */
left: calc(50% - clamp(38px, calc(38px + (54 - 38) * ((100vw - 380px) / (900 - 380))), 54px)) !important;
}
.shortcuts-btn {
left: calc(50% - 55px) !important; /* Third button */
/* Fifth button: +4px at 900px, +2px at 380px */
left: calc(50% + clamp(2px, calc(2px + (4 - 2) * ((100vw - 380px) / (900 - 380))), 4px)) !important;
}
/* Theme switcher button - fourth position (defined in _themes.css) */
/* left: calc(50% + 5px) !important; */
/* Theme switcher button - sixth position (defined in _themes.css) */
/* +62px at 900px, +42px at 380px */
.info-button {
left: calc(50% + 65px) !important; /* Fifth button */
/* Seventh button: +120px at 900px, +82px at 380px */
left: calc(50% + clamp(82px, calc(82px + (120 - 82) * ((100vw - 380px) / (900 - 380))), 120px)) !important;
}
/* Back-to-top button - now part of the button row (sixth button) */
/* Back-to-top button - now part of the button row (eighth button) */
.back-to-top {
position: fixed !important;
bottom: 1.5rem !important;
left: calc(50% + 125px) !important; /* Sixth button (last) */
/* Eighth button: +178px at 900px, +122px at 380px */
left: calc(50% + clamp(122px, calc(122px + (178 - 122) * ((100vw - 380px) / (900 - 380))), 178px)) !important;
right: auto !important; /* Override previous right positioning */
width: 50px !important;
height: 50px !important;
/* Removed fixed opacity - will be controlled by .at-bottom class */
/* Fluid size already set above, no need to repeat */
display: flex !important; /* Ensure it's always displayed */
}
/* REAL MOBILE DEVICES: 5 buttons without shortcuts (no gap) */
/* Total width: 5 * 50px + 4 * 10px = 290px, start at 50% - 145px */
/* REAL MOBILE DEVICES: 7 buttons without shortcuts */
/* At 900px: 7 * 50px + 6 * 8px = 398px, start at -199px */
/* At 380px: 7 * 36px + 6 * 4px = 276px, start at -138px */
.is-mobile-device .cmd-k-btn {
left: calc(50% - clamp(138px, calc(138px + (199 - 138) * ((100vw - 380px) / (900 - 380))), 199px)) !important;
}
.is-mobile-device .download-btn {
left: calc(50% - 145px) !important; /* First button */
left: calc(50% - clamp(98px, calc(98px + (141 - 98) * ((100vw - 380px) / (900 - 380))), 141px)) !important;
}
.is-mobile-device .print-friendly-btn {
left: calc(50% - 85px) !important; /* Second button */
left: calc(50% - clamp(58px, calc(58px + (83 - 58) * ((100vw - 380px) / (900 - 380))), 83px)) !important;
}
/* Theme switcher on mobile - third position (see _themes.css for override) */
.is-mobile-device .fixed-btn.contact-btn {
left: calc(50% - clamp(18px, calc(18px + (25 - 18) * ((100vw - 380px) / (900 - 380))), 25px)) !important;
}
/* Theme switcher on mobile - fifth position (see _themes.css for override) */
/* +33px at 900px, +22px at 380px */
.is-mobile-device .info-button {
left: calc(50% + 35px) !important; /* Fourth button */
left: calc(50% + clamp(62px, calc(62px + (91 - 62) * ((100vw - 380px) / (900 - 380))), 91px)) !important;
}
.is-mobile-device .back-to-top {
left: calc(50% + 95px) !important; /* Fifth button (last) */
left: calc(50% + clamp(102px, calc(102px + (149 - 102) * ((100vw - 380px) / (900 - 380))), 149px)) !important;
}
/* Always show back-to-top on mobile (don't wait for scroll) */
@@ -235,6 +308,12 @@
}
/* Hover effects - Full color opacity on hover */
.cmd-k-btn:hover {
background: rgba(0, 137, 123, 1) !important; /* Full teal opacity */
transform: translateY(-3px) !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}
.download-btn:hover,
.download-btn.pdf-hover-sync {
background: rgba(205, 96, 96, 1) !important; /* Full red opacity */
@@ -249,6 +328,12 @@
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}
.fixed-btn.contact-btn:hover {
background: rgba(52, 152, 219, 1) !important; /* Full blue opacity */
transform: translateY(-3px) !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}
.shortcuts-btn:hover {
background: rgba(243, 156, 18, 1) !important; /* Full orange opacity */
transform: translateY(-3px) !important;
@@ -268,6 +353,12 @@
}
/* Keep at-bottom state - full opacity colors for each button */
.cmd-k-btn.at-bottom {
background: rgba(0, 137, 123, 1) !important; /* Full teal opacity */
opacity: 1 !important;
transform: none !important;
}
.download-btn.at-bottom {
background: rgba(205, 96, 96, 1) !important; /* Full red opacity */
opacity: 1 !important;
@@ -280,6 +371,12 @@
transform: none !important;
}
.fixed-btn.contact-btn.at-bottom {
background: rgba(52, 152, 219, 1) !important; /* Full blue opacity */
opacity: 1 !important;
transform: none !important;
}
.shortcuts-btn.at-bottom {
background: rgba(243, 156, 18, 1) !important; /* Full orange opacity */
opacity: 1 !important;
@@ -299,8 +396,10 @@
}
/* Make all buttons semi-transparent when footer is hovered (applied via JS) */
.cmd-k-btn.footer-hovered,
.download-btn.footer-hovered,
.print-friendly-btn.footer-hovered,
.fixed-btn.contact-btn.footer-hovered,
.shortcuts-btn.footer-hovered,
.info-button.footer-hovered,
.back-to-top.footer-hovered,
@@ -310,13 +409,6 @@
}
}
/* Very narrow mobile - Stack buttons vertically or adjust spacing if needed */
@media (max-width: 483px) {
/* For very narrow screens, you may need to adjust button spacing or size */
/* For now, keep the same horizontal layout but buttons might overflow slightly */
/* Users can scroll horizontally if needed, or we can reduce button sizes */
}
/* ========================================
Mobile: Keep action bar visible (prevent hiding on scroll)
======================================== */
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 {