From 92987ca77b788aa047a600560299b29c15ae7c18 Mon Sep 17 00:00:00 2001
From: MathMan05 <mathmanrm@gmail.com>
Date: Mon, 29 Jul 2024 16:28:11 -0500
Subject: [PATCH] smooth out jump and clean up CSS a little bit

---
 .dist/infiniteScroller.js   |  9 ++++++++-
 webpage/infiniteScroller.ts |  9 ++++++++-
 webpage/style.css           | 19 +++++--------------
 webpage/themes.css          |  4 ++--
 4 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/.dist/infiniteScroller.js b/.dist/infiniteScroller.js
index 3cf1cf3..2e29bac 100644
--- a/.dist/infiniteScroller.js
+++ b/.dist/infiniteScroller.js
@@ -142,12 +142,19 @@ class InfiniteScroller {
         }
         console.log(element, id, ":3");
         if (element) {
-            element.scrollIntoView();
             if (flash) {
+                element.scrollIntoView({
+                    behavior: "smooth",
+                    block: "center"
+                });
+                await new Promise(resolve => setTimeout(resolve, 1000));
                 element.classList.remove("jumped");
                 await new Promise(resolve => setTimeout(resolve, 100));
                 element.classList.add("jumped");
             }
+            else {
+                element.scrollIntoView();
+            }
         }
         else {
             for (const thing of this.HTMLElements) {
diff --git a/webpage/infiniteScroller.ts b/webpage/infiniteScroller.ts
index 6d5d1b4..153fe03 100644
--- a/webpage/infiniteScroller.ts
+++ b/webpage/infiniteScroller.ts
@@ -141,11 +141,18 @@ class InfiniteScroller{
         }
         console.log(element,id,":3");
         if(element){
-            element.scrollIntoView();
+
             if(flash){
+                element.scrollIntoView({
+                    behavior:"smooth",
+                    block:"center"
+                });
+                await new Promise(resolve => setTimeout(resolve, 1000));
                 element.classList.remove("jumped");
                 await new Promise(resolve => setTimeout(resolve, 100));
                 element.classList.add("jumped");
+            }else{
+                element.scrollIntoView();
             }
         }else{
             for(const thing of this.HTMLElements){
diff --git a/webpage/style.css b/webpage/style.css
index 2838ce7..8e3b104 100644
--- a/webpage/style.css
+++ b/webpage/style.css
@@ -76,19 +76,16 @@ th {
 }
 
 .jumped{
-	animation-duration: .5s;
+	animation-duration: 1.3s;
 	animation-name: jumped;
 }
 @keyframes jumped{
-	0% {
+	0%,100% {
 		background-color: transparent;
 	}
 	50% {
 		background-color: var(--message-jump);
 	}
-	100% {
-		background-color: transparent;
-	}
 }
 .messagediv{
 	overflow: hidden;
@@ -1483,18 +1480,12 @@ span {
 	box-sizing: border-box;
 }
 @keyframes goout {
-	0%{
+	0%,100%{
 		opacity:0;
 	}
-	5%{
+	5%,90%{
 		opacity:1;
 	}
-	90%{
-		opacity:1;
-	}
-	100%{
-		opacity:0;
-	}
 }
 
 #register{
@@ -1511,4 +1502,4 @@ span {
 }
 form div{
 	width:100%;
-}
\ No newline at end of file
+}
diff --git a/webpage/themes.css b/webpage/themes.css
index d4e5e25..1d3971a 100644
--- a/webpage/themes.css
+++ b/webpage/themes.css
@@ -103,7 +103,7 @@
 	--embed: #f2f3f5;
 	--link: #3333ee;
 	--discovery-bg: #c6c6d8;
-	--message-jump:#52558a;
+	--message-jump:#ccceff;
 }
 .Light-theme {
 	color-scheme: light;
@@ -162,5 +162,5 @@
 	--embed: #cdccd1;
 	--link: #5566cc;
 	--discovery-bg: #c6c6d8;
-	--message-jump:#52558a;
+	--message-jump:#ccceff;
 }