feat: use .ts instead of .yaml for configurations

src/components/TitleCardNew.astro

@@ -35,6 +35,7 @@ const { remarkPluginFrontmatter } = await entry.render();
            class="transition w-full block font-bold mb-3 text-3xl
         text-black/90 dark:text-white/90
         hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
+        active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
         before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
         before:absolute md:before:top-[35px] before:left-[18px]
         ">
@@ -44,7 +45,7 @@ const { remarkPluginFrontmatter } = await entry.render();
         <!-- metadata -->
         <PostMetadata published={published} tags={tags} categories={categories} class:list={{"mb-4": description, "mb-6": !description}}></PostMetadata>
 
-        <div class="transition text-black/75 dark:text-white/75 mb-4">
+        <div class="transition text-black/75 dark:text-white/75 mb-3.5">
             { description }
         </div>
 
@@ -61,8 +62,8 @@ const { remarkPluginFrontmatter } = await entry.render();
                         "max-h-[20vh] md:max-h-none mx-4 mt-4 md:mx-0 md:mt-0",
                         "md:w-[var(--coverWidth)] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95"
                     ]} >
-        <div class="absolute z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
-        <div class="absolute z-20 w-full h-full flex items-center justify-center ">
+        <div class="absolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
+        <div class="absolute pointer-events-none z-20 w-full h-full flex items-center justify-center ">
             <Icon name="material-symbols:chevron-right-rounded"
                   class="transition opacity-0 group-hover:opacity-100 text-white text-5xl">
             </Icon>