kaizenkodo/CoBiE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #46 from ok2/codex/reduce-central-point-size-on-big-screens

Browse Source 
Fix clock center size and jitter
This commit is contained in:
Kiyomichi Kosaka 2025-06-15 14:43:23 +02:00 committed by GitHub
commit 979acd4483
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
clock.js
View File

@ -134,14 +134,14 @@
el.removeEventListener('transitionend', handle); el.removeEventListener('transitionend', handle);
// Snap back without animation // Snap back without animation
el.style.transition = 'none'; el.style.transition = 'none';
el.style.transform = `translateX(-50%) rotate(${angle}deg)`; el.style.transform = `translateX(-50%) translateZ(0) rotate(${angle}deg)`;
void el.offsetWidth; void el.offsetWidth;
el.style.transition = ''; el.style.transition = '';
}; };
el.addEventListener('transitionend', handle, { once: true }); el.addEventListener('transitionend', handle, { once: true });
el.style.transform = `translateX(-50%) rotate(${target}deg)`; el.style.transform = `translateX(-50%) translateZ(0) rotate(${target}deg)`;
} else { } else {
el.style.transform = `translateX(-50%) rotate(${angle}deg)`; el.style.transform = `translateX(-50%) translateZ(0) rotate(${angle}deg)`;
} }
lastAngles[id] = angle; lastAngles[id] = angle;

9
style.css
View File

@ -404,7 +404,7 @@
left: 50%; left: 50%;
width: calc(var(--clock-size) * 0.15); width: calc(var(--clock-size) * 0.15);
height: calc(var(--clock-size) * 0.15); height: calc(var(--clock-size) * 0.15);
transform: translate(-50%, -50%); transform: translate(-50%, -50%) translateZ(0);
background: url('logo.svg') center/contain no-repeat; background: url('logo.svg') center/contain no-repeat;
background-color: #ffffff; background-color: #ffffff;
border-radius: 50%; border-radius: 50%;
@ -413,6 +413,13 @@
pointer-events: none; pointer-events: none;
} }
@media screen and (min-width: 1200px) {
.clock-center {
width: calc(var(--clock-size) * 0.105);
height: calc(var(--clock-size) * 0.105);
}
}
.clock-label { .clock-label {
position: absolute; position: absolute;
bottom: 30%; bottom: 30%;