From cf5591d1538c9962af655910432d9e7f7f5b3315 Mon Sep 17 00:00:00 2001
From: taroj1205 <taroj1205@gmail.com>
Date: Mon, 11 Nov 2024 22:44:30 +1300
Subject: [PATCH 1/3] feat(color-change): implement draggable theme color
 picker with position persistence

---
 src/components/color-change.astro | 52 ++++++++++++++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/components/color-change.astro b/src/components/color-change.astro
index 3a6fd72..ca9454a 100644
--- a/src/components/color-change.astro
+++ b/src/components/color-change.astro
@@ -2,12 +2,62 @@
   type="color"
   id="themeColor"
   value="#f98175"
-  class="cursor-pointer rounded border-none bg-transparent"
+  class="cursor-move rounded border-none bg-transparent"
   aria-label="Theme color"
 />
 
 <script>
   const colorInput = document.querySelector("#themeColor") as HTMLInputElement;
+  let isDragging = false;
+  let currentX: number;
+  let currentY: number;
+  let initialX: number;
+  let initialY: number;
+
+  // Load saved position from localStorage
+  const savedX = localStorage.getItem("themeColorX");
+  const savedY = localStorage.getItem("themeColorY");
+  if (savedX && savedY) {
+    colorInput.style.left = savedX;
+    colorInput.style.top = savedY;
+  }
+
+  colorInput?.addEventListener("mousedown", (e) => {
+    // Only handle left click
+    if (e.button !== 0) return;
+    isDragging = true;
+    initialX = e.clientX - colorInput.offsetLeft;
+    initialY = e.clientY - colorInput.offsetTop;
+  });
+
+  colorInput?.addEventListener("contextmenu", (e) => {
+    e.preventDefault();
+    // Reset position
+    colorInput.style.removeProperty("left");
+    colorInput.style.removeProperty("top");
+    localStorage.removeItem("themeColorX");
+    localStorage.removeItem("themeColorY");
+  });
+
+  document.addEventListener("mousemove", (e) => {
+    if (!isDragging) return;
+    e.preventDefault();
+
+    currentX = e.clientX - initialX;
+    currentY = e.clientY - initialY;
+
+    colorInput.style.left = `${currentX}px`;
+    colorInput.style.top = `${currentY}px`;
+
+    // Save position to localStorage
+    localStorage.setItem("themeColorX", `${currentX}px`);
+    localStorage.setItem("themeColorY", `${currentY}px`);
+  });
+
+  document.addEventListener("mouseup", () => {
+    isDragging = false;
+  });
+
   colorInput?.addEventListener("input", (e) => {
     const color = (e.target as HTMLInputElement).value;
     document.documentElement.style.setProperty("--primary", color);

From 601ed154dc281affc00565514c0f5b4bc07e0b34 Mon Sep 17 00:00:00 2001
From: taroj1205 <taroj1205@gmail.com>
Date: Mon, 11 Nov 2024 22:52:12 +1300
Subject: [PATCH 2/3] feat(color-change): add input event listener for color
 updates and toggle visibility with Ctrl+C

---
 src/components/color-change.astro | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/color-change.astro b/src/components/color-change.astro
index ca9454a..c2a3293 100644
--- a/src/components/color-change.astro
+++ b/src/components/color-change.astro
@@ -62,6 +62,17 @@
     const color = (e.target as HTMLInputElement).value;
     document.documentElement.style.setProperty("--primary", color);
   });
+
+  colorInput?.addEventListener("input", (e) => {
+    const color = (e.target as HTMLInputElement).value;
+    document.documentElement.style.setProperty("--primary", color);
+  });
+
+  document.addEventListener("keydown", (e) => {
+    if (e.ctrlKey && e.key === "c") {
+      colorInput?.classList.toggle("hidden");
+    }
+  });
 </script>
 
 <style>

From aae44e209f0b54011b24e7ba27c17810744b2229 Mon Sep 17 00:00:00 2001
From: taroj1205 <taroj1205@gmail.com>
Date: Mon, 11 Nov 2024 22:56:06 +1300
Subject: [PATCH 3/3] feat(tailwind): enhance font stack for 'dm' and apply
 font to h2 elements

---
 tailwind.config.cjs | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 7c7ba06..4042b0b 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -48,7 +48,16 @@ module.exports = {
           '"Segoe UI Symbol"',
           '"Noto Color Emoji"',
         ],
-        dm: ["DM Sans"],
+        dm: [
+          "DM Sans",
+          "ui-sans-serif",
+          "system-ui",
+          "sans-serif",
+          '"Apple Color Emoji"',
+          '"Segoe UI Emoji"',
+          '"Segoe UI Symbol"',
+          '"Noto Color Emoji"',
+        ],
       },
       fontSize: {
         "scale-sm": "clamp(1rem, 2vw, 1.5rem)",
@@ -72,7 +81,7 @@ module.exports = {
       addBase({
         h2: {
           fontSize: `clamp(${theme("fontSize.6xl")}, 10vw, calc(${theme("fontSize.6xl")} + 1rem))`,
-          "@apply font-bold text-secondary leading-none": {},
+          "@apply font-bold text-secondary leading-none font-dm": {},
         },
         h3: {
           fontSize: `clamp(${theme("fontSize.4xl")}, 10vw, calc(${theme("fontSize.4xl")} + 1rem))`,