fix: improve aspect ratio
This commit is contained in:
parent
4fd5b753b3
commit
b25796cc67
2 changed files with 16 additions and 3 deletions
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "5.2.5",
|
||||
"version": "5.2.6",
|
||||
"description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
|
|
@ -18,18 +18,31 @@
|
|||
grid-template-columns: var(--grid-square);
|
||||
}
|
||||
|
||||
.media__grid.square a {
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
.media__grid.vertical {
|
||||
grid-template-columns: var(--grid-vertical);
|
||||
}
|
||||
|
||||
.media__grid.vertical a {
|
||||
aspect-ratio: 2/3;
|
||||
}
|
||||
|
||||
.media__grid.square a,
|
||||
.media__grid.square a,
|
||||
.media__grid .item__wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.media__grid.vertical .item__wrapper {
|
||||
max-width: var(--item-wrapper-max-width);
|
||||
}
|
||||
|
||||
.media__grid .item__wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--rounded-md);
|
||||
overflow: hidden;
|
||||
|
|
Reference in a new issue