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);
// Snap back without animation
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;
el.style.transition = '';
};
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 {
el.style.transform = `translateX(-50%) rotate(${angle}deg)`;
el.style.transform = `translateX(-50%) translateZ(0) rotate(${angle}deg)`;
}
lastAngles[id] = angle;

9
style.css
View File

@ -404,7 +404,7 @@
left: 50%;
width: 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-color: #ffffff;
border-radius: 50%;
@ -413,6 +413,13 @@
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 {
position: absolute;
bottom: 30%;