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

Set marker font size relative to radius

Browse Source
This commit is contained in:
Kiyomichi Kosaka 2025-06-20 00:05:48 +02:00
parent bc39eb3169
commit 3ea7f1e69f
2 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
clock.js
View File

@ -83,9 +83,10 @@
const outerR = baseRadius - 2; // just inside the border
// Distance from center for the marker digits so they sit just inside big ticks
// Distance from center so marker's outer edge sits just inside the big tick
const markerSize = markers[0] ? markers[0].offsetWidth : 0;
const markerRadius = outerR - lenBig - markerSize * getMarkerOffset(clock.offsetWidth);
const inset = baseRadius * 0.001; // 0.1% of the radius
const markerRadius = outerR - lenBig - inset + markerSize / 2;
markers.forEach((m, i) => {
const angle = (i / 16) * 2 * Math.PI;

3
style.css
View File

@ -445,7 +445,8 @@ body.fullscreen-clock .clock-label {
line-height: calc(var(--clock-size) * 0.13);
/* Use a futuristic font for the clock markers */
font-family: 'Orbitron', 'Trebuchet MS', 'Lucida Sans', Arial, sans-serif;
font-size: calc(var(--clock-size) * 0.08);
/* 1% of the clock radius */
font-size: calc(var(--clock-size) * 0.005);
font-weight: 600;
color: #00ffff;
background: none;