diff --git a/static/css/main.css b/static/css/main.css index d69c58b..d1848a4 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -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 { diff --git a/static/js/main.js b/static/js/main.js index cab7295..18a5799 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -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