From 6acd3f31fce8b117b9c4af6acc56d4076ab358e3 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 17 Jun 2024 12:14:24 -0700 Subject: [PATCH] feat: css toggles; drop js --- _redirects | 1 + package.json | 2 +- src/assets/scripts/text-toggle.js | 24 ------ src/assets/styles/components/buttons.css | 3 +- src/assets/styles/components/text-toggle.css | 77 +++++++++++++++----- src/pages/main/music/artists/artist.html | 14 ++-- src/pages/main/music/genre.html | 20 ++--- 7 files changed, 80 insertions(+), 61 deletions(-) delete mode 100644 src/assets/scripts/text-toggle.js diff --git a/_redirects b/_redirects index 81786bc5..8d74260b 100644 --- a/_redirects +++ b/_redirects @@ -38,6 +38,7 @@ /posts/2024/handling-images-with-b2-netlify-image-cdn-hazel-mountain-duck/ /posts/2024/handling-images-with-b2-netlifys-image-cdn-hazel-and-mountain-duck/ 301 /posts/2023/my-default-apps-2023-edition/ /uses 301 /posts/2024/link-blogging-using-readwise/ /posts/2024/link-blogging-using-readwise-reader/ 301 +/2022/12/automating-email-cleanup-in-gmail /posts/2022/automating-email-cleanup-in-gmail/ 301 # music /music/artists/hyperdontia-denmark-turkiye /music/artists/hyperdontia-denmark-tuerkiye 301 diff --git a/package.json b/package.json index 867777cf..129fb874 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "19.3.23", + "version": "19.4.0", "description": "The source for my personal site. Built using 11ty.", "type": "module", "scripts": { diff --git a/src/assets/scripts/text-toggle.js b/src/assets/scripts/text-toggle.js deleted file mode 100644 index a5977c30..00000000 --- a/src/assets/scripts/text-toggle.js +++ /dev/null @@ -1,24 +0,0 @@ -window.onload = () => { - const button = document.querySelector('[data-toggle-button]') - const content = document.querySelector('[data-toggle-content]') - const text = document.querySelectorAll('[data-toggle-content] p') - const minHeight = 500 // this needs to match the height set on [data-toggle-content].text-toggle-hidden in text-toggle.css - let interiorHeight = 0 - - text.forEach(node => interiorHeight += node.scrollHeight) - - if (interiorHeight < minHeight) { - content.classList.remove('text-toggle-hidden') - button.style.display = 'none' - } - - button.addEventListener('click', () => { - if (content.classList.contains('text-toggle-hidden')) { - content.classList.remove('text-toggle-hidden') - button.textContent = 'Show less' - } else { - content.classList.add('text-toggle-hidden') - button.textContent = 'Show more' - } - }); -} \ No newline at end of file diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css index ba8f9346..1b222768 100644 --- a/src/assets/styles/components/buttons.css +++ b/src/assets/styles/components/buttons.css @@ -1,4 +1,5 @@ -button { +button, +[aria-role="button"] { &:not(.theme-toggle) { border-radius: var(--rounded-full); padding: var(--sizing-sm) var(--sizing-lg); diff --git a/src/assets/styles/components/text-toggle.css b/src/assets/styles/components/text-toggle.css index 9d958075..91b8bf3a 100644 --- a/src/assets/styles/components/text-toggle.css +++ b/src/assets/styles/components/text-toggle.css @@ -1,21 +1,62 @@ -[data-toggle-content].text-toggle-hidden { +.toggle-wrapper { position: relative; - height: 500px; - overflow: hidden; - margin-bottom: var(--sizing-base); -} + margin-bottom: calc(var(--sizing-base) + 52px); -[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%; -} + & p:first-of-type { + margin-top: 0; + } -[data-toggle-button] { - margin-bottom: var(--sizing-base) !important; -} \ No newline at end of file + & .toggle-checkbox { + display: none; + } + + & .toggle-label { + display: inline-block; + } + + & [data-toggle-content] { + &.text-toggle-hidden { + position: relative; + height: 500px; + overflow: hidden; + margin-bottom: var(--sizing-base); + transition: height 0.5s ease-out; + } + + &.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%; + } + } + + & .toggle-checkbox:checked ~ [data-toggle-content] { + height: auto; + transition: height 0.5s ease-in; + } + + & .toggle-checkbox:checked ~ [data-toggle-content]::after { + box-shadow: none; + } + + & .toggle-checkbox:checked + .toggle-label [aria-role="button"]::after { + content: 'Show less'; + } + + & .toggle-label [aria-role="button"] { + position: absolute; + z-index: 2; + bottom: -52px; + left: 0; + margin-bottom: 0; + } + + & .toggle-label [aria-role="button"]::after { + content: 'Show more'; + } +} diff --git a/src/pages/main/music/artists/artist.html b/src/pages/main/music/artists/artist.html index 2487ad72..fa9db091 100644 --- a/src/pages/main/music/artists/artist.html +++ b/src/pages/main/music/artists/artist.html @@ -11,11 +11,6 @@ schema: artist {%- capture alt -%} {{ artist.name_string }} / {{ artist.country }} {%- endcapture -%} -{% capture js %} - {% render "../../../../assets/scripts/text-toggle.js" %} -{% endcapture %} - - {% tablericon "arrow-left" "Go back to the music index page" %} Back to music
@@ -56,8 +51,13 @@ schema: artist
{%- if artist.description -%} -
{{ artist.description | markdown }}
- +
+ + +
{{ artist.description | markdown }}
+
{%- endif -%} diff --git a/src/pages/main/music/genre.html b/src/pages/main/music/genre.html index b777e6d6..bf1a596b 100644 --- a/src/pages/main/music/genre.html +++ b/src/pages/main/music/genre.html @@ -16,22 +16,22 @@ schema: genre is {% endif %} {%- endcapture -%} -{% capture js %} - {% render "../../../assets/scripts/text-toggle.js" %} -{% endcapture %} - -{% tablericon "arrow-left" "Go back to the music index page" %} Back to music

{{ genre.name }}

My top {{ genre.name }} artists {{ connectingWord }} {{ genre.artists | sortByPlaysDescending: "total_plays" | mediaLinks: "artist", 5 }}. I've listened to {{ genre.total_plays | formatNumber }} tracks form this genre.

{%- if genre.description -%} -
- {{ genre.description | markdown }} -

Continue reading at Wikipedia.

-

Wikipedia content provided under the terms of the Creative Commons BY-SA license

+
+ + +
+ {{ genre.description | markdown }} +

Continue reading at Wikipedia.

+

Wikipedia content provided under the terms of the Creative Commons BY-SA license

+
- {%- endif -%}
\ No newline at end of file