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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "19.6.6", "version": "19.6.7",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "coryd.dev", "name": "coryd.dev",
"version": "19.6.6", "version": "19.6.7",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@cdransf/api-text": "^1.4.0", "@cdransf/api-text": "^1.4.0",

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "19.6.6", "version": "19.6.7",
"description": "The source for my personal site. Built using 11ty.", "description": "The source for my personal site. Built using 11ty.",
"type": "module", "type": "module",
"scripts": { "scripts": {

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

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

16
src/assets/styles/pages/watching.css
View file

@ -1,3 +1,7 @@
:root {
--aspect-ratio-banner: 1 / 0.5625;
}
.watching { .watching {
& img { & img {
border: 1px solid var(--accent-color); border: 1px solid var(--accent-color);
@ -12,12 +16,13 @@
&.hero { &.hero {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
aspect-ratio: var(--aspect-ratio-banner);
div.meta-text { div.meta-text {
color: white; color: white;
position: absolute; position: absolute;
left: var(--sizing-sm); left: var(--sizing-sm);
bottom: var(--sizing-lg); bottom: var(--sizing-sm);
z-index: 2; z-index: 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -43,11 +48,11 @@
position: absolute; position: absolute;
z-index: 1; z-index: 1;
content: ''; content: '';
bottom: 11px; bottom: 0;
left: 1px; left: 1px;
box-shadow: inset 0 -70px 75px -40px #000; box-shadow: inset 0 -70px 75px -40px #000;
width: calc(100% - 2px); width: calc(100% - 2px);
height: calc(100% - 11px); height: 100%;
} }
} }
@ -57,9 +62,9 @@
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
margin-bottom: var(--sizing-base); margin-bottom: var(--sizing-base);
& a, & a {
& div {
display: flex; display: flex;
aspect-ratio: var(--aspect-ratio-banner);
} }
& div { & div {
@ -103,6 +108,7 @@
position: relative; position: relative;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
aspect-ratio: var(--aspect-ratio-banner);
&.shadow::after { &.shadow::after {
position: absolute; position: absolute;