feat: configure fonts
This commit is contained in:
parent
7604cb1fe5
commit
481dfaf201
@ -6,7 +6,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
<script src="https://cdn.jsdelivr.net/npm/tsparticles-confetti@2.12.0/tsparticles.confetti.bundle.min.js"></script>
|
||||
</head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Meow+Script&display=swap" rel="stylesheet"> </head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
|
||||
@ -5,10 +5,28 @@
|
||||
|
||||
<style>
|
||||
button {
|
||||
padding: 2em;
|
||||
position: relative;
|
||||
padding: 0.7em;
|
||||
background: black;
|
||||
color: white;
|
||||
border-radius: 1em;
|
||||
border: solid 2px gold;
|
||||
border-radius: 0.4em;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-family: 'Meow Script', cursive;
|
||||
font-size: 2em;
|
||||
color: #ceba51;
|
||||
}
|
||||
|
||||
button::after {
|
||||
content: '';
|
||||
z-index: -1;
|
||||
--border: 2px;
|
||||
background: linear-gradient(-45deg, #d9c555, #7a5423);
|
||||
border-radius: 13px;
|
||||
position: absolute;
|
||||
width: calc(100% + calc(var(--border) * 2));
|
||||
height: calc(100% + calc(var(--border) * 2));
|
||||
top: calc(var(--border) * -1);
|
||||
left: calc(var(--border) * -1);
|
||||
box-shadow: 0px 0px 40px #c49c684f;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,9 +20,9 @@
|
||||
},
|
||||
colors: ['#d9c556'],
|
||||
shapes: ['circle'],
|
||||
gravity: randomInRange(0.4, 0.6)
|
||||
//scalar: randomInRange(0.4, 1),
|
||||
//drift: randomInRange(-0.0, 0.0)
|
||||
gravity: randomInRange(0.4, 0.6),
|
||||
scalar: randomInRange(0.4, 1),
|
||||
drift: randomInRange(-0.0, 0.0)
|
||||
});
|
||||
|
||||
requestAnimationFrame(frame);
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
#mask > path[id='Form 3 copy']{
|
||||
stroke-dasharray: 96.59;
|
||||
animation: form3copy;
|
||||
stroke-width: 2px
|
||||
stroke-width: 1px
|
||||
}
|
||||
|
||||
@keyframes form3copy {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
#maskenball > path[id='m']{
|
||||
stroke-dasharray: 259.07;
|
||||
stroke-dashoffset: 259.07;
|
||||
animation: m;
|
||||
}
|
||||
|
||||
@ -13,10 +14,14 @@
|
||||
15% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#maskenball > path[id='as']{
|
||||
stroke-dasharray: 182.9;
|
||||
stroke-dashoffset: 182.9;
|
||||
animation: as;
|
||||
}
|
||||
|
||||
@ -30,10 +35,14 @@
|
||||
60% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#maskenball > path[id='ken']{
|
||||
stroke-dasharray: 345.04;
|
||||
stroke-dashoffset: 345.04;
|
||||
animation: ken;
|
||||
}
|
||||
|
||||
@ -47,10 +56,14 @@
|
||||
50% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#maskenball > path[id='b']{
|
||||
stroke-dasharray: 147.51;
|
||||
stroke-dashoffset: 147.51;
|
||||
animation: b;
|
||||
}
|
||||
|
||||
@ -64,10 +77,14 @@
|
||||
50% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#maskenball > path[id='al']{
|
||||
stroke-dasharray: 207.43;
|
||||
stroke-dashoffset: 207.43;
|
||||
animation: al;
|
||||
}
|
||||
|
||||
@ -81,10 +98,14 @@
|
||||
70% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#maskenball > path[id='l']{
|
||||
stroke-dasharray: 82.09;
|
||||
stroke-dashoffset: 82.09;
|
||||
animation: l;
|
||||
}
|
||||
|
||||
@ -98,10 +119,14 @@
|
||||
70% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#maskenball > path[id='end']{
|
||||
stroke-dasharray: 39.1;
|
||||
stroke-dashoffset: 39.1;
|
||||
animation: end;
|
||||
}
|
||||
|
||||
@ -115,4 +140,7 @@
|
||||
70% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
@import './maskenball.css';
|
||||
|
||||
div {
|
||||
margin-top: 50px;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
z-index: 5;
|
||||
@ -22,8 +22,8 @@
|
||||
|
||||
div :global(path) {
|
||||
animation-duration: 5s !important;
|
||||
/* animation-delay: 2s !important; */
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 2s !important;
|
||||
animation-fill-mode: forwards !important;
|
||||
stroke: #d9c556;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,17 +5,24 @@
|
||||
import Maskenball from '$lib/components/maskenball.svelte';
|
||||
</script>
|
||||
|
||||
<div class="drapery" />
|
||||
<img class="curtain-right" src="/curtain.png" />
|
||||
<img class="curtain-left" src="/curtain.png" />
|
||||
<div class="background">
|
||||
<div class="drapery" />
|
||||
<img class="curtain-right" src="/curtain.png" />
|
||||
<img class="curtain-left" src="/curtain.png" />
|
||||
</div>
|
||||
<Confetti />
|
||||
<Mask />
|
||||
<Maskenball />
|
||||
<div class="mask-anim">
|
||||
<Mask />
|
||||
</div>
|
||||
<!-- <Maskenball /> -->
|
||||
<div class="center">
|
||||
<Button>Eintreten</Button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.background {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -23,6 +30,7 @@
|
||||
}
|
||||
.drapery {
|
||||
background-image: url('/drapery.png');
|
||||
background-position: center top;
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: 0px;
|
||||
@ -64,6 +72,9 @@
|
||||
transform: translateX(15%) rotate(0deg);
|
||||
}
|
||||
}
|
||||
.mask-anim {
|
||||
margin-top: 100px;
|
||||
}
|
||||
img.curtain-left {
|
||||
transform: scaleX(-1);
|
||||
position: fixed;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user