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; 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 { @layer components {
select { select {
@apply appearance-none; @apply appearance-none;

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

@ -17,7 +17,7 @@
src={avatar} src={avatar}
alt={name} alt={name}
title={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> </a>
{#if role} {#if role}

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

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

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

@ -17,7 +17,7 @@
href="https://discord.gg/kqevGxYPak" href="https://discord.gg/kqevGxYPak"
target="_blank" target="_blank"
rel="noopener noreferrer" 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" /> <MessageCircleMoreIcon size="24" class="inline-block mr-2" />
Discord server Discord server
@ -26,7 +26,7 @@
href="https://github.com/not-nullptr/VERT" href="https://github.com/not-nullptr/VERT"
target="_blank" target="_blank"
rel="noopener noreferrer" 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" /> <GithubIcon size="24" class="inline-block mr-2" />
Source code Source code