rhi/yummy.cricket
1
0
Fork 0
Code Issues Releases Activity

the voiceover fix broke the cube

Browse source
This commit is contained in:
Rhiannon Morris 2024-09-26 02:21:00 +02:00
parent 25b5314f7e
commit 431e04c82b
2 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
script/run.ts
View file

@ -263,16 +263,17 @@ export function fadeTo(newPane: Pane): void {
const here = pane == newPane; const here = pane == newPane;
const elem = document.getElementById(pane)!; const elem = document.getElementById(pane)!;
if (here) { if (here) {
elem.style.display = 'unset'; elem.dataset.state = 'entering';
setTimeout(() => { setTimeout(() => elem.dataset.state = 'active');
elem.dataset.selected = 'true'; // elem.addEventListener('transitionend',
// () => elem.dataset.state = 'active',
// {once: true});
history.replaceState(null, '🦎', `#${pane}`); history.replaceState(null, '🦎', `#${pane}`);
}); } else if (elem.dataset.state == 'active') {
} else if (elem.dataset.selected == 'true') {
elem.addEventListener('transitionend', elem.addEventListener('transitionend',
() => elem.style.display = 'none', () => elem.dataset.state = 'hidden',
{once: true}); {once: true});
elem.dataset.selected = 'false'; elem.dataset.state = 'leaving';
} }
} }
} }
@ -307,8 +308,7 @@ function setup(): void {
box.checked = true; box.checked = true;
} else { } else {
const elem = document.getElementById(pane)!; const elem = document.getElementById(pane)!;
elem.dataset.selected = 'false'; elem.dataset.state = 'hidden';
elem.style.display = 'none';
} }
} }
} }

14
style/flat.css
View file

@ -98,17 +98,25 @@ body {
transition: background 0.1s ease-in; transition: background 0.1s ease-in;
} }
#cube > section[data-selected=true] { #cube > :is(section[data-state=entering], #a) {
z-index: 1;
opacity: 0;
}
#cube > :is(section[data-state=active], #a) {
z-index: 1; z-index: 1;
opacity: 1; opacity: 1;
transition: opacity 0.1s ease-in; transition: opacity 0.1s ease-in;
} }
#cube > section[data-selected=false] { #cube > :is(section[data-state=leaving], #a) {
z-index: -1; z-index: -1;
opacity: 0; opacity: 0;
transition: opacity 0s 0.1s ease-in; transition: opacity 0s 0.1s ease-in;
} }
/* todo make sure this works ok with screen readers */
#cube > :is(section[data-state=hidden], #a) {
display: none;
}
} }