Merge pull request #10 from taroj1205/feat/font

Use DM Sans for h2
This commit is contained in:
NOCanoa 2024-11-11 10:03:58 +00:00 committed by GitHub
commit ad5d0c256f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 73 additions and 3 deletions

View file

@ -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>

View file

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