Changeset 86fa2d2 in Klonkt for src/assets


Ignore:
Timestamp:
06/30/2026 11:14:27 PM (2 months ago)
Author:
roboburr <roboburr@…>
Branches:
main
Children:
38120c7
Parents:
5f3f9ec
Message:

fix(feed): video covers keep their aspect ratio (contain + centered) in the square slot

A wide video cover was zoom-cropped to fill the square thumbnail (looked "too big"). A video cover
now uses object-fit:contain — the whole video shows centered at its real aspect, letterboxed against
the theme background — while image covers stay object-fit:cover. style.css buster 64 -> 65.

Co-Authored-By: Claude <noreply@…>

File:
1 edited

Legend:

Unmodified
Added
Removed
  • src/assets/css/style.css

    r5f3f9ec r86fa2d2  
    24012401.grid-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: opacity .4s ease; }
    24022402.grid-tile-img.is-loading { opacity: 0; }
     2403/* A video cover keeps its own aspect ratio inside the square tile (centered, letterboxed) instead
     2404   of zoom-cropping a wide video to fill. Images stay object-fit:cover. */
     2405video.grid-tile-img { object-fit: contain; background: var(--paper-2, #0a0e1a); }
    24032406.grid-tile:hover { transform: scale(0.98); }
    24042407.grid-tile-overlay {
Note: See TracChangeset for help on using the changeset viewer.