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" />
%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>

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

@ -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>

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

@ -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);

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

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

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

@ -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;
}
}

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

@ -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>

13
src/routes/+page.svelte
View File

@ -5,17 +5,24 @@
import Maskenball from '$lib/components/maskenball.svelte';
</script>
<div class="background">
<div class="drapery" />
<img class="curtain-right" src="/curtain.png" />
<img class="curtain-left" src="/curtain.png" />
</div>
<Confetti />
<div class="mask-anim">
<Mask />
<Maskenball />
</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;