RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

hoverable buttons

This commit is contained in:
JovannMC 2024-12-31 22:07:33 +03:00
parent 4a39b1b696
commit ec8d8900c0
No known key found for this signature in database
4 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app.scss
View File

@ -131,6 +131,18 @@ body {
background-size: 100vw 100vh;
}
.hoverable {
@apply hover:scale-105 duration-200;
}
.hoverable-md {
@apply hover:scale-110 duration-200;
}
.hoverable-lg {
@apply hover:scale-[1.15] duration-200;
}
@layer components {
select {
@apply appearance-none;

2
src/lib/sections/about/Credits.svelte
View File

@ -17,7 +17,7 @@
src={avatar}
alt={name}
title={name}
class="{role ? 'w-14 h-14' : 'w-10 h-10'} rounded-full"
class="{role ? 'w-14 h-14 hoverable-md' : 'w-10 h-10 hoverable-lg'} rounded-full"
/>
</a>
{#if role}

18
src/lib/sections/about/Donate.svelte
View File

@ -16,7 +16,7 @@
src={avatar}
alt={name}
title={name}
class="w-9 h-9 rounded-full"
class="w-9 h-9 rounded-full hoverable-lg"
/>
<p class="text-sm text-black dynadark:text-white px-4">${amount}</p>
</div>
@ -38,31 +38,31 @@
</div>
<div class="flex flex-col gap-3 w-full">
<div class="flex gap-2 w-full">
<div class="flex gap-3 w-full">
<button
class="flex-1 p-4 rounded-lg bg-rose-300 text-black flex items-center justify-center"
class="btn flex-1 p-4 rounded-lg bg-rose-300 text-black flex items-center justify-center"
>
<HandCoinsIcon size="24" class="inline-block mr-2" />
One-time
</button>
<button
class="flex-1 p-4 rounded-lg bg-button text-black dynadark:text-white flex items-center justify-center"
class="btn flex-1 p-4 rounded-lg bg-button text-black dynadark:text-white flex items-center justify-center hoverable"
>
<CalendarHeartIcon size="24" class="inline-block mr-2" />
Monthly
</button>
</div>
<div class="flex gap-3 w-full">
<button class="bg-rose-300 text-black p-4 rounded-lg flex-1"
<button class="bg-rose-300 text-black p-4 rounded-lg flex-1 hoverable-md"
>$1 USD</button
>
<button
class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1 hoverable-md"
>$5 USD</button
>
<button
class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1 hoverable-md"
>$10 USD</button
>
<div class="relative flex items-center flex-[2]">
@ -82,10 +82,10 @@
</p>
<button
class="flex-1 p-3 rounded-3xl bg-rose-300 text-black flex items-center justify-center"
class="flex-1 p-3 rounded-3xl bg-rose-300 text-black flex items-center justify-center hoverable"
>
<WalletIcon size="24" class="inline-block mr-2" />
Pay Now
Pay now
</button>
</div>

4
src/lib/sections/about/Resources.svelte
View File

@ -17,7 +17,7 @@
href="https://discord.gg/kqevGxYPak"
target="_blank"
rel="noopener noreferrer"
class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center hoverable"
>
<MessageCircleMoreIcon size="24" class="inline-block mr-2" />
Discord server
@ -26,7 +26,7 @@
href="https://github.com/not-nullptr/VERT"
target="_blank"
rel="noopener noreferrer"
class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center hoverable"
>
<GithubIcon size="24" class="inline-block mr-2" />
Source code