mirror of
https://github.com/zen-browser/astro-site-test.git
synced 2025-07-07 22:29:59 +02:00
commit
ad5d0c256f
2 changed files with 73 additions and 3 deletions
|
@ -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>
|
||||
|
|
|
@ -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))`,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue