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

chore: revert to js toggle; better support for all cases

Browse source
This commit is contained in:
Cory Dransfeldt 2024-06-17 14:51:24 -07:00
parent 0e79fbeb01
commit 16b6e2163b
No known key found for this signature in database
8 changed files with 64 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

2
src/assets/styles/pages/music.css
View file

@ -4,8 +4,6 @@
}
.artist-focus {
margin-bottom: var(--sizing-base);
& img {
border: 1px solid var(--accent-color);
width: 100%;