EZPPFarm/EZPPLauncher
2
0
Fork 0
Code Issues 1 Pull Requests Projects 1 Releases 14 Activity

fix logo

Browse Source
This commit is contained in:
HorizonCode 2024-12-12 10:32:37 +01:00
parent e305e6eed9
commit 615a265c89
1 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/lib/components/ui/logo/logo.svelte
View File

@ -1,44 +1,56 @@
<script lang="ts"> <script lang="ts">
import ezppLogo from "../../../../assets/logo.png"; import ezppLogo from "../../../../assets/logo.png";
type logoProps = {
extended: boolean;
onclick: () => void;
};
let { extended, onclick }: logoProps = $props();
</script> </script>
<div class="w-screen pointer-events-none"> <div
class="w-screen {extended
? '-translate-y-2 scale-90'
: 'translate-y-5 scale-125'} transition-transform select-none"
>
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="logo-animation relative w-44 h-44 mx-auto"> <div class="logo-animation relative w-44 h-44 mx-auto cursor-pointer" {onclick}>
<img class="absolute main-logo" src={ezppLogo} alt="logo" />
<img class="absolute pulse-logo" src={ezppLogo} alt="logo-pulse" /> <img class="absolute pulse-logo" src={ezppLogo} alt="logo-pulse" />
<img class="absolute main-logo" src={ezppLogo} alt="logo" />
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.logo-animation { .logo-animation {
.pulse-logo { .pulse-logo {
animation: 0.4s infinite forwards beat-pulse; animation: 0.5s 0.2s infinite forwards beat-pulse;
} }
.main-logo { .main-logo {
animation: 0.4s infinite forwards beat; animation: 0.5s infinite forwards beat;
} }
} }
@keyframes beat { @keyframes beat {
0%, 0%,
100% { 100% {
scale: 1; scale: 1.08;
} }
90% { 90% {
scale: 1.05; scale: 1;
} }
} }
@keyframes beat-pulse { @keyframes beat-pulse {
0%, 0% {
100% { scale: 0.5;
scale: 0.9; opacity: 0.5;
opacity: 0; filter: blur(0px);
} }
85% { 100% {
scale: 1.15; scale: 1.4;
opacity: 0.25; opacity: 0;
filter: blur(2px);
} }
} }
</style> </style>