From 1f140dc76eff826ec46803089e796a375c6452f5 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Thu, 4 Apr 2024 08:51:49 +0300
Subject: [PATCH] Animations/transitions tweaks

- Tweak boosts/favorites hover animation (now same as in
[Tuba](https://tuba.geopjr.dev))
- Switch from milliseconds to seconds for transitions
- Get rid of orange_bg/fg since it was never used
---
 sass/_comments.scss  | 22 +++++++++++++---------
 sass/_crt.scss       |  4 ++--
 sass/_variables.scss | 20 ++++++++++++--------
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/sass/_comments.scss b/sass/_comments.scss
index 5d80932..b066f75 100644
--- a/sass/_comments.scss
+++ b/sass/_comments.scss
@@ -155,17 +155,13 @@ section#comments {
 
 				svg {
 					vertical-align: -0.125em;
-					transition: var(--transition-long);
+					transition: var(--transition-longer);
 					margin-inline-end: 0.25rem;
 				}
 
 				&:hover {
 					box-shadow: var(--edge-highlight);
 					text-decoration: none;
-
-					svg {
-						rotate: 360deg;
-					}
 				}
 
 				&:active {
@@ -174,18 +170,26 @@ section#comments {
 			}
 
 			.boosts {
-				color: var(--purple-fg);
+				color: var(--boosts-fg);
 
 				&:hover {
-					background-color: var(--purple-bg);
+					background-color: var(--boosts-bg);
+
+					svg {
+						rotate: 180deg;
+					}
 				}
 			}
 
 			.faves {
-				color: var(--orange-fg);
+				color: var(--faves-fg);
 
 				&:hover {
-					background-color: var(--orange-bg);
+					background-color: var(--faves-bg);
+
+					svg {
+						rotate: 72deg;
+					}
 				}
 			}
 		}
diff --git a/sass/_crt.scss b/sass/_crt.scss
index f047152..9bf3a97 100644
--- a/sass/_crt.scss
+++ b/sass/_crt.scss
@@ -5,7 +5,7 @@
 	background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), var(--primary-color);
 
 	pre {
-		animation: flicker 250ms alternate infinite;
+		animation: flicker 0.25s alternate infinite;
 		margin: unset;
 		box-shadow: unset;
 		// Unset some <pre> stuff
@@ -52,7 +52,7 @@
 		top: 0;
 		left: 0;
 		z-index: 1;
-		animation: scanlines 250ms linear infinite;
+		animation: scanlines 0.25s linear infinite;
 		background: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 1px, transparent 3px, transparent 4px);
 		width: 100%;
 		height: calc(100% + 0.5rem);
diff --git a/sass/_variables.scss b/sass/_variables.scss
index cfea8ac..74a1e1f 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -8,14 +8,16 @@
 	--fg-muted-4: rgba(0, 0, 0, 0.5);
 	--fg-muted-5: rgba(0, 0, 0, 0.6);
 	--nav-bg: rgba(242, 242, 242, 0.7);
-	--orange-bg: rgba(255, 120, 0, 0.1);
-	--orange-fg: rgb(255, 120, 0);
 	--purple-bg: rgba(145, 65, 172, 0.1);
 	--purple-fg: rgb(145, 65, 172);
 	--red-bg: rgba(224, 27, 36, 0.1);
 	--red-fg: rgb(224, 27, 36);
 	--yellow-bg: rgba(156, 110, 3, 0.1);
 	--yellow-fg: rgb(156, 110, 3);
+	--boosts-bg: rgba(145, 65, 172, 0.1);
+	--boosts-fg: rgb(145, 65, 172);
+	--faves-bg: rgba(229, 165, 10, 0.1);
+	--faves-fg: rgb(229, 165, 10);
 
 	// VARIABLES
 	--active: 0.9;
@@ -31,10 +33,10 @@
 	--rounded-corner: 12px;
 	--shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06);
 	--shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03);
-	--transition-bezier: 350ms cubic-bezier(0.17, 0.89, 0.32, 1.28);
-	--transition-long: 800ms;
-	--transition-longer: 400ms;
-	--transition: 200ms;
+	--transition-bezier: 0.35s cubic-bezier(0.17, 0.89, 0.32, 1.28);
+	--transition-long: 0.8s;
+	--transition-longer: 0.4s;
+	--transition: 0.2s;
 
 	@media (prefers-reduced-motion) {
 		// VARIABLES
@@ -54,14 +56,16 @@
 		--fg-muted-4: rgba(255, 255, 255, 0.5);
 		--fg-muted-5: rgba(255, 255, 255, 0.6);
 		--nav-bg: rgba(25, 25, 25, 0.7);
-		--orange-bg: rgba(255, 190, 111, 0.1);
-		--orange-fg: rgb(255, 190, 111);
 		--purple-bg: rgba(220, 138, 221, 0.1);
 		--purple-fg: rgb(220, 138, 221);
 		--red-bg: rgba(226, 97, 81, 0.1);
 		--red-fg: rgb(246, 97, 81);
 		--yellow-bg: rgba(248, 228, 92, 0.1);
 		--yellow-fg: rgb(248, 228, 92);
+		--boosts-bg: rgba(220, 138, 221, 0.1);
+		--boosts-fg: rgb(220, 138, 221);
+		--faves-bg: rgba(249, 240, 107, 0.1);
+		--faves-fg: rgb(249, 240, 107);
 
 		color-scheme: dark;
 	}