Small improvements

clock.js

@@ -9,7 +9,40 @@
     toCobiets
   } = window.Cobie;
 
-  // CoBiE helpers pulled from cobie.js
+  function getMarkerOffset(width) {
+    const points = [
+      { width: 1024, value: 2 },
+      { width: 450, value: 1.3 },
+      { width: 200, value: 0.8 }
+    ];
+  
+    // Sort points by width descending for easier handling
+    points.sort((a, b) => b.width - a.width);
+  
+    for (let i = 0; i < points.length - 1; i++) {
+      const p1 = points[i];
+      const p2 = points[i + 1];
+      if (width <= p1.width && width >= p2.width) {
+        // Linear interpolation
+        const t = (width - p2.width) / (p1.width - p2.width);
+        return p2.value + t * (p1.value - p2.value);
+      }
+    }
+  
+    // Extrapolation for width > max known
+    if (width > points[0].width) {
+      const p1 = points[0];
+      const p2 = points[1];
+      const slope = (p1.value - p2.value) / (p1.width - p2.width);
+      return p1.value + slope * (width - p1.width);
+    }
+  
+    // Extrapolation for width < min known
+    const p1 = points[points.length - 2];
+    const p2 = points[points.length - 1];
+    const slope = (p2.value - p1.value) / (p2.width - p1.width);
+    return p2.value + slope * (width - p2.width);
+  }
 
   function placeMarkers() {
     const clock = document.getElementById('clock');
@@ -53,7 +86,7 @@
 
     // Distance from center for the marker digits so they sit just inside big ticks
     const markerSize = markers[0] ? markers[0].offsetWidth : 0;
-    const markerRadius = outerR - lenBig - markerSize / 2;
+    const markerRadius = outerR - lenBig - markerSize * getMarkerOffset(rect.width);
 
     markers.forEach((m, i) => {
       const angle = (i / 16) * 2 * Math.PI;
@@ -68,7 +101,7 @@
       if (t.classList.contains('big')) len = lenBig;
       else if (t.classList.contains('mid')) len = lenMid;
       const innerR = outerR - len;
-      const angle = (i / 256) * 2 * Math.PI;
+      const angle = ((i + 1) / 256) * 2 * Math.PI;
       t.style.height = `${len}px`;
       t.style.left = '50%';
       t.style.top = '50%';

style.css

@@ -414,11 +414,11 @@
 
 .clock-label {
   position: absolute;
-  bottom: 23%;
+  bottom: 30%;
   left: 50%;
   transform: translateX(-50%);
   font-family: 'Great Vibes', cursive;
-  font-size: calc(var(--clock-size) * 0.08);
+  font-size: calc(var(--clock-size) * 0.06);
   color: #ffaaff;
   text-shadow: 0 0 6px rgba(255, 0, 255, 0.6);
   pointer-events: none;