fix: thumbnail sizing, parallax hover effect, login logo size
Build and Deploy Verso / deploy (push) Successful in 14m45s
Build and Deploy Verso / deploy (push) Successful in 14m45s
Thumbnail: explicit top/left/right/bottom + width/height on the img so object-fit has a well-defined box in all browsers (inset shorthand alone was underspecified for some). Hover effect: the card already rises translateY(-3px) on hover. Add a matching translateY(+3px) counter-transform on the thumbnail image so its net viewport motion is zero — the document preview appears to float in place while the gradient tile and card body lift up around it. Login logo: raise max-width from 300px to 400px now that the competing inline style has been removed from the pug template. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -47,7 +47,7 @@
|
||||
.verso-login-logo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 300px !important;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -540,13 +540,26 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
|
||||
|
||||
// Thumbnail image — shown when the project has a cached compiled PDF page.
|
||||
// Falls back to the gradient + initial when the image 404s or is loading.
|
||||
// The counter-transform on hover keeps the image visually stationary while
|
||||
// the card rises beneath it (matching the card's translateY(-3px) lift).
|
||||
.lumiere-card-thumb-img {
|
||||
position: absolute;
|
||||
inset: 6px;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
right: 6px;
|
||||
bottom: 6px;
|
||||
width: calc(100% - 12px);
|
||||
height: calc(100% - 12px);
|
||||
object-fit: cover;
|
||||
object-position: top center;
|
||||
border-radius: 4px;
|
||||
z-index: 1;
|
||||
transition: transform 0.18s ease;
|
||||
}
|
||||
|
||||
.lumiere-card:hover .lumiere-card-thumb-img,
|
||||
.lumiere-card:focus-within .lumiere-card-thumb-img {
|
||||
transform: translateY(3px);
|
||||
}
|
||||
|
||||
.lumiere-card-initial {
|
||||
|
||||
Reference in New Issue
Block a user