small improvements

Author: CarloBu

public/videos/V_YFwPaEEBY.mp4

@@ -1,10 +1,10 @@
 <label
-	class="relative ml-4 inline-flex flex-shrink-0 cursor-pointer items-center"
+	class="relative ml-6 inline-flex flex-shrink-0 cursor-pointer items-center"
 	aria-label="Toggle dark mode"
 >
 	<input type="checkbox" value="" class="peer sr-only" />
 	<div
-		class="h-6 w-11 rounded-full border-2 border-black bg-gray-700 transition duration-300 ease-in-out after:absolute after:left-[4px] after:top-[4px] after:h-4 after:w-4 after:rounded-full after:border-2 after:border-black after:bg-white after:transition-all after:content-[''] hover:bg-pink-200 peer-checked:bg-pink-300 peer-checked:shadow-[2px_2px_0px_rgba(0,0,0,1)] peer-checked:after:translate-x-5"
+		class="transition-preset h-6 w-11 rounded-full border-2 border-black bg-gray-700 after:absolute after:left-[4px] after:top-[4px] after:h-4 after:w-4 after:rounded-full after:border-2 after:border-black after:bg-white after:transition-all after:content-[''] hover:bg-pink-200 peer-checked:bg-pink-300 peer-checked:shadow-[2px_2px_0px_rgba(0,0,0,1)] peer-checked:after:translate-x-5"
 	>
 	</div>
 	<!--<span class="text-md ms-3 font-medium">Dark mode</span>-->

src/components/ColorThemeToggle.astro

@@ -48,7 +48,7 @@ function getBadgeColors(library: string) {
 		tutorials.map((tut) => {
 			return (
 				<div
-					class={`group flex flex-col justify-between overflow-hidden rounded-base border-2 border-black bg-lightBg transition duration-300 ease-in-out hover:shadow-cardLight focus:shadow-cardLight dark:bg-bg ${getBackgroundColors(tut.library)}`}
+					class={`transition-preset group flex flex-col justify-between overflow-hidden rounded-base border-2 border-black bg-lightBg hover:shadow-cardLight focus:shadow-cardLight dark:bg-bg ${getBackgroundColors(tut.library)}`}
 				>
 					<div class="aspect-video overflow-hidden">
 						<video
@@ -82,7 +82,7 @@ function getBadgeColors(library: string) {
 									href={tut.link}
 									target="_blank"
 									rel="noopener noreferrer"
-									class="flex-shrink-0 rounded-base border-2 border-black bg-main px-5 py-2 transition duration-300 ease-in-out hover:bg-pink-300 hover:shadow-buttonLight active:bg-pink-500"
+									class="transition-preset flex-shrink-0 rounded-base border-2 border-black bg-main px-5 py-2 hover:bg-pink-300 hover:shadow-buttonLight active:bg-pink-500"
 								>
 									Watch
 								</a>