From 100d16d5355942379bdf3fdc5cdf34105c897627 Mon Sep 17 00:00:00 2001 From: Sarah <144068104+iamawatermelo@users.noreply.github.com> Date: Fri, 1 Nov 2024 00:44:37 +0000 Subject: [PATCH 1/8] add some animation! --- src/lib/images/doublearrow.svg | 12 ++++++---- src/routes/+layout.svelte | 2 ++ src/routes/+page.svelte | 40 ++++++++++++++++++++++++++++++++++ 3 files changed, 50 insertions(+), 4 deletions(-) diff --git a/src/lib/images/doublearrow.svg b/src/lib/images/doublearrow.svg index d74943d..5a479ea 100644 --- a/src/lib/images/doublearrow.svg +++ b/src/lib/images/doublearrow.svg @@ -1,4 +1,8 @@ - - - - + + + + + + + + \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 948723d..0b2bee0 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -183,6 +183,8 @@ width: 3em; height: 3em; align-self: center; + + stroke: rgb(var(--fg)); } .header { diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 67a6a36..2575c0b 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -242,6 +242,34 @@ padding: 8em 4em; margin: auto; gap: 1em; + + @keyframes logo-a { + 0% { + stroke-dasharray: 0 100; + } + + 20% { + stroke-dasharray: 100 100; + } + + 100% { + stroke-dasharray: 100 100; + } + } + + @keyframes logo-b { + 0% { + stroke-dasharray: 0 100; + } + + 20% { + stroke-dasharray: 0 100; + } + + 100% { + stroke-dasharray: 100 100; + } + } :global(.logo) { /* I'm not sure why this is needed. Maybe because it's another component */ @@ -249,6 +277,18 @@ width: 3em; height: 3em; align-self: center; + + stroke: rgb(var(--fg)); + } + + :global(.logo .a) { + stroke-dasharray: 0 100; + animation: 1s cubic-bezier(.05,.09,.23,1) logo-a forwards; + } + + :global(.logo .b) { + stroke-dasharray: 0 100; + animation: 1s cubic-bezier(.05,.09,.23,1) logo-b forwards; } .header { From 6ae3315a1308823b4af081c5a11051f93d0e800b Mon Sep 17 00:00:00 2001 From: Sarah <144068104+iamawatermelo@users.noreply.github.com> Date: Thu, 7 Nov 2024 15:25:15 +0000 Subject: [PATCH 2/8] fix #22 while I'm at it --- src/routes/+layout.svelte | 5 +++++ src/routes/+page.svelte | 9 +++++---- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 0b2bee0..4073d69 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -135,6 +135,11 @@ @media (min-width: style.$size_md) { --transform: translate(calc(50% - 8em), calc(50% - 2em)); } + + @media (prefers-reduced-motion) { + animation: none; + transform: var(--transform); + } } .wall-top { diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 2575c0b..b2b7fec 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -157,6 +157,10 @@ background: no-repeat space url('$lib/images/train.svg') left/149em; animation: 30s linear infinite train; animation-delay: var(--animation-delay); + + @media (prefers-reduced-motion) { + display: none; + } } &.reverse::after { @@ -172,10 +176,6 @@ background-position-x: 550%; } } - - @media (prefers-reduced-motion) { - display: none; - } } .gear { @@ -226,6 +226,7 @@ @media (prefers-reduced-motion) { animation: none; + transform: var(--transform); } } } From 91a09e9bf0cb936d3a3992dd6dd7282efa31e992 Mon Sep 17 00:00:00 2001 From: Sarah <144068104+iamawatermelo@users.noreply.github.com> Date: Thu, 7 Nov 2024 15:26:21 +0000 Subject: [PATCH 3/8] add some delay to the animation --- src/routes/+page.svelte | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index b2b7fec..a9435fa 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -280,6 +280,8 @@ align-self: center; stroke: rgb(var(--fg)); + + animation-delay: 500ms; } :global(.logo .a) { From 9c6d86e1930de0e4701a2bd4bc8997ef08324629 Mon Sep 17 00:00:00 2001 From: Sarah <144068104+iamawatermelo@users.noreply.github.com> Date: Thu, 7 Nov 2024 15:28:31 +0000 Subject: [PATCH 4/8] I appear to have forgotten how CSS works --- src/routes/+page.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index a9435fa..d5f2870 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -280,18 +280,18 @@ align-self: center; stroke: rgb(var(--fg)); - - animation-delay: 500ms; } :global(.logo .a) { stroke-dasharray: 0 100; animation: 1s cubic-bezier(.05,.09,.23,1) logo-a forwards; + animation-delay: 500ms; } :global(.logo .b) { stroke-dasharray: 0 100; animation: 1s cubic-bezier(.05,.09,.23,1) logo-b forwards; + animation-delay: 500ms; } .header { From b0802bedadd9a8488cdddb20a7c253475d2b7b0c Mon Sep 17 00:00:00 2001 From: Sarah <144068104+iamawatermelo@users.noreply.github.com> Date: Thu, 7 Nov 2024 15:37:06 +0000 Subject: [PATCH 5/8] shorten delay --- src/routes/+page.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index d5f2870..e953ecc 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -285,13 +285,13 @@ :global(.logo .a) { stroke-dasharray: 0 100; animation: 1s cubic-bezier(.05,.09,.23,1) logo-a forwards; - animation-delay: 500ms; + animation-delay: 200ms; } :global(.logo .b) { stroke-dasharray: 0 100; animation: 1s cubic-bezier(.05,.09,.23,1) logo-b forwards; - animation-delay: 500ms; + animation-delay: 200ms; } .header { From 44664496bff6c49c447ed50fa808379e3ad0884a Mon Sep 17 00:00:00 2001 From: Sarah <144068104+iamawatermelo@users.noreply.github.com> Date: Thu, 7 Nov 2024 15:41:07 +0000 Subject: [PATCH 6/8] prefers reduced motion --- src/routes/+page.svelte | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index e953ecc..ab61737 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -293,6 +293,13 @@ animation: 1s cubic-bezier(.05,.09,.23,1) logo-b forwards; animation-delay: 200ms; } + + @media (prefers-reduced-motion) { + :global(.logo .a, .logo .b) { + animation: none; + stroke-dasharray: 100 100; + } + } .header { grid-area: 1 / 2 / 1 / 2; From 03f6fe1a461584c3ab7b00a52ef44aab20ab31de Mon Sep 17 00:00:00 2001 From: Sarah <144068104+iamawatermelo@users.noreply.github.com> Date: Thu, 7 Nov 2024 15:43:28 +0000 Subject: [PATCH 7/8] oops --- src/routes/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index ab61737..c9649ff 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -295,7 +295,7 @@ } @media (prefers-reduced-motion) { - :global(.logo .a, .logo .b) { + :global(.logo .a), :global(.logo .b) { animation: none; stroke-dasharray: 100 100; } From 4f800dbf69b48e680ef3323d44d0ee76107432a5 Mon Sep 17 00:00:00 2001 From: Sarah <144068104+iamawatermelo@users.noreply.github.com> Date: Thu, 7 Nov 2024 15:50:50 +0000 Subject: [PATCH 8/8] detransition --- src/lib/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/lib/style.scss b/src/lib/style.scss index 72e9e98..fcfb7dc 100644 --- a/src/lib/style.scss +++ b/src/lib/style.scss @@ -46,6 +46,10 @@ $size_lg: 64rem; box-shadow 100ms, transform 100ms, filter 100ms; + + @media (prefers-reduced-motion) { + transition: none; + } } &:hover {