Rewrite to TailwindCSS, enhance the DOM, uninstall Vuetify, improve styles

layouts/Card.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import type { UseSwipeDirection } from '@vueuse/core'
 import { useSwipe } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import { usePageStore } from '~/stores/pages'
 
 const router = useRouter()
 const route = useRoute()
@@ -36,23 +34,34 @@ const swipe = useSwipe(card, {
     }
   },
 })
+
+const animationComplete = ref(false)
+
+onMounted(() => {
+  if (card.value)
+    card.value.addEventListener('animationend', () => {
+      animationComplete.value = true
+    })
+})
 </script>
 
 <template>
   <main
     ref="card"
-    class="dimensions background h-animated overflow-auto flex flex-col gap-3 sm:gap-2 px-4 pt-4 pb-3"
+    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="{
-      'sm:rounded-xl': !reader,
+      'animate__animated-sm animate__delay-1-5s animate__fadeInDown':
+        !animationComplete,
+      'lm:rounded-none sm:rounded-xl sm:mt-8 lm:mt-0 lt:mt-0': !reader,
       '!max-h-full h-full': reader,
     }"
   >
-    <Options />
+    <Settings v-if="animationComplete" />
     <Navigation />
     <slot name="header" />
     <NuxtPage
-      class="scrollbar fade-mask-sm flex-grow overflow-x-hidden overflow-y-auto min-h-full sm:py-4 sm:pe-3"
+      class="sm:fade-mask flex-grow overflow-y-auto h-full sm:py-4 sm:pe-4"
     />
-    <slot name="footer" />
+    <slot v-if="animationComplete" name="footer" />
   </main>
 </template>