max/silvester-23
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: configure fonts

Browse Source
This commit is contained in:
max_richter 2023-10-18 16:04:50 +02:00
parent 7604cb1fe5
commit 481dfaf201
7 changed files with 76 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.html
View File

@ -6,7 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
<script src="https://cdn.jsdelivr.net/npm/tsparticles-confetti@2.12.0/tsparticles.confetti.bundle.min.js"></script> <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"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>

26
src/lib/components/button.svelte
View File

@ -5,10 +5,28 @@
<style> <style>
button { button {
padding: 2em; position: relative;
padding: 0.7em;
background: black; background: black;
color: white; border-radius: 0.4em;
border-radius: 1em; cursor: pointer;
border: solid 2px gold; 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> </style>

6
src/lib/components/confetti.svelte
View File

@ -20,9 +20,9 @@
}, },
colors: ['#d9c556'], colors: ['#d9c556'],
shapes: ['circle'], shapes: ['circle'],
gravity: randomInRange(0.4, 0.6) gravity: randomInRange(0.4, 0.6),
//scalar: randomInRange(0.4, 1), scalar: randomInRange(0.4, 1),
//drift: randomInRange(-0.0, 0.0) drift: randomInRange(-0.0, 0.0)
}); });
requestAnimationFrame(frame); requestAnimationFrame(frame);

2
src/lib/components/mask.css
View File

@ -41,7 +41,7 @@
#mask > path[id='Form 3 copy']{ #mask > path[id='Form 3 copy']{
stroke-dasharray: 96.59; stroke-dasharray: 96.59;
animation: form3copy; animation: form3copy;
stroke-width: 2px stroke-width: 1px
} }
@keyframes form3copy { @keyframes form3copy {

28
src/lib/components/maskenball.css
View File

@ -1,5 +1,6 @@
#maskenball > path[id='m']{ #maskenball > path[id='m']{
stroke-dasharray: 259.07; stroke-dasharray: 259.07;
stroke-dashoffset: 259.07;
animation: m; animation: m;
} }
@ -13,10 +14,14 @@
15% { 15% {
stroke-dashoffset: 0; stroke-dashoffset: 0;
} }
100% {
stroke-dashoffset: 0;
}
} }
#maskenball > path[id='as']{ #maskenball > path[id='as']{
stroke-dasharray: 182.9; stroke-dasharray: 182.9;
stroke-dashoffset: 182.9;
animation: as; animation: as;
} }
@ -30,10 +35,14 @@
60% { 60% {
stroke-dashoffset: 0; stroke-dashoffset: 0;
} }
100% {
stroke-dashoffset: 0;
}
} }
#maskenball > path[id='ken']{ #maskenball > path[id='ken']{
stroke-dasharray: 345.04; stroke-dasharray: 345.04;
stroke-dashoffset: 345.04;
animation: ken; animation: ken;
} }
@ -47,10 +56,14 @@
50% { 50% {
stroke-dashoffset: 0; stroke-dashoffset: 0;
} }
100% {
stroke-dashoffset: 0;
}
} }
#maskenball > path[id='b']{ #maskenball > path[id='b']{
stroke-dasharray: 147.51; stroke-dasharray: 147.51;
stroke-dashoffset: 147.51;
animation: b; animation: b;
} }
@ -64,10 +77,14 @@
50% { 50% {
stroke-dashoffset: 0; stroke-dashoffset: 0;
} }
100% {
stroke-dashoffset: 0;
}
} }
#maskenball > path[id='al']{ #maskenball > path[id='al']{
stroke-dasharray: 207.43; stroke-dasharray: 207.43;
stroke-dashoffset: 207.43;
animation: al; animation: al;
} }
@ -81,10 +98,14 @@
70% { 70% {
stroke-dashoffset: 0; stroke-dashoffset: 0;
} }
100% {
stroke-dashoffset: 0;
}
} }
#maskenball > path[id='l']{ #maskenball > path[id='l']{
stroke-dasharray: 82.09; stroke-dasharray: 82.09;
stroke-dashoffset: 82.09;
animation: l; animation: l;
} }
@ -98,10 +119,14 @@
70% { 70% {
stroke-dashoffset: 0; stroke-dashoffset: 0;
} }
100% {
stroke-dashoffset: 0;
}
} }
#maskenball > path[id='end']{ #maskenball > path[id='end']{
stroke-dasharray: 39.1; stroke-dasharray: 39.1;
stroke-dashoffset: 39.1;
animation: end; animation: end;
} }
@ -115,4 +140,7 @@
70% { 70% {
stroke-dashoffset: 0; stroke-dashoffset: 0;
} }
100% {
stroke-dashoffset: 0;
}
} }

6
src/lib/components/maskenball.svelte
View File

@ -10,7 +10,7 @@
@import './maskenball.css'; @import './maskenball.css';
div { div {
margin-top: 50px; margin-top: 10px;
position: relative; position: relative;
display: flex; display: flex;
z-index: 5; z-index: 5;
@ -22,8 +22,8 @@
div :global(path) { div :global(path) {
animation-duration: 5s !important; animation-duration: 5s !important;
/* animation-delay: 2s !important; */ animation-delay: 2s !important;
animation-fill-mode: forwards; animation-fill-mode: forwards !important;
stroke: #d9c556; stroke: #d9c556;
} }
</style> </style>

13
src/routes/+page.svelte
View File

@ -5,17 +5,24 @@
import Maskenball from '$lib/components/maskenball.svelte'; import Maskenball from '$lib/components/maskenball.svelte';
</script> </script>
<div class="background">
<div class="drapery" /> <div class="drapery" />
<img class="curtain-right" src="/curtain.png" /> <img class="curtain-right" src="/curtain.png" />
<img class="curtain-left" src="/curtain.png" /> <img class="curtain-left" src="/curtain.png" />
</div>
<Confetti /> <Confetti />
<div class="mask-anim">
<Mask /> <Mask />
<Maskenball /> </div>
<!-- <Maskenball /> -->
<div class="center"> <div class="center">
<Button>Eintreten</Button> <Button>Eintreten</Button>
</div> </div>
<style> <style>
.background {
opacity: 0.9;
}
.center { .center {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -23,6 +30,7 @@
} }
.drapery { .drapery {
background-image: url('/drapery.png'); background-image: url('/drapery.png');
background-position: center top;
position: absolute; position: absolute;
top: -50px; top: -50px;
left: 0px; left: 0px;
@ -64,6 +72,9 @@
transform: translateX(15%) rotate(0deg); transform: translateX(15%) rotate(0deg);
} }
} }
.mask-anim {
margin-top: 100px;
}
img.curtain-left { img.curtain-left {
transform: scaleX(-1); transform: scaleX(-1);
position: fixed; position: fixed;