add: clock movement track

Author: jumpyjacko

public/icons/moon.svg

@@ -1,6 +1,13 @@
 <script lang="ts">
     import { onDestroy, onMount } from "svelte";
     import ThemeToggle from "./ThemeToggle.svelte";
+    import { theme } from "../state/theme.svelte";
+
+    let textColour = $derived(
+        theme.isDark
+            ? "oklch(0.9644 0.0282 74.31)"
+            : "oklch(0.2316 0.0373 288.04)",
+    );
 
     let marker: HTMLDivElement;
 
@@ -44,7 +51,7 @@
     }
 
     function updateMarker() {
-        marker.style.transform = `rotate(${angle}deg)`;
+        marker.style.transform = `translateX(-32px) rotate(${angle}deg)`;
     }
 
     onMount(() => {
@@ -70,16 +77,50 @@
     });
 </script>
 
-<div bind:this={marker} class="clock -top-1">
-    <ThemeToggle />
+<div class="absolute top-0">
+    <svg
+        class="absolute z-[-1] w-auto h-[70vw] -translate-x-1/2 -translate-y-1/2"
+        viewBox="-0 0 100 100"
+    >
+        <circle
+            cx="50"
+            cy="100"
+            r="46"
+            fill="transparent"
+            stroke={textColour}
+            stroke-width="0.5"
+            stroke-dasharray="1,10,1"
+        >
+            <animateTransform
+                attributeName="transform"
+                begin="0s"
+                dur="60s"
+                type="rotate"
+                from="0 50 100"
+                to="360 50 100"
+                repeatCount="indefinite"
+            />
+        </circle>
+        <!-- <circle cx="50" cy="100.5" r="1" fill="magenta" /> -->
+    </svg>
+    <div bind:this={marker} class="clock">
+        <ThemeToggle />
+        <!-- <div -->
+        <!--     class="absolute h-100 bg-blue-500 rounded-full clock-arm" -->
+        <!-- ></div> -->
+    </div>
+    <!-- <div -->
+    <!--     class="absolute w-2 h-2 bg-red-500 rounded-full" -->
+    <!--     style="top: 35vw; left: 50%; transform: translate(-50%, -50%);" -->
+    <!-- ></div> -->
 </div>
 
-
 <style>
     .clock {
         position: absolute;
+        width: max-content;
         transform-origin: center 35vw;
-        transform: rotate(-90deg);
+        transform: translateX(-32px) rotate(-90deg);
         transition: transform 1s ease-in-out;
     }
 </style>

public/icons/sun.svg

@@ -54,10 +54,10 @@
 </script>
 
 <button bind:this={sunButton} onclick={toggleTheme}>
-    <img src="/icons/sun.svg" width="64" alt="Sun" class="hover-expand" />
+    <img src="/icons/sun.svg" alt="Sun" class="hover-expand w-[5vw]" />
 </button>
 <button bind:this={moonButton} onclick={toggleTheme}>
-    <img src="/icons/moon.svg" width="64" alt="Moon" class="hover-expand" />
+    <img src="/icons/moon.svg" width="64" alt="Moon" class="hover-expand w-[5vw]" />
 </button>
 
 <style>