From b178203a091b423beab92bca5ebadfddd8682444 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Wed, 11 Sep 2024 15:21:40 -0700
Subject: [PATCH] chore: group media queries with rules
---
package-lock.json | 50 ++++++-----
package.json | 2 +-
src/assets/styles/base/index.css | 69 ++++++++++----
src/assets/styles/components/badge-grid.css | 10 +--
src/assets/styles/components/media-grid.css | 12 ++-
src/assets/styles/components/modal.css | 16 ++--
src/assets/styles/components/music-chart.css | 95 ++++++++++----------
src/assets/styles/pages/about.css | 10 +--
src/assets/styles/pages/books.css | 68 +++++++-------
src/assets/styles/pages/contact.css | 34 +++----
src/assets/styles/pages/links.css | 10 +--
src/assets/styles/pages/music.css | 30 +++----
src/assets/styles/pages/watching.css | 10 +--
13 files changed, 219 insertions(+), 197 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index c6b23a12..a64a2cef 100644
--- 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",
diff --git a/package.json b/package.json
index d05f455d..de11e6c3 100644
--- 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": {
diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css
index e75018bd..6d90fcd4 100644
--- 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,
@@ -517,17 +561,4 @@ 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;
- }
}
\ No newline at end of file
diff --git a/src/assets/styles/components/badge-grid.css b/src/assets/styles/components/badge-grid.css
index 157e3f83..bd19392a 100644
--- 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;
@@ -21,10 +25,4 @@
& img {
image-rendering: pixelated;
}
-}
-
-@media screen and (min-width: 768px) {
- .badge-grid {
- grid-template-columns: repeat(4, 1fr);
- }
}
\ No newline at end of file
diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css
index f4bc157b..509fdc01 100644
--- 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 {
@@ -99,11 +104,4 @@
text-overflow: ellipsis;
}
}
-}
-
-@media screen and (min-width: 768px) {
- :root {
- --grid-square: repeat(4, minmax(0, 1fr));
- --grid-vertical: repeat(6, minmax(0, 1fr));
- }
}
\ No newline at end of file
diff --git a/src/assets/styles/components/modal.css b/src/assets/styles/components/modal.css
index ac6e771e..c5890c40 100644
--- 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);
@@ -66,13 +73,4 @@
stroke: var(--accent-color-hover);
}
}
-}
-
-@media screen and (min-width: 768px) {
- .modal-wrapper .modal-body {
- max-height: 75%;
- max-width: 75%;
- inset: 12.5%;
- border: var(--border-gray);
- }
}
\ No newline at end of file
diff --git a/src/assets/styles/components/music-chart.css b/src/assets/styles/components/music-chart.css
index c94c1720..f1b70e93 100644
--- 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%;
@@ -98,54 +143,4 @@
}
}
}
-}
-
-@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);
- }
- }
- }
}
\ No newline at end of file
diff --git a/src/assets/styles/pages/about.css b/src/assets/styles/pages/about.css
index 2440a15a..674014ee 100644
--- 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 {
@@ -16,10 +20,4 @@
image-rendering: pixelated;
}
}
-}
-
-@media screen and (min-width: 768px) {
- :root {
- --avatar-size: 24rem;
- }
}
\ No newline at end of file
diff --git a/src/assets/styles/pages/books.css b/src/assets/styles/pages/books.css
index 3af71ee8..25d7e7fa 100644
--- 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;
+ }
}
}
}
diff --git a/src/assets/styles/pages/contact.css b/src/assets/styles/pages/contact.css
index f904943f..c45746fa 100644
--- 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);
+ }
+ }
}
}
@@ -22,18 +38,4 @@
h2 {
margin: 0;
}
-}
-
-@media screen and (min-width: 768px) {
- .contact-wrapper {
- flex-direction: row;
-
- & .column {
- width: 50%;
- }
-
- & .column.description {
- padding-right: var(--spacing-xl);
- }
- }
}
\ No newline at end of file
diff --git a/src/assets/styles/pages/links.css b/src/assets/styles/pages/links.css
index 8bdad468..7ac97bec 100644
--- 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));
- }
}
\ No newline at end of file
diff --git a/src/assets/styles/pages/music.css b/src/assets/styles/pages/music.css
index 1c8744aa..62531dc3 100644
--- 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;
@@ -66,21 +79,4 @@
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;
- }
- }
- }
}
\ No newline at end of file
diff --git a/src/assets/styles/pages/watching.css b/src/assets/styles/pages/watching.css
index 5859883d..7217702a 100644
--- 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);
@@ -188,10 +192,4 @@ a:active > .watching.hero::after {
& .footnotes {
padding-bottom: 0;
}
-}
-
-@media screen and (min-width: 768px) {
- .watching.grid {
- grid-template-columns: repeat(3, minmax(0, 1fr));
- }
}
\ No newline at end of file