GITHUB REF IS NOW RESPONSIVE

pytgcalls · Sep 23, 2023 · 0898c8b · 0898c8b
1 parent bc3c7ed
commit 0898c8b
Showing 1 changed file with 61 additions and 6 deletions.
diff --git a/src/style/content.css b/src/style/content.css
@@ -338,12 +338,14 @@ body .page-container .content:not(.is-loading) a.github-ref {
   color: #FFFFFF;
 }
 
-body .page-container .content:not(.is-loading) .github-ref:hover {
-  gap: 20px;
-}
-
-body .page-container .content:not(.is-loading) .github-ref:active {
-  gap: 70px;
+@media screen and (min-width: 1301px) {
+  body .page-container .content:not(.is-loading) .github-ref:hover {
+    gap: 20px;
+  }
+
+  body .page-container .content:not(.is-loading) .github-ref:active {
+    gap: 70px;
+  }
 }
 
 body .page-container .content:not(.is-loading) .github-ref.is-loading {
@@ -367,6 +369,15 @@ body .page-container .content:not(.is-loading) .github-ref:not(.is-loading) {
   justify-content: space-around;
   overflow: hidden;
   background: transparent;
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 1300px) {
+  body .page-container .content:not(.is-loading) .github-ref:not(.is-loading) { 
+    flex-direction: column;
+    padding: 18px;
+    height: auto;
+  }
 }
 
 body .page-container .content:not(.is-loading) .github-ref:not(.is-loading)::before {
@@ -415,6 +426,27 @@ body .page-container .content:not(.is-loading) .github-ref:not(.is-loading) .rep
   opacity: 0.7;
 }
 
+@media screen and (max-width: 1300px) {
+  body .page-container .content:not(.is-loading) .github-ref:not(.is-loading) .repo-info { 
+    width: 100%;
+    text-align: center;
+  }
+
+  body .page-container .content:not(.is-loading) .github-ref:not(.is-loading) .repo-info .repo-title { 
+    font-size: 23px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  body .page-container .content:not(.is-loading) .github-ref:not(.is-loading) .repo-info .repo-description { 
+    display: none;
+  }
+
+  body .page-container .content:not(.is-loading) .github-ref:not(.is-loading) .repo-info .repo-owner {
+    justify-content: center;
+  }
+}
+
 body .page-container .content:not(.is-loading) .github-ref:not(.is-loading) .illustration {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -432,10 +464,30 @@ body .page-container .content:not(.is-loading) .github-ref:not(.is-loading) .ill
   z-index: 2;
   border-radius: 10px;
   min-width: 136px;
+  overflow: hidden;
+  white-space: nowrap;
   border: 1px solid #ffffff42;
   transition: 0.4s background;
 }
 
+@media screen and (max-width: 1300px) {
+  body .page-container .content:not(.is-loading) .github-ref:not(.is-loading) .illustration {
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  body .page-container .content:not(.is-loading) .github-ref:not(.is-loading) .illustration .container {
+    min-width: 0px;
+  }
+}
+
+@media screen and (max-width: 1300px) and (min-width: 600px) {
+  body .page-container .content:not(.is-loading) .github-ref:not(.is-loading) .illustration {
+    grid-template-rows: 1fr;
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
 body .page-container .content:not(.is-loading) .github-ref:not(.is-loading):hover .illustration .container {
   background: rgba(0, 0, 0, 0.8);
 }
@@ -448,4 +500,7 @@ body .page-container .content:not(.is-loading) .github-ref:not(.is-loading) .ill
 
 body .page-container .content:not(.is-loading) .github-ref:not(.is-loading) .illustration .container .title {
   font-size: 19px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }