From 3ea7f1e69fdccaf78788511d51217f18dae76053 Mon Sep 17 00:00:00 2001
From: Kiyomichi Kosaka <ok2@users.noreply.github.com>
Date: Fri, 20 Jun 2025 00:05:48 +0200
Subject: [PATCH] Set marker font size relative to radius

---
 clock.js  | 5 +++--
 style.css | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/clock.js b/clock.js
index 0ad372e..163ac76 100644
--- a/clock.js
+++ b/clock.js
@@ -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;
diff --git a/style.css b/style.css
index 25b64ea..d4539f7 100644
--- a/style.css
+++ b/style.css
@@ -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;