feat: apply hover reactive container where useful

components/pages/posts/navigation/search/Search.vue

@@ -16,9 +16,7 @@
         <!-- Content -->
         <form class="flex flex-col w-full h-full gap-4 max-h-3/4">
           <!-- Search bar -->
-          <div
-            class="flex flex-row h-auto p-2 rounded-lg shadow bg-elevation border-util"
-          >
+          <div class="flex flex-row h-auto p-2 material-container">
             <!-- Search Icon -->
             <SearchIcon class="w-6 h-6 icon" />
 
@@ -75,9 +73,7 @@
           </div>
 
           <!-- Search results -->
-          <div
-            class="flex flex-col h-full gap-2 p-2 rounded-lg shadow bg-elevation border-util"
-          >
+          <div class="flex flex-col h-full gap-2 p-2 material-container">
             <!-- If nothing searched -->
             <template v-if="!search.data && !getTags.length">
               <h1

components/pages/posts/navigation/search/SearchTagCollections.vue

@@ -13,9 +13,7 @@
       @click.self.stop="toggleTagCollections"
     >
       <!-- Content -->
-      <menu
-        class="flex flex-col w-full h-full p-4 m-0 rounded-lg shadow bg-elevation border-util"
-      >
+      <menu class="flex flex-col w-full h-full p-4 m-0 material-container">
         <!-- Title -->
         <header
           class="text-xl font-semibold tracking-wide text-center text-gradient-one"

pages/about.vue

@@ -2,9 +2,7 @@
   <div
     class="container relative flex flex-col items-center justify-center min-h-screen px-4 mx-auto sm:px-6 lg:px-8"
   >
-    <main
-      class="p-5 rounded-lg shadow-md w-max-content bg-elevation border-util"
-    >
+    <main class="p-5 shadow-md w-max-content material-container">
       <picture>
         <source srcset="~/assets/img/brand/akbal.webp" type="image/webp" />