update and migrate to talwind 4

src/app.css

@@ -1,43 +1,12 @@
+@import "tailwindcss";
+@import "@catppuccin/tailwindcss/mocha.css";
+
 @font-face {
   font-family: Stray;
   font-display: swap;
   src: url("/stray.woff2") format("woff2");
 }
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-* { @apply transition-all duration-300 ease-in-out; }
-html { @apply h-full scroll-smooth; }
-body { @apply bg-ctp-crust text-ctp-text h-full; }
-h1 { @apply text-3xl md:text-4xl font-semibold my-4; }
-h2 { @apply text-2xl md:text-3xl font-bold my-4; }
-h3 { @apply text-xl md:text-2xl font-bold my-4; }
-h4 { @apply text-lg md:text-xl font-bold my-4; }
-h5 { @apply text-base md:text-lg font-bold my-4; }
-h6 { @apply text-sm md:text-base font-bold my-4; }
-a { @apply text-ctp-sapphire hover:text-ctp-sky no-underline; }
-article { @apply p-2 sm:p-4 text-ctp-subtext0; }
-p { @apply my-4 text-sm sm:text-base; }
-code { @apply bg-ctp-overlay0 p-0.5 rounded-md; }
-pre { @apply bg-ctp-overlay0 p-4 rounded-md my-4 overflow-x-auto; }
-blockquote { @apply bg-ctp-overlay0 p-4; }
-hr { @apply my-4 border-ctp-overlay1; }
-ul { @apply list-disc ml-6; }
-ol { @apply list-decimal ml-6; }
-header { @apply flex flex-col justify-between items-center gap-4; }
-nav { @apply flex gap-4; }
-img { @apply object-cover object-center; }
-form { @apply my-4 flex flex-col justify-center items-start; }
-input { @apply m-1 py-1 px-2 w-full border bg-ctp-overlay1 text-ctp-subtext1; }
-button { @apply m-1 py-1 px-2 w-full text-base; }
-footer { @apply my-4 text-center; }
-table { @apply w-full my-4; }
-thead { @apply bg-ctp-overlay0; }
-tbody { @apply bg-ctp-base text-ctp-subtext0; }
-tr, th, td { @apply p-1 border border-ctp-overlay1; }
-
 @theme {
   --animate-marquee: marquee 15s linear infinite;
   --animate-marquee2: marquee2 15s linear infinite;
@@ -49,4 +18,36 @@ tr, th, td { @apply p-1 border border-ctp-overlay1; }
     0% { transform: translateX(100%); }
     100% { transform: translateX(0%); }
   }
+}
+
+@layer base {
+  * { @apply transition-all duration-300 ease-in-out; }
+  html { @apply h-full scroll-smooth; }
+  body { @apply bg-ctp-crust text-ctp-text h-full; }
+  h1 { @apply text-3xl md:text-4xl font-semibold my-4; }
+  h2 { @apply text-2xl md:text-3xl font-bold my-4; }
+  h3 { @apply text-xl md:text-2xl font-bold my-4; }
+  h4 { @apply text-lg md:text-xl font-bold my-4; }
+  h5 { @apply text-base md:text-lg font-bold my-4; }
+  h6 { @apply text-sm md:text-base font-bold my-4; }
+  a { @apply text-ctp-sapphire hover:text-ctp-sky no-underline; }
+  article { @apply p-2 sm:p-4 text-ctp-subtext0; }
+  p { @apply my-4 text-sm sm:text-base; }
+  code { @apply bg-ctp-overlay0 p-0.5 rounded-md; }
+  pre { @apply bg-ctp-overlay0 p-4 rounded-md my-4 overflow-x-auto; }
+  blockquote { @apply bg-ctp-overlay0 p-4; }
+  hr { @apply my-4 border-ctp-overlay1; }
+  ul { @apply list-disc ml-6; }
+  ol { @apply list-decimal ml-6; }
+  header { @apply flex flex-col justify-between items-center gap-4; }
+  nav { @apply flex gap-4; }
+  img { @apply object-cover object-center; }
+  form { @apply my-4 flex flex-col justify-center items-start; }
+  input { @apply m-1 py-1 px-2 w-full border bg-ctp-overlay1 text-ctp-subtext1; }
+  button { @apply m-1 py-1 px-2 w-full text-base; }
+  footer { @apply my-4 text-center; }
+  table { @apply w-full my-4; }
+  thead { @apply bg-ctp-overlay0; }
+  tbody { @apply bg-ctp-base text-ctp-subtext0; }
+  tr, th, td { @apply p-1 border border-ctp-overlay1; }
 }

src/routes/+page.svelte

@@ -96,21 +96,21 @@
 <div class="fixed top-0 left-0 w-full h-full overflow-hidden flex justify-center items-center select-none" transition:blur={{
     duration: 1000, easing: cubicOut,
 }}>
-    <div class="font-[Stray,_monospace] group whitespace-nowrap text-center text-5xl my-4 cursor-default -rotate-6 leading-10 text-ctp-overlay1 hover:text-ctp-base">
+    <div class="font-[Stray,monospace] group whitespace-nowrap text-center text-5xl my-4 cursor-default -rotate-6 leading-10 text-ctp-overlay1 hover:text-ctp-base">
         <div class="inline-flex relative overflow-hidden">
-            <span class="[animation:marquee_10s_linear_infinite] whitespace-nowrap">
+            <span class="animate-[marquee_10s_linear_infinite] whitespace-nowrap">
                 {randomStr(charAmount)}
             </span>
-            <span class="absolute top-0 [animation:marquee2_10s_linear_infinite] whitespace-nowrap">
+            <span class="absolute top-0 animate-[marquee2_10s_linear_infinite] whitespace-nowrap">
                 {randomStr(charAmount)}
             </span>
         </div><br>
         <span class="block">{randomStr(Math.round(charAmount-data.name.length/2))}<a href="https://git.satr14.my.id/satr14/5th-site-expanded" target="_blank" class="group-hover:px-8 no-underline text-ctp-subtext1 group-hover:text-ctp-text">{data.name.toUpperCase()}</a>{randomStr(Math.round(charAmount-data.name.length/2))}</span>
         <div class="inline-flex relative overflow-hidden">
-            <span class="[animation:marquee_10s_linear_infinite_reverse] whitespace-nowrap">
+            <span class="animate-[marquee_10s_linear_infinite_reverse] whitespace-nowrap">
                 {randomStr(charAmount)}
             </span>
-            <span class="absolute top-0 [animation:marquee2_10s_linear_infinite_reverse] whitespace-nowrap">
+            <span class="absolute top-0 animate-[marquee2_10s_linear_infinite_reverse] whitespace-nowrap">
                 {randomStr(charAmount)}
             </span>
         </div><br>