refactor: wrap content in zoom-wrapper to fix footer gap issue
- Created zoom-wrapper div around cv-container - Zoom now applies to wrapper only, footer adjusts naturally below - Footer no longer scaled, stays at normal size - Fixes gap between content and footer at low zoom levels - Reduced back-to-top button size (35px default, grows to 50px on hover) - Cleaner separation of concerns for zoom functionality
This commit is contained in:
+10
-9
@@ -491,6 +491,13 @@ iconify-icon {
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Zoom Wrapper - wraps cv-container for zoom functionality */
|
||||
.zoom-wrapper {
|
||||
transform-origin: top center; /* Scale from top center */
|
||||
transition: transform 0.08s linear; /* Smooth zoom response */
|
||||
will-change: transform; /* Optimize for transforms */
|
||||
}
|
||||
|
||||
/* Main CV Container */
|
||||
.cv-container {
|
||||
width: 100%;
|
||||
@@ -498,9 +505,6 @@ 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 */
|
||||
@@ -1700,9 +1704,6 @@ 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 {
|
||||
@@ -2578,8 +2579,8 @@ html {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 35px; /* Smaller default size */
|
||||
height: 35px;
|
||||
background: var(--black-bar);
|
||||
color: white;
|
||||
border: none;
|
||||
@@ -2596,7 +2597,7 @@ html {
|
||||
|
||||
.back-to-top:hover {
|
||||
opacity: 1;
|
||||
transform: translateY(-3px);
|
||||
transform: translateY(-3px) scale(1.43); /* Grow to ~50px on hover */
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
background: #3a3a3a;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user