Fix light theme, fix animation bugs, add programmatic scrolling, improve custom card blog component

layouts/Card.vue

@@ -53,17 +53,18 @@ onMounted(() => {
     class="dimensions accent-background transition-ease overflow-auto flex flex-col gap-4 lm:gap-0 sm:gap-2 py-2 px-6 sm:p-4"
     :class="{
       'animate__animated-sm animate__delay-1-5s animate__fadeInDown':
-        !animationComplete,
+        !reader && !animationComplete,
+      'animate__animated-sm animate__fadeIn': reader && !animationComplete,
       'lm:rounded-none sm:rounded-xl sm:mt-8 lm:mt-0 lt:mt-0': !reader,
       '!max-h-full h-full': reader,
     }"
   >
-    <Settings v-if="animationComplete" />
+    <Settings />
     <Navigation />
     <slot name="header" />
     <NuxtPage
       class="sm:fade-mask flex-grow overflow-y-auto h-full sm:py-4 sm:pe-4"
     />
-    <slot v-if="animationComplete" name="footer" />
+    <slot name="footer" />
   </main>
 </template>