hugo-typo/layouts
Sangeeth Sudheer 28ba526714
Fix layout shifts by preserving aspect-ratio at responsive sizes
Uses `aspect-ratio` property to constrain height and width of render image's container to allow responsive resizing
while maintaining the original aspect ratio and avoiding layout shifts.

Previously, even though `width` and `height` attributes were passed to the `img` element, Chrome (and probably others)
weren't reserving space for the image as expected because CSS `width`/`height` were both `auto`. At least one of them
needed to be a fixed value in order to maintain aspect ratio. Even with this change, it doesn't seem possible to
constrain both width and height on the same element at the same time — only one or the other works.

The change introduced makes the `img` element constrain width using `max-width` while the parent element constrain
height using `max-height` and `aspect-ratio`. This way, we can get responsive sizing on both axes while obeying the
constraints.
2025-03-26 07:39:37 +05:30
..
_default Fix layout shifts by preserving aspect-ratio at responsive sizes 2025-03-26 07:39:37 +05:30
partials Nowrap on pagination control 2025-03-19 19:30:01 +01:00
404.html Fix error sentence in 404 page 2025-03-14 19:03:39 +01:00