fix(library): Fixed game banner as background, & added hover state

This commit is contained in:
Aden Lindsay
2025-01-28 19:22:29 +10:30
committed by GitHub
parent 6e057afb6d
commit d167780562

View File

@ -2,21 +2,13 @@
<div v-if="game"> <div v-if="game">
<!-- header --> <!-- header -->
<div class="relative"> <div class="relative">
<!-- Banner image -->
<div class="absolute top-0 inset-0 w-full rounded overflow-hidden">
<img
:src="useObject(game.mBannerId)"
class="w-full h-full object-cover blur-sm"
/>
</div>
<!-- Content --> <!-- Content -->
<div class="p-4 relative"> <div class="p-4">
<!-- Back button --> <!-- Back button -->
<div class="flex items-center gap-x-3 mb-4"> <div class="flex items-center gap-x-3 mb-4">
<NuxtLink <NuxtLink
to="/library" to="/library"
class="px-2 py-1 rounded bg-zinc-900 transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center" class="px-2 py-1 rounded bg-zinc-900 transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
> >
<ArrowLeftIcon class="h-4 w-4" aria-hidden="true" /> <ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
Back to Collections Back to Collections
@ -24,7 +16,7 @@
</div> </div>
<div <div
class="flex flex-col lg:flex-row items-center lg:items-start gap-6 w-full lg:w-fit bg-zinc-900 bg-backdrop-blur p-4 rounded-xl" class="flex flex-col lg:flex-row items-center lg:items-start gap-6 w-full lg:w-fit bg-zinc-900 p-4 rounded-xl"
> >
<img <img
:src="useObject(game.mCoverId)" :src="useObject(game.mCoverId)"