cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: css toggles; drop js

Browse source
This commit is contained in:
Cory Dransfeldt 2024-06-17 12:14:24 -07:00
parent d792ac5ae8
commit 6acd3f31fc
No known key found for this signature in database
7 changed files with 80 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
_redirects
View file

@ -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

2
package.json
View file

@ -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": {

24
src/assets/scripts/text-toggle.js
View file

@ -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'
}
});
}

3
src/assets/styles/components/buttons.css
View file

@ -1,4 +1,5 @@
button {
button,
[aria-role="button"] {
&:not(.theme-toggle) {
border-radius: var(--rounded-full);
padding: var(--sizing-sm) var(--sizing-lg);

75
src/assets/styles/components/text-toggle.css
View file

@ -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;
& .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';
}
}

14
src/pages/main/music/artists/artist.html
View file

@ -11,11 +11,6 @@ schema: artist
{%- capture alt -%}
{{ artist.name_string }} / {{ artist.country }}
{%- endcapture -%}
{% capture js %}
{% render "../../../../assets/scripts/text-toggle.js" %}
{% endcapture %}
<script>{{ js }}</script>
<noscript><style>[data-toggle-content].text-toggle-hidden {height: unset !important;overflow: unset !important;margin-bottom: unset !important;}[data-toggle-content].text-toggle-hidden::after {display: none !important;}</style></noscript>
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
<article class="artist-focus">
<div class="artist-display">
@ -56,8 +51,13 @@ schema: artist
</div>
</div>
{%- if artist.description -%}
<div data-toggle-content class="text-toggle-hidden">{{ artist.description | markdown }}</div>
<button data-toggle-button>Show more</button>
<div class="toggle-wrapper">
<input id="toggle-checkbox" class="toggle-checkbox" type="checkbox">
<label class="toggle-label" for="toggle-checkbox">
<div aria-role="button"></div>
</label>
<div data-toggle-content class="text-toggle-hidden">{{ artist.description | markdown }}</div>
</div>
{%- endif -%}
<table>
<tr>

20
src/pages/main/music/genre.html
View file

@ -16,22 +16,22 @@ schema: genre
is
{% endif %}
{%- endcapture -%}
{% capture js %}
{% render "../../../assets/scripts/text-toggle.js" %}
{% endcapture %}
<script>{{ js }}</script>
<noscript><style>[data-toggle-content].text-toggle-hidden {height: unset !important;overflow: unset !important;margin-bottom: unset !important;}[data-toggle-content].text-toggle-hidden::after {display: none !important;}</style></noscript>
<a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
<h2 class="page-header">{{ genre.name }}</h2>
<article class="genre-focus">
<p>My top <strong class="highlight-text">{{ genre.name }}</strong> artists {{ connectingWord }} {{ genre.artists | sortByPlaysDescending: "total_plays" | mediaLinks: "artist", 5 }}. I've listened to <strong class="highlight-text">{{ genre.total_plays | formatNumber }}</strong> tracks form this genre.</p>
<hr />
{%- if genre.description -%}
<div data-toggle-content class="text-toggle-hidden">
{{ genre.description | markdown }}
<p><a href="{{ genre.wiki_link }}">Continue reading at Wikipedia.</a></p>
<p class="text-small"><em>Wikipedia content provided under the terms of the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons BY-SA license</a></em></p>
<div class="toggle-wrapper">
<input id="toggle-checkbox" class="toggle-checkbox" type="checkbox">
<label class="toggle-label" for="toggle-checkbox">
<div aria-role="button"></div>
</label>
<div data-toggle-content class="text-toggle-hidden">
{{ genre.description | markdown }}
<p><a href="{{ genre.wiki_link }}">Continue reading at Wikipedia.</a></p>
<p class="text-small"><em>Wikipedia content provided under the terms of the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons BY-SA license</a></em></p>
</div>
</div>
<button data-toggle-button>Show more</button>
{%- endif -%}
</article>