chore: group media queries with rules

2024-09-11 15:21:40 -07:00 · 2024-09-11 15:21:40 -07:00 · b178203a09
commit b178203a09
parent 6d82c73e2d
13 changed files with 219 additions and 197 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "coryd.dev",
-  "version": "24.7.18",
+  "version": "24.7.19",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "coryd.dev",
-      "version": "24.7.18",
+      "version": "24.7.19",
      "license": "MIT",
      "dependencies": {
        "@cdransf/api-text": "^1.5.0",
@ -131,22 +131,22 @@
      }
    },
    "node_modules/@11ty/eleventy-dev-server": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy-dev-server/-/eleventy-dev-server-2.0.3.tgz",
-      "integrity": "sha512-sJ7ZExlsyjNqOMMxJPi7ilcP7qQZdQgVYqRNnx888WINANJy/0dYQk3eGKrA6dv3ErsbncIxyWDdpwVeZjscBg==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-dev-server/-/eleventy-dev-server-2.0.4.tgz",
+      "integrity": "sha512-d0CuufX6yPtVz+RW0oJZg1pVoxo1jOrPmpXYacoiKLJm0MMC9MkPQOCXlimguHVaceHejFo5+aZB9/aGB2RR0A==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@11ty/eleventy-utils": "^1.0.3",
        "chokidar": "^3.6.0",
-        "debug": "^4.3.6",
+        "debug": "^4.3.7",
        "dev-ip": "^1.0.1",
        "finalhandler": "^1.3.0",
        "mime": "^3.0.0",
        "minimist": "^1.2.8",
        "morphdom": "^2.7.4",
        "please-upgrade-node": "^3.2.0",
-        "send": "^0.18.0",
+        "send": "^0.19.0",
        "ssri": "^11.0.0",
        "urlpattern-polyfill": "^10.0.0",
        "ws": "^8.18.0"
@ -1743,9 +1743,9 @@
      "license": "MIT"
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.5.19",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.19.tgz",
-      "integrity": "sha512-kpLJJi3zxTR1U828P+LIUDZ5ohixyo68/IcYOHLqnbTPr/wdgn4i1ECvmALN9E16JPA6cvCG5UG79gVwVdEK5w==",
+      "version": "1.5.20",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.20.tgz",
+      "integrity": "sha512-74mdl6Fs1HHzK9SUX4CKFxAtAe3nUns48y79TskHNAG6fGOlLfyKA4j855x+0b5u8rWJIrlaG9tcTPstMlwjIw==",
      "dev": true,
      "license": "ISC"
    },
@ -1757,9 +1757,9 @@
      "license": "MIT"
    },
    "node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
      "dev": true,
      "license": "MIT",
      "engines": {
@ -1973,14 +1973,14 @@
      }
    },
    "node_modules/finalhandler": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.0.tgz",
-      "integrity": "sha512-bmwQPHFq/qiWp9CbNbCQU73klT+i5qwP/0tah3MGHp26vUt2YV4WkdtXRqOZo+H+4m38k8epFHOvO4BRuAuohw==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
        "escape-html": "~1.0.3",
        "on-finished": "2.4.1",
        "parseurl": "~1.3.3",
@ -4311,9 +4311,9 @@
      "license": "MIT"
    },
    "node_modules/send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@ -4352,6 +4352,16 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/send/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/send/node_modules/mime": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "coryd.dev",
-  "version": "24.7.18",
+  "version": "24.7.19",
  "description": "The source for my personal site. Built using 11ty (and other tools).",
  "type": "module",
  "scripts": {
--- a/src/assets/styles/base/index.css
+++ b/src/assets/styles/base/index.css
@ -232,12 +232,52 @@ h1, h2, h3, h4, h5, h6 {
  margin: var(--margin-vertical-base-horizontal-zero);
 }

-h1 { font-size: var(--font-size-2xl); }
-h2 { font-size: var(--font-size-xl); }
-h3 { font-size: var(--font-size-lg); }
-h4 { font-size: var(--font-size-base); }
-h5 { font-size: var(--font-size-md); }
-h6 { font-size: var(--font-size-sm); }
+h1 {
+  font-size: var(--font-size-2xl);
+
+  @media screen and (min-width: 768px) {
+    font-size: var(--font-size-3xl);
+  }
+}
+
+h2 {
+  font-size: var(--font-size-xl);
+
+  @media screen and (min-width: 768px) {
+    font-size: var(--font-size-2xl);
+  }
+}
+
+h3 {
+  font-size: var(--font-size-lg);
+
+  @media screen and (min-width: 768px) {
+    font-size: var(--font-size-xl);
+  }
+}
+h4 {
+  font-size: var(--font-size-base);
+
+  @media screen and (min-width: 768px) {
+    font-size: var(--font-size-lg);
+  }
+}
+
+h5 {
+  font-size: var(--font-size-md);
+
+  @media screen and (min-width: 768px) {
+    font-size: var(--font-size-base);
+  }
+}
+
+h6 {
+  font-size: var(--font-size-sm);
+
+  @media screen and (min-width: 768px) {
+    font-size: var(--font-size-md);
+  }
+}

 .section-header-wrapper {
  justify-content: space-between;
@ -396,6 +436,10 @@ main {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
+
+  @media screen and (min-width: 768px) {
+    max-width: 768px;
+  }
 }

 .status,
@ -518,16 +562,3 @@ ul, ol {
 .justify-centered {
  justify-content: center;
 }
-
-@media screen and (min-width: 768px) {
-  h1 { font-size: var(--font-size-3xl); }
-  h2 { font-size: var(--font-size-2xl); }
-  h3 { font-size: var(--font-size-xl); }
-  h4 { font-size: var(--font-size-lg); }
-  h5 { font-size: var(--font-size-base); }
-  h6 { font-size: var(--font-size-md); }
-
-  main {
-    max-width: 768px;
-  }
-}
--- a/src/assets/styles/components/badge-grid.css
+++ b/src/assets/styles/components/badge-grid.css
@ -4,6 +4,10 @@
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--spacing-2xl);

+  @media screen and (min-width: 768px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
  & > * {
    display: flex;
    justify-content: center;
@ -22,9 +26,3 @@
    image-rendering: pixelated;
  }
 }
-
-@media screen and (min-width: 768px) {
-  .badge-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
--- a/src/assets/styles/components/media-grid.css
+++ b/src/assets/styles/components/media-grid.css
@ -1,6 +1,11 @@
 :root {
  --grid-square: repeat(2, minmax(0, 1fr));
  --grid-vertical: repeat(3, minmax(0, 1fr));
+
+  @media screen and (min-width: 768px) {
+    --grid-square: repeat(4, minmax(0, 1fr));
+    --grid-vertical: repeat(6, minmax(0, 1fr));
+  }
 }

 .media-grid {
@ -100,10 +105,3 @@
    }
  }
 }
-
-@media screen and (min-width: 768px) {
-  :root {
-    --grid-square: repeat(4, minmax(0, 1fr));
-    --grid-vertical: repeat(6, minmax(0, 1fr));
-  }
-}
--- a/src/assets/styles/components/modal.css
+++ b/src/assets/styles/components/modal.css
@ -16,6 +16,13 @@
    border-radius: var(--border-radius-slight);
    padding: var(--spacing-lg) var(--spacing-2xl);

+    @media screen and (min-width: 768px) {
+      max-height: 75%;
+      max-width: 75%;
+      inset: 12.5%;
+      border: var(--border-gray);
+    }
+
    & .modal-close {
      position: absolute;
      top: var(--spacing-lg);
@ -67,12 +74,3 @@
    }
  }
 }
-
-@media screen and (min-width: 768px) {
-  .modal-wrapper .modal-body {
-    max-height: 75%;
-    max-width: 75%;
-    inset: 12.5%;
-    border: var(--border-gray);
-  }
-}
--- a/src/assets/styles/components/music-chart.css
+++ b/src/assets/styles/components/music-chart.css
@ -5,6 +5,10 @@
    padding-left: 0;
    margin-top: 0;

+    @media screen and (min-width: 768px) {
+      list-style-position: outside;
+    }
+
    & li:first-of-type {
      margin-top: 0;
    }
@ -16,6 +20,12 @@
    justify-content: start;
    align-items: start;

+    @media screen and (min-width: 768px) {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+
    &:not(:last-of-type) {
      margin-bottom: var(--spacing-md);
    }
@ -23,6 +33,10 @@
    & .progress-bar-wrapper {
      margin-top: var(--spacing-sm);
      max-width: 40%;
+
+      @media screen and (min-width: 768px) {
+        margin-left: var(--spacing-lg);
+      }
    }

    & img {
@ -30,30 +44,51 @@
      border-radius: var(--border-radius-slight);
      width: calc(var(--sizing-3xl) * 1.5);
      height: calc(var(--sizing-3xl) * 1.5);
+
+      @media screen and (min-width: 768px) {
+        width: calc(var(--sizing-3xl) * 2);
+        height: calc(var(--sizing-3xl) * 2);
+      }
    }

    & .presentation .info {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
+
+      @media screen and (min-width: 768px) {
+        max-width: calc(75% - var(--sizing-lg));
+      }
    }

    & .meta,
    & .presentation {
      justify-content: start;
      gap: var(--spacing-md);
+
+      @media screen and (min-width: 768px) {
+        width: calc(80% - var(--sizing-lg));
+      }
    }

    & .meta {
      display: flex;
      flex-direction: row;
      align-items: center;
+
+      @media screen and (min-width: 768px) {
+        width: calc(75% - var(--sizing-lg));
+      }
    }

    & .meta-text {
      display: flex;
      flex-direction: column;
      justify-content: start;
+
+      @media screen and (min-width: 768px) {
+        max-width: 85%;
+      }
    }

    & .title {
@ -76,6 +111,12 @@
    & .timestamp {
      margin-top: var(--spacing-sm);
      margin-left: 0;
+
+      @media screen and (min-width: 768px) {
+        margin-left: var(--spacing-lg);
+        text-align: right;
+        white-space: nowrap;
+      }
    }
  }

@ -85,6 +126,10 @@
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: var(--spacing-base);

+    @media screen and (min-width: 768px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
    & .item .meta {
      max-width: 80%;

@ -99,53 +144,3 @@
    }
  }
 }
-
-@media screen and (min-width: 768px) {
-  .music-chart {
-    & ol {
-      list-style-position: outside;
-    }
-
-    & .meta,
-    & .presentation {
-      width: calc(80% - var(--sizing-lg));
-    }
-
-    & .item {
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-
-      & .meta {
-        width: calc(75% - var(--sizing-lg));
-      }
-
-      & .meta-text {
-        max-width: 85%;
-      }
-
-      & .timestamp {
-        margin-left: var(--spacing-lg);
-        text-align: right;
-        white-space: nowrap;
-      }
-
-      & .info {
-        max-width: calc(75% - var(--sizing-lg));
-      }
-
-      & .progress-bar-wrapper {
-        margin-left: var(--spacing-lg);
-      }
-    }
-
-    &.grid {
-      grid-template-columns: repeat(3, 1fr);
-
-      & .item img {
-        width: calc(var(--sizing-3xl) * 2);
-        height: calc(var(--sizing-3xl) * 2);
-      }
-    }
-  }
-}
--- a/src/assets/styles/pages/about.css
+++ b/src/assets/styles/pages/about.css
@ -1,5 +1,9 @@
 :root {
  --avatar-size: 16rem;
+
+  @media screen and (min-width: 768px) {
+    --avatar-size: 24rem;
+  }
 }

 .avatar-wrapper {
@ -17,9 +21,3 @@
    }
  }
 }
-
-@media screen and (min-width: 768px) {
-  :root {
-    --avatar-size: 24rem;
-  }
-}
--- a/src/assets/styles/pages/books.css
+++ b/src/assets/styles/pages/books.css
@ -4,6 +4,12 @@
  align-items: center;
  gap: var(--spacing-sm);

+  @media screen and (min-width: 768px) {
+    flex-direction: row;
+    gap: var(--spacing-base);
+    align-items: start;
+  }
+
  &:last-of-type {
    border-bottom: 0;
    margin-bottom: 0;
@ -39,6 +45,10 @@
  & .book-meta {
    align-items: center;

+    @media screen and (min-width: 768px) {
+      align-items: start;
+    }
+
    & p {
      margin: 0;
      overflow: hidden;
@ -47,9 +57,20 @@
      width: fit-content;
    }

+    & .description {
+      @media screen and (min-width: 768px) {
+        margin-bottom: var(--spacing-base);
+      }
+    }
+
    & .progress-bar-wrapper {
      max-width: 75%;
      margin-bottom: 0;
+
+      @media screen and (min-width: 768px) {
+        margin-top: 0;
+        max-width: 50%;
+      }
    }
  }
 }
@ -100,51 +121,30 @@
    gap: var(--spacing-base);
    margin-bottom: var(--spacing-base);

+    @media screen and (min-width: 768px) {
+      flex-direction: row;
+      align-items: start;
+    }
+
    & .book-meta {
      width: 100%;
      align-items: center;

+      @media screen and (min-width: 768px) {
+        width: auto;
+        align-items: start;
+      }
+
      & p {
        margin: 0;
      }

      & .progress-bar-wrapper {
        max-width: 50%;
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .book-entry {
-    flex-direction: row;
-    gap: var(--spacing-base);
-    align-items: start;
-
-    & .book-meta {
-      align-items: start;
-
-      & .progress-bar-wrapper {
-        margin-top: 0;
-        max-width: 50%;
-      }
-
-      & .description {
-        margin-bottom: var(--spacing-base);
-      }
-    }
-  }
-
-  .book-focus .book-display {
-    flex-direction: row;
-    align-items: start;
-
-    & .book-meta {
-      width: auto;
-      align-items: start;
-
-      & .progress-bar-wrapper {
-        max-width: none;
+
+        @media screen and (min-width: 768px) {
+          max-width: none;
+        }
      }
    }
  }
--- a/src/assets/styles/pages/contact.css
+++ b/src/assets/styles/pages/contact.css
@ -2,13 +2,29 @@
  display: flex;
  flex-direction: column;

+  @media screen and (min-width: 768px) {
+    flex-direction: row;
+  }
+
  & textarea {
    height: calc(var(--sizing-3xl) * 5);
    resize: none;
  }

-  & .column.description p:first-of-type {
-    margin-top: 0;
+  & .column {
+    @media screen and (min-width: 768px) {
+      width: 50%;
+    }
+
+    &.description {
+      & p:first-of-type {
+        margin-top: 0;
+      }
+
+      @media screen and (min-width: 768px) {
+        padding-right: var(--spacing-xl);
+      }
+    }
  }
 }

@ -23,17 +39,3 @@
    margin: 0;
  }
 }
-
-@media screen and (min-width: 768px) {
-  .contact-wrapper {
-    flex-direction: row;
-
-    & .column {
-      width: 50%;
-    }
-
-    & .column.description {
-      padding-right: var(--spacing-xl);
-    }
-  }
-}
--- a/src/assets/styles/pages/links.css
+++ b/src/assets/styles/pages/links.css
@ -4,15 +4,13 @@
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin-bottom: var(--spacing-base);

+  @media screen and (min-width: 768px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
  & .link-box {
    border: var(--border-gray);
    border-radius: var(--border-radius-slight);
    padding: var(--spacing-xs) var(--spacing-sm);
  }
 }
-
-@media screen and (min-width: 768px) {
-  .link-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
--- a/src/assets/styles/pages/music.css
+++ b/src/assets/styles/pages/music.css
@ -16,6 +16,10 @@
    width: 100%;
    height: auto;
    aspect-ratio: var(--aspect-ratio-square);
+
+    @media screen and (min-width: 768px) {
+      max-width: 240px;
+    }
  }

  & .artist-display {
@ -24,12 +28,21 @@
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-base);

+    @media screen and (min-width: 768px) {
+      flex-direction: row;
+      gap: var(--spacing-md);
+    }
+
    & .artist-meta {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
      margin-top: var(--spacing-base);

+      @media screen and (min-width: 768px) {
+        margin-top: 0;
+      }
+
      & p {
        margin: 0;

@ -67,20 +80,3 @@
 p.concerts + ul + hr {
  display: none;
 }
-
-@media screen and (min-width: 768px) {
-  .artist-focus {
-    & img {
-      max-width: 240px;
-    }
-
-    & .artist-display {
-      flex-direction: row;
-      gap: var(--spacing-md);
-
-      & .artist-meta {
-        margin-top: 0;
-      }
-    }
-  }
-}
--- a/src/assets/styles/pages/watching.css
+++ b/src/assets/styles/pages/watching.css
@ -75,6 +75,10 @@ a:active > .watching.hero::after {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--spacing-base);

+    @media screen and (min-width: 768px) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
    & a {
      display: flex;
      aspect-ratio: var(--aspect-ratio-banner);
@ -189,9 +193,3 @@ a:active > .watching.hero::after {
    padding-bottom: 0;
  }
 }
-
-@media screen and (min-width: 768px) {
-  .watching.grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}