From c883db21d878f5123075667214d6c0b3679010ac Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Fri, 28 Jun 2024 13:58:14 -0700
Subject: [PATCH] fix: common aspect ratios

---
 package-lock.json                           | 18 +++++++++---------
 package.json                                |  2 +-
 src/assets/styles/components/media-grid.css |  2 --
 src/assets/styles/defaults/vars.css         |  5 +++++
 src/assets/styles/pages/music.css           |  1 +
 src/assets/styles/pages/watching.css        |  4 ----
 6 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b831e133..c40c7894 100644
--- a/package-lock.json
+++ b/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"
       }
     },
diff --git a/package.json b/package.json
index e6ab271c..2ddb8fac 100644
--- a/package.json
+++ b/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": {
diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css
index a8c76ce5..aada79d6 100644
--- a/src/assets/styles/components/media-grid.css
+++ b/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 {
diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css
index 9bada988..76bdb510 100644
--- a/src/assets/styles/defaults/vars.css
+++ b/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;
diff --git a/src/assets/styles/pages/music.css b/src/assets/styles/pages/music.css
index 72cc0ec4..b7b4324a 100644
--- a/src/assets/styles/pages/music.css
+++ b/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 {
diff --git a/src/assets/styles/pages/watching.css b/src/assets/styles/pages/watching.css
index d3e67c1f..c48fbfb8 100644
--- a/src/assets/styles/pages/watching.css
+++ b/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);