diff options
| -rw-r--r-- | public/css/ghrepo.css | 2 | ||||
| -rw-r--r-- | public/js/getrepo.js | 14 | ||||
| -rw-r--r-- | public/pages/repo/github/repos.html | 8 | ||||
| -rw-r--r-- | src/css/ghrepo.css | 11 |
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%; |