From 462754f860dcea7dd204577e8a28d46473a4882e Mon Sep 17 00:00:00 2001
From: Kasper <kasperkh.kh@gmail.com>
Date: Wed, 10 Jan 2024 10:25:18 +0100
Subject: [PATCH] Adjust transition easing

---
 src/routes/+layout.svelte          |  1 +
 src/routes/+page.svelte            | 14 +++++---------
 src/routes/_VideoBar.svelte        |  9 ++++-----
 src/routes/channels/+page.svelte   |  7 +++----
 website/src/routes/+layout.svelte  | 20 +++++++++++++-------
 website/src/routes/+page.svelte    |  8 ++++----
 website/src/routes/Download.svelte |  8 ++++----
 website/tailwind.config.cjs        |  2 +-
 8 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 347ca4b..8e7c6f9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -107,6 +107,7 @@
 	:root
 		--options-bar-height: 42px
 		--page-padding: 16px
+		--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1)
 	:global(html), :global(body)
 		background-color: hsl(220, 17%, 7%)
 	:global(html)
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b826112..ff505a4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -332,7 +332,6 @@
 </main>
 
 <style lang="sass">
-	$ease-md: cubic-bezier(0.4, 0.0, 0.2, 1)
 	.selectable
 		user-select: text
 	main
@@ -400,12 +399,9 @@
 		font-weight: 500
 		color: #ffffff
 		opacity: 1
-		transition: 100ms opacity $ease-md
 		margin-top: 1px
-	.channel
-		transition: 80ms opacity $ease-md
-		&:hover
-			color: hsl(210, 8%, 90%)
+	.channel:hover
+		color: hsl(210, 8%, 90%)
 	p.sub
 		font-size: 12px
 		color: hsl(210, 8%, 80%)
@@ -426,7 +422,7 @@
 		border: none
 		transform: translate3d(0, 0, 0) // fix glitch after transform/opacity
 		opacity: 0
-		transition: opacity 120ms $ease-md
+		transition: opacity 140ms var(--ease-out-cubic)
 		svg
 			fill: #ffffff
 			width: 16px
@@ -444,7 +440,7 @@
 			path.checkmark
 				transform: scale(1)
 				transform-origin: 20% 80%
-				transition: all 120ms $ease-md
+				transition: all 140ms var(--ease-out-cubic)
 			&:active path.checkmark
 				transform: scale(0.8)
 				opacity: 0
@@ -452,7 +448,7 @@
 			path.checkmark
 				transform: scale(0.8)
 				opacity: 0
-				transition: all 120ms $ease-md
+				transition: all 140ms var(--ease-out-cubic)
 			&:active path.checkmark
 				opacity: 1
 				transform: scale(1)
diff --git a/src/routes/_VideoBar.svelte b/src/routes/_VideoBar.svelte
index 0853727..245e48d 100644
--- a/src/routes/_VideoBar.svelte
+++ b/src/routes/_VideoBar.svelte
@@ -102,7 +102,6 @@
 </header>
 
 <style lang="sass">
-	$ease-md: cubic-bezier(0.4, 0.0, 0.2, 1)
 	header
 		display: flex
 		align-items: center
@@ -134,7 +133,7 @@
 	.group
 		padding: 0px
 		height: 28px
-		transition: all 120ms $ease-md
+		transition: all 140ms var(--ease-out-cubic)
 		&:focus
 			border-color: hsla(220, 100%, 50%, 1)
 			box-shadow: 0px 0px 0px 3px hsla(220, 100%, 50%, 0.5)
@@ -146,7 +145,7 @@
 			align-items: center
 			height: 100%
 			padding: 0px 11px
-			transition: background-color 120ms $ease-md
+			transition: background-color 140ms var(--ease-out-cubic)
 			&.selected
 				background-color: hsl(225, 14%, 28%)
 	button.tag
@@ -156,7 +155,7 @@
 		padding: 0px 8px
 		border-radius: 10px
 		margin-right: 5px
-		transition: all 120ms $ease-md
+		transition: all 140ms var(--ease-out-cubic)
 		&:hover
 			border-color: hsla(0, 0%, 50%, 0.5)
 		&:focus
@@ -173,7 +172,7 @@
 		height: 28px
 		box-sizing: border-box
 		padding: 0px 6px
-		transition: all 120ms $ease-md
+		transition: all 140ms var(--ease-out-cubic)
 		&:focus
 			border-color: hsla(220, 100%, 50%, 1)
 			box-shadow: 0px 0px 0px 3px hsla(220, 100%, 50%, 0.5)
diff --git a/src/routes/channels/+page.svelte b/src/routes/channels/+page.svelte
index 3750b2f..93282e7 100644
--- a/src/routes/channels/+page.svelte
+++ b/src/routes/channels/+page.svelte
@@ -117,7 +117,6 @@
 </main>
 
 <style lang="sass">
-	$ease-md: cubic-bezier(0.4, 0.0, 0.2, 1)
 	main
 		display: flex
 		flex-direction: column
@@ -151,7 +150,7 @@
 		box-sizing: border-box
 		border: 1px solid hsla(0, 0%, 50%, 0.2)
 		background-color: hsl(225, 14%, 20%)
-		transition: all 120ms $ease-md
+		transition: all 120ms var(--ease-out-cubic)
 		&:hover
 			border-color: hsla(0, 0%, 50%, 0.5)
 		&:focus
@@ -168,7 +167,7 @@
 		display: flex
 		align-items: center
 		border-radius: 7px
-		transition: border 120ms $ease-md
+		transition: border 140ms var(--ease-out-cubic)
 		padding: 15px 5px
 		border: 1px solid transparent
 		@media screen and (min-width: 600px)
@@ -200,7 +199,7 @@
 		height: 28px
 		box-sizing: border-box
 		padding: 0px 6px
-		transition: all 120ms $ease-md
+		transition: all 120ms var(--ease-out-cubic)
 		&:focus
 			border-color: hsla(220, 100%, 50%, 1)
 			box-shadow: 0px 0px 0px 3px hsla(220, 100%, 50%, 0.5)
diff --git a/website/src/routes/+layout.svelte b/website/src/routes/+layout.svelte
index bc94502..0b24a8d 100644
--- a/website/src/routes/+layout.svelte
+++ b/website/src/routes/+layout.svelte
@@ -28,36 +28,42 @@
 <nav
 	class="mx-auto flex max-w-5xl items-center px-3 py-4 text-base text-white text-opacity-60 sm:justify-between sm:px-6"
 >
-	<Revealed class="sm:w-32" options={{ opacity: 0, x: -10, duration: 1000, delay: 300 }}>
+	<Revealed
+		class="ease-out-cubic sm:w-32"
+		options={{ opacity: 0, x: -10, duration: 1000, delay: 300 }}
+	>
 		<a
 			href="/"
-			class="ease-md flex items-center text-lg font-medium text-white sm:p-1.5 sm:text-xl"
+			class="flex items-center text-lg font-medium text-white sm:p-1.5 sm:text-xl"
 			style="-webkit-tap-highlight-color: hsla(0, 0%, 100%, 0.1);"
 		>
 			<img class="mr-2 h-8" src="/android-chrome-192x192.png" alt="" />
 			<span class="mr-1.5 max-[350px]:hidden">Kadium</span>
 		</a>
 	</Revealed>
-	<Revealed class="mx-1.5" options={{ opacity: 0, y: -10, duration: 1000, delay: 500 }}>
+	<Revealed
+		class="ease-out-cubic mx-1.5"
+		options={{ opacity: 0, y: -10, duration: 1000, delay: 500 }}
+	>
 		<a
-			class="ease-md mx-1.5 py-2 text-sm transition-colors duration-200 hover:text-white sm:text-base"
+			class="mx-1.5 py-2 text-sm transition-colors duration-150 hover:text-white sm:text-base"
 			class:font-medium={$page.url.pathname === '/'}
 			class:text-white={$page.url.pathname === '/'}
 			href="/">Overview</a
 		>
 		<a
-			class="ease-md mx-1.5 py-2 text-sm transition-colors duration-200 hover:text-white sm:text-base"
+			class="mx-1.5 py-2 text-sm transition-colors duration-150 hover:text-white sm:text-base"
 			class:font-medium={$page.url.pathname === '/changelog'}
 			class:text-white={$page.url.pathname === '/changelog'}
 			href="/changelog">Changelog</a
 		>
 	</Revealed>
 	<Revealed
-		class="ml-auto flex justify-end sm:ml-0 sm:w-32"
+		class="ease-out-cubic ml-auto flex justify-end sm:ml-0 sm:w-32"
 		options={{ opacity: 0, x: 10, duration: 1000, delay: 300 }}
 	>
 		<a
-			class="icon github ease-md sm:p-1.5"
+			class="icon github sm:p-1.5"
 			href="https://github.com/probablykasper/kadium"
 			aria-label="GitHub"
 			style="-webkit-tap-highlight-color: hsla(0, 0%, 100%, 0.1);"
diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte
index ba468cb..0601c23 100644
--- a/website/src/routes/+page.svelte
+++ b/website/src/routes/+page.svelte
@@ -8,22 +8,22 @@
 </svelte:head>
 
 <Revealed
-	class="mx-2 mb-4 mt-20 text-center transition-all ease-out"
+	class="ease-out-cubic mx-2 mb-4 mt-20 text-center transition-all"
 	options={{ opacity: 0, scale: 0.9, duration: 750 }}
 >
 	<h1 class="inline-block text-7xl font-extrabold">Kadium</h1>
 </Revealed>
 <Revealed
-	class="mx-2 mb-12 text-center transition-all ease-out"
+	class="ease-out-cubic mx-2 mb-12 text-center transition-all"
 	options={{ opacity: 0, y: -10, duration: 550, delay: 250 }}
 >
-	<p class="text-xl text-blue-100 opacity-60 transition-all duration-500 ease-out">
+	<p class="ease-out-cubic text-xl text-blue-100 opacity-60 transition-all duration-500">
 		An app for staying ontop of YouTube channels' uploads
 	</p>
 </Revealed>
 
 <Revealed
-	class="mb-24 flex justify-center transition-all ease-out"
+	class="ease-out-cubic mb-24 flex justify-center transition-all"
 	options={{ opacity: 0, scale: 0.9, duration: 550, delay: 450 }}
 >
 	<div>
diff --git a/website/src/routes/Download.svelte b/website/src/routes/Download.svelte
index c103b17..aa74faa 100644
--- a/website/src/routes/Download.svelte
+++ b/website/src/routes/Download.svelte
@@ -118,10 +118,10 @@
 			class:opacity-50={loading}
 		>
 			<div
-				class="opacity-0 transition-all duration-700 ease-out group-hover:opacity-40 group-focus:opacity-40"
+				class="ease-out-cubic opacity-0 transition-all duration-700 group-hover:opacity-40 group-focus:opacity-40"
 			>
 				<div
-					class="gradient gradient-3 scale-80 absolute inset-0 -z-10 transition-all duration-700 ease-out group-hover:scale-100 group-hover:blur-md group-focus:scale-100 group-focus:blur-md"
+					class="gradient gradient-3 scale-80 ease-out-cubic absolute inset-0 -z-10 transition-all duration-700 group-hover:scale-100 group-hover:blur-md group-focus:scale-100 group-focus:blur-md"
 				/>
 			</div>
 			Download for {suggestedVersion.os}
@@ -133,10 +133,10 @@
 			aria-label="Download for other platforms"
 		>
 			<div
-				class="opacity-0 transition-all duration-700 ease-out group-hover:opacity-40 group-focus:opacity-40"
+				class="ease-out-cubic opacity-0 transition-all duration-700 group-hover:opacity-40 group-focus:opacity-40"
 			>
 				<div
-					class="gradient gradient-3 scale-80 absolute inset-0 -z-10 transition-all duration-700 ease-out group-hover:scale-100 group-hover:blur-md group-focus:scale-100 group-focus:blur-md"
+					class="gradient gradient-3 scale-80 ease-out-cubic absolute inset-0 -z-10 transition-all duration-700 group-hover:scale-100 group-hover:blur-md group-focus:scale-100 group-focus:blur-md"
 				/>
 			</div>
 			<svg
diff --git a/website/tailwind.config.cjs b/website/tailwind.config.cjs
index 2eb4cda..cbb2963 100644
--- a/website/tailwind.config.cjs
+++ b/website/tailwind.config.cjs
@@ -4,7 +4,7 @@ module.exports = {
 	theme: {
 		extend: {
 			transitionTimingFunction: {
-				md: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
+				'out-cubic': 'cubic-bezier(0.33, 1, 0.68, 1)',
 			},
 		},
 	},
-- 
2.51.2