Merge pull request #10 from taroj1205/feat/font

Use DM Sans for h2

src/components/color-change.astro

@@ -2,16 +2,77 @@
   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);
   });
+
+  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>

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))`,