init ghrepos and more images, thanks to @2kabhishek

1 files changed, 296 insertions, 0 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%;
+    }
+}