updated dyanmic search animation

2 files changed, 274 insertions, 261 deletions

diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css
index 5d51517b..2a2c621b 100644
--- a/src/css/ghrepo.css
+++ b/src/css/ghrepo.css
@@ -10,118 +10,128 @@
 
 /* @media (prefers-color-scheme: dark) { */
 :root {
-	--text: #e5e5e5;
-	--accent: #1688f0;
-	--bg-main: #000;
-	--bg-repo: #0f0f1a;
-	--bg-user: #0a0a0f;
-	--purple: rgb(123, 31, 162);
-	--violet: rgb(103, 58, 183);
-	--pink: rgb(244, 143, 177);
-	--light-yellow: rgb(255, 255, 204);
-	--pale-yellow: rgb(255, 255, 153);
-	--lemon-yellow: rgb(255, 250, 205);
-	}
+    --text: #e5e5e5;
+    --accent: #1688f0;
+    --bg-main: #000;
+    --bg-repo: #0f0f1a;
+    --bg-user: #0a0a0f;
+    --purple: rgb(123, 31, 162);
+    --violet: rgb(103, 58, 183);
+    --pink: rgb(244, 143, 177);
+    --light-yellow: rgb(255, 255, 204);
+    --pale-yellow: rgb(255, 255, 153);
+    --lemon-yellow: rgb(255, 250, 205);
+    }
 /* } */
 
 * {
-	box-sizing: border-box;
-	/* background-image: url(/images/backgroundNightCity.jpg); */
-	background: transparent;
+    box-sizing: border-box;
+    /* background-image: url(/images/backgroundNightCity.jpg); */
+    background: transparent;
 }
 
-span,p,div {
-    transition: all .3s;
+span,p,div,a {
+    transition: transform .3s, scale 0.3s;
 }
 
 
 body {
-	margin: 0;
-	margin-top: (3em);
-	font-family: 'Open Sans', sans-serif;
+    margin: 0;
+    margin-top: (3em);
+    font-family: 'Open Sans', sans-serif;
 }
 
 main {
-	margin-top: 3em
+    margin-top: 3em
 }
 
 .bgWrap {
-	overflow: hidden;
-	top: 0;
-	left: 0;
-	margin: 0;
-	padding: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgb(48, 60, 100);
-	background-image: url(/images/heigh-grass.jpg), url(/images/heigh-grass.webp);
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
-	align-items: center;
-	display: flex;
-	justify-content: center;
-	color: #F4E8C1;
-	z-index: -1;
-	font-size: 16px;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(48, 60, 100);
+    background-image: url(/images/heigh-grass.jpg), url(/images/heigh-grass.webp);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    color: #F4E8C1;
+    z-index: -1;
+    font-size: 16px;
 }
 
 .container {
-	display: flex;
-	justify-content: center;
-	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: center;
-	width: 90%;
-	max-width: 1280px;
-	/* background: transparent; */
-	position: center;
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 90%;
+    max-width: 1280px;
+    /* background: transparent; */
+    position: center;
 }
 
 .container small, h1 {
-background: transparent;
+    background: transparent;
 }
 
 .hide {
-	/* '!important' is to make sure that when we add the class using JS, it takes precendence */
-	display: none !important;
+    /* '!important' is to make sure that when we add the class using JS, it takes precendence */
+    animation-name: fadeOut !important;
+    animation-fill-mode: forwards !important;
+    animation-duration: .5s !important;
+    position: absolute;
+    transition: all .5s;
+}
+
+.unHide {
+    animation-name: fadeIn !important;
+    animation-fill-mode: forwards !important;
+    animation-duration: .5s !important;
 }
 
 h1 {
-	color: var(--accent);
-	margin-bottom: 4px;
+    color: var(--accent);
+    margin-bottom: 4px;
 }
 
 small {
-	width: 100%;
-	text-align: center;
-	display: block;
-	margin-bottom: 20px;
+    width: 100%;
+    text-align: center;
+    display: block;
+    margin-bottom: 20px;
 }
 
 h2 {
-	width: 100%;
-	text-align: center;
-	color: var(--text);
-	margin: 0;
+    width: 100%;
+    text-align: center;
+    color: var(--text);
+    margin: 0;
 }
 
 a {
-	background: transparent;
-	color: var(--accent);
-	text-decoration: none;
-	-webkit-transition: background 0.5s;
-	transition: background 0.5s
+    background: transparent;
+    color: var(--accent);
+    text-decoration: none;
+    -webkit-transition: background 0.5s;
+    transition: background 0.5s
 }
 
 .github-img {
-	width: 45px;
-	margin-right: 8px;
+    width: 45px;
+    margin-right: 8px;
 }
 
 ul {
-	list-style: none;
-	padding: 0;
+    list-style: none;
+    padding: 0;
 }
 
 .user-info * {
@@ -129,228 +139,227 @@ background: transparent;
 }
 
 .user-info {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	/* background-image: url(/images/backgroundNightCity.jpg); */
-	background: transparent;
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
-	color: var(--text);
-	font-size: 18px;
-	padding: 2em;
-	border-radius: 16px;
-	/* border: 0.1px solid var(--accent); */
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    /* background-image: url(/images/backgroundNightCity.jpg); */
+    background: transparent;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    color: var(--text);
+    font-size: 18px;
+    padding: 2em;
+    border-radius: 16px;
+    /* border: 0.1px solid var(--accent); */
 }
 
 .user-info figure {
-	width: 90%;
-	max-width: 250px;
-	background: transparent;
+    width: 90%;
+    max-width: 250px;
+    background: transparent;
 }
 
 .user-info img {
-	border: 2px solid var(--accent);
-	box-shadow: 0 0px 6px var(--accent), 0 0px 6px var(--accent);
-	max-width: 100%;
-	height: auto;
-	box-shadow: 0 0 10mm rgba(0,0,0,.7);
-	border-radius: 100%;
-	transition: all 0.3s;
+    border: 2px solid var(--accent);
+    box-shadow: 0 0px 6px var(--accent), 0 0px 6px var(--accent);
+    max-width: 100%;
+    height: auto;
+    box-shadow: 0 0 10mm rgba(0,0,0,.7);
+    border-radius: 100%;
+    transition: transform 0.3s, border-radius 0.5s;
 }
 
 .user-info img:hover {
-	border-radius: 5%;
-	transition: all 0.3s;
+    border-radius: 5%;
+    transition: transform 0.3s, border-radius 0.5s;
 }
 
 .user-info img:hover {
-	transform: scale(1.1);
-	box-shadow: 0 0 100mm rgba(255, 238, 16,.7);
+    transform: scale(1.1);
+    box-shadow: 0 0 100mm rgba(255, 238, 16,.7);
 }
 
 .user-info div {
-	display: flex;
-	text-align: center;
-	flex-wrap: wrap;
-	align-items: center;
-	width: 100%;
-	padding-left: 5%;
+    display: flex;
+    text-align: center;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+    padding-left: 5%;
 }
 
 .user-info div p {
-	width: 100%;
-	margin: 0;
-	padding: 0;
-	border-bottom: 1px solid var(--text);
-	padding-bottom: 18px;
-	background: transparent;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    border-bottom: 1px solid var(--text);
+    padding-bottom: 18px;
+    background: transparent;
 }
 
 .user-info *:hover {
-	transform: scale(1.1);
-	transition: transform 0.3s;
+    transform: scale(1.1);
+    transition: transform 0.3s;
 }
 
 
 .user-info .usertitle {
-	font-family: audiowide;
-	text-transform: uppercase;
-	font-size: 2vw;
+    font-family: audiowide;
+    text-transform: uppercase;
+    font-size: 2vw;
 }
 
 .filter-repos,
 input {
-	background: rgba(10, 10, 15, 0.3);
-	width: 50%;
-	border-radius: 20px;
-	min-width: 300px;
-	margin-top: 1em;
-	padding: 1em;
-	margin-bottom: 1em;
-	border: 2px solid var(--accent);
-	box-shadow: 0 0 10mm rgba(0,0,0,.7);
-	text-align: center;
-	-webkit-transition: all 0.5s;
-	transition: all 0.5s
+    background: rgba(10, 10, 15, 0.3);
+    width: 50%;
+    border-radius: 20px;
+    min-width: 300px;
+    margin-top: 1em;
+    padding: 1em;
+    margin-bottom: 1em;
+    border: 2px solid var(--accent);
+    box-shadow: 0 0 10mm rgba(0,0,0,.7);
+    text-align: center;
+    -webkit-transition: all 0.5s;
+    transition: all 0.5s
 }
 
 input:hover,
 .filter-repos:hover {
-	/* background: rgba(10, 10, 15, 0.5); */
-	transition: all 0.5s;
-	-webkit-backdrop-filter: blur(5px);
-	backdrop-filter: blur(5px);
-	box-shadow: 0 0 50mm rgba(0,0,0,.7);
-	transform: scale(1.1);
-	transition: all 0.5s;
+    /* background: rgba(10, 10, 15, 0.5); */
+    transition: all 0.5s;
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
+    box-shadow: 0 0 50mm rgba(0,0,0,.7);
+    transform: scale(1.1);
+    transition: all 0.5s;
 }
 
 input:active,
 .filter-repos:active {
-	/* background: #F4E8C1; */
-	box-shadow: 0 0 10mm rgba(0,0,0,.7);
-	background: rgba(244, 232, 193, 0.3);
+    /* background: #F4E8C1; */
+    box-shadow: 0 0 10mm rgba(0,0,0,.7);
+    background: rgba(244, 232, 193, 0.3);
 }
 
 .repos {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	background: rgba(128, 128, 128, 0.2);
-	margin-top: 0;
-	padding: 2em;
-	/* border-bottom-left-radius: 20px; */
-	/* border-bottom-right-radius: 20px; */
-	border-radius: 16px;
-	/* border: 0.1px solid var(--accent); */
-	margin-bottom: 4em;
-	/* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
-    transition: all 0.3s;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    background: rgba(128, 128, 128, 0.2);
+    margin-top: 0;
+    padding: 2em;
+    /* border-bottom-left-radius: 20px; */
+    /* border-bottom-right-radius: 20px; */
+    border-radius: 16px;
+    /* border: 0.1px solid var(--accent); */
+    margin-bottom: 4em;
+    /* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
+    transition: transform 0.3s, background-color 0.5s;;
 }
 
 .repos:hover {
-	background: rgba(0, 0, 0, 0.3);
-	/* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
-	/* transform: scale(1.01); */
-	/* box-shadow: 0 0 20mm rgba(128,128,128,.7); */
-	transition: all 0.5s;
+    background: rgba(0, 0, 0, 0.3);
+    /* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
+    /* transform: scale(1.01); */
+    /* box-shadow: 0 0 20mm rgba(128,128,128,.7); */
+    transition: transform 0.5s, background-color 0.5s;
 }
 
 .repo-title {
-	margin: 4px;
-	width: 100%;
-	font-weight: bold;
-	text-align: center;
-	color: var(--accent);
+    margin: 4px;
+    width: 100%;
+    font-weight: bold;
+    text-align: center;
+    color: var(--accent);
 }
 
 .repo-list {
-	width: 100%;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	align-items: flex-start;
-	background: transparent;
-	scroll-snap-type: y mandatory;
-	/* background: rgba(128, 128, 128, 0.2); */
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: flex-start;
+    background: transparent;
+    scroll-snap-type: y mandatory;
+    /* background: rgba(128, 128, 128, 0.2); */
 }
 
 .repo-list li {
-	width: 100%;
-	min-height: 180px;
-	border-radius: 16px;
-	margin: 1em 0;
-	border: 1px solid var(--accent);
-	padding: 1em;
-	text-align: center;
-	background: transparent;
-	-webkit-backdrop-filter: blur(20px);
-	backdrop-filter: blur(20px);
-	-webkit-transition: all 0.5s;
-	transition: all 0.5s;
-	scroll-snap-align: center;
-	/* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
-	/* background: rgba(128, 128, 128, 0.1); */
+    width: 100%;
+    min-height: 180px;
+    border-radius: 16px;
+    margin: 1em 0;
+    border: 1px solid var(--accent);
+    padding: 1em;
+    text-align: center;
+    background: transparent;
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    -webkit-transition: all 0.5s;
+    transition: all 0.5s;
+    scroll-snap-align: center;
+    /* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
+    /* background: rgba(128, 128, 128, 0.1); */
 }
 
 .repo-list h3, span{
-	background: transparent;
+    background: transparent;
 }
 
 .repo:hover {
-	/* box-shadow: 0 3px 6px var(--accent), 0 3px 6px var(--accent); */
-	box-shadow: 0 0 50mm rgba(255, 238, 16,.7);
-	background: rgba(0, 0, 0, 0.5);
-	border-radius: 10px;
-	transform: scale(1.05);
-	transition: background 0.5s, transform 1s, boarder 1.5s, all 0.3s
+    /* box-shadow: 0 3px 6px var(--accent), 0 3px 6px var(--accent); */
+    box-shadow: 0 0 50mm rgba(255, 238, 16,.7);
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+    transform: scale(1.05);
+    transition: background 0.5s, transform 1s, boarder 1.5s, all 0.3s
 }
 
-.repo-list:hover:has(li:hover) li:not(:hover) {
-	/* background: rgba(0, 0, 0, 0.3); */
-	background: rgba(0, 0, 0, 0.3);
-	transform: scale(0.95);
-	animation-duration: 0.5s;
-	transition: background 0.5s, transform 1s, all 0.3s;
+.repo-list:hover:has(li:hover) li:not(:hover,.hide) {
+    /* background: rgba(0, 0, 0, 0.3); */
+    background: rgba(0, 0, 0, 0.3);
+    transform: scale(0.95);
+    animation-duration: 0.5s;
+    transition: background 0.5s, transform 1s, all 0.3s;
 }
 
 
 .link-btn {
-	padding: 10px 20px;
-	/* background: var(--bg-main); */
-	/* background: rgba(0, 0, 0, 0.5); */
-	background: rgba(128, 128, 128, 0.1);
-	border-radius: 30px;
-	border: 2px solid var(--accent);
-	color: var(--text);
-	-webkit-transition: background 0.5s, transform 0.5s, border 0.5s, all 0.5s;
-	transition: background 0.5s, transform 0.5s, border 0.5, all 0.3s;
+    padding: 10px 20px;
+    /* background: var(--bg-main); */
+    /* background: rgba(0, 0, 0, 0.5); */
+    background: rgba(128, 128, 128, 0.1);
+    border-radius: 30px;
+    border: 2px solid var(--accent);
+    color: var(--text);
+    -webkit-transition: background 0.5s, transform 0.5s, border 0.5s, all 0.5s;
+    transition: background 0.5s, transform 0.5s, border 0.5, all 0.3s;
 }
 
 .link-btn:hover {
-	background: rgba(22, 136, 240, 0.5);
-	border: 2px solid var(--text);
-	border-radius: 16px;
-	transform: scale(1.1);
-	box-shadow: 0 0 50mm rgba(0, 156, 255,.7);
-	-webkit-transition: background 0.5s, transform 0.5s, border 0.5s, all 0.5s;
-	transition: background 0.5s, transform 0.5s, border 0.5s, all 0.5s;
+    background: rgba(22, 136, 240, 0.5);
+    border: 2px solid var(--text);
+    border-radius: 16px;
+    transform: scale(1.1);
+    box-shadow: 0 0 50mm rgba(0, 156, 255,.7);
+    -webkit-transition: background 0.5s, transform 0.5s, border 0.5s, all 0.5s;
+    transition: background 0.5s, transform 0.5s, border 0.5s, all 0.5s;
 }
 
 .repo-list p {
-	padding: 0em 0.5em;
-	margin: 0.5em 0;
-	background: transparent;
+    padding: 0em 0.5em;
+    margin: 0.5em 0;
+    background: transparent;
 }
 
 .intro:hover,
 .user-info:hover {
-	-webkit-backdrop-filter: blur(8px);
-	backdrop-filter: blur(8px);
-	transform: scale(1.1);
-	transition: all 0.5s;
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+    transform: scale(1.1);
 }
 
 .intro {
@@ -359,11 +368,11 @@ input:active,
 }
 
 .user-info {
-	/* background: transparent; */
-	background: rgba(128, 128, 128, 0.2);
-	-webkit-backdrop-filter: blur(2px);
-	backdrop-filter: blur(2px);
-	/* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
+    /* background: transparent; */
+    background: rgba(128, 128, 128, 0.2);
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+    /* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
 }
 
 .floattext {
@@ -371,54 +380,54 @@ input:active,
 }
 
 .repo {
-	-webkit-backdrop-filter: blur(20px);
-	backdrop-filter: blur(20px);
-	box-shadow: 0 0 10mm rgba(0,0,0,.7);
-	overflow: auto;
-	overflow-x: hidden;
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    box-shadow: 0 0 10mm rgba(0,0,0,.7);
+    overflow: auto;
+    overflow-x: hidden;
     transition: all 0.3s
 }
 
 .rdescription {
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 3;
-	overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
 }
 
 .rdescription:hover {
-	-webkit-line-clamp: unset;
+    -webkit-line-clamp: unset;
 }
 
 @media (min-width: 700px) {
-	.user-info div {
-		width: 45%;
-		text-align: left;
-		/* background: rgba(10, 10, 15, 0.1); */
-		background: transparent;
-	}
-
-	.user-info div p {
-		margin: 10px;
-	}
-
-	.repo-list {
-		justify-content: space-around;
-	}
-
-	.repo-list li {
-		width: 48%;
-		margin-right: 1.5%;
-		margin-left: 1.5%;
-		margin-top: 2%;
-		margin-bottom: 2%;
-	}
+    .user-info div {
+        width: 45%;
+        text-align: left;
+        /* background: rgba(10, 10, 15, 0.1); */
+        background: transparent;
+    }
+
+    .user-info div p {
+        margin: 10px;
+    }
+
+    .repo-list {
+        justify-content: space-around;
+    }
+
+    .repo-list li {
+        width: 48%;
+        margin-right: 1.5%;
+        margin-left: 1.5%;
+        margin-top: 2%;
+        margin-bottom: 2%;
+    }
 }
 
 @media (min-width: 1200px) {
-	.repo-list li {
-		width: 30%;
-	}
+    .repo-list li {
+        width: 30%;
+    }
 }
 
 /* TODO: Make all webkit-transition do with normal transition as well */
diff --git a/src/js/getrepo.js b/src/js/getrepo.js
index b0f5c25d..a3853616 100644
--- a/src/js/getrepo.js
+++ b/src/js/getrepo.js
@@ -113,10 +113,14 @@ filterInput.addEventListener('input', (e) => {
 		const lowerText = repo.innerText.toLowerCase();
 		if (lowerText.includes(searchLowerText)) {
 			repo.classList.remove('hide');
-		} else {
+            repo.style.position = 'relative'
+        } else {
 			repo.classList.add('hide');
-		}
-	}
+            repo.addEventListener('animationend', () => {
+                repo.style.position = 'absolute'
+            });
+        }
+    }
 });
 
 // for programming language icons