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