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