Clean up styles, fix and improve the blog post card layout

components/animations/AClientOnly.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-
-type ModeOptions = 'in-out' | 'out-in' | 'default' | undefined
-
-const props = defineProps({
-  fallback: {
-    type: String,
-    default: '',
-  },
-  appear: {
-    type: Boolean,
-    default: false,
-  },
-  mode: {
-    type: String as PropType<ModeOptions>,
-    default: 'out-in',
-  },
-  enter: {
-    type: String,
-    default: 'animate__fadeIn',
-  },
-  leave: {
-    type: String,
-    default: 'animate__fadeOut',
-  },
-})
-</script>
-
-<template>
-  <ClientOnly>
-    <template #fallback>{{ props.fallback }}</template>
-
-    <Transition
-      :appear="props.appear"
-      :mode="props.mode"
-      :enter-active-class="`animate__animated ${props.enter}`"
-      :leave-active-class="`animate__animated ${props.leave}`"
-    >
-      <slot />
-    </Transition>
-  </ClientOnly>
-</template>