cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: set explicit aspect ratios

Browse source
This commit is contained in:
Cory Dransfeldt 2024-06-26 13:41:43 -07:00
parent 69de628467
commit f805d2a71f
No known key found for this signature in database
4 changed files with 24 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/assets/styles/components/media-grid.css
View file

@ -1,6 +1,8 @@
:root {
--grid-square: repeat(2,minmax(0,1fr));
--grid-vertical: repeat(3,minmax(0,1fr));
--aspect-ratio-square: 1/1;
--aspect-ratio-vertical: 2/3;
}
.media-grid {
@ -15,6 +17,10 @@
&.square {
grid-template-columns: var(--grid-square);
& a {
aspect-ratio: var(--aspect-ratio-square);
}
& img {
width: 100%;
height: 100%;
@ -24,6 +30,10 @@
&.vertical {
grid-template-columns: var(--grid-vertical);
& a {
aspect-ratio: var(--aspect-ratio-vertical);
}
& img {
width: 100%;
height: auto;