init ghrepos and more images, thanks to @2kabhishek

3 files changed, 304 insertions, 19 deletions

diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css
new file mode 100644
index 00000000..fb038036
--- /dev/null
+++ b/src/css/ghrepo.css
@@ -0,0 +1,296 @@
+@media (prefers-color-scheme: light) {
+    :root {
+        --text: #151515;
+        --accent: #1688f0;
+        --bg-main: #fff;
+        --bg-repo: #f0f0f0;
+        --bg-user: #f5f5f5;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --text: #e5e5e5;
+        --accent: #1688f0;
+        --bg-main: #000;
+        --bg-repo: #0f0f1a;
+        --bg-user: #0a0a0f;
+    }
+}
+
+* {
+    box-sizing: border-box;
+    /* background-image: url(/images/backgroundNightCity.jpg); */
+    background: transparent;
+}
+
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    margin-top: (3em);
+    font-family: 'Open Sans', sans-serif;
+    background-image: url(/images/heigh-grass.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    font-size: 16px;
+}
+
+main {
+  margin-top: 3em
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 90%;
+    max-width: 1280px;
+    background: transparent;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.container small, h1 {
+  background: transparent;
+}
+
+.hide {
+    /* '!important' is to make sure that when we add the class using JS, it takes precendence */
+    display: none !important;
+}
+
+h1 {
+    color: var(--accent);
+    margin-bottom: 4px;
+}
+
+small {
+    width: 100%;
+    text-align: center;
+    display: block;
+    margin-bottom: 20px;
+}
+
+h2 {
+    width: 100%;
+    text-align: center;
+    color: var(--text);
+    margin: 0;
+}
+
+img {
+    border: 2px solid var(--accent);
+    box-shadow: 0 0px 6px var(--accent), 0 0px 6px var(--accent);
+    max-width: 100%;
+    height: auto;
+}
+
+a {
+    background: transparent;
+    color: var(--accent);
+    text-decoration: none;
+}
+
+a:hover {
+    /* color: var(--text); */
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.github-img {
+    width: 45px;
+    margin-right: 8px;
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+}
+
+.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;
+}
+
+.user-info figure {
+    width: 90%;
+    max-width: 250px;
+    background: transparent;
+}
+
+.user-info img {
+    border-radius: 100%;
+}
+
+.user-info div {
+    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;
+}
+
+.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);
+    text-align: center;
+}
+
+.filter-repos:hover {
+  background: rgba(10, 10, 15, 0.5);
+}
+
+.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;
+    margin-bottom: 4em;
+}
+
+h3 {
+    margin: 4px;
+    width: 100%;
+    text-align: center;
+    color: var(--accent);
+}
+
+.repo-list {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: flex-start;
+    background: transparent;
+    /* background: rgba(128, 128, 128, 0.2); */
+
+}
+
+.repo-list li {
+    width: 100%;
+    min-height: 180px;
+    border-radius: 10px;
+    margin: 1em 0;
+    border: 1px solid var(--accent);
+    padding: 1em;
+    text-align: center;
+    background: transparent;
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    /* background: rgba(128, 128, 128, 0.3); */
+}
+
+.repo-list h3, span{
+  background: transparent;
+}
+
+.repo-list li:hover {
+    box-shadow: 0 3px 6px var(--accent), 0 3px 6px var(--accent);
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.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);
+}
+
+.link-btn:hover {
+    background: rgba(22, 136, 240, 0.5);
+    border: 2px solid var(--text);
+    transform: scale(1.1);
+}
+
+.repo-list p {
+    padding: 0em 0.5em;
+    margin: 0.5em 0;
+    background: transparent;
+}
+
+.user-info {
+  background: transparent;
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+
+}
+
+@media (min-width: 700px) {
+    .user-info div {
+        width: 45%;
+        text-align: left;
+        /* background: rgba(10, 10, 15, 0.1); */
+        background: transparent;
+    }
+
+    .repo-list {
+        justify-content: space-between;
+    }
+
+    .repo-list li {
+        width: 48%;
+    }
+}
+
+.repo {
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+
+}
+
+.user-info * {
+  background: transparent;
+}
+
+@media (max-width: 700px) {
+    .user-info div p {
+        margin: 10px;
+        
+    }
+}
+
+@media (min-width: 1200px) {
+    .repo-list li {
+        width: 30%;
+    }
+}
diff --git a/src/css/index.css b/src/css/index.css
index ea48c8ff..29262abf 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -33,8 +33,8 @@
     height: 100%;
     border: 1px solid rgba(255,255,255, .5);
     border-radius: 0.7em;
-    -webkit-backdrop-filter: blur(20px);
-    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
     box-shadow: 0 0 10mm rgba(0,0,0,.7);
     display: flex;
     justify-content: center;
@@ -50,7 +50,7 @@
 
 .window .placeholder .text .title {
     font-family: smooth;
-    font-size: 15vw;
+    font-size: 12.5vw;
 }
 
 .window .placeholder .text .br {
@@ -59,17 +59,3 @@
     width: 0;
     margin-bottom: 5vh;
 }
-
-
-/* programs =============================================== */
-
-.programs {
-    text-align: center;
-    background-color: #F4E8C1;
-    color: #331E38;
-}
-
-.programs .programsList {
-    padding: 10vw;
-    line-height: 40px;
-}
\ No newline at end of file
diff --git a/src/css/style.css b/src/css/style.css
index 3966446b..410e9646 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -43,7 +43,7 @@ header {
     height: 3em;
     justify-content: space-between;
     align-items:center;
-    background: color(0, 0, 0, .1);
+    /* background: color(0, 0, 0, .1); */
     z-index: 1000;
     background-color: #331E38;
 }
@@ -82,6 +82,9 @@ header {
     transform: scaleX(1);
 }
 
+.navBar a:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
 
 .navBar a.active::after {
     content: '';
@@ -106,4 +109,4 @@ header {
 
 section {
     position: relative;
-}
\ No newline at end of file
+}