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

Compare commits

base: kaizenkodo/CoBiE:85e59794141019f6bcee560e79457a72d4b28c6f
Branches Tags
kaizenkodo/CoBiE:main
..
compare: kaizenkodo/CoBiE:8789b96ada796d31fb309af117c1ded91114a120
Branches Tags
kaizenkodo/CoBiE:main

7 Commits
85e5979414 .. 8789b96ada

Author SHA1 Message Date
Oleksandr Kozachuk 8789b96ada Fix central point. 2025-06-15 14:50:26 +02:00
Kiyomichi Kosaka d8874f1164 Merge pull request #47 from ok2/codex/remove-white-border-from-clock-center 
Remove border from analog clock center
 2025-06-15 14:45:05 +02:00
Kiyomichi Kosaka fb5cec7837 Remove central clock border 2025-06-15 14:44:53 +02:00
Kiyomichi Kosaka 979acd4483 Merge pull request #46 from ok2/codex/reduce-central-point-size-on-big-screens 
Fix clock center size and jitter
 2025-06-15 14:43:23 +02:00
Kiyomichi Kosaka d7ba0479f4 Reduce center size and fix jitter 2025-06-15 14:43:13 +02:00
Kiyomichi Kosaka 794631dcba Merge pull request #45 from ok2/codex/fix-central-point-movement-and-size-adaptation 
Fix analog clock center dot
 2025-06-15 14:38:11 +02:00
Kiyomichi Kosaka fe8fa11f91 Fix center dot jitter and adjust size 2025-06-15 14:37:53 +02:00
3 changed files with 18 additions and 10 deletions
Expand all files Collapse all files
clock.js
+3 -3
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;
index.html
+1
View File
@@ -31,6 +31,7 @@
<div class="hand chronon" id="handChronon"></div> <div class="hand chronon" id="handChronon"></div>
<div class="hand quantic" id="handQuantic"></div> <div class="hand quantic" id="handQuantic"></div>
<div class="hand xeno" id="handXeno"></div> <div class="hand xeno" id="handXeno"></div>
<div class="clock-center"></div>
<div class="clock-label">CoBiE Time</div> <div class="clock-label">CoBiE Time</div>
</div> </div>
</div> </div>
style.css
+14 -7
View File
@@ -398,19 +398,26 @@
box-shadow: 0 0 25px rgba(0, 255, 255, 0.2), inset 0 0 40px rgba(255, 0, 255, 0.2); box-shadow: 0 0 25px rgba(0, 255, 255, 0.2), inset 0 0 40px rgba(255, 0, 255, 0.2);
} }
#clock::after { .clock-center {
content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 1.2em; width: calc(var(--clock-size) * 0.13);
height: 1.2em; height: calc(var(--clock-size) * 0.13);
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: transparent;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 8px rgba(0, 255, 255, 0.8); /* box-shadow: 0 0 8px rgba(0, 255, 255, 0.8); */
z-index: 2; z-index: 2;
pointer-events: none;
}
@media screen and (min-width: 1200px) {
.clock-center {
width: calc(var(--clock-size) * 0.085);
height: calc(var(--clock-size) * 0.085);
}
} }
.clock-label { .clock-label {