Fix analog positioning

clock.js

@@ -41,13 +41,17 @@
     }
 
     // Position markers based on the current clock size
-    const markerRadius = clock.offsetWidth / 2 - 20;
+    // Move markers slightly inward and tweak the center position so
+    // the ring of ticks lines up perfectly with the border.
+    const borderOffset = clock.offsetWidth > 300 ? 45 : 26;
+    const centerAdjust = { x: -3, y: -2 };
+    const markerRadius = clock.offsetWidth / 2 - borderOffset;
     markers.forEach((m, i) => {
       const angle = (i / 16) * 2 * Math.PI;
       const x = markerRadius * Math.sin(angle);
       const y = -markerRadius * Math.cos(angle);
-      m.style.left = `${clock.offsetWidth / 2 + x}px`;
-      m.style.top = `${clock.offsetHeight / 2 + y}px`;
+      m.style.left = `${clock.offsetWidth / 2 + x + centerAdjust.x}px`;
+      m.style.top = `${clock.offsetHeight / 2 + y + centerAdjust.y}px`;
     });
 
     // Tick lengths based on the marker radius
@@ -65,9 +69,14 @@
       const x = innerR * Math.sin(angle);
       const y = -innerR * Math.cos(angle);
       t.style.height = `${len}px`;
-      t.style.left = `${clock.offsetWidth / 2 + x}px`;
-      t.style.top = `${clock.offsetHeight / 2 + y}px`;
+      t.style.left = `${clock.offsetWidth / 2 + x - t.offsetWidth / 2 + centerAdjust.x}px`;
+      t.style.top = `${clock.offsetHeight / 2 + y + centerAdjust.y}px`;
       t.style.transform = `rotate(${angle}rad)`;
+      if (clock.offsetWidth < 200 && !t.classList.contains('big') && !t.classList.contains('mid')) {
+        t.style.display = 'none';
+      } else {
+        t.style.display = '';
+      }
     });
   }