changes for v4 tailwind

This commit is contained in:
2025-06-09 23:03:04 -05:00
parent 4a4233ac62
commit 4d9c1a3e8c
11 changed files with 23 additions and 24 deletions

View File

@@ -200,9 +200,9 @@ const currentPath = pathname.slice(1);
// Add shadow on scroll
if (currentScrollY > 10) {
header.classList.add('shadow-sm');
header.classList.add('shadow-xs');
} else {
header.classList.remove('shadow-sm');
header.classList.remove('shadow-xs');
}
// Update last scroll position
@@ -240,6 +240,6 @@ const currentPath = pathname.slice(1);
/* Mobile menu transition */
#mobile-menu {
transition: opacity 0.3s ease;
backdrop-filter: blur(4px);
backdrop-filter: blur-sm(4px);
}
</style>

View File

@@ -94,7 +94,7 @@ const encodedUrl = encodeURIComponent(url);
>
<span
id="copy-tooltip"
class="absolute -top-8 left-1/2 -translate-x-1/2 transform rounded bg-zinc-800 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity duration-300 dark:bg-zinc-700"
class="absolute -top-8 left-1/2 -translate-x-1/2 transform rounded-sm bg-zinc-800 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity duration-300 dark:bg-zinc-700"
>
Copied!
</span>

View File

@@ -5,7 +5,7 @@
<button
id="theme-toggle"
data-theme-toggle
class="group relative touch-manipulation overflow-hidden rounded-full p-1.5 transition-all duration-300 hover:bg-zinc-100 focus:ring-2 focus:ring-zinc-300 focus:outline-none sm:p-2 dark:hover:bg-zinc-800 dark:focus:ring-zinc-700"
class="group relative touch-manipulation overflow-hidden rounded-full p-1.5 transition-all duration-300 hover:bg-zinc-100 focus:ring-2 focus:ring-zinc-300 focus:outline-hidden sm:p-2 dark:hover:bg-zinc-800 dark:focus:ring-zinc-700"
aria-label="Toggle dark mode"
>
<div class="relative z-10 flex h-5 w-5 items-center justify-center">
@@ -274,12 +274,12 @@
}
#theme-toggle:hover .icon-light:not(.dark .icon-light) {
filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.6));
filter: drop-shadow-sm(0 0 2px rgba(251, 191, 36, 0.6));
transform: scale(1.1) rotate(15deg);
}
#theme-toggle:hover .icon-dark:not(:not(.dark) .icon-dark) {
filter: drop-shadow(0 0 2px rgba(129, 140, 248, 0.6));
filter: drop-shadow-sm(0 0 2px rgba(129, 140, 248, 0.6));
transform: scale(1.1) rotate(-15deg);
}
}