You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.5 KiB
58 lines
1.5 KiB
<script>
|
|
import { page } from "$app/stores";
|
|
import Button from "./Button.svelte";
|
|
console.log($page.url.pathname);
|
|
</script>
|
|
|
|
<header class="relative mt-20 max-w-[1400px] mx-auto dropanim">
|
|
<a href="/">
|
|
<img src="/title.png" class="mb-10 lg:mb-0 mx-auto drop-shadow-2xl grow" alt="header siv kyne" />
|
|
</a>
|
|
{#if $page.url.pathname != "/" && $page.url.pathname != "/calculator" }
|
|
<span href="/calculator" class="hidden xl:block text-s absolute w-full py-6 bottom-0 left-0 right-0 text-center hover:scale-105 transition duration-300 z-50">
|
|
<Button href="/calculator" added_classes="bg-opacity-100 shadow-xl">
|
|
🧮 Check out the new interactive commission picker!
|
|
</Button>
|
|
</span>
|
|
{/if}
|
|
</header>
|
|
|
|
|
|
<style>
|
|
.dropanim {
|
|
animation: dropanim;
|
|
animation-duration: 0.4s;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
@keyframes dropanim {
|
|
0% {
|
|
transform: translateY(-50vh);
|
|
}
|
|
50% {
|
|
transform: translateY(1vh);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.grow {
|
|
animation: grow;
|
|
animation-duration: 2s;
|
|
animation-timing-function: ease-in-out;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
@keyframes grow {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style> |