Converted last px to tailwind breakpoints

This commit is contained in:
2024-07-21 18:46:13 +02:00
parent fe018528df
commit 71c046a087
4 changed files with 30 additions and 30 deletions

View File

@ -3,10 +3,10 @@
<div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full z-10 pointer-events-none"></div>
<div class="z-20 w-full h-dvh flex items-center justify-between flex-col relative">
<div class="filler"></div>
<h1 class="mt-[115px] text-center text-6xl">NEW QUEST</h1>
<h1 class="mt-28 text-center text-6xl">NEW QUEST</h1>
<form @submit.prevent="loginFunc">
<div class="my-[80px] mx-0 w-full flex flex-col gap-[24px]">
<div class="w-full grid gap-[15px]">
<div class="my-20 mx-0 w-full flex flex-col gap-6">
<div class="w-full grid gap-4">
<div class="flex flex-col bg-white/50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
<label class="text-black bg-white/50 p-1 text-sm rounded-t-[3px]" for="username">Username</label>
<input class="p-1 text-sm focus-visible:outline-none" id="username" v-model="username" type="text" name="username" required autofocus />
@ -16,10 +16,10 @@
<input class="p-1 text-sm focus-visible:outline-none" id="password" v-model="password" type="password" name="password" required />
</div>
</div>
<div class="flex justify-center sm:gap-[15px] gap-[8px]">
<button class="btn-cyan py-2 px-0 min-w-[100px]" type="submit"><span class="m-auto">PLAY</span></button>
<button class="btn-cyan py-2 px-0 min-w-[100px]" type="button" @click.prevent="registerFunc"><span class="m-auto">REGISTER</span></button>
<button class="btn-cyan py-2 px-0 min-w-[100px]"><span class="m-auto">CREDITS</span></button>
<div class="flex justify-center sm:gap-4 gap-2">
<button class="btn-cyan py-2 px-0 min-w-24" type="submit"><span class="m-auto">PLAY</span></button>
<button class="btn-cyan py-2 px-0 min-w-24" type="button" @click.prevent="registerFunc"><span class="m-auto">REGISTER</span></button>
<button class="btn-cyan py-2 px-0 min-w-24"><span class="m-auto">CREDITS</span></button>
</div>
</div>
</form>