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

components/content/Card.vue

@@ -68,7 +68,7 @@ switch (props.icon) {
       :alt="`Download`"
       class="icon-image"
     />
-    <h3 class="mb-0 nobr">{{ props.title }}</h3>
+    <h3 class="whitespace-nowrap mb-0">{{ props.title }}</h3>
   </div>
   <div class="box p-4 rounded-xl mb-4">
     <slot />

components/content/OgImage.vue

@@ -30,7 +30,7 @@ const props = defineProps({
 })
 
 const sentence = computed(() => {
-  return props.description.split('.')[0] + '...'
+  return props.description.split('.').at(0) + '...'
 })
 </script>
 
@@ -50,9 +50,9 @@ const sentence = computed(() => {
 
     <div class="mb-5 px-5" style="text-shadow: black 1px 1px 10px">
       <h1 class="m-0 text-[60px]">{{ title }}</h1>
-      <strong class="min-h-[90px] m-0 text-[24px]" style="font-family: Lato">{{
-        sentence
-      }}</strong>
+      <strong class="min-h-[90px] m-0 text-[24px]" style="font-family: Lato">
+        {{ sentence }}
+      </strong>
     </div>
   </div>
 </template>