Ryan/drop
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop.git synced 2025-11-20 03:31:13 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: account pages framework & updates to library

Browse Source
This commit is contained in:
DecDuck
2025-04-01 18:28:34 +11:00
parent d7297707d7
commit 17372a9c06
15 changed files with 298 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
pages/library/game/[id]/index.vue
View File

@ -3,13 +3,13 @@
class="mx-auto w-full relative flex flex-col justify-center pt-72 overflow-hidden"
>
<!-- Banner background with gradient overlays -->
<div class="absolute inset-0 z-0">
<div class="absolute inset-0 z-0 rounded-xl overflow-hidden">
<img
:src="useObject(game.mBannerId)"
class="w-full h-[24rem] object-cover blur-sm scale-105"
/>
<div
class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-zinc-900/80 to-transparent opacity-90"
class="absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent opacity-90"
/>
<div
class="absolute inset-0 bg-gradient-to-r from-zinc-900/95 via-zinc-900/80 to-transparent opacity-90"
@ -17,28 +17,28 @@
</div>
<div class="relative z-10">
<div class="px-8 pb-4">
<div class="px-4 sm:px-8pb-4">
<div class="flex items-center gap-x-3 mb-4">
<NuxtLink
to="/library"
class="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" />
Back to Collections
Back to Library
</NuxtLink>
</div>
<!-- Game title and description -->
<h1
class="text-5xl text-zinc-100 font-bold font-display drop-shadow-lg"
class="text-3xl sm:text-5xl text-zinc-100 font-bold font-display drop-shadow-lg"
>
{{ game.mName }}
</h1>
<p class="mt-4 mb-8 text-lg text-zinc-400 max-w-3xl">
<p class="mt-4 mb-8 text-sm sm:text-lg text-zinc-400 max-w-3xl">
{{ game.mShortDescription }}
</p>
<div class="flex flex-col lg:flex-row gap-3">
<div class="flex items-stretch flex-col lg:flex-row gap-3">
<button
type="button"
class="inline-flex items-center justify-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-blue-500/25 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
@ -63,8 +63,8 @@
</div>
<!-- Main content -->
<div class="w-full bg-zinc-900 px-8 py-6">
<div class="mt-8 flex flex-col gap-10">
<div class="w-full bg-zinc-900 px-4 sm:px-8 py-3 sm:py-6">
<div class="mt-8 flex flex-col gap-5 sm:gap-10">
<div class="col-start-1 lg:col-start-2 space-y-6">
<div class="bg-zinc-800/50 rounded-xl p-6 backdrop-blur-sm">
<h2 class="text-xl font-display font-semibold text-zinc-100 mb-4">