parent
65c972d551
commit
475aa899b7
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,51 @@
|
|||||||
|
<script>
|
||||||
|
import { page } from "$app/stores";
|
||||||
|
console.log($page.url.pathname);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<header class="relative flex flex-col gap-10 max-w-[1400px] mx-auto my-20 dropanim">
|
||||||
|
<img src="/calculator/bannername.png" class="w-3/6 mb-10 lg:mb-0 mx-auto drop-shadow-2xl" alt="header siv kyne" />
|
||||||
|
<h1>
|
||||||
|
<img src="/calculator/banner.png" class="mb-10 lg:mb-0 mx-auto drop-shadow-2xl grow" alt="header siv kyne" />
|
||||||
|
</h1>
|
||||||
|
</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: 4s;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes grow {
|
||||||
|
0% {
|
||||||
|
transform: rotate3d(0, 20, 0, 20deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: rotate3d(0, 20, 0, -20deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate3d(0, 20, 0, 20deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
export const calculatorImages = writable([]);
|
||||||
@ -1,3 +1,5 @@
|
|||||||
<footer>
|
<footer>
|
||||||
<h4 class="text-center py-20 text-sm text-gray-200">copyright {new Date().getFullYear()} -- site made by <a href="https://bartindustries.com/" target="blank" class="hover:underline border-b border-dashed hover:border-b-0">midblep</a> -- art by siv kyne -- bg art by smol-static</h4>
|
<h4 class="text-center py-20 text-sm text-gray-200">
|
||||||
|
copyright {new Date().getFullYear()} -- site made by <a href="https://bartindustries.com/" target="blank" class="hover:underline border-b border-dashed hover:border-b-0">midblep</a> -- art by siv kyne
|
||||||
|
</h4>
|
||||||
</footer>
|
</footer>
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
<script>
|
||||||
|
import CalculatorHeader from "$lib/calculator/CalculatorHeader.svelte";
|
||||||
|
import Footer from "$lib/footer/Footer.svelte";
|
||||||
|
import "../../app.css";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:url" content="https://sivkyne.xyz" />
|
||||||
|
<meta property="og:image" content="https://sivkyne.xyz/pic.png" />
|
||||||
|
<meta name="theme-color" content="rgb(244 63 94)">
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<main class="bg-black text-white relative w-screen">
|
||||||
|
<div class="absolute inset-0 w-full h-full bg-cover bg-fixed bg-bottom" style="background-image: url('/commissions/complex1.jpg')"></div>
|
||||||
|
<div class="absolute inset-0 h-[800px] bg-gradient-to-tr from-[#4d9937] via-[#57a940]"></div>
|
||||||
|
<div class="absolute inset-0 z-0 overflow-y-hidden mt-60">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
||||||
|
<path fill="rgb(244 63 94)" fill-opacity="1" d="M0,0L80,37.3C160,75,320,149,480,181.3C640,213,800,203,960,170.7C1120,139,1280,85,1360,58.7L1440,32L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
|
||||||
|
</svg>
|
||||||
|
<div class="bg-gradient-to-b from-rose-500 via-pink-800 to-slate-900 -mt-1 z-10 h-screen"></div>
|
||||||
|
<div class="bg-slate-900 h-full">
|
||||||
|
<div style="background-image: url('/bg3.png')" class="h-full bg-cover bg-opacity-1 blur-xl"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<article class="px-3 lg:px-0 py-0 flex flex-col gap-10 h-full">
|
||||||
|
<div class="flex flex-col justify-start gap-10 min-h-screen z-50">
|
||||||
|
<CalculatorHeader/>
|
||||||
|
<span class="loadanim">
|
||||||
|
<slot />
|
||||||
|
<Footer />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.loadanim {
|
||||||
|
animation: loadanim;
|
||||||
|
animation-duration: 0.4s;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loadanim {
|
||||||
|
0% {
|
||||||
|
transform: translateY(50vh);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-1vh);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<script>
|
||||||
|
import words from "$lib/en-lang.json";
|
||||||
|
import Calculator from "$lib/calculator/Calculator.svelte";
|
||||||
|
import Button from "$lib/header/Button.svelte";
|
||||||
|
|
||||||
|
let lang = words["calculator"];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<meta property="og:title" content={lang["title"] + " || Siv Kyne"} />
|
||||||
|
<meta property="og:description" content={lang["description"]} />
|
||||||
|
<title>{lang["title"]} || Siv Kyne</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<main class="flex flex-col gap-5">
|
||||||
|
<Calculator/>
|
||||||
|
</main>
|
||||||
|
After Width: | Height: | Size: 487 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 76 KiB |
Loading…
Reference in new issue