Upgrade to Nuxt 3.12, simplify logic

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>