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

refactor: remove search button from FAB, reorganize 7-button layout

Browse Source 
Remove cmd-k-btn (search) from floating action buttons - search now only
lives in the action bar. Recalculated positions for 7-button (desktop)
and 6-button (mobile without shortcuts) layouts using fluid clamp() sizing.
This commit is contained in:
juanatsap
2025-12-02 18:55:04 +00:00
parent aeaa9f2d62
commit 0114b145ba
7 changed files with 467 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/01-foundation/_themes.css
+6 -6
View File
@@ -293,9 +293,9 @@
height: clamp(36px, calc(36px + (50 - 36) * ((100vw - 380px) / (900 - 380))), 50px) !important;
opacity: 1 !important; /* Full opacity on mobile (no transparency with blur bar) */
transform: none !important;
/* Position in 8-button layout: Search, Download, Print, Contact, Shortcuts, Theme, Info, Back-to-top */
/* Fluid positioning: scales from +42px at 380px to +62px at 900px */
left: calc(50% + clamp(42px, calc(42px + (62 - 42) * ((100vw - 380px) / (900 - 380))), 62px)) !important; /* Sixth button */
/* Position in 7-button layout: Download, Print, Contact, Shortcuts, Theme, Info, Back-to-top */
/* Fifth button: +33px at 900px, +22px at 380px */
left: calc(50% + clamp(22px, calc(22px + (33 - 22) * ((100vw - 380px) / (900 - 380))), 33px)) !important;
}
/* Scale theme switcher icon */
@@ -334,10 +334,10 @@
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}
/* REAL MOBILE DEVICES: 7 buttons without shortcuts */
/* Fifth position: +33px at 900px, +22px at 380px */
/* REAL MOBILE DEVICES: 6 buttons without shortcuts */
/* Fourth position: +4px at 900px, +2px at 380px */
.is-mobile-device .color-theme-switcher {
left: calc(50% + clamp(22px, calc(22px + (33 - 22) * ((100vw - 380px) / (900 - 380))), 33px)) !important;
left: calc(50% + clamp(2px, calc(2px + (4 - 2) * ((100vw - 380px) / (900 - 380))), 4px)) !important;
}
}
static/css/04-interactive/_buttons.css
+1 -38
View File
@@ -124,7 +124,7 @@
color: #27ae60; /* Green icon when at bottom */
}
/* Download Button (TOP POSITION) */
/* Download Button (TOP POSITION - now first button after cmd-k removed) */
.download-btn {
position: fixed;
bottom: 26rem; /* Top button position */
@@ -172,43 +172,6 @@
background: #cd6060 !important; /* PDF red - matches hover */
}
/* 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 */
static/css/04-interactive/_scroll-behavior.css
+29 -59
View File
@@ -110,7 +110,6 @@
}
/* 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,
@@ -141,7 +140,6 @@
/* 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,
@@ -167,7 +165,6 @@
/* 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,
@@ -184,11 +181,6 @@
}
/* 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 */
@@ -225,81 +217,72 @@
/* Flexbox container behavior - buttons arrange themselves */
/* 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 */
.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;
}
/* 7 buttons: At 900px: 7 * 50px + 6 * 8px = 398px total, start at -199px */
/* At 380px: 7 * 36px + 6 * 4px = 276px total, start at -138px */
.download-btn {
/* Second button: -170px at 900px, -118px at 380px */
left: calc(50% - clamp(118px, calc(118px + (170 - 118) * ((100vw - 380px) / (900 - 380))), 170px)) !important;
/* First button: -199px at 900px, -138px at 380px */
left: calc(50% - clamp(138px, calc(138px + (199 - 138) * ((100vw - 380px) / (900 - 380))), 199px)) !important;
}
.print-friendly-btn {
/* Third button: -112px at 900px, -78px at 380px */
left: calc(50% - clamp(78px, calc(78px + (112 - 78) * ((100vw - 380px) / (900 - 380))), 112px)) !important;
/* Second button: -141px at 900px, -98px at 380px */
left: calc(50% - clamp(98px, calc(98px + (141 - 98) * ((100vw - 380px) / (900 - 380))), 141px)) !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;
/* Third button: -83px at 900px, -58px at 380px */
left: calc(50% - clamp(58px, calc(58px + (83 - 58) * ((100vw - 380px) / (900 - 380))), 83px)) !important;
}
.shortcuts-btn {
/* Fifth button: +4px at 900px, +2px at 380px */
left: calc(50% + clamp(2px, calc(2px + (4 - 2) * ((100vw - 380px) / (900 - 380))), 4px)) !important;
/* Fourth button: -25px at 900px, -18px at 380px */
left: calc(50% - clamp(18px, calc(18px + (25 - 18) * ((100vw - 380px) / (900 - 380))), 25px)) !important;
}
/* Theme switcher button - sixth position (defined in _themes.css) */
/* +62px at 900px, +42px at 380px */
/* Theme switcher button - fifth position (defined in _themes.css) */
/* +33px at 900px, +22px at 380px */
.info-button {
/* Seventh button: +120px at 900px, +82px at 380px */
left: calc(50% + clamp(82px, calc(82px + (120 - 82) * ((100vw - 380px) / (900 - 380))), 120px)) !important;
/* Sixth button: +91px at 900px, +62px at 380px */
left: calc(50% + clamp(62px, calc(62px + (91 - 62) * ((100vw - 380px) / (900 - 380))), 91px)) !important;
}
/* Back-to-top button - now part of the button row (eighth button) */
/* Back-to-top button - now part of the button row (seventh button) */
.back-to-top {
position: fixed !important;
bottom: 1.5rem !important;
/* Eighth button: +178px at 900px, +122px at 380px */
left: calc(50% + clamp(122px, calc(122px + (178 - 122) * ((100vw - 380px) / (900 - 380))), 178px)) !important;
/* Seventh button: +149px at 900px, +102px at 380px */
left: calc(50% + clamp(102px, calc(102px + (149 - 102) * ((100vw - 380px) / (900 - 380))), 149px)) !important;
right: auto !important; /* Override previous right positioning */
/* Fluid size already set above, no need to repeat */
display: flex !important; /* Ensure it's always displayed */
}
/* 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;
}
/* REAL MOBILE DEVICES: 6 buttons without shortcuts */
/* At 900px: 6 * 50px + 5 * 8px = 340px, start at -170px */
/* At 380px: 6 * 36px + 5 * 4px = 236px, start at -118px */
.is-mobile-device .download-btn {
left: calc(50% - clamp(98px, calc(98px + (141 - 98) * ((100vw - 380px) / (900 - 380))), 141px)) !important;
left: calc(50% - clamp(118px, calc(118px + (170 - 118) * ((100vw - 380px) / (900 - 380))), 170px)) !important;
}
.is-mobile-device .print-friendly-btn {
left: calc(50% - clamp(58px, calc(58px + (83 - 58) * ((100vw - 380px) / (900 - 380))), 83px)) !important;
left: calc(50% - clamp(78px, calc(78px + (112 - 78) * ((100vw - 380px) / (900 - 380))), 112px)) !important;
}
.is-mobile-device .fixed-btn.contact-btn {
left: calc(50% - clamp(18px, calc(18px + (25 - 18) * ((100vw - 380px) / (900 - 380))), 25px)) !important;
left: calc(50% - clamp(38px, calc(38px + (54 - 38) * ((100vw - 380px) / (900 - 380))), 54px)) !important;
}
/* Theme switcher on mobile - fifth position (see _themes.css for override) */
/* +33px at 900px, +22px at 380px */
/* Theme switcher on mobile - fourth position (see _themes.css for override) */
/* +4px at 900px, +2px at 380px */
.is-mobile-device .info-button {
left: calc(50% + clamp(62px, calc(62px + (91 - 62) * ((100vw - 380px) / (900 - 380))), 91px)) !important;
left: calc(50% + clamp(42px, calc(42px + (62 - 42) * ((100vw - 380px) / (900 - 380))), 62px)) !important;
}
.is-mobile-device .back-to-top {
left: calc(50% + clamp(102px, calc(102px + (149 - 102) * ((100vw - 380px) / (900 - 380))), 149px)) !important;
left: calc(50% + clamp(82px, calc(82px + (120 - 82) * ((100vw - 380px) / (900 - 380))), 120px)) !important;
}
/* Always show back-to-top on mobile (don't wait for scroll) */
@@ -308,12 +291,6 @@
}
/* 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 */
@@ -353,12 +330,6 @@
}
/* 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;
@@ -396,7 +367,6 @@
}
/* 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,
@@ -424,7 +394,7 @@
/* Add bottom padding to footer so text isn't hidden behind button bar */
footer.no-print {
padding-bottom: 120px !important; /* More clearance for 6 buttons + spacing */
padding-bottom: 100px !important; /* Clearance for 7 buttons + spacing */
transition: all 0.3s ease;
z-index: 1 !important; /* Keep footer behind buttons (buttons have z-index: 99) */
position: relative;
@@ -437,7 +407,7 @@
/* Footer text automatically enlarges when at page bottom */
footer.no-print.at-bottom {
padding-bottom: 130px !important; /* Extra space when enlarged */
padding-bottom: 110px !important; /* Extra space when enlarged */
}
footer.no-print.at-bottom p,
static/css/05-responsive/_breakpoints.css
+77 -31
View File
@@ -2,6 +2,46 @@
Desktop: Ensure Sidebar Content Visible (>1280px)
======================================== */
/* ========================================
Responsive: iPad/Tablet - Text Wraps Around Photo (769px - 1280px)
Covers: iPad Mini (768px), iPad (820px), iPad Air (820px), iPad Pro 11" (1194px), iPad Pro 12.9" (1366px in landscape crops to ~1280px)
======================================== */
@media (min-width: 769px) and (max-width: 1280px) {
/* Make ALL text (name, years, intro) wrap around photo like in a magazine */
.cv-header-left {
padding-right: 0; /* Remove padding - text will wrap around floated photo */
}
.cv-photo {
/* Float photo right so ALL content wraps around it */
position: static;
float: right;
margin: 0 0 15px 20px; /* Space for text to wrap: top right bottom left */
shape-outside: margin-box; /* Text follows the margin box shape */
}
/* Text aligns right next to photo */
.cv-name {
text-align: right;
}
.years-experience {
text-align: right;
}
.intro-text {
margin-top: 15px;
}
/* Clear float after the header */
.cv-header-left::after {
content: "";
display: table;
clear: both;
}
}
/* ========================================
Responsive: Medium Screens (901px - 1023px)
======================================== */
@@ -1034,7 +1074,6 @@
/* 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,
@@ -1048,7 +1087,6 @@
}
/* 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,
@@ -1061,54 +1099,62 @@
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 */
/* Recalculate button positions for landscape - 7 buttons with shortcuts */
/* 7 buttons: 7 * 40px + 6 * 10px = 340px total, start at -170px */
.download-btn {
left: calc(50% - 145px) !important;
left: calc(50% - 170px) !important;
}
.print-friendly-btn {
left: calc(50% - 95px) !important;
}
.shortcuts-btn {
left: calc(50% - 45px) !important;
}
.color-theme-switcher {
left: calc(50% + 5px) !important;
}
.info-button {
left: calc(50% + 55px) !important;
}
.back-to-top {
left: calc(50% + 105px) !important;
}
/* Real mobile devices in landscape: 5 buttons (no shortcuts) */
/* 5 buttons: 5 * 40px + 4 * 10px = 240px total */
.is-mobile-device .download-btn {
left: calc(50% - 120px) !important;
}
.is-mobile-device .print-friendly-btn {
.fixed-btn.contact-btn {
left: calc(50% - 70px) !important;
}
.is-mobile-device .color-theme-switcher {
.shortcuts-btn {
left: calc(50% - 20px) !important;
}
.is-mobile-device .info-button {
.color-theme-switcher {
left: calc(50% + 30px) !important;
}
.is-mobile-device .back-to-top {
.info-button {
left: calc(50% + 80px) !important;
}
.back-to-top {
left: calc(50% + 130px) !important;
}
/* Real mobile devices in landscape: 6 buttons (no shortcuts) */
/* 6 buttons: 6 * 40px + 5 * 10px = 290px total, start at -145px */
.is-mobile-device .download-btn {
left: calc(50% - 145px) !important;
}
.is-mobile-device .print-friendly-btn {
left: calc(50% - 95px) !important;
}
.is-mobile-device .fixed-btn.contact-btn {
left: calc(50% - 45px) !important;
}
.is-mobile-device .color-theme-switcher {
left: calc(50% + 5px) !important;
}
.is-mobile-device .info-button {
left: calc(50% + 55px) !important;
}
.is-mobile-device .back-to-top {
left: calc(50% + 105px) !important;
}
/* Reduce blur bar height for landscape */
.fixed-buttons-backdrop {
height: 70px !important;
static/dist/bundle.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long