More blurriness, and stylish

app.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="relative flex flex-col min-h-svh">
+        <header class="w-full sticky top-0 z-50">
+            <Navbar />
+        </header>
+        <main class="flex flex-1 flex-col">
+            <NuxtPage />
+        </main>
+        <Toaster />
+    </div>
+</template>

assets/css/main.css

@@ -0,0 +1,3 @@
+.dark img {
+    filter: brightness(1.1) contrast(0.9);
+}

components/ui/aspect-ratio/AspectRatio.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { AspectRatio, type AspectRatioProps } from 'reka-ui'
+
+const props = defineProps<AspectRatioProps>()
+</script>
+
+<template>
+  <AspectRatio
+    data-slot="aspect-ratio"
+    v-bind="props"
+  >
+    <slot />
+  </AspectRatio>
+</template>

components/ui/aspect-ratio/index.ts

@@ -0,0 +1 @@
+export { default as AspectRatio } from './AspectRatio.vue'

components/ui/navbar/Navbar.vue

@@ -15,7 +15,7 @@
 </script>
 
 <template>
-  <div class="absolute w-screen flex justify-around items-center p-2 border-b-2">
+    <div class="flex justify-around items-center p-2 border-b-2 backdrop-blur">
         <div class="self-start">
             <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight select-none">
                 Anyame
@@ -23,8 +23,10 @@
         </div>
         <div class="self-end">
             <Button variant="outline" @click="toggleColorMode()">
-        <Icon icon="radix-icons:moon" class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                <Icon icon="radix-icons:moon"
-        <Icon icon="radix-icons:sun" class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                    class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                <Icon icon="radix-icons:sun"
+                    class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                 <span class="sr-only">Toggle theme</span>
             </Button>
         </div>

nuxt.config.ts

@@ -8,7 +8,10 @@ export default defineNuxtConfig({
     colorMode: {
         classSuffix: ''
     },
-    css: ['~/assets/css/tailwind.css'],
+    css: [
+        '~/assets/css/tailwind.css',
+        '~/assets/css/main.css',
+    ],
     vite: {
         plugins: [
             tailwindcss(),

pages/index.vue

@@ -12,8 +12,6 @@ import {
     SelectValue
 } from "~/components/ui/select";
 import { toast } from "vue-sonner";
-import { Toaster } from "~/components/ui/sonner";
-import { Navbar } from "~/components/ui/navbar";
 import 'vue-sonner/style.css'
 import { Icon } from "#components";
 
@@ -50,11 +48,7 @@ function querySearch() {
 </script>
 
 <template>
-  <div>
+    <div class="bg-background flex-1 w-screen flex justify-center items-center gap-1">
-    <Toaster />
-    <Navbar />
-
-    <div class="bg-background h-lvh w-screen flex justify-center items-center gap-1">
         <form @submit.prevent="querySearch" class="flex items-center gap-2">
             <Select v-model="searchProvider">
                 <SelectTrigger>
@@ -83,5 +77,4 @@ function querySearch() {
             </Button>
         </form>
     </div>
-  </div>
 </template>

pages/search.vue

@@ -35,11 +35,14 @@ watchEffect(async () => {
             Error loading results: {{ error }}
         </div>
 
-    <div v-if="results.length > 0" class="grid grid-cols-[repeat(auto-fill,32rem)] justify-around gap-8 grid-flow-row">
+        <div v-if="results.length > 0"
-      <div v-for="item in results" :key="item.id" class="flex w-[32rem]">
+            class="grid grid-cols-[repeat(auto-fill,16rem)] justify-around gap-8 grid-flow-row">
-        <NuxtLink :to="`/anime/${item.id}`">
+            <div v-for="item in results" :key="item.id" class="flex w-[16rem]">
-          <img v-if="item.material_data?.anime_poster_url" :src="item.material_data.anime_poster_url" :alt="item.title"
+                <NuxtLink :to="`/anime/${item.id}`" class="w-full">
-            class="rounded-md">
+                    <div v-if="item.material_data?.anime_poster_url" :style="{ 'background-image': 'url('+item.material_data.anime_poster_url+')' }"
+                        :alt="item.title" class="flex items-end justify-end p-2 rounded-md bg-cover bg-center bg-no-repeat h-96">
+                        <Button class="backdrop-blur-none bg-primary/80">2 episodes</Button>
+                    </div>
                     <div>
                         <h3 className="text-2xl font-semibold tracking-tight">{{ item.title }}</h3>
                         <p v-if="item.material_data?.year">Year: {{ item.material_data.year }}</p>