fix: common aspect ratios

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "19.6.14",
+  "version": "19.6.15",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "19.6.14",
+      "version": "19.6.15",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",
@@ -467,9 +467,9 @@
       }
     },
     "node_modules/@supabase/realtime-js": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.10.1.tgz",
-      "integrity": "sha512-SrrXxE8xgwWvjREQMkC9LIHIoCQde+OqkFPKP2s/O0ROjhmJ/iXeLvoWhAzXh9gwire4oaK14/ncL/iRiaVWQw==",
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.10.2.tgz",
+      "integrity": "sha512-qyCQaNg90HmJstsvr2aJNxK2zgoKh9ZZA8oqb7UT2LCh3mj9zpa3Iwu167AuyNxsxrUE8eEJ2yH6wLCij4EApA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -490,9 +490,9 @@
       }
     },
     "node_modules/@supabase/supabase-js": {
-      "version": "2.44.1",
-      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.44.1.tgz",
-      "integrity": "sha512-4vCOkefRoeacmMELIWlYPwsfd9y/stH4fCZ4GZZjiOCHeViIrZ8artdj61MwkjQKFuF1uZ87gCKjtMDKLJsDlA==",
+      "version": "2.44.2",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.44.2.tgz",
+      "integrity": "sha512-fouCwL1OxqftOwLNgdDUPlNnFuCnt30nS4kLcnTpe6NYKn1PmjxRRBFmKscgHs6FjWyU+32ZG4uBJ29+/BWiDw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -500,7 +500,7 @@
         "@supabase/functions-js": "2.4.1",
         "@supabase/node-fetch": "2.6.15",
         "@supabase/postgrest-js": "1.15.7",
-        "@supabase/realtime-js": "2.10.1",
+        "@supabase/realtime-js": "2.10.2",
         "@supabase/storage-js": "2.6.0"
       }
     },

package.json

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

src/assets/styles/components/media-grid.css

@@ -1,8 +1,6 @@
 :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 {

src/assets/styles/defaults/vars.css

@@ -101,6 +101,11 @@
   --rounded-lg: .5rem;
   --rounded-full: 9999px;
 
+  /* aspect ratios */
+  --aspect-ratio-square: 1/1;
+  --aspect-ratio-vertical: 2/3;
+  --aspect-ratio-banner: 1 / 0.5625;
+
   /* transitions */
   --transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --transition-duration-default: 300ms;

src/assets/styles/pages/music.css

@@ -10,6 +10,7 @@
     border: 1px solid var(--accent-color);
     width: 100%;
     height: auto;
+    aspect-ratio: var(--aspect-ratio-square);
   }
 
   & .artist-display {

src/assets/styles/pages/watching.css

@@ -1,7 +1,3 @@
-:root {
-  --aspect-ratio-banner: 1 / 0.5625;
-}
-
 .watching {
   & img {
     border: 1px solid var(--accent-color);