Upgrade to Nuxt 3.12, simplify logic

components/animations/NotFound.vue

@@ -48,7 +48,8 @@ onMounted(() => setTimeout(type, 1500))
 <template>
   <section>
     <h3 class="alex">Page not found!</h3>
-    <pre class="pre-wrap">{{ buffer }}<span class="blinker">&#9610;</span></pre>
+    <pre
+      class="whitespace-pre-wrap break-keep">{{ buffer }}<span class="blinker">&#9610;</span></pre>
   </section>
 </template>
 

components/blocks/Logo.vue

@@ -28,36 +28,33 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="d-flex flex-row justify-content-sm-center">
-    <NuxtLink
-      class="no-decoration logo d-flex flex-row align-items-center user-select-none"
-      to="/"
-    >
-      <img
-        class="logo-image"
-        draggable="false"
-        :width="props.width"
-        :height="props.height"
-        :src="props.src"
-        :alt="props.alt"
-      />
-      <div>
-        <h1 class="alex mb-0">{{ props.title }}</h1>
-        <Separator class="m-0" />
-        <p class="mb-0">{{ props.description }}</p>
-      </div>
-    </NuxtLink>
-  </div>
+  <NuxtLink
+    class="flex flex-row items-center text-inherit hover:text-inherit select-none sm:m-auto lg:m-0"
+    to="/"
+  >
+    <img
+      draggable="false"
+      :width="props.width"
+      :height="props.height"
+      :src="props.src"
+      :alt="props.alt"
+    />
+    <div>
+      <h2>{{ props.title }}</h2>
+      <hr class="accent accent-gradient border-0 h-px" />
+      <p>{{ props.description }}</p>
+    </div>
+  </NuxtLink>
 </template>
 
 <style scoped lang="scss">
-.logo {
-  > img.logo-image {
+a {
+  > img {
     transition: ease 0.3s;
   }
 
   &:hover {
-    > img.logo-image {
+    > img {
       transform: scale(105%);
     }
   }

components/blocks/Navigation.vue

@@ -12,7 +12,7 @@ const links = toRaw(pages.value).filter((page) => page.path !== '/')
 
 <template>
   <nav
-    class="d-flex flex-row flex-wrap flex-sm-column flex-lg-row justify-content-around justify-content-sm-start justify-content-lg-between gap-2 gap-lg-3"
+    class="flex flex-row flex-wrap sm:flex-col lg:flex-row justify-around sm:justify-start lg:justify-between gap-2 lg:gap-3"
   >
     <Logo
       :src="logo"
@@ -21,7 +21,7 @@ const links = toRaw(pages.value).filter((page) => page.path !== '/')
       description="official website"
     />
     <ul
-      class="navbar-nav flex-row flex-wrap align-items-center align-items-sm-start align-items-lg-center justify-content-center gap-3 m-2 m-sm-0 mx-lg-2 my-sm-2 my-lg-0"
+      class="flex flex-row flex-wrap items-center sm:items-start lg:items-center justify-center gap-3 m-2 sm:m-0 lg:mx-2 sm:my-2 lg:my-0"
     >
       <li v-for="(page, index) in links" :key="index" class="nav-item">
         <Route

components/blocks/Route.vue

@@ -22,8 +22,8 @@ const props = defineProps({
 
 <template>
   <NuxtLink
-    class="link d-flex flex-row align-items-center gap-2 user-select-none no-decoration"
-    active-class="icon-active px-sm-3"
+    class="flex flex-row items-center gap-2 select-none no-decoration"
+    active-class="icon-active sm:px-3"
     :to="!props.external ? props.path : undefined"
     :href="props.external ? props.path : undefined"
   >

components/blocks/Separator.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  color: {
-    type: String,
-    default: 'white',
-  },
-  height: {
-    type: Number,
-    default: 1,
-  },
-})
-</script>
-
-<template>
-  <hr
-    class="separator radial-gradient border-0"
-    :style="{ height: props.height + 'px' }"
-  />
-</template>

components/content/Card.vue

@@ -22,7 +22,7 @@ const props = defineProps({
 })
 
 let cardIcon = warningIcon
-let color = 'rgba(255 246 147 / 60%)'
+let color = 'rgb(255 246 147 / 60%)'
 
 switch (props.icon) {
   case 'error':
@@ -44,13 +44,13 @@ switch (props.icon) {
 
   case 'checkmark':
     cardIcon = checkIcon
-    color = 'rgba(69 255 255 / 60%)'
+    color = 'rgb(69 255 255 / 60%)'
 
     break
 
   case 'idea':
     cardIcon = ideaIcon
-    color = 'rgba(255 255 255 / 60%)'
+    color = 'rgb(255 255 255 / 60%)'
 
     break
 
@@ -61,9 +61,7 @@ switch (props.icon) {
 </script>
 
 <template>
-  <div
-    class="tilt d-flex flex-row align-items-center gap-2 mb-0 mb-sm-2 mb-md-4"
-  >
+  <div class="tilt flex flex-row items-center gap-2 mb-0 sm:mb-2 md:mb-4">
     <img
       draggable="false"
       :src="cardIcon"
@@ -72,7 +70,7 @@ switch (props.icon) {
     />
     <h3 class="mb-0 nobr">{{ props.title }}</h3>
   </div>
-  <div class="box p-4 rounded-4 mb-4">
+  <div class="box p-4 rounded-xl mb-4">
     <slot />
   </div>
 </template>