From 973262744f4ecce21440999a1127a17384ef45e2 Mon Sep 17 00:00:00 2001 From: satr14 <90962949+SX-9@users.noreply.github.com> Date: Fri, 28 Mar 2025 10:39:33 +0700 Subject: [PATCH] few more animations --- src/app.css | 2 +- src/routes/+layout.svelte | 12 +++++++++-- src/routes/+layout.ts | 3 ++- src/routes/+page.svelte | 42 +++++++++++++++++++++++++++++---------- tailwind.config.js | 4 ++-- 5 files changed, 47 insertions(+), 16 deletions(-) diff --git a/src/app.css b/src/app.css index 1e8e798..d853f71 100644 --- a/src/app.css +++ b/src/app.css @@ -11,7 +11,7 @@ h3 { @apply text-xl md:text-2xl font-bold my-4; } h4 { @apply text-lg md:text-xl font-bold my-4; } h5 { @apply text-base md:text-lg font-bold my-4; } h6 { @apply text-sm md:text-base font-bold my-4; } -a { @apply text-ctp-sapphire hover:text-ctp-sky underline; } +a { @apply text-ctp-sapphire hover:text-ctp-sky underline focus:before:content-['>_'] focus:after:content-['_<'] focus:outline-none transition-none focus:no-underline; } article { @apply p-2 sm:p-4 text-ctp-subtext0; } p { @apply my-4 text-sm sm:text-base; } code { @apply bg-ctp-overlay0 p-0.5 rounded-md; } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 34f664e..1fa293a 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,7 +1,13 @@ @@ -10,4 +16,6 @@ - \ No newline at end of file +{#if loaded} + +{/if} \ No newline at end of file diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts index 9123121..70108f4 100644 --- a/src/routes/+layout.ts +++ b/src/routes/+layout.ts @@ -3,8 +3,9 @@ import info from '$lib'; export const ssr = true; export const csr = true; -export const load = (async () => { +export const load = (async ({ url }) => { return { ...info, + url: url.pathname, }; }) satisfies LayoutLoad; \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index d58a045..fda18b4 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -4,6 +4,18 @@ import { onMount } from "svelte"; import type { PageData } from "./$types"; export let data: PageData; + import { + blur, + crossfade, + draw, + fade, + fly, + scale, + slide + } from 'svelte/transition'; + import { + cubicOut + } from 'svelte/easing'; let days = daysUntilBirthday(data.birthday); let time = getTimeIn(data.timezone); @@ -15,10 +27,13 @@ }); -
+
- -
+
{randomStr(charAmount)}
{randomStr(Math.round(charAmount-data.name.length/2))}{data.name.toUpperCase()}{randomStr(Math.round(charAmount-data.name.length/2))} @@ -26,20 +41,27 @@
-{#if webring} -
- +
-
+