add: the theme toggle button transitions again and a buncha bs idk lol

Author: jumpyjacko

src/App.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
-    import ThemeToggle from "./lib/components/ThemeToggle.svelte";
     import MainBird from "./lib/components/MainBird.svelte";
     import Clock from "./lib/components/Clock.svelte";
 </script>
 
-<ThemeToggle />
 <header class="fixed flex flex-row bg-transparent"></header>
 <main class="flex flex-col justify-center items-center">
     <Clock />

src/app.css

@@ -13,7 +13,7 @@
 
 .roll-in, .roll-out {
     animation-duration: 250ms;
-    animation-timing-function: ease-in-out;
+    animation-timing-function: ease-out;
     animation-fill-mode: forwards;
 }
 
@@ -27,7 +27,7 @@
 
 @keyframes roll-in {
     from {
-        transform: translateX(-80px) rotate(-0.25turn);
+        transform: translateX(-40px) rotate(-0.25turn);
     }
     to {
         transform: translateX(0) rotate(0turn);
@@ -39,7 +39,7 @@
         transform: translateX(0) rotate(0turn);
     }
     to {
-        transform: translateX(-80px) rotate(-0.25turn);
+        transform: translateX(-40px) rotate(-0.25turn);
     }
 }
 

src/lib/components/Clock.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { onDestroy, onMount } from "svelte";
+    import ThemeToggle from "./ThemeToggle.svelte";
 
     let marker: HTMLDivElement;
 
@@ -10,7 +11,7 @@
     let angle = $derived.by(() => {
         let a = totalMinutes;
         if (totalMinutes >= 720) a -= 720;
-        return mapRange(a, 0, 720, -75, 75); // NOTE: consider radians
+        return mapRange(a, 0, 720, -85, 85); // NOTE: consider radians
     });
 
     let interval: any;
@@ -43,7 +44,7 @@
     }
 
     function updateMarker() {
-        marker.style.transform = `translateY(-15vh) rotate(${angle}deg)`;
+        marker.style.transform = `rotate(${angle}deg)`;
     }
 
     onMount(() => {
@@ -56,24 +57,29 @@
             );
         }
 
+        [timeHours, timeMinutes] = getTime(hasTemporal);
+        updateMarker();
         interval = setInterval(() => {
             [timeHours, timeMinutes] = getTime(hasTemporal);
             updateMarker();
-        }, 1000);
+        }, 10000);
     });
 
     onDestroy(() => {
         clearInterval(interval);
     });
 </script>
 
-<div bind:this={marker} class="clock">hi</div>
+<div bind:this={marker} class="clock -top-1">
+    <ThemeToggle />
+</div>
+
 
 <style>
-.clock {
-    position: absolute;
-    transform-origin: 50% 35vh;
-    transform: translateY(-15vh) rotate(-90deg);
-    transition: transform 1s ease-in-out;
-}
+    .clock {
+        position: absolute;
+        transform-origin: center 35vw;
+        transform: rotate(-90deg);
+        transition: transform 1s ease-in-out;
+    }
 </style>

src/lib/components/ThemeToggle.svelte

@@ -53,14 +53,14 @@
     }
 </script>
 
-<button bind:this={sunButton} onclick={toggleTheme} class="absolute m-5">
+<button bind:this={sunButton} onclick={toggleTheme}>
     <img src="/icons/sun.svg" width="64" alt="Sun" class="hover-expand" />
 </button>
-<button bind:this={moonButton} onclick={toggleTheme} class="absolute m-5">
+<button bind:this={moonButton} onclick={toggleTheme}>
     <img src="/icons/moon.svg" width="64" alt="Moon" class="hover-expand" />
 </button>
 
 <style>
-    .hover-expand { transition: all 0.5s; }
+    .hover-expand { transition: all 0.5s; transform: rotate(45deg); }
     .hover-expand:hover { scale: 110%; }
 </style>