chore: merge vars

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "1.0.6",
+      "version": "1.0.7",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",
@@ -5177,9 +5177,9 @@
       }
     },
     "node_modules/yaml": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz",
-      "integrity": "sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
+      "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==",
       "dev": true,
       "license": "ISC",
       "bin": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {

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

@@ -1,18 +1,3 @@
-:root {
-  --columns-two: repeat(2, minmax(0, 1fr));
-  --columns-three: repeat(3, minmax(0, 1fr));
-
-  --grid-poster: var(--columns-two);
-  --grid-square: var(--columns-two);
-  --grid-vertical: var(--columns-three);
-
-  @media screen and (min-width: 768px) {
-    --grid-poster: var(--columns-three);
-    --grid-square: repeat(4, minmax(0, 1fr));
-    --grid-vertical: repeat(6, minmax(0, 1fr));
-  }
-}
-
 .icon-link + .media-grid {
   margin-top: var(--spacing-base);
 }

src/assets/styles/defaults/vars.css

@@ -160,6 +160,22 @@
   --aspect-ratio-vertical: 2/3;
   --aspect-ratio-banner: 3/2;
 
+  /* grid columns */
+  --grid-columns-two: repeat(2, minmax(0, 1fr));
+  --grid-columns-three: repeat(3, minmax(0, 1fr));
+  --grid-columns-four: repeat(4, minmax(0, 1fr));
+  --grid-columns-six: repeat(6, minmax(0, 1fr));
+
+  --grid-poster: var(--grid-columns-two);
+  --grid-square: var(---grid-columns-two);
+  --grid-vertical: var(--grid-columns-three);
+
+  @media screen and (min-width: 768px) {
+    --grid-poster: var(--grid-columns-three);
+    --grid-square: var(--grid-columns-four);
+    --grid-vertical: var(--grid-columns-six);
+  }
+
   /* transitions */
   --transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --transition-duration-default: 300ms;