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>

components/ui/Icon.vue

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import type { IconifyRenderMode } from 'iconify-icon'
-import type { PropType } from 'vue'
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  color: {
-    type: String,
-    default: 'white',
-  },
-  mode: {
-    type: String as PropType<IconifyRenderMode>,
-    default: 'svg',
-  },
-  inline: {
-    type: Boolean,
-    default: false,
-  },
-  width: {
-    type: String,
-    default: '1em',
-  },
-  height: {
-    type: String,
-    default: '1em',
-  },
-  flip: {
-    type: String,
-    default: '',
-  },
-  rotate: {
-    type: [String, Number],
-    default: '',
-  },
-})
-</script>
-
-<template>
-  <iconify-icon
-    class="icon"
-    :icon="props.name"
-    :mode="props.mode"
-    :inline="props.inline"
-    :width="props.width"
-    :height="props.height"
-    :flip="props.flip"
-    :rotate="props.rotate"
-  />
-</template>
-
-<style scoped lang="scss">
-.icon {
-  color: v-bind(color);
-}
-</style>