From ea6747395742d00e3467f3fccd92b52da54b96c6 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Thu, 15 Aug 2024 09:50:00 -0700 Subject: [PATCH] chore: styles --- package-lock.json | 10 ++-- package.json | 2 +- src/assets/styles/components/media-grid.css | 4 +- src/assets/styles/components/modal.css | 2 +- src/assets/styles/components/music-chart.css | 56 +++++++++++-------- src/assets/styles/components/progress-bar.css | 6 +- src/assets/styles/pages/watching.css | 4 +- 7 files changed, 48 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index ab74ce81..08b64978 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "coryd.dev", - "version": "22.3.7", + "version": "22.3.8", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coryd.dev", - "version": "22.3.7", + "version": "22.3.8", "license": "MIT", "dependencies": { "@cdransf/api-text": "^1.5.0", @@ -1147,9 +1147,9 @@ "license": "MIT" }, "node_modules/electron-to-chromium": { - "version": "1.5.7", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.7.tgz", - "integrity": "sha512-6FTNWIWMxMy/ZY6799nBlPtF1DFDQ6VQJ7yyDP27SJNt5lwtQ5ufqVvHylb3fdQefvRcgA3fKcFMJi9OLwBRNw==", + "version": "1.5.8", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.8.tgz", + "integrity": "sha512-4Nx0gP2tPNBLTrFxBMHpkQbtn2hidPVr/+/FTtcCiBYTucqc70zRyVZiOLj17Ui3wTO7SQ1/N+hkHYzJjBzt6A==", "dev": true, "license": "ISC" }, diff --git a/package.json b/package.json index 61d3a07c..e4387810 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "22.3.7", + "version": "22.3.8", "description": "The source for my personal site. Built using 11ty (and other tools).", "type": "module", "scripts": { diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css index 89872a09..80219df1 100644 --- a/src/assets/styles/components/media-grid.css +++ b/src/assets/styles/components/media-grid.css @@ -51,7 +51,7 @@ content: ''; top: 0; left: 1px; - box-shadow: inset 0 -85px 60px -65px var(--black); + box-shadow: inset 0 -85px 60px -60px var(--black); width: calc(100% - 2px); height: calc(100% - 1px); } @@ -87,7 +87,7 @@ color: var(--color-lightest); font-size: var(--font-size-sm); line-height: 1.5; - text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px; + text-shadow: var(--black) 0px 0px 10px; } & .header { diff --git a/src/assets/styles/components/modal.css b/src/assets/styles/components/modal.css index 44de9620..181c193a 100644 --- a/src/assets/styles/components/modal.css +++ b/src/assets/styles/components/modal.css @@ -2,7 +2,7 @@ width: 100%; height: 100%; inset: 0; - background: rgba(0, 0, 0, 0.7); + background: #000000b3; position: fixed; z-index: 3; diff --git a/src/assets/styles/components/music-chart.css b/src/assets/styles/components/music-chart.css index e517a7de..8df2b2d1 100644 --- a/src/assets/styles/components/music-chart.css +++ b/src/assets/styles/components/music-chart.css @@ -12,17 +12,18 @@ & .item { display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; + flex-direction: column; + justify-content: start; + align-items: start; + overflow: hidden; &:not(:last-of-type) { margin-bottom: var(--sizing-md); } & .progress-bar-wrapper { + margin-top: var(--sizing-sm); max-width: 40%; - margin-left: var(--sizing-lg); } & img { @@ -39,13 +40,13 @@ & .presentation { justify-content: start; gap: var(--sizing-md); - width: calc(55% - var(--sizing-lg)); } & .meta { display: flex; flex-direction: row; align-items: center; + max-width: 95%; } & .meta-text { @@ -89,13 +90,8 @@ } & .timestamp { - margin-left: var(--sizing-lg); - text-align: right; - white-space: nowrap; - } - - & .info { - max-width: calc(75% - var(--sizing-lg)); + margin-top: var(--sizing-sm); + margin-left: 0; } } @@ -105,18 +101,16 @@ grid-template-columns: repeat(2, 1fr); margin-bottom: var(--sizing-base); - & .item { - & .meta { - max-width: 80%; + & .item .meta { + max-width: 80%; - & .title { - line-height: var(--line-height-sm); - } + & .title { + line-height: var(--line-height-sm); + } - & .subtext p { - margin: 0; - line-height: var(--line-height-sm); - } + & .subtext p { + margin: 0; + line-height: var(--line-height-sm); } } } @@ -134,6 +128,10 @@ } & .item { + flex-direction: row; + align-items: center; + justify-content: space-between; + & .meta { width: calc(75% - var(--sizing-lg)); } @@ -141,6 +139,20 @@ & .meta-text { max-width: 85%; } + + & .timestamp { + margin-left: var(--sizing-lg); + text-align: right; + white-space: nowrap; + } + + & .info { + max-width: calc(75% - var(--sizing-lg)); + } + + & .progress-bar-wrapper { + margin-left: var(--sizing-lg); + } } &.grid { diff --git a/src/assets/styles/components/progress-bar.css b/src/assets/styles/components/progress-bar.css index ba6ee39f..ccfba4fc 100644 --- a/src/assets/styles/components/progress-bar.css +++ b/src/assets/styles/components/progress-bar.css @@ -4,8 +4,8 @@ overflow: hidden; height: var(--sizing-lg); width: 100%; -} -.progress-bar { - background-color: var(--accent-color); + & .progress-bar { + background-color: var(--accent-color); + } } \ No newline at end of file diff --git a/src/assets/styles/pages/watching.css b/src/assets/styles/pages/watching.css index 23958d6a..8a24b070 100644 --- a/src/assets/styles/pages/watching.css +++ b/src/assets/styles/pages/watching.css @@ -4,8 +4,8 @@ border: 0 } - & a:focus .shadow::after, - & a:focus-within .shadow::after { + & a:focus .shadow:after, + & a:focus-within .shadow:after { left: 0; width: 100%; height: 100%