From dd11c4c46357480962e3416ebd4f2adbb30a902c Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 17 Jun 2024 14:06:38 -0700 Subject: [PATCH] chore: spacing + split out page styles --- package-lock.json | 10 +-- package.json | 2 +- src/assets/styles/components/text-toggle.css | 1 + src/assets/styles/index.css | 3 +- src/assets/styles/pages/music.css | 73 ++++++++++++++++++ .../styles/pages/{media.css => watching.css} | 74 +------------------ 6 files changed, 85 insertions(+), 78 deletions(-) create mode 100644 src/assets/styles/pages/music.css rename src/assets/styles/pages/{media.css => watching.css} (70%) diff --git a/package-lock.json b/package-lock.json index 7f2cc167..b71d2881 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "coryd.dev", - "version": "19.4.2", + "version": "19.4.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coryd.dev", - "version": "19.4.2", + "version": "19.4.3", "license": "MIT", "dependencies": { "@cdransf/api-text": "^1.4.0", @@ -532,9 +532,9 @@ "peer": true }, "node_modules/@types/node": { - "version": "20.14.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.2.tgz", - "integrity": "sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==", + "version": "20.14.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.3.tgz", + "integrity": "sha512-Nuzqa6WAxeGnve6SXqiPAM9rA++VQs+iLZ1DDd56y0gdvygSZlQvZuvdFPR3yLqkVxPu4WrO02iDEyH1g+wazw==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index d18babd7..0b7c47cb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "19.4.2", + "version": "19.4.3", "description": "The source for my personal site. Built using 11ty.", "type": "module", "scripts": { diff --git a/src/assets/styles/components/text-toggle.css b/src/assets/styles/components/text-toggle.css index 1350d084..dc4718d9 100644 --- a/src/assets/styles/components/text-toggle.css +++ b/src/assets/styles/components/text-toggle.css @@ -1,4 +1,5 @@ .toggle-wrapper { + display: flex; position: relative; margin-bottom: calc(var(--sizing-base) + 44px); diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 165c8659..f74cd3eb 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -19,8 +19,9 @@ @import url('./pages/blogroll.css') layer(page); @import url('./pages/contact.css') layer(page); @import url('./pages/links.css') layer(page); -@import url('./pages/media.css') layer(page); +@import url('./pages/music.css') layer(page); @import url('./pages/post.css') layer(page); +@import url('./pages/watching.css') layer(page); @import url('./pages/webrings.css') layer(page); /* component styles */ diff --git a/src/assets/styles/pages/music.css b/src/assets/styles/pages/music.css new file mode 100644 index 00000000..5c2807ee --- /dev/null +++ b/src/assets/styles/pages/music.css @@ -0,0 +1,73 @@ +.artist-focus, +.genre-focus { + border-bottom: 0; +} + +.artist-focus { + margin-bottom: var(--sizing-base); + + & img { + border: 1px solid var(--accent-color); + width: 100%; + height: auto; + } + + & .artist-display { + display: flex; + flex-direction: column; + gap: var(--sizing-xs); + margin: var(--sizing-base) 0; + + & .artist-meta { + display: flex; + flex-direction: column; + gap: var(--sizing-sm); + margin-top: var(--sizing-md); + + & p { + margin: 0; + + &.title { + font-size: var(--font-size-xl); + } + + &.sub-meta { + font-size: var(--font-size-sm); + line-height: var(--line-height-sm); + + svg { + width: 18px; + height: 18px; + margin-right: var(--sizing-xs); + } + } + + &.favorite { + color: var(--favorite); + } + } + } + } + + table th:first-of-type, + table td:first-of-type { + width: calc(var(--sizing-3xl) * 6); + } +} + +@media screen and (min-width: 768px) { + .artist-focus img { + max-width: 240px; + } + + .artist-focus { + & .artist-display { + flex-direction: row; + gap: var(--sizing-md); + + & .artist-meta { + margin-top: 0; + } + } + } +} \ No newline at end of file diff --git a/src/assets/styles/pages/media.css b/src/assets/styles/pages/watching.css similarity index 70% rename from src/assets/styles/pages/media.css rename to src/assets/styles/pages/watching.css index b3edcd06..876d7ad5 100644 --- a/src/assets/styles/pages/media.css +++ b/src/assets/styles/pages/watching.css @@ -1,80 +1,10 @@ -.artist-focus, -.genre-focus, -.watching-focus { - border-bottom: 0; -} - -.artist-focus, .watching { & img { border: 1px solid var(--accent-color); width: 100%; height: auto; } -} -.artist-focus { - & .artist-display { - display: flex; - flex-direction: column; - gap: var(--sizing-xs); - margin-top: var(--sizing-base); - - & .artist-meta { - display: flex; - flex-direction: column; - gap: var(--sizing-sm); - margin-top: var(--sizing-md); - - & p { - margin: 0; - - &.title { - font-size: var(--font-size-xl); - } - - &.sub-meta { - font-size: var(--font-size-sm); - line-height: var(--line-height-sm); - - svg { - width: 18px; - height: 18px; - margin-right: var(--sizing-xs); - } - } - - &.favorite { - color: var(--favorite); - } - } - } - } - - table th:first-of-type, - table td:first-of-type { - width: calc(var(--sizing-3xl) * 6); - } -} - -@media screen and (min-width: 768px) { - .artist-focus img { - max-width: 240px; - } - - .artist-focus { - & .artist-display { - flex-direction: row; - gap: var(--sizing-md); - - & .artist-meta { - margin-top: 0; - } - } - } -} - -.watching { &.page-header { margin-bottom: var(--sizing-base); } @@ -181,6 +111,8 @@ } .watching-focus { + border-bottom: 0; + & .watching-meta { display: flex; flex-direction: column; @@ -210,4 +142,4 @@ .watching.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } -} +} \ No newline at end of file