small upgrades, animation, expand img

2 files changed, 50 insertions, 65 deletions

diff --git a/dest/css/ghrepo.css b/dest/css/ghrepo.css
index bd2c8d07..8ef4fbf4 100644
--- a/dest/css/ghrepo.css
+++ b/dest/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}body{font-family:Open Sans,sans-serif;margin:(3em) 0 0}main{margin-top:3em}.bgWrap{background-color:#303c64;background-image:url(/images/heigh-grass.jpg);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{display:none!important}h1{color:#1688f0;color:var(--accent);margin-bottom:4px}small{display:block;margin-bottom:20px}h2,small{text-align:center;width:100%}h2{color:#e5e5e5;color:var(--text);margin:0}a{background:transparent;color:#1688f0;color:var(--accent);-webkit-text-decoration:none;text-decoration:none;-webkit-transition:background .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:#e5e5e5;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 #1688f0;border:2px solid var(--accent);border-radius:100%;box-shadow:0 0 6px #1688f0,0 0 6px #1688f0;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%}.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 #e5e5e5;border-bottom:1px solid var(--text);margin:0;padding:0 0 18px;width:100%}.user-info :hover{transform:scale(1.1)}.user-info .usertitle{font-family:audiowide;font-size:2vw;text-transform:uppercase}.filter-repos,input{background:#0a0a0f;background:rgba(10,10,15,.3);border:2px solid #1688f0;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;width:50%}.filter-repos:hover,input:hover{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 0 50mm rgba(0,0,0,.7);-moz-filter:blur(5px);-o-filter:blur(5px);-ms-filter:blur(5px);transform:scale(1.1);transition:all .5s}.filter-repos:active,input:active{background:#f4e8c1;background:hsla(46,70%,86%,.3);box-shadow:0 0 10mm rgba(0,0,0,.7)}.repos{background:grey;background:hsla(0,0%,50%,.2);border-radius:16px;display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:4em;margin-top:0;padding:2em}.repos:hover{background:#000;background:rgba(0,0,0,.3);box-shadow:0 0 20mm hsla(0,0%,50%,.7);transform:scale(1.01);transition:all .5s}.repo-title{color:#1688f0;color:var(--accent);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(20px);backdrop-filter:blur(20px);border:1px solid #1688f0;border:1px solid var(--accent);border-radius:10px;-moz-filter:blur(20px);-o-filter:blur(20px);-ms-filter:blur(20px);margin:1em 0;min-height:180px;padding:1em;scroll-snap-align:center;text-align:center;-webkit-transition:all .5s}.repo-list h3,span{background:transparent}.repo:hover{background:#000;background:rgba(0,0,0,.5);box-shadow:0 0 50mm rgba(255,238,16,.7);transform:scale(1.05);transition:background .5s,transform 1s,all .3s}.repo-list:hover:has(li:hover) li:not(:hover){animation-duration:.5s;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 #1688f0;border:2px solid var(--accent);border-radius:30px;color:#e5e5e5;color:var(--text);padding:10px 20px;-webkit-transition:background .5s,transform .5s,border .5s,all .5s}.link-btn:hover{background:#1688f0;background:rgba(22,136,240,.5);border:2px solid #e5e5e5;border:2px solid var(--text);box-shadow:0 0 50mm rgba(0,156,255,.7);transform:scale(1.1);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(8px);backdrop-filter:blur(8px);-moz-filter:blur(8px);-o-filter:blur(8px);-ms-filter:blur(8px);transform:scale(1.1);transition:all .5s}.user-info{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:grey;background:hsla(0,0%,50%,.2);-moz-filter:blur(2px);-o-filter:blur(2px);-ms-filter:blur(2px)}.repo{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 0 10mm rgba(0,0,0,.7);-moz-filter:blur(20px);-o-filter:blur(20px);-ms-filter:blur(20px);overflow:auto;overflow-x:hidden;resize:both}.rdescription{-webkit-box-orient:vertical;-webkit-line-clamp:3;display:-webkit-box;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}body{font-family:Open Sans,sans-serif;margin:(3em) 0 0}main{margin-top:3em}.bgWrap{background-color:#303c64;background-image:url(/images/heigh-grass.jpg);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{display:none!important}h1{color:#1688f0;color:var(--accent);margin-bottom:4px}small{display:block;margin-bottom:20px}h2,small{text-align:center;width:100%}h2{color:#e5e5e5;color:var(--text);margin:0}a{background:transparent;color:#1688f0;color:var(--accent);-webkit-text-decoration:none;text-decoration:none;transition:background .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:#e5e5e5;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 #1688f0;border:2px solid var(--accent);border-radius:100%;box-shadow:0 0 6px #1688f0,0 0 6px #1688f0;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%}.user-info img:hover{border-radius:5%;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 #e5e5e5;border-bottom:1px solid var(--text);margin:0;padding:0 0 18px;width:100%}.user-info :hover{transform:scale(1.1)}.user-info .usertitle{font-family:audiowide;font-size:2vw;text-transform:uppercase}.filter-repos,input{background:#0a0a0f;background:rgba(10,10,15,.3);border:2px solid #1688f0;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;transition:all .5s;width:50%}.filter-repos:hover,input:hover{-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 .5s}.filter-repos:active,input:active{background:#f4e8c1;background:hsla(46,70%,86%,.3);box-shadow:0 0 10mm rgba(0,0,0,.7)}.repos{background:grey;background:hsla(0,0%,50%,.2);border-radius:16px;display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:4em;margin-top:0;padding:2em}.repos:hover{background:#000;background:rgba(0,0,0,.3);box-shadow:0 0 10mm rgba(0,0,0,.7);box-shadow:0 0 20mm hsla(0,0%,50%,.7);transform:scale(1.01);transition:all .5s}.repo-title{color:#1688f0;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(20px);backdrop-filter:blur(20px);border:1px solid #1688f0;border:1px solid var(--accent);border-radius:16px;margin:1em 0;min-height:180px;padding:1em;scroll-snap-align:center;text-align:center;transition:all .5s}.repo-list h3,span{background:transparent}.repo:hover{background:#000;background:rgba(0,0,0,.5);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-list:hover:has(li:hover) li:not(:hover){animation-duration:.5s;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 #1688f0;border:2px solid var(--accent);border-radius:30px;color:#e5e5e5;color:var(--text);padding:10px 20px;transition:background .5s,transform .5s,border .5}.link-btn:hover{background:#1688f0;background:rgba(22,136,240,.5);border:2px solid #e5e5e5;border:2px solid var(--text);box-shadow:0 0 50mm rgba(0,156,255,.7);transform:scale(1.1);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(8px);backdrop-filter:blur(8px);transform:scale(1.1);transition:all .5s}.user-info{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:grey;background:hsla(0,0%,50%,.2)}.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}.rdescription{-webkit-box-orient:vertical;-webkit-line-clamp:3;display:-webkit-box;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
diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css
index 74472f6a..71cb6fc4 100644
--- a/src/css/ghrepo.css
+++ b/src/css/ghrepo.css
@@ -108,7 +108,8 @@ a {
 	background: transparent;
 	color: var(--accent);
 	text-decoration: none;
-	-webkit-transition: background 0.5s
+	-webkit-transition: background 0.5s;
+	transition: background 0.5s
 }
 
 .github-img {
@@ -157,6 +158,10 @@ background: transparent;
 }
 
 .user-info img:hover {
+	border-radius: 5%;
+}
+
+.user-info img:hover {
 transform: scale(1.1);
 box-shadow: 0 0 100mm rgba(255, 238, 16,.7);
 }
@@ -184,9 +189,9 @@ box-shadow: 0 0 100mm rgba(255, 238, 16,.7);
 }
 
 .user-info .usertitle {
-font-family: audiowide;
-text-transform: uppercase;
-font-size: 2vw;
+	font-family: audiowide;
+	text-transform: uppercase;
+	font-size: 2vw;
 }
 
 .filter-repos,
@@ -201,25 +206,26 @@ input {
 	border: 2px solid var(--accent);
 	box-shadow: 0 0 10mm rgba(0,0,0,.7);
 	text-align: center;
-	-webkit-transition: all 0.5s
+	-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 {
@@ -238,15 +244,17 @@ background: rgba(244, 232, 193, 0.3);
 }
 
 .repos:hover {
-background: rgba(0, 0, 0, 0.3);
-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: all 0.5s;
 }
 
 .repo-title {
 	margin: 4px;
 	width: 100%;
+	font-weight: bold;
 	text-align: center;
 	color: var(--accent);
 }
@@ -265,33 +273,32 @@ transition: all 0.5s;
 .repo-list li {
 	width: 100%;
 	min-height: 180px;
-	border-radius: 10px;
+	border-radius: 16px;
 	margin: 1em 0;
 	border: 1px solid var(--accent);
 	padding: 1em;
 	text-align: center;
 	background: transparent;
-	-moz-filter: blur(20px);
-	-o-filter: blur(20px);
-	-ms-filter: blur(20px);
 	-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, all 0.3s
+	transition: background 0.5s, transform 1s, boarder 1.5s, all 0.3s
 }
 
 .repo-list:hover:has(li:hover) li:not(:hover) {
@@ -312,6 +319,7 @@ background: transparent;
 	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;
 }
 
 .link-btn:hover {
@@ -330,64 +338,39 @@ background: transparent;
 
 .intro:hover,
 .user-info:hover {
--moz-filter: blur(8px);
--o-filter: blur(8px);
--ms-filter: blur(8px);
--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);
+	transition: all 0.5s;
 }
 
 .user-info {
-/* background: transparent; */
-background: rgba(128, 128, 128, 0.2);
--moz-filter: blur(2px);
--o-filter: blur(2px);
--ms-filter: blur(2px);
--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); */
 }
 
 .repo {
-	-moz-filter: blur(20px);
-	-o-filter: blur(20px);
-	-ms-filter: blur(20px);
 	-webkit-backdrop-filter: blur(20px);
 	backdrop-filter: blur(20px);
 	box-shadow: 0 0 10mm rgba(0,0,0,.7);
 	overflow: auto;
 	overflow-x: hidden;
-	resize: both;
 }
 
 .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;
-}
-
-.rdescriptiontext:hover {
-/* animation: background-pan 3s linear infinite; */
-/* background: linear-gradient( */
-/*   to right, */
-/*   var(--purple), */
-/*   var(--violet), */
-/*   var(--pink), */
-/*   var(--purple) */
-/* ); */
-/* background-size: 200%; */
-/* -webkit-background-clip: text; */
-/* -webkit-text-fill-color: transparent; */
+	-webkit-line-clamp: unset;
 }
 
-
 @media (min-width: 700px) {
 	.user-info div {
 		width: 45%;
@@ -418,3 +401,5 @@ overflow: hidden
 		width: 30%;
 	}
 }
+
+/* TODO: Make all webkit-transition do with normal transition as well */
\ No newline at end of file