From e30582d502870f3d0162c52ffda096cfb35ae711 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 1 Jul 2024 13:25:45 -0700 Subject: [PATCH] chore: css cleanup --- package-lock.json | 10 +-- package.json | 2 +- .../partials/widgets/youtube-player.liquid | 2 +- src/assets/styles/base/index.css | 79 +++++++------------ src/assets/styles/components/addon-links.css | 12 +-- src/assets/styles/components/banners.css | 35 ++++---- src/assets/styles/components/buttons.css | 16 +++- src/assets/styles/components/text-toggle.css | 26 +++--- src/assets/styles/components/theme-toggle.css | 4 +- .../styles/components/youtube-video.css | 3 - src/assets/styles/index.css | 3 +- src/assets/styles/pages/books.css | 2 +- src/assets/styles/pages/post.css | 28 +++---- 13 files changed, 108 insertions(+), 114 deletions(-) delete mode 100644 src/assets/styles/components/youtube-video.css diff --git a/package-lock.json b/package-lock.json index 4708fb70..bdad8d2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "coryd.dev", - "version": "19.8.2", + "version": "19.8.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coryd.dev", - "version": "19.8.2", + "version": "19.8.3", "license": "MIT", "dependencies": { "@cdransf/api-text": "^1.4.0", @@ -1157,9 +1157,9 @@ "license": "MIT" }, "node_modules/electron-to-chromium": { - "version": "1.4.815", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.815.tgz", - "integrity": "sha512-OvpTT2ItpOXJL7IGcYakRjHCt8L5GrrN/wHCQsRB4PQa1X9fe+X9oen245mIId7s14xvArCGSTIq644yPUKKLg==", + "version": "1.4.816", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.816.tgz", + "integrity": "sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw==", "dev": true, "license": "ISC" }, diff --git a/package.json b/package.json index 18a25313..804a993f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "19.8.2", + "version": "19.8.3", "description": "The source for my personal site. Built using 11ty.", "type": "module", "scripts": { diff --git a/src/_includes/partials/widgets/youtube-player.liquid b/src/_includes/partials/widgets/youtube-player.liquid index c20de7ef..867ebe94 100644 --- a/src/_includes/partials/widgets/youtube-player.liquid +++ b/src/_includes/partials/widgets/youtube-player.liquid @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css index b7001ad8..f6ab445f 100644 --- a/src/assets/styles/base/index.css +++ b/src/assets/styles/base/index.css @@ -5,7 +5,6 @@ body { letter-spacing: -.05rem; word-spacing: -.125rem; background: var(--background-color); - accent-color: var(--accent-color); scrollbar-width: thin; scrollbar-color: var(--accent-color) var(--gray-light); } @@ -84,13 +83,34 @@ code { background-color: var(--background-color-inverted); } +/* social icons */ +:is(body, html, nav) a { + &.at > svg { stroke: var(--brand-proton); } + &.brand-github > svg { stroke: var(--brand-github); } + &.brand-npm > svg { stroke: var(--brand-npm); } + &.brand-mastodon > svg { stroke: var(--brand-mastodon); } + &.article > svg { stroke: var(--posts) } + &.books > svg { stroke: var(--books); } + &.brain > svg { stroke: var(--brand-listenbrainz); } + &.clock-hour-3 > svg { stroke: var(--now); } + &.coffee > svg { stroke: var(--brand-buy-me-a-coffee); } + &.device-tv > svg { stroke: var(--tv); } + &.favorite > svg { stroke: var(--favorite) } + &.headphones > svg { stroke: var(--music); } + &.heart-handshake > svg { stroke: var(--webrings); } + &.info-circle > svg { stroke: var(--about) } + &.link > svg { stroke: var(--links); } + &.rss > svg { stroke: var(--brand-rss); } + &.search > svg { stroke: var(--search) } +} + :is(body, html, nav .search) svg { stroke: var(--text-color); } -:is(h1, h2, h3, h4, h5, h6) > svg { +:is(h1, h2, h3, h4, h5, h6) svg { margin-right: var(--sizing-xs); - stroke-width: var(--stroke-width-bold) !important; + stroke-width: var(--stroke-width-bold); } strong, @@ -196,20 +216,6 @@ h6 { font-size: var(--font-size-sm) } } } -.section-header-buttons { - display: flex; - align-items: center; - gap: var(--sizing-sm); - - & > button { - margin-bottom: 0 !important; - - &:last-of-type { - margin-right: 0 !important; - } - } -} - /* dividers */ hr { height: 1px; @@ -331,33 +337,14 @@ nav .active svg { .menu-primary .active, nav .active { - color: var(--accent-color) !important; + color: var(--accent-color); } .menu-primary .active svg, nav .active svg { - stroke: var(--accent-color-hover) !important; + stroke: var(--accent-color-hover); } -/* social icons */ -.at svg { stroke: var(--brand-proton) !important; } -.brand-github svg { stroke: var(--brand-github) !important; } -.brand-npm svg { stroke: var(--brand-npm) !important; } -.brand-mastodon svg { stroke: var(--brand-mastodon) !important; } -.article svg { stroke: var(--posts) !important } -.books svg { stroke: var(--books) !important; } -.brain svg { stroke: var(--brand-listenbrainz) !important; } -.clock-hour-3 svg { stroke: var(--now) !important; } -.coffee svg { stroke: var(--brand-buy-me-a-coffee) !important; } -.device-tv svg { stroke: var(--tv) !important; } -.favorite svg { stroke: var(--favorite) !important } -.headphones svg { stroke: var(--music) !important; } -.heart-handshake svg { stroke: var(--webrings) !important; } -.info-circle svg { stroke: var(--about) !important } -.link svg { stroke: var(--links) !important; } -.rss svg { stroke: var(--brand-rss) !important; } -.search svg { stroke: var(--search) !important } - /* layout */ .default-wrapper { padding-top: var(--sizing-2xl); @@ -400,10 +387,6 @@ article { } } -article h3 { - margin: 0; -} - footer { & .explainer { margin: var(--sizing-3xl) 0 var(--sizing-lg); @@ -447,6 +430,10 @@ article { transition-property: color; } + & h3 { + margin: 0; + } + & a h2:hover, & a h2:focus, & a h2:active { @@ -468,7 +455,7 @@ article { & > svg { width: var(--sizing-lg); height: var(--sizing-lg); - stroke: var(--gray-dark) !important; + stroke: var(--gray-dark); } } @@ -546,12 +533,6 @@ li { align-items: center; } -.flex-between { - display: flex; - flex-direction: row; - justify-content: space-between; -} - .justify-centered { justify-content: center; } diff --git a/src/assets/styles/components/addon-links.css b/src/assets/styles/components/addon-links.css index 828b6f94..356e0302 100644 --- a/src/assets/styles/components/addon-links.css +++ b/src/assets/styles/components/addon-links.css @@ -3,12 +3,14 @@ gap: var(--sizing-sm); grid-template-columns: repeat(1, 1fr); - & div > h2 { - margin-top: 0; - } + & div { + & > h2 { + margin-top: 0; + } - & div:last-of-type h2 { - margin-top: var(--sizing-base); + &:last-of-type h2 { + margin-top: var(--sizing-base); + } } & .link-list { diff --git a/src/assets/styles/components/banners.css b/src/assets/styles/components/banners.css index 3600760a..834cb6e0 100644 --- a/src/assets/styles/components/banners.css +++ b/src/assets/styles/components/banners.css @@ -1,3 +1,7 @@ +.footnotes + .banner { + margin-top: 0; +} + .banner { margin: var(--sizing-base) 0; padding: var(--sizing-md); @@ -22,35 +26,36 @@ } } - &.old-post { - border-color: var(--gray-light); - } - - &.warning, &.error, - &.npm, &.github, - &.rss { - &.warning { - --border-color: var(--warning); - } - + &.npm, + &.old-post, + &.rss, + &.warning { &.error { --border-color: var(--error); } - &.npm { - --border-color: var(--brand-npm); - } - &.github { --border-color: var(--brand-github); } + &.npm { + --border-color: var(--brand-npm); + } + + &.old-post { + --border-color: var(--gray-light); + } + &.rss { --border-color: var(--brand-rss); } + &.warning { + --border-color: var(--warning); + } + border-color: var(--border-color); & p a:hover, diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css index 68000f96..29bc326c 100644 --- a/src/assets/styles/components/buttons.css +++ b/src/assets/styles/components/buttons.css @@ -1,8 +1,23 @@ +.section-header-buttons { + display: flex; + align-items: center; + gap: var(--sizing-sm); + + & > button { + margin-bottom: 0; + + &:last-of-type { + margin-right: 0; + } + } +} + button { appearance: none; border: none; &:not(.theme-toggle) { + border: 2px solid var(--accent-color); border-radius: var(--rounded-full); padding: var(--sizing-sm) var(--sizing-lg); margin: 0 var(--sizing-xs) var(--sizing-md) 0; @@ -17,7 +32,6 @@ button { color: var(--color-lightest); background-color: var(--accent-color); appearance: none; - border: 2px solid var(--accent-color); transition-property: border; } diff --git a/src/assets/styles/components/text-toggle.css b/src/assets/styles/components/text-toggle.css index 2ff8cbd9..ef7a3c03 100644 --- a/src/assets/styles/components/text-toggle.css +++ b/src/assets/styles/components/text-toggle.css @@ -7,19 +7,19 @@ & p:first-of-type { margin-top: 0; } + + &::after { + position: absolute; + z-index: 1; + content: ''; + top: 0; + left: 0; + box-shadow: inset 0 -120px 50px -60px var(--background-color); + width: 100%; + height: 100%; + } } -[data-toggle-content].text-toggle-hidden::after { - position: absolute; - z-index: 1; - content: ''; - top: 0; - left: 0; - box-shadow: inset 0 -120px 50px -60px var(--background-color); - width: 100%; - height: 100%; -} - -[data-toggle-button] { - margin-bottom: var(--sizing-base) !important; +button[data-toggle-button] { + margin-bottom: var(--sizing-base); } \ No newline at end of file diff --git a/src/assets/styles/components/theme-toggle.css b/src/assets/styles/components/theme-toggle.css index 2f8c7aab..2459c790 100644 --- a/src/assets/styles/components/theme-toggle.css +++ b/src/assets/styles/components/theme-toggle.css @@ -25,8 +25,8 @@ theme-toggle { transform: rotate(8deg); } - & > .light svg { stroke: var(--sun) !important; } - & > .dark svg { stroke: var(--moon) !important; } + & > .light svg { stroke: var(--sun); } + & > .dark svg { stroke: var(--moon); } & > .light , & > .dark { diff --git a/src/assets/styles/components/youtube-video.css b/src/assets/styles/components/youtube-video.css deleted file mode 100644 index 7b3a00ed..00000000 --- a/src/assets/styles/components/youtube-video.css +++ /dev/null @@ -1,3 +0,0 @@ -youtube-video { - margin-bottom: var(--sizing-base); -} \ No newline at end of file diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index f74cd3eb..9ef27649 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -36,5 +36,4 @@ @import url('./components/paginator.css') layer(components); @import url('./components/progress-bar.css') layer(components); @import url('./components/text-toggle.css') layer(components); -@import url('./components/theme-toggle.css') layer(components); -@import url('./components/youtube-video.css') layer(components); \ No newline at end of file +@import url('./components/theme-toggle.css') layer(components); \ No newline at end of file diff --git a/src/assets/styles/pages/books.css b/src/assets/styles/pages/books.css index 93ce139f..c3811a3a 100644 --- a/src/assets/styles/pages/books.css +++ b/src/assets/styles/pages/books.css @@ -1,8 +1,8 @@ .book-entry { display: flex; flex-direction: column; - gap: var(--sizing-sm); align-items: center; + gap: var(--sizing-sm); &:last-of-type { border-bottom: 0; diff --git a/src/assets/styles/pages/post.css b/src/assets/styles/pages/post.css index 729747a4..730a3455 100644 --- a/src/assets/styles/pages/post.css +++ b/src/assets/styles/pages/post.css @@ -1,18 +1,18 @@ -.footnotes-list { - margin-bottom: 0; - padding-left: 0; - - & li:last-child { - margin-bottom: 0; - } -} - .footnotes { padding-bottom: var(--sizing-base); -} -.footnote-item > p { - display: inline; + & .footnotes-list { + margin-bottom: 0; + padding-left: 0; + + & li:last-child { + margin-bottom: 0; + } + + & .footnote-item > p { + display: inline; + } + } } sup.footnote-ref { @@ -22,8 +22,4 @@ sup.footnote-ref { sup.footnote-ref a, .footnote-backref { text-decoration: none; -} - -.footnotes + .banner { - margin-top: 0 !important; } \ No newline at end of file