diff --git a/package-lock.json b/package-lock.json index 66d157d5..737d0adf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "coryd.dev", - "version": "19.4.4", + "version": "19.4.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coryd.dev", - "version": "19.4.4", + "version": "19.4.5", "license": "MIT", "dependencies": { "@cdransf/api-text": "^1.4.0", diff --git a/package.json b/package.json index 7237a1a6..6328cd5f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "19.4.4", + "version": "19.4.5", "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 new file mode 100644 index 00000000..a5977c30 --- /dev/null +++ b/src/assets/scripts/text-toggle.js @@ -0,0 +1,24 @@ +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 1b222768..ba8f9346 100644 --- a/src/assets/styles/components/buttons.css +++ b/src/assets/styles/components/buttons.css @@ -1,5 +1,4 @@ -button, -[aria-role="button"] { +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 53c8c0bc..2ff8cbd9 100644 --- a/src/assets/styles/components/text-toggle.css +++ b/src/assets/styles/components/text-toggle.css @@ -1,61 +1,25 @@ -.toggle-wrapper { - display: flex; +[data-toggle-content].text-toggle-hidden { position: relative; - margin-bottom: calc(var(--sizing-base) + 20px); + height: 500px; + overflow: hidden; + margin-bottom: var(--sizing-base); & p:first-of-type { margin-top: 0; } - - & .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); - } - - &.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; - } - - & .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: -20px; - left: 0; - margin-bottom: 0; - } - - & .toggle-label [aria-role="button"]::after { - content: 'Show more'; - } } + +[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; +} \ No newline at end of file diff --git a/src/assets/styles/pages/music.css b/src/assets/styles/pages/music.css index 5c2807ee..a208701a 100644 --- a/src/assets/styles/pages/music.css +++ b/src/assets/styles/pages/music.css @@ -4,8 +4,6 @@ } .artist-focus { - margin-bottom: var(--sizing-base); - & img { border: 1px solid var(--accent-color); width: 100%; diff --git a/src/pages/main/music/artists/artist.html b/src/pages/main/music/artists/artist.html index fa9db091..2487ad72 100644 --- a/src/pages/main/music/artists/artist.html +++ b/src/pages/main/music/artists/artist.html @@ -11,6 +11,11 @@ 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
@@ -51,13 +56,8 @@ 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 bf1a596b..b777e6d6 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