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

fix: apply zoom to cv-container and footer to properly reduce document space

Browse Source 
Changed zoom target from .cv-paper to .cv-container and .cv-footer to fix issue
where 50% zoom still reserved 100% document space creating empty areas. Both
elements now scale together, properly reducing space at low zoom levels while
keeping main action bar unaffected.

- Modified applyZoom() to target .cv-container and .cv-footer
- Added transform-origin, transition, and will-change to both CSS selectors
- Maintains proportional scroll compensation for smooth visual experience
This commit is contained in:
juanatsap
2025-11-12 14:35:39 +00:00
parent ccc48f6e5a
commit 786a7ea9ce
2 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/main.css
+6
View File
@@ -498,6 +498,9 @@ iconify-icon {
margin: 0 auto;
padding: 20px 0 0 0; /* Top padding to prevent sticky action bar overlap */
display: block; /* Changed from flex */
transform-origin: top center; /* Scale from top center - container stays anchored at top */
transition: transform 0.08s linear; /* Smooth, immediate zoom response */
will-change: transform; /* Hint browser to optimize for transforms */
}
/* Clean theme - no sidebars, centered content */
@@ -1697,6 +1700,9 @@ a:focus {
padding: 20px 0;
margin: 0;
grid-column: 1 / -1; /* Span all columns */
transform-origin: top center; /* Scale from top center - footer stays anchored at top */
transition: transform 0.08s linear; /* Smooth, immediate zoom response */
will-change: transform; /* Hint browser to optimize for transforms */
}
.footer-content {
static/js/main.js
+9 -5
View File
@@ -319,11 +319,12 @@
* @param {boolean} saveToStorage - Whether to persist to localStorage
*/
function applyZoom(zoomValue, saveToStorage = true) {
const cvPaper = document.querySelector('.cv-paper');
if (!cvPaper) return;
const cvContainer = document.querySelector('.cv-container');
const cvFooter = document.querySelector('.cv-footer');
if (!cvContainer) return;
// Get current scale to calculate ratio
const currentTransform = cvPaper.style.transform;
const currentTransform = cvContainer.style.transform;
const currentScaleMatch = currentTransform.match(/scale\(([\d.]+)\)/);
const oldScale = currentScaleMatch ? parseFloat(currentScaleMatch[1]) : 1.0;
@@ -334,8 +335,11 @@
// Store current scroll position
const oldScrollTop = window.pageYOffset || document.documentElement.scrollTop;
// Apply the new scale
cvPaper.style.transform = `scale(${newScale})`;
// Apply the new scale to both container and footer
cvContainer.style.transform = `scale(${newScale})`;
if (cvFooter) {
cvFooter.style.transform = `scale(${newScale})`;
}
// Calculate proportional scroll position to maintain visual position
// If zooming from 100% to 50%, content at pixel 1000 moves to pixel 500