fix: aspect ratio

This commit is contained in:
Cory Dransfeldt 2024-06-27 12:50:44 -07:00
parent 46bcbc6617
commit 742d7c111f
No known key found for this signature in database
3 changed files with 13 additions and 7 deletions

8
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "19.6.11", "version": "19.6.12",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "coryd.dev", "name": "coryd.dev",
"version": "19.6.11", "version": "19.6.12",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@cdransf/api-text": "^1.4.0", "@cdransf/api-text": "^1.4.0",
@ -72,6 +72,7 @@
"resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.0.0-alpha.14.tgz", "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.0.0-alpha.14.tgz",
"integrity": "sha512-SQGvi/0cSrgyjhTocO8nGpivQbZBXnFlVLp1M3H8xcdvpXYgCVHiEYvrY79TnDd9Nxvj5QtsQuCiselJb3X16g==", "integrity": "sha512-SQGvi/0cSrgyjhTocO8nGpivQbZBXnFlVLp1M3H8xcdvpXYgCVHiEYvrY79TnDd9Nxvj5QtsQuCiselJb3X16g==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"@11ty/dependency-tree": "^3.0.0", "@11ty/dependency-tree": "^3.0.0",
"@11ty/dependency-tree-esm": "^1.0.0", "@11ty/dependency-tree-esm": "^1.0.0",
@ -849,7 +850,8 @@
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/chardet/-/chardet-2.0.0.tgz", "resolved": "https://registry.npmjs.org/chardet/-/chardet-2.0.0.tgz",
"integrity": "sha512-xVgPpulCooDjY6zH4m9YW3jbkaBe3FKIAvF5sj5t7aBNsVl2ljIE+xwJ4iNgiDZHFQvNIpjdKdVOQvvk5ZfxbQ==", "integrity": "sha512-xVgPpulCooDjY6zH4m9YW3jbkaBe3FKIAvF5sj5t7aBNsVl2ljIE+xwJ4iNgiDZHFQvNIpjdKdVOQvvk5ZfxbQ==",
"dev": true "dev": true,
"license": "MIT"
}, },
"node_modules/chokidar": { "node_modules/chokidar": {
"version": "3.6.0", "version": "3.6.0",

View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "19.6.11", "version": "19.6.12",
"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": {

View file

@ -18,7 +18,11 @@
overflow: hidden; overflow: hidden;
aspect-ratio: var(--aspect-ratio-banner); aspect-ratio: var(--aspect-ratio-banner);
div.meta-text { & img {
aspect-ratio: var(--aspect-ratio-banner);
}
& div.meta-text {
color: white; color: white;
position: absolute; position: absolute;
left: var(--sizing-sm); left: var(--sizing-sm);
@ -48,11 +52,11 @@
position: absolute; position: absolute;
z-index: 1; z-index: 1;
content: ''; content: '';
bottom: 0; bottom: 1px;
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: 100%; height: calc(100% - 1px);
} }
} }