From 481dfaf2017434084148b96b0359fa8a89dbd54b Mon Sep 17 00:00:00 2001 From: Max Richter Date: Wed, 18 Oct 2023 16:04:50 +0200 Subject: [PATCH] feat: configure fonts --- src/app.html | 4 +++- src/lib/components/button.svelte | 26 ++++++++++++++++++++++---- src/lib/components/confetti.svelte | 6 +++--- src/lib/components/mask.css | 2 +- src/lib/components/maskenball.css | 28 ++++++++++++++++++++++++++++ src/lib/components/maskenball.svelte | 6 +++--- src/routes/+page.svelte | 21 ++++++++++++++++----- 7 files changed, 76 insertions(+), 17 deletions(-) diff --git a/src/app.html b/src/app.html index 686ffe3..8b83556 100644 --- a/src/app.html +++ b/src/app.html @@ -6,7 +6,9 @@ %sveltekit.head% - + + +
%sveltekit.body%
diff --git a/src/lib/components/button.svelte b/src/lib/components/button.svelte index 22b1ead..c6b710c 100644 --- a/src/lib/components/button.svelte +++ b/src/lib/components/button.svelte @@ -5,10 +5,28 @@ diff --git a/src/lib/components/confetti.svelte b/src/lib/components/confetti.svelte index c3bfbf5..ecb948d 100644 --- a/src/lib/components/confetti.svelte +++ b/src/lib/components/confetti.svelte @@ -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); diff --git a/src/lib/components/mask.css b/src/lib/components/mask.css index ec7114d..c6b1295 100644 --- a/src/lib/components/mask.css +++ b/src/lib/components/mask.css @@ -41,7 +41,7 @@ #mask > path[id='Form 3 copy']{ stroke-dasharray: 96.59; animation: form3copy; - stroke-width: 2px + stroke-width: 1px } @keyframes form3copy { diff --git a/src/lib/components/maskenball.css b/src/lib/components/maskenball.css index f2ad3e2..9193f62 100644 --- a/src/lib/components/maskenball.css +++ b/src/lib/components/maskenball.css @@ -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; + } } diff --git a/src/lib/components/maskenball.svelte b/src/lib/components/maskenball.svelte index fc8761e..6924f77 100644 --- a/src/lib/components/maskenball.svelte +++ b/src/lib/components/maskenball.svelte @@ -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; } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 1e28a6d..3d666e8 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -5,17 +5,24 @@ import Maskenball from '$lib/components/maskenball.svelte'; -
- - +
+
+ + +
- - +
+ +
+