From 3bc48bd311776212e872bd644aad8a75694c0f3d Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Wed, 6 Nov 2024 10:03:35 -0800 Subject: [PATCH] chore: styles --- _redirects | 3 +- package-lock.json | 22 ++--- package.json | 2 +- .../styles/{defaults => base}/fonts.css | 0 src/assets/styles/base/index.css | 52 ++++-------- src/assets/styles/{ => base}/reset.css | 4 - src/assets/styles/{defaults => base}/vars.css | 1 + src/assets/styles/components/addon-links.css | 10 --- src/assets/styles/components/badge-grid.css | 2 +- src/assets/styles/components/banners.css | 15 +--- src/assets/styles/components/buttons.css | 10 +-- src/assets/styles/components/forms.css | 28 ++++-- .../styles/components/mastodon-post.css | 2 +- src/assets/styles/components/media-grid.css | 46 ++-------- src/assets/styles/components/menu.css | 85 ++++++------------- src/assets/styles/components/modal.css | 38 ++++----- src/assets/styles/components/music-chart.css | 47 ++-------- src/assets/styles/components/paginator.css | 1 + src/assets/styles/components/tab-buttons.css | 6 +- src/assets/styles/components/text-toggle.css | 4 - .../styles/components/youtube-player.css | 7 +- src/assets/styles/feed.xsl | 34 ++++---- src/assets/styles/index.css | 6 +- src/assets/styles/pages/about.css | 2 - src/assets/styles/pages/books.css | 38 ++++----- src/assets/styles/pages/contact.css | 32 +++---- src/assets/styles/pages/feeds.css | 19 ++--- src/assets/styles/pages/links.css | 1 - src/assets/styles/pages/media.css | 23 +++++ src/assets/styles/pages/music.css | 22 +---- src/assets/styles/pages/watching.css | 85 +++++-------------- src/assets/styles/pages/webrings.css | 17 ++-- src/includes/blocks/now-playing.liquid | 2 +- src/includes/home/intro.liquid | 1 + src/includes/home/recent-activity.liquid | 1 - src/includes/media/grid.liquid | 2 +- src/includes/media/watching/hero.liquid | 2 +- src/pages/books/year.html | 2 +- src/pages/index.html | 4 +- src/pages/music/concerts.html | 2 +- src/pages/music/index.html | 2 +- src/pages/watching/favorites/movies.html | 2 +- src/pages/watching/favorites/shows.html | 2 +- workers/dynamic-pages/utils/generators.js | 16 ++-- 44 files changed, 248 insertions(+), 454 deletions(-) rename src/assets/styles/{defaults => base}/fonts.css (100%) rename src/assets/styles/{ => base}/reset.css (98%) rename src/assets/styles/{defaults => base}/vars.css (98%) diff --git a/_redirects b/_redirects index 5e532fdb..f0c70316 100644 --- a/_redirects +++ b/_redirects @@ -67,4 +67,5 @@ /blog/digital-privacy-tools /posts/2021/digital-privacy-tools/ 301 /posts/2023/now-page-update-matter-favorites/ /posts/2023/now-page-update-favorite-articles-from-matter/ 301 /posts/2023/now-playing-eleventy-netlify-edge-functions-emoji/ /posts/2023/displaying-now-playing-data-with-matching-emoji-using-netlify-edge-functions-and-eleventy/ 301 -/posts/2014/sublime-text-ctrl-tab-key-bindings/ /posts/2014/sublime-text-3-ctrl-tab-key-bindings/ 301 \ No newline at end of file +/posts/2014/sublime-text-ctrl-tab-key-bindings/ /posts/2014/sublime-text-3-ctrl-tab-key-bindings/ 301 +/posts/2022/simple-api-fetch-hooks-with-swr/ /posts/2022/simple-data-fetching-with-custom-react-hooks-and-swr 301 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index a2e85a57..368bef5a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "coryd.dev", - "version": "2.6.7", + "version": "2.8.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coryd.dev", - "version": "2.6.7", + "version": "2.8.1", "license": "MIT", "dependencies": { "@11ty/eleventy-fetch": "4.0.1", @@ -1166,9 +1166,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001677", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001677.tgz", - "integrity": "sha512-fmfjsOlJUpMWu+mAAtZZZHz7UEwsUxIIvu1TJfO1HqFQvB/B+ii0xr9B5HpbZY/mC4XZ8SvjHJqtAY6pDPQEog==", + "version": "1.0.30001678", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001678.tgz", + "integrity": "sha512-RR+4U/05gNtps58PEBDZcPWTgEO2MBeoPZ96aQcjmfkBWRIDfN451fW2qyDA9/+HohLLIL5GqiMwA+IB1pWarw==", "dev": true, "funding": [ { @@ -1355,9 +1355,9 @@ "license": "MIT" }, "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.5", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.5.tgz", + "integrity": "sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==", "dev": true, "license": "MIT", "dependencies": { @@ -1791,9 +1791,9 @@ "license": "MIT" }, "node_modules/electron-to-chromium": { - "version": "1.5.52", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.52.tgz", - "integrity": "sha512-xtoijJTZ+qeucLBDNztDOuQBE1ksqjvNjvqFoST3nGC7fSpqJ+X6BdTBaY5BHG+IhWWmpc6b/KfpeuEDupEPOQ==", + "version": "1.5.55", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.55.tgz", + "integrity": "sha512-6maZ2ASDOTBtjt9FhqYPRnbvKU5tjG0IN9SztUOWYw2AzNDNpKJYLJmlK0/En4Hs/aiWnB+JZ+gW19PIGszgKg==", "dev": true, "license": "ISC" }, diff --git a/package.json b/package.json index c398762f..04033c14 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "2.6.7", + "version": "2.8.1", "description": "The source for my personal site. Built using 11ty (and other tools).", "type": "module", "engines": { diff --git a/src/assets/styles/defaults/fonts.css b/src/assets/styles/base/fonts.css similarity index 100% rename from src/assets/styles/defaults/fonts.css rename to src/assets/styles/base/fonts.css diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css index 80b378b1..173c56c8 100644 --- a/src/assets/styles/base/index.css +++ b/src/assets/styles/base/index.css @@ -87,6 +87,7 @@ img { border: var(--border-default); height: auto; width: 100%; + margin: var(--margin-vertical-base-horizontal-zero); } } @@ -208,6 +209,10 @@ ol { a { color: var(--accent-color); + &.back-link { + margin-bottom: var(--spacing-base); + } + & > img { border: var(--border-default); } @@ -216,15 +221,13 @@ a { stroke: var(--accent-color); } - &:hover, - &:focus, - &:active { + &:is(:hover, :focus, :active) { color: var(--accent-color-hover); transition: color var(--transition-duration-default) var(--transition-ease-in-out); & > img { - border-color: var(--accent-color-hover); + border: var(--border-default-hover); transition: border var(--transition-duration-default) var(--transition-ease-in-out); } @@ -285,14 +288,17 @@ hr { /* articles */ article { margin-bottom: var(--spacing-base); - border-bottom: var(--border-gray); - &:last-of-type { - border-bottom: 0; + &:not([class], :last-of-type) { + border-bottom: var(--border-gray); } - &.intro p { - margin-top: 0; + &.intro { + border-bottom: var(--border-gray); + + & p { + margin-top: 0; + } } & h3 { @@ -313,27 +319,6 @@ article { } } -p + .associated-media, -img + .associated-media, -.banner + .associated-media { - margin-top: var(--spacing-base); - border-top: var(--border-gray); -} - -.footnotes { - & .footnotes-list { - margin-bottom: 0; - - & li:last-child { - margin-bottom: 0; - } - } - - &:has(~ *) { - margin-bottom: var(--spacing-base); - } -} - sup.footnote-ref { line-height: var(--line-height-xs); padding: var(--spacing-xs); @@ -348,6 +333,7 @@ table { white-space: nowrap; caption-side: bottom; overscroll-behavior: none; + margin: var(--margin-vertical-base-horizontal-zero); } table, @@ -441,13 +427,9 @@ td:first-of-type, .default-wrapper { padding-top: var(--spacing-2xl); - & > h2 { + & > h2:first-child { margin-top: 0; } - - & > a + h2 { - margin-top: var(--spacing-base); - } } .main-wrapper { diff --git a/src/assets/styles/reset.css b/src/assets/styles/base/reset.css similarity index 98% rename from src/assets/styles/reset.css rename to src/assets/styles/base/reset.css index 2dcf090a..93d9bdea 100644 --- a/src/assets/styles/reset.css +++ b/src/assets/styles/base/reset.css @@ -86,10 +86,6 @@ ol { overflow-wrap: break-word; } -:where(h1, h2, h3) { - text-wrap: balance; -} - :where(hr) { border: none; border-block-start: 1px solid; diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/base/vars.css similarity index 98% rename from src/assets/styles/defaults/vars.css rename to src/assets/styles/base/vars.css index c88a5632..66b5429f 100644 --- a/src/assets/styles/defaults/vars.css +++ b/src/assets/styles/base/vars.css @@ -66,6 +66,7 @@ /* borders */ --border-default: 1px solid var(--accent-color); + --border-default-hover: 1px solid var(--accent-color-hover); --border-gray: 1px solid var(--gray-light); /* fonts */ diff --git a/src/assets/styles/components/addon-links.css b/src/assets/styles/components/addon-links.css index 13f12285..24b32d39 100644 --- a/src/assets/styles/components/addon-links.css +++ b/src/assets/styles/components/addon-links.css @@ -1,5 +1,4 @@ .addon-links { - margin-top: var(--spacing-base); display: grid; gap: var(--sizing-base); grid-template-columns: var(--grid-columns-one); @@ -8,17 +7,8 @@ grid-template-columns: var(--grid-columns-two); } - h3 { - margin-top: 0; - } - & article { border-bottom: 0; margin-bottom: 0; - - & ul, - & ol { - margin-bottom: 0; - } } } diff --git a/src/assets/styles/components/badge-grid.css b/src/assets/styles/components/badge-grid.css index 1153a9f8..6cb671ee 100644 --- a/src/assets/styles/components/badge-grid.css +++ b/src/assets/styles/components/badge-grid.css @@ -7,7 +7,7 @@ grid-template-columns: var(--grid-columns-four); } - & > * { + & > a { display: flex; justify-content: center; } diff --git a/src/assets/styles/components/banners.css b/src/assets/styles/components/banners.css index 96a3ca43..1501ba39 100644 --- a/src/assets/styles/components/banners.css +++ b/src/assets/styles/components/banners.css @@ -1,15 +1,6 @@ -* + .banner, -:not(* + .banner) .banner:first-of-type { - margin-top: var(--spacing-base); -} - -.banner:has(+ *), -:not(* + .banner) .banner:last-of-type { - margin-bottom: var(--spacing-base); -} - .banner { padding: var(--spacing-md); + margin: var(--margin-vertical-base-horizontal-zero); border: 1px solid; border-radius: var(--border-radius-slight); @@ -62,9 +53,7 @@ border-color: var(--banner-accent-color); - & p a:hover, - & p a:active, - & p a:focus { + & p a:is(:hover, :active, :focus) { color: var(--banner-accent-color); } diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css index 975abe6c..5a308276 100644 --- a/src/assets/styles/components/buttons.css +++ b/src/assets/styles/components/buttons.css @@ -17,12 +17,12 @@ button, transition: color var(--transition-duration-default) var(--transition-ease-in-out); - & + hr { - margin-top: 0; - } - &:not(.active):is(:hover, :active, :focus, :focus-within) { background-color: var(--accent-color-hover); - border-color: var(--accent-color-hover); + border: 2px solid var(--accent-color-hover); + transition: background-color var(--transition-duration-default) + var(--transition-ease-in-out), + border var(--transition-duration-default) var(--transition-ease-in-out), + color var(--transition-duration-default) var(--transition-ease-in-out); } } diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css index 4fa9ecef..2cc8da29 100644 --- a/src/assets/styles/components/forms.css +++ b/src/assets/styles/components/forms.css @@ -3,13 +3,12 @@ opacity: 0.5; } -input:not([type="button"]):not([type="submit"]):not([type="reset"]), +input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]), textarea { width: 100%; } - -input:not([type="button"]):not([type="submit"]):not([type="reset"]), +input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]), textarea, select { color: var(--text-color); @@ -19,13 +18,16 @@ select { border: var(--border-gray); } -form:has(+ *), -label:has(input):has(+ *) input, -input:not([type="button"]):not([type="submit"]):not([type="reset"]):has(+ *), -textarea:has(+ *) { +form, +input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]), +textarea { margin-bottom: var(--spacing-base); } +textarea { + resize: vertical; +} + .search__form { margin-top: 0; @@ -34,6 +36,18 @@ textarea:has(+ *) { } } +.search__form--type { + display: flex; + gap: var(--spacing-md); + margin-top: var(--sizing-md); + border: none; + + @media screen and (max-width: 768px) { + flex-direction: column; + gap: var(--spacing-xs); + } +} + .search__results { margin: 0 0 var(--spacing-base); padding: 0; diff --git a/src/assets/styles/components/mastodon-post.css b/src/assets/styles/components/mastodon-post.css index 59c09d03..92e55719 100644 --- a/src/assets/styles/components/mastodon-post.css +++ b/src/assets/styles/components/mastodon-post.css @@ -1,6 +1,6 @@ .mastodon-post-wrapper { & dl, - dt { + & dt { display: flex; } diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css index 35e104ac..beccb475 100644 --- a/src/assets/styles/components/media-grid.css +++ b/src/assets/styles/components/media-grid.css @@ -1,7 +1,3 @@ -a + .media-grid { - margin-top: var(--spacing-base); -} - .media-grid { display: grid; gap: var(--spacing-sm); @@ -10,15 +6,6 @@ a + .media-grid { margin-top: var(--spacing-base); } - :is(&.poster, &.square, &.vertical) img { - border-radius: var(--border-radius-slight); - width: 100%; - } - - :is(&.poster, &.vertical) img { - height: auto; - } - &.poster { grid-template-columns: var(--grid-poster); @@ -33,10 +20,6 @@ a + .media-grid { & a { aspect-ratio: var(--aspect-ratio-square); } - - & img { - height: 100%; - } } &.vertical { @@ -47,40 +30,21 @@ a + .media-grid { } } - & .item { + &:is(.poster, .square, .vertical) img { width: 100%; - height: 100%; - position: relative; - display: flex; - - &::after { - position: absolute; - z-index: 1; - content: ""; - top: 0; - left: 0; - box-shadow: var(--box-shadow-media); - width: 100%; - height: 100%; - border: var(--border-default); - border-radius: var(--border-radius-slight); - transition: border-color var(--transition-duration-default) - var(--transition-ease-in-out); - } + height: auto; } - & a:hover .item::after, - & a:active .item::after { - border-color: var(--accent-color-hover); + & .item { + position: relative; } & .meta-text { + color: var(--color-lightest); position: absolute; z-index: 2; padding: 0 var(--spacing-sm); bottom: var(--spacing-sm); - width: 100%; - box-sizing: border-box; & .header, & .subheader { diff --git a/src/assets/styles/components/menu.css b/src/assets/styles/components/menu.css index 7495d238..4534a6a3 100644 --- a/src/assets/styles/components/menu.css +++ b/src/assets/styles/components/menu.css @@ -1,53 +1,41 @@ menu { - display: flex; - flex-direction: row; - align-items: center; - - .menu-primary { + & .menu-primary { position: absolute; + flex-direction: column; list-style: none; padding: 0; - top: 0; + top: calc(var(--spacing-3xl) * 1.75); left: 0; - gap: 0; - margin-top: calc(var(--spacing-3xl) * 2.25); - flex-direction: column; width: 100%; z-index: 3; & > li { - display: flex; - align-items: center; - justify-content: center; overflow: hidden; margin: 0; padding: var(--spacing-sm) 0; width: 100%; background: var(--background-color); - & a { - text-decoration: none; + & a, + & .active { justify-content: center; width: 100%; height: 100%; } + & a { + text-decoration: none; + } + & .active { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; cursor: not-allowed; } - & .icon > svg, - & .active > svg { + :is(.icon, .active) > svg { display: none; } - & .icon > span, - & .active > span { + :is(.icon, .active) > span { display: inline; } } @@ -57,29 +45,29 @@ menu { display: none; &:checked + .menu-button-container { - .menu-closed { + & .menu-closed { display: none; } - .menu-open { + & .menu-open { display: block; } } &:not(:checked) + .menu-button-container { - .menu-closed { + & .menu-closed { display: block; } - .menu-open { + & .menu-open { display: none; } } & ~ .menu-primary li { height: 0; - border: 0; padding: 0; + font-size: var(--font-size-lg); } &:checked ~ .menu-primary li { @@ -89,18 +77,11 @@ menu { &:first-child { border-top: var(--border-gray); } - - & a, - & .active { - font-size: var(--font-size-lg); - } } } .menu-button-container { display: unset; - width: var(--sizing-svg-base); - height: var(--sizing-svg-base); & svg { cursor: pointer; @@ -117,38 +98,24 @@ menu { top: unset; left: unset; width: auto; - } - .menu-primary > li { - width: auto; - height: auto; - padding: 0; - background: none; + & > li { + padding: 0; + background: none; - & .icon > svg, - & .active > svg { - display: block; - } + :is(.icon, .active) > svg { + display: block; + } - & .icon > span, - & .active > span { - display: none; + :is(.icon, .active) > span { + display: none; + } } } - #menu-toggle ~ .menu-primary li { - height: unset; - border: none; - padding: 0; - } - + #menu-toggle ~ .menu-primary li, #menu-toggle:checked ~ .menu-primary li { height: unset; - border: none; - - &:first-child { - border: none; - } } .menu-button-container { diff --git a/src/assets/styles/components/modal.css b/src/assets/styles/components/modal.css index 09952fb4..4d990796 100644 --- a/src/assets/styles/components/modal.css +++ b/src/assets/styles/components/modal.css @@ -1,38 +1,36 @@ -.modal-wrapper { +.modal-wrapper, +.modal-body { + inset: 0; width: 100%; height: 100%; - inset: 0; - background: var(--modal-overlay-background); position: fixed; +} + +.modal-wrapper { + background: var(--modal-overlay-background); z-index: 3; - & .modal-body { - position: fixed; + .modal-body { background: var(--background-color); - height: 100%; - width: 100%; - inset: 0; - overflow-y: scroll; - border-radius: var(--border-radius-slight); padding: var(--spacing-lg) var(--spacing-base); + overflow-y: auto; + border-radius: var(--border-radius-slight); - & h3 { + h3 { margin-top: 0; } - @media screen and (min-width: 768px) { - max-height: 75%; + @media (min-width: 768px) { max-width: 75%; + max-height: 75%; inset: 12.5%; border: var(--border-gray); } - & .modal-close { + .modal-close { position: sticky; top: 0; left: 100%; - height: var(--sizing-svg-base); - width: var(--sizing-svg-base); } } } @@ -55,13 +53,11 @@ display: inline-flex; vertical-align: middle; - & svg { + svg { stroke: var(--accent-color); - &:hover, - &:focus, - &:active { + &:is(:hover, :focus, :active) { stroke: var(--accent-color-hover); } } -} +} \ 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 836225e0..43e830e4 100644 --- a/src/assets/styles/components/music-chart.css +++ b/src/assets/styles/components/music-chart.css @@ -1,17 +1,12 @@ .music-chart { - margin-bottom: var(--spacing-base); + margin: var(--margin-vertical-base-horizontal-zero); & ol { padding-left: 0; - margin-top: 0; @media screen and (min-width: 768px) { list-style-position: outside; } - - & li:first-of-type { - margin-top: 0; - } } & .item { @@ -20,22 +15,21 @@ justify-content: start; align-items: start; + &:not(:last-of-type) { + margin-bottom: var(--spacing-lg); + } + @media screen and (min-width: 768px) { flex-direction: row; align-items: center; justify-content: space-between; } - &:not(:last-of-type) { - margin-bottom: var(--spacing-lg); - } - & .progress-bar-wrapper { - margin-top: var(--spacing-sm); max-width: 40%; - @media screen and (min-width: 768px) { - margin-top: 0; + @media screen and (max-width: 768px) { + margin-top: var(--spacing-sm); } } @@ -74,6 +68,7 @@ display: flex; flex-direction: column; justify-content: start; + gap: var(--spacing-xs); @media screen and (min-width: 768px) { max-width: 85%; @@ -98,37 +93,11 @@ & time { 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; } } } - - &.grid { - display: grid; - gap: var(--spacing-sm); - 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%; - - & .title { - line-height: var(--line-height-sm); - } - - & .subtext p { - margin: 0; - line-height: var(--line-height-sm); - } - } - } } diff --git a/src/assets/styles/components/paginator.css b/src/assets/styles/components/paginator.css index 090546cf..fb2d77f8 100644 --- a/src/assets/styles/components/paginator.css +++ b/src/assets/styles/components/paginator.css @@ -2,6 +2,7 @@ display: flex; align-items: center; justify-content: space-between; + margin-top: var(--spacing-base); & button { background: none; diff --git a/src/assets/styles/components/tab-buttons.css b/src/assets/styles/components/tab-buttons.css index b758003d..ce05980f 100644 --- a/src/assets/styles/components/tab-buttons.css +++ b/src/assets/styles/components/tab-buttons.css @@ -32,9 +32,7 @@ input[id="tracks-chart"] ~ .tracks-chart { background: transparent; } -#tracks-recent:not(:checked) ~ [for="tracks-recent"]:hover, -#tracks-recent:not(:checked) ~ [for="tracks-recent"]:active, -#tracks-chart:not(:checked) ~ [for="tracks-chart"]:hover, -#tracks-chart:not(:checked) ~ [for="tracks-chart"]:active { +#tracks-recent:not(:checked) ~ [for="tracks-recent"]:is(:hover, :active), +#tracks-chart:not(:checked) ~ [for="tracks-chart"]:is(:hover, :active) { color: var(--accent-color-hover); } \ No newline at end of file diff --git a/src/assets/styles/components/text-toggle.css b/src/assets/styles/components/text-toggle.css index f8b6afdf..68acaf84 100644 --- a/src/assets/styles/components/text-toggle.css +++ b/src/assets/styles/components/text-toggle.css @@ -20,8 +20,4 @@ left: 0; } } - - & + button[data-toggle-button]:has(+ *) { - margin: 0 0 var(--spacing-base); - } } diff --git a/src/assets/styles/components/youtube-player.css b/src/assets/styles/components/youtube-player.css index 4d2bde91..05e89c2e 100644 --- a/src/assets/styles/components/youtube-player.css +++ b/src/assets/styles/components/youtube-player.css @@ -5,14 +5,11 @@ youtube-video { overflow: hidden; border: var(--border-default); border-radius: var(--border-radius-slight); + margin: var(--margin-vertical-base-horizontal-zero); &:hover { - border-color: var(--accent-color-hover); + border: var(--border-default-hover); transition: border var(--transition-duration-default) var(--transition-ease-in-out); } - - &:has(+ *) { - margin-bottom: var(--spacing-base); - } } diff --git a/src/assets/styles/feed.xsl b/src/assets/styles/feed.xsl index 19789f37..fc9fc24d 100644 --- a/src/assets/styles/feed.xsl +++ b/src/assets/styles/feed.xsl @@ -24,26 +24,28 @@
-

- -

-

- Subscribe by adding the URL below to your feed reader - of choice. -

-

- 

-                  
-
-

-

- View more of the feeds from my site. -

+
-

Published:

+

diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index eb65b02c..d46e5fad 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -1,11 +1,11 @@ @layer reset, defaults, base, page, components, plugins; /* style resets */ -@import url("./reset.css") layer(reset); +@import url("./base/reset.css") layer(reset); /* core defaults */ -@import url("./defaults/fonts.css") layer(defaults); -@import url("./defaults/vars.css") layer(defaults); +@import url("./base/fonts.css") layer(defaults); +@import url("./base/vars.css") layer(defaults); /* base styles */ @import url("./base/index.css") layer(base); diff --git a/src/assets/styles/pages/about.css b/src/assets/styles/pages/about.css index e0223f44..d141781a 100644 --- a/src/assets/styles/pages/about.css +++ b/src/assets/styles/pages/about.css @@ -8,9 +8,7 @@ .avatar-wrapper { display: flex; - align-items: center; justify-content: center; - margin-bottom: var(--spacing-sm); width: 100%; & img { diff --git a/src/assets/styles/pages/books.css b/src/assets/styles/pages/books.css index aa0a5dcb..39d5c697 100644 --- a/src/assets/styles/pages/books.css +++ b/src/assets/styles/pages/books.css @@ -1,32 +1,27 @@ +:is(.book-entry, .book-focus) img { + height: auto; + aspect-ratio: var(--aspect-ratio-vertical); +} + .book-entry { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); + &:not(:last-of-type) { + padding-bottom: var(--spacing-base); + border-bottom: var(--border-gray); + } + @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; - - & .media-meta .description { - margin-bottom: 0; - } - } - - & a:has(img) { - display: flex; - } - & img { max-width: calc(var(--sizing-3xl) * 4); - height: auto; - aspect-ratio: var(--aspect-ratio-vertical); } & .media-meta { @@ -38,8 +33,8 @@ align-items: start; } - & .description { - margin-bottom: var(--spacing-base); + & .description p:last-of-type { + margin-bottom: 0; } & .progress-bar-wrapper { @@ -55,9 +50,6 @@ } .book-focus { - margin-top: var(--spacing-base); - border-bottom: 0; - & .book-display { display: flex; flex-direction: column; @@ -70,6 +62,10 @@ align-items: start; } + & img { + border: var(--border-default); + } + & .media-meta { width: 100%; align-items: center; @@ -88,4 +84,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/assets/styles/pages/contact.css b/src/assets/styles/pages/contact.css index 63d00808..01bd089e 100644 --- a/src/assets/styles/pages/contact.css +++ b/src/assets/styles/pages/contact.css @@ -1,44 +1,34 @@ .contact-wrapper { - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: var(--grid-columns-one); + gap: var(--spacing-base); @media screen and (min-width: 768px) { - flex-direction: row; + grid-template-columns: var(--grid-columns-two); } - & label.hp, + & .hp, & label > span { display: none; } & textarea { height: calc(var(--sizing-3xl) * 5); - resize: none; } - & .column { - @media screen and (min-width: 768px) { - width: 50%; + & .column.description { + & p:first-of-type { + margin-top: 0; } - &.description { - & p:first-of-type { - margin-top: 0; - } - - @media screen and (min-width: 768px) { - padding-right: var(--spacing-xl); - } + ul { + margin-bottom: 0; } } } .contact-success-wrapper { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - min-height: 60vh; + text-align: center; & h2 { margin: 0; diff --git a/src/assets/styles/pages/feeds.css b/src/assets/styles/pages/feeds.css index 2246b795..763ede86 100644 --- a/src/assets/styles/pages/feeds.css +++ b/src/assets/styles/pages/feeds.css @@ -7,14 +7,11 @@ &:not(:last-of-type) { border-bottom: var(--border-gray); margin-bottom: var(--spacing-base); - padding-bottom: var(--spacing-base); } - & .date { - display: block; + & time { color: var(--gray-dark); font-size: var(--font-size-sm); - margin-bottom: 0; } & h3 { @@ -26,21 +23,15 @@ } } - & p { - &:first-of-type { - margin-top: 0; - } - - &:last-of-type { - margin-bottom: 0; - } - } - & ol > li p { display: inline; } & footer { padding-bottom: var(--spacing-3xl); + + & hr { + margin-top: 0; + } } } diff --git a/src/assets/styles/pages/links.css b/src/assets/styles/pages/links.css index 12a0f798..ffdcbb22 100644 --- a/src/assets/styles/pages/links.css +++ b/src/assets/styles/pages/links.css @@ -2,7 +2,6 @@ display: grid; gap: var(--spacing-sm); grid-template-columns: var(--grid-columns-one); - margin-bottom: var(--spacing-base); @media screen and (min-width: 768px) { grid-template-columns: var(--grid-columns-two); diff --git a/src/assets/styles/pages/media.css b/src/assets/styles/pages/media.css index 4c486213..e0172e0a 100644 --- a/src/assets/styles/pages/media.css +++ b/src/assets/styles/pages/media.css @@ -16,4 +16,27 @@ height: var(--sizing-svg-sm); } } +} + +a:is(:hover, :active, :focus) .media-overlay::after { + border: var(--border-default-hover); + transition: border-color var(--transition-duration-default) + var(--transition-ease-in-out); +} + +.media-overlay::after { + position: absolute; + z-index: 1; + content: ""; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: var(--border-default); + box-shadow: var(--box-shadow-media); + border-radius: var(--border-radius-slight); +} + +.associated-media { + margin: var(--margin-vertical-base-horizontal-zero); } \ No newline at end of file diff --git a/src/assets/styles/pages/music.css b/src/assets/styles/pages/music.css index bdfc8fd3..4c187833 100644 --- a/src/assets/styles/pages/music.css +++ b/src/assets/styles/pages/music.css @@ -1,23 +1,12 @@ -.artist-focus, -.genre-focus { - border-bottom: 0; -} - -.genre-focus [data-toggle-content] p:last-of-type { - font-size: var(--font-size-sm); -} - .artist-focus { - margin-top: var(--spacing-base); - & img { border: var(--border-default); + aspect-ratio: var(--aspect-ratio-square); width: 100%; height: auto; - aspect-ratio: var(--aspect-ratio-square); @media screen and (min-width: 768px) { - max-width: 240px; + max-width: calc(var(--sizing-3xl) * 6.75); } } @@ -43,11 +32,6 @@ & table + p { font-size: var(--font-size-sm); - margin-top: var(--spacing-base); - margin-bottom: 0; + margin: var(--spacing-base) 0 0; } } - -.concert-list { - margin-top: 0; -} diff --git a/src/assets/styles/pages/watching.css b/src/assets/styles/pages/watching.css index e665bc75..0e910123 100644 --- a/src/assets/styles/pages/watching.css +++ b/src/assets/styles/pages/watching.css @@ -1,76 +1,29 @@ -a:hover > .watching.hero::after, -a:active > .watching.hero::after { - border-color: var(--accent-color-hover); -} +.watching.hero { + position: relative; -.watching { - &.hero { - position: relative; - display: flex; + & img { aspect-ratio: var(--aspect-ratio-banner); - - & img { - aspect-ratio: var(--aspect-ratio-banner); - height: auto; - width: 100%; - } - - & .meta-text { - color: white; - position: absolute; - left: var(--spacing-sm); - bottom: var(--spacing-sm); - z-index: 2; - display: flex; - flex-direction: column; - - & .header { - font-weight: var(--font-weight-bold); - } - - & .subheader { - font-size: var(--font-size-sm); - display: inline-flex; - gap: var(--spacing-xs); - } - - & .header, - & .subheader { - line-height: var(--line-height-md); - text-shadow: var(--text-shadow-default); - } - } - - &::after { - position: absolute; - z-index: 1; - content: ""; - top: 0; - left: 0; - box-shadow: var(--box-shadow-media); - width: 100%; - height: 100%; - border: var(--border-default); - border-radius: var(--border-radius-slight); - transition: border-color var(--transition-duration-default) - var(--transition-ease-in-out); - } } - &.focus { - margin-top: var(--spacing-base); - border-bottom: 0; + & .meta-text { + color: var(--color-lightest); + position: absolute; + z-index: 2; + left: var(--spacing-sm); + bottom: var(--spacing-sm); - & .media-meta { - margin: var(--margin-vertical-base-horizontal-zero); + & .header { + font-weight: var(--font-weight-bold); } - & .footnotes { - padding-bottom: 0; + & .subheader { + font-size: var(--font-size-sm); + } + + & .header, + & .subheader { + line-height: var(--line-height-md); + text-shadow: var(--text-shadow-default); } } } - -a + .poster.grid { - margin-top: var(--spacing-base); -} diff --git a/src/assets/styles/pages/webrings.css b/src/assets/styles/pages/webrings.css index e1588931..ab01bba1 100644 --- a/src/assets/styles/pages/webrings.css +++ b/src/assets/styles/pages/webrings.css @@ -1,8 +1,11 @@ -.webring-wrapper { +.webring-wrapper, +.webring-navigation { display: flex; - flex-direction: column; align-items: center; - justify-content: center; +} + +.webring-wrapper { + flex-direction: column; text-align: center; margin: var(--margin-vertical-base-horizontal-zero); @@ -11,13 +14,7 @@ } & .webring-navigation { - display: flex; - align-items: center; justify-content: center; gap: var(--spacing-sm); - - & a { - display: flex; - } } -} +} \ No newline at end of file diff --git a/src/includes/blocks/now-playing.liquid b/src/includes/blocks/now-playing.liquid index 88f7b9f1..87676458 100644 --- a/src/includes/blocks/now-playing.liquid +++ b/src/includes/blocks/now-playing.liquid @@ -5,7 +5,7 @@ storage="local" transition-duration="10ms" > -  {{ nowPlaying }} + {{ nowPlaying }}