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

fix: improve aspect ratio

Browse source
This commit is contained in:
Cory Dransfeldt 2024-02-02 19:02:42 -08:00
parent 4fd5b753b3
commit b25796cc67
No known key found for this signature in database
2 changed files with 16 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "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.", "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
"type": "module", "type": "module",
"scripts": { "scripts": {

17
src/assets/styles/widgets/media-grid.css
View file

@ -18,18 +18,31 @@
grid-template-columns: var(--grid-square); grid-template-columns: var(--grid-square);
} }
.media__grid.square a {
aspect-ratio: 1/1;
}
.media__grid.vertical { .media__grid.vertical {
grid-template-columns: var(--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 { .media__grid.vertical .item__wrapper {
max-width: var(--item-wrapper-max-width); max-width: var(--item-wrapper-max-width);
} }
.media__grid .item__wrapper { .media__grid .item__wrapper {
position: relative; position: relative;
height: 100%;
width: 100%;
border: 1px solid var(--accent-color); border: 1px solid var(--accent-color);
border-radius: var(--rounded-md); border-radius: var(--rounded-md);
overflow: hidden; overflow: hidden;