change input/search repo's text color -> white

4 files changed, 25 insertions, 10 deletions

diff --git a/public/css/ghrepo.css b/public/css/ghrepo.css
index 6aae86d0..ec4a0b0b 100644
--- a/public/css/ghrepo.css
+++ b/public/css/ghrepo.css
@@ -1 +1 @@
-html{--text:#e5e5e5;--accent:#1688f0;--bg-main:#000;--bg-repo:#0f0f1a;--bg-user:#0a0a0f;--purple:#7b1fa2;--violet:#673ab7;--pink:#f48fb1;--light-yellow:#ffc;--pale-yellow:#ff9;--lemon-yellow:#fffacd}*{background:transparent;box-sizing:border-box}a,div,p,span{transition:transform .3s,scale .3s}body{font-family:Open Sans,sans-serif;margin:(3em) 0 0}main{margin-top:3em}.bgWrap{background-color:#05010d;background-position:50%;background-repeat:no-repeat;background-size:cover;color:#f4e8c1;font-size:16px;height:100%;left:0;margin:0;overflow:hidden;padding:0;top:0;width:100%;z-index:-1}.bgWrap,.container{align-items:center;display:flex;justify-content:center}.container{flex-direction:row;flex-wrap:wrap;max-width:1280px;position:center;width:90%}.container small,h1{background:transparent}.hide{animation-duration:.5s!important;animation-fill-mode:forwards!important;animation-name:fadeOut!important;position:absolute;transition:all .5s}.unHide{animation-duration:.5s!important;animation-fill-mode:forwards!important;animation-name:fadeIn!important}h1{color:var(--accent);margin-bottom:4px}small{display:block;margin-bottom:20px}h2,small{text-align:center;width:100%}h2{color:var(--text);margin:0}a{background:transparent;color:var(--accent);text-decoration:none;-webkit-transition:all .5s;transition:all .5s}.github-img{margin-right:8px;width:45px}ul{list-style:none;padding:0}.user-info,.user-info *{background:transparent}.user-info{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:16px;color:var(--text);display:flex;flex-wrap:wrap;font-size:18px;justify-content:center;padding:2em}.user-info figure{background:transparent;max-width:250px;width:90%}.user-info img{border:2px solid var(--accent);border-radius:100%;box-shadow:0 0 6px var(--accent),0 0 6px var(--accent);box-shadow:0 0 10mm rgba(0,0,0,.7);height:auto;max-width:100%;transition:transform .3s,border-radius .5s}.user-info img:hover{border-radius:5%;transition:transform .3s,border-radius .5s}.user-info img:hover{box-shadow:0 0 100mm rgba(255,238,16,.7);transform:scale(1.1)}.user-info div{align-items:center;display:flex;flex-wrap:wrap;padding-left:5%;text-align:center;width:100%}.user-info div p{background:transparent;border-bottom:1px solid var(--text);margin:0;padding:0 0 18px;width:100%}.user-info :hover{transform:scale(1.1);transition:transform .3s}.user-info .usertitle{font-family:audiowide;font-size:2vw;text-transform:uppercase}.filter-repos,input{background:#fff;background:hsla(0,0%,100%,.01);border:2px solid var(--accent);border-radius:20px;box-shadow:0 0 10mm rgba(0,0,0,.7);margin-bottom:1em;margin-top:1em;min-width:300px;padding:1em;text-align:center;-webkit-transition:all .5s;transition:all .5s;width:50%}.filter-repos:hover,input:hover{-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);box-shadow:0 0 50mm rgba(0,0,0,.7);transform:scale(1.1);transition:all .5s}.filter-repos:active,input:active{-webkit-backdrop-filter:blur(200px);backdrop-filter:blur(200px);box-shadow:0 0 10mm rgba(0,0,0,.7)}.repos{border-radius:16px;display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:4em;margin-top:0;padding:2em;transition:transform .3s,background-color .5s}.repos:hover{transition:transform .5s,background-color .5s}.repo-title{color:var(--accent);font-weight:700;margin:4px;text-align:center;width:100%}.repo-list{align-items:flex-start;display:flex;flex-wrap:wrap;justify-content:center;scroll-snap-type:y mandatory}.repo-list,.repo-list li{background:transparent;width:100%}.repo-list li{-webkit-backdrop-filter:blur(200px);backdrop-filter:blur(200px);border:1px solid var(--accent);border-radius:16px;margin:1em 0;min-height:180px;padding:1em;scroll-snap-align:center;text-align:center;-webkit-transition:all .5s;transition:all .5s}.repo-list h3,span{background:transparent}.repo:hover{-webkit-backdrop-filter:blur(125px);backdrop-filter:blur(125px);border-radius:10px;box-shadow:0 0 50mm rgba(255,238,16,.7);transform:scale(1.05);transition:background .5s,transform 1s,boarder 1.5s,all .3s}.repo>*{animation-fill-mode:forwards;animation-name:scroll;animation-timing-function:linear;animation-timeline:view()}.repo-list:hover:has(li:hover) li:not(:hover,.hide){animation-duration:.5s;-webkit-backdrop-filter:blur(80px);backdrop-filter:blur(80px);background:#000;background:rgba(0,0,0,.3);transform:scale(.95);transition:background .5s,transform 1s,all .3s}.link-btn{background:grey;background:hsla(0,0%,50%,.1);border:2px solid var(--accent);border-radius:30px;color:var(--text);padding:10px 20px;-webkit-transition:background .5s,transform .5s,border .5s,all .5s;transition:background .5s,transform .5s,border .5,all .3s}.link-btn:hover{background:#1688f0;background:rgba(22,136,240,.5);border:2px solid var(--text);border-radius:16px;box-shadow:0 0 50mm rgba(0,156,255,.7);transform:scale(1.1);-webkit-transition:background .5s,transform .5s,border .5s,all .5s;transition:background .5s,transform .5s,border .5s,all .5s}.repo-list p{background:transparent;margin:.5em 0;padding:0 .5em}.intro:hover,.user-info:hover{-webkit-backdrop-filter:blur(125px);backdrop-filter:blur(125px);transform:scale(1.1)}.intro{border-radius:16px;perspective:1000px;transform-style:preserve-3d}.user-info{-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);border:2px solid #fff}.floattext{transform:translateZ(200px)}.repo{-webkit-backdrop-filter:blur(200px);backdrop-filter:blur(200px);box-shadow:0 0 10mm rgba(0,0,0,.7);overflow:auto;overflow-x:hidden;transition:all .3s}.rdescription{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.rdescription:hover{-webkit-line-clamp:unset}@media (min-width:700px){.user-info div{background:transparent;text-align:left;width:45%}.user-info div p{margin:10px}.repo-list{justify-content:space-around}.repo-list li{margin:2% 1.5%;width:48%}}@media (min-width:1200px){.repo-list li{width:30%}}
\ No newline at end of file
+html{--text:#e5e5e5;--accent:#1688f0;--bg-main:#000;--bg-repo:#0f0f1a;--bg-user:#0a0a0f;--purple:#7b1fa2;--violet:#673ab7;--pink:#f48fb1;--light-yellow:#ffc;--pale-yellow:#ff9;--lemon-yellow:#fffacd}*{background:transparent;box-sizing:border-box}a,div,p,span{transition:transform .3s,scale .3s}body{font-family:Open Sans,sans-serif;margin:(3em) 0 0}main{margin-top:3em}.bgWrap{background-color:#05010d;background-position:50%;background-repeat:no-repeat;background-size:cover;color:#f4e8c1;font-size:16px;height:100%;left:0;margin:0;overflow:hidden;padding:0;top:0;width:100%;z-index:-1}.bgWrap,.container{align-items:center;display:flex;justify-content:center}.container{flex-direction:row;flex-wrap:wrap;max-width:1280px;position:center;width:90%}.container small,h1{background:transparent}.hide{animation-duration:.5s!important;animation-fill-mode:forwards!important;animation-name:fadeOut!important;position:absolute;transition:all .5s}.unHide{animation-duration:.5s!important;animation-fill-mode:forwards!important;animation-name:fadeIn!important}h1{color:var(--accent);margin-bottom:4px}small{display:block;margin-bottom:20px}h2,small{text-align:center;width:100%}h2{color:var(--text);margin:0}a{background:transparent;color:var(--accent);text-decoration:none;-webkit-transition:all .5s;transition:all .5s}.github-img{margin-right:8px;width:45px}ul{list-style:none;padding:0}.user-info,.user-info *{background:transparent}.user-info{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:16px;color:var(--text);display:flex;flex-wrap:wrap;font-size:18px;justify-content:center;padding:2em}.user-info figure{background:transparent;max-width:250px;width:90%}.user-info img{border:2px solid var(--accent);border-radius:100%;box-shadow:0 0 6px var(--accent),0 0 6px var(--accent);box-shadow:0 0 10mm rgba(0,0,0,.7);height:auto;max-width:100%;transition:transform .3s,border-radius .5s}.user-info img:hover{border-radius:5%;transition:transform .3s,border-radius .5s}.user-info img:hover{box-shadow:0 0 100mm rgba(255,238,16,.7);transform:scale(1.1)}.user-info div{align-items:center;display:flex;flex-wrap:wrap;padding-left:5%;text-align:center;width:100%}.user-info div p{background:transparent;border-bottom:1px solid var(--text);margin:0;padding:0 0 18px;width:100%}.user-info :hover{transform:scale(1.1);transition:transform .3s}.user-info .usertitle{font-family:audiowide;font-size:2vw;text-transform:uppercase}.filter-repos,input{background:#fff;background:hsla(0,0%,100%,.01);border:2px solid var(--accent);border-radius:20px;box-shadow:0 0 10mm rgba(0,0,0,.7);color:#fff;margin-bottom:1em;margin-top:1em;min-width:300px;padding:1em;text-align:center;-webkit-transition:all .5s;transition:all .5s;width:50%}.filter-repos:hover,input:hover{-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);box-shadow:0 0 50mm rgba(0,0,0,.7);transform:scale(1.1);transition:all .5s}.filter-repos:active,input:active{-webkit-backdrop-filter:blur(200px);backdrop-filter:blur(200px);box-shadow:0 0 10mm rgba(0,0,0,.7)}.repos{border-radius:16px;display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:4em;margin-top:0;padding:2em;transition:transform .3s,background-color .5s}.repos:hover{transition:transform .5s,background-color .5s}.repo-title{color:var(--accent);font-weight:700;margin:4px;text-align:center;width:100%}.repo-list{align-items:flex-start;display:flex;flex-wrap:wrap;justify-content:center;scroll-snap-type:y mandatory}.repo-list,.repo-list li{background:transparent;width:100%}.repo-list li{-webkit-backdrop-filter:blur(200px);backdrop-filter:blur(200px);border:1px solid var(--accent);border-radius:16px;margin:1em 0;min-height:180px;padding:1em;scroll-snap-align:center;text-align:center;-webkit-transition:all .5s;transition:all .5s}.repo-list h3,span{background:transparent}.repo:hover{-webkit-backdrop-filter:blur(125px);backdrop-filter:blur(125px);border-radius:10px;box-shadow:0 0 50mm rgba(255,238,16,.7);transform:scale(1.05);transition:background .5s,transform 1s,boarder 1.5s,all .3s}.repo>*{animation-fill-mode:forwards;animation-name:scroll;animation-timing-function:linear;animation-timeline:view()}.repo-list:hover:has(li:hover) li:not(:hover,.hide){animation-duration:.5s;-webkit-backdrop-filter:blur(80px);backdrop-filter:blur(80px);background:#000;background:rgba(0,0,0,.3);transform:scale(.95);transition:background .5s,transform 1s,all .3s}.link-btn{background:grey;background:hsla(0,0%,50%,.1);border:2px solid var(--accent);border-radius:30px;color:var(--text);padding:10px 20px;-webkit-transition:background .5s,transform .5s,border .5s,all .5s;transition:background .5s,transform .5s,border .5,all .3s}.link-btn:hover{background:#1688f0;background:rgba(22,136,240,.5);border:2px solid var(--text);border-radius:16px;box-shadow:0 0 50mm rgba(0,156,255,.7);transform:scale(1.1);-webkit-transition:background .5s,transform .5s,border .5s,all .5s;transition:background .5s,transform .5s,border .5s,all .5s}.repo-list p{background:transparent;margin:.5em 0;padding:0 .5em}.intro:hover,.user-info:hover{-webkit-backdrop-filter:blur(125px);backdrop-filter:blur(125px);transform:scale(1.1)}.intro{border-radius:16px;perspective:1000px;transform-style:preserve-3d}.user-info{-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);border:2px solid #fff}.floattext{transform:translateZ(200px)}.repo{-webkit-backdrop-filter:blur(200px);backdrop-filter:blur(200px);box-shadow:0 0 10mm rgba(0,0,0,.7);overflow:auto;overflow-x:hidden;transition:all .3s}.rdescription{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.rdescription:hover{-webkit-line-clamp:unset}.btn-code:hover{border:2px solid linear-gradient(45deg,#f83a3a 10%,#f13dd4 50%,#7000ff 90%);box-shadow:0 0 50mm linear-gradient(45deg,#f83a3a 10%,#f13dd4 50%,#7000ff 90%)}@media (min-width:700px){.user-info div{background:transparent;text-align:left;width:45%}.user-info div p{margin:10px}.repo-list{justify-content:space-around}.repo-list li{margin:2% 1.5%;width:48%}}@media (min-width:1200px){.repo-list li{width:30%}}
\ No newline at end of file
diff --git a/public/js/getrepo.js b/public/js/getrepo.js
index c1995466..b78eb30a 100644
--- a/public/js/getrepo.js
+++ b/public/js/getrepo.js
@@ -39,7 +39,7 @@ var getProfile = function () {
 getProfile();
 var displayProfile = function displayProfile(profile) {
   var userInfo = document.querySelector('.user-info');
-  userInfo.innerHTML = "\n\t\t<figure class=\"floattext\">\n\t\t\t<a href=".concat(profile.html_url, "><img alt=\"user avatar\" class=\"tilt\" data-tilt-reverse=\"false\" src=").concat(profile.avatar_url, "></a>\n\t\t</figure>\n\t\t<div class=\"floattext\">\n\t\t\t<!-- <h2><a href=").concat(profile.blog, "><strong>").concat(profile.name, "</strong></a></h2> -->\n\t\t\t<h2><a href=/><strong data-value=\"").concat(profile.name, "\" class=\"usertitle hacktype\">").concat(profile.name, "</strong></a></h2>\n\t\t\t<!-- <h2><a href=").concat(profile.html_url, "><strong>").concat(profile.name, "</strong></a></h2> -->\n\t\t\t<p>").concat(profile.bio, "</p>\n\t\t\t<p>\n\t\t\t<strong>Mail:</strong> ").concat(profile.email, "\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t<strong>Location:</strong> ").concat(profile.location, "\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t<strong>@").concat(profile.login, " </strong>\n\t\t\t\tRepos: ").concat(profile.public_repos, "\n\t\t\t\tGists: ").concat(profile.public_gists, "\n\t\t\t</p>\n\t\t</div>\n\t");
+  userInfo.innerHTML = "\n\t\t<figure class=\"floattext\">\n\t\t\t<a href=".concat(profile.html_url, "><img alt=\"user avatar\" src=").concat(profile.avatar_url, "></a>\n\t\t</figure>\n\t\t<div class=\"floattext\">\n\t\t\t<!-- <h2><a href=").concat(profile.blog, "><strong>").concat(profile.name, "</strong></a></h2> -->\n\t\t\t<h2><a href=/><strong data-value=\"").concat(profile.name, "\" class=\"usertitle hacktype\">").concat(profile.name, "</strong></a></h2>\n\t\t\t<!-- <h2><a href=").concat(profile.html_url, "><strong>").concat(profile.name, "</strong></a></h2> -->\n\t\t\t<p>").concat(profile.bio, "</p>\n\t\t\t<p>\n\t\t\t<strong>Mail:</strong> ").concat(profile.email, "\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t<strong>Location:</strong> ").concat(profile.location, "\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t<strong>@").concat(profile.login, " </strong>\n\t\t\t\tRepos: ").concat(profile.public_repos, "\n\t\t\t\tGists: ").concat(profile.public_gists, "\n\t\t\t</p>\n\t\t</div>\n\t");
 };
 var getRepos = function () {
   var _ref2 = _asyncToGenerator(_regeneratorRuntime().mark(function _callee2() {
@@ -90,7 +90,7 @@ var displayRepos = function displayRepos(repos) {
       var starsUrl = "".concat(userHome, "/").concat(repo.name, "/stargazers");
       var forksUrl = "".concat(userHome, "/").concat(repo.name, "/network/members");
       var listItem = document.createElement('li');
-      listItem.classList.add('repo');
+      listItem.classList.add('repo', 'animate', 'zoomIn');
       listItem.innerHTML = "\n\t\t\t<h2 class=\"repo-title\">".concat(repo.name, "</h2>\n\t\t\t<span class=\"rdescription\">").concat(repo.description ? "<span class=\"rdescriptiontext\">".concat(repo.description, "</span>") : '', "<br/><br/>");
       if (repo.stargazers_count > 0) {
         listItem.innerHTML += "<a href=\"".concat(starsUrl, "\">\n\t\t\t<span>\u2B50 ").concat(repo.stargazers_count, "</span></a>");
@@ -102,9 +102,9 @@ var displayRepos = function displayRepos(repos) {
         listItem.innerHTML += "<a href=\"".concat(starsUrl, "\">\n\t\t\t<span>").concat(devicons["Git"], " ").concat(repo.forks_count, "</span></a>");
       }
       if (repo.homepage && repo.homepage !== "") {
-        listItem.innerHTML += "<br /> <br />\n\t\t\t<a class=\"link-btn\" href=".concat(repo.html_url, ">Code ").concat(devicons["Github"], "</a>\n\t\t\t<a class=\"link-btn\" href=").concat(repo.homepage, ">Live ").concat(devicons["Chrome"], "</a> <br />");
+        listItem.innerHTML += "<br /> <br />\n\t\t\t<a class=\"link-btn btn-code\" href=".concat(repo.html_url, ">Code ").concat(devicons["Github"], "</a>\n\t\t\t<a class=\"link-btn btn-live\" href=").concat(repo.homepage, ">Live ").concat(devicons["Chrome"], "</a> <br />");
       } else {
-        listItem.innerHTML += "<br /> <br />\n\t\t\t<a class=\"link-btn\" href=".concat(repo.html_url, ">View Project ").concat(devicons["Github"], "</a><br />");
+        listItem.innerHTML += "<br /> <br />\n\t\t\t<a class=\"link-btn btn-gh\" href=".concat(repo.html_url, ">View Project ").concat(devicons["Github"], "</a><br />");
       }
       repoList.append(listItem);
     }
@@ -130,7 +130,11 @@ filterInput.addEventListener('input', function (e) {
       } else {
         repo.classList.add('hide');
         repo.addEventListener('animationend', function () {
-          repo.style.position = 'absolute';
+          if (searchLowerText != '') {
+            repo.style.position = 'absolute';
+          } else {
+            repo.style.position = 'relative';
+          }
         });
       }
     };
diff --git a/public/pages/repo/github/repos.html b/public/pages/repo/github/repos.html
index f38f23f5..d5d3989a 100644
--- a/public/pages/repo/github/repos.html
+++ b/public/pages/repo/github/repos.html
@@ -16,22 +16,22 @@
     <body>
         <!-- headers -->
         <div header page="GhRepo"></div>
-        <div class="bgWrap animate reveal">
+        <div class="bgWrap animate reveal animation--slow">
 
             <!-- main Github Functions -->
             <main class="container">
                 <section class="intro tilt" data-tilt-reverse="false" data-tilt-full-page-listening>
                     <div
-                        class="user-info animate animation--fast slideInTop"></div>
+                        class="user-info animate fadeZoomIn"></div>
                 </section>
 
                 <div class="sep"></div>
 
                 <section class="repos">
                     <input type="text"
-                        class="filter-repos animate animate--slow slideInTop hide"
+                        class="filter-repos animate animate--slow fadeIn hide"
                         placeholder="Search Projects" />
-                    <ul class="repo-list animate slideInTop"
+                    <ul class="repo-list"
                         id="repo-list"></ul>
                 </section>
             </main>
diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css
index 541846c2..054896b3 100644
--- a/src/css/ghrepo.css
+++ b/src/css/ghrepo.css
@@ -215,6 +215,7 @@ ul {
 input {
     /* background: rgba(10, 10, 15, 0.3); */
     background: rgba(255, 255, 255, 0.01);
+    color: white;
     width: 50%;
     border-radius: 20px;
     min-width: 300px;
@@ -415,6 +416,16 @@ input:active,
     -webkit-line-clamp: unset;
 }
 
+.btn-code:hover {
+    box-shadow: 0 0 50mm linear-gradient(
+        45deg,
+        #f83a3a 10%,
+        #f13dd4 50%,
+        #7000ff 90%
+    );
+    border: 2px solid linear-gradient(45deg,#f83a3a 10%,#f13dd4 50%,#7000ff 90%)
+}
+
 @media (min-width: 700px) {
     .user-info div {
         width: 45%;