Merge pull request #22 from colmedev/colmedev/ranking-responsive

Colmedev Ranking Responsive
UXCorpRangel · Sep 20, 2024 · fc86e39 · fc86e39
2 parents 2942623 + 0dab72d
commit fc86e39
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -18,6 +18,7 @@ Por ahora la única manera de contribuir a este proyecto es [creando las issues]
 - **¿Piensan liberar el código para implementar el sistema de cartas en mi stream?**
 
 Por ahora no lo tenemos contemplado, una vez terminemos el proyecto lo evaluaremos ya que queremos que sea uin proyecto de código abierto.
+
 - **¿Puedo entrar al equipo de desarrollo o diseño?**
 
 El proyecto está en una etapa muy temprana y por el momento queremos mantener la privacidad y hermeticidad del mismo, el equipo está formado por [personas de confianza de la comunidad](https://github.com/UXCorpRangel) y así como ellos llegaron a ser parte tú también lo puedes lograr pero todo a su tiempo.

diff --git a/src/components/RankingItem/RankingItem.astro b/src/components/RankingItem/RankingItem.astro
@@ -55,13 +55,17 @@ const { place, score, username } = Astro.props;
     }
 
     & .ranking-item {
-      width: 40vw;
+      width: 70vw;
       height: 3rem;
       padding: 2rem;
       position: relative;
       overflow: hidden;
       user-select: none;
 
+      @media (width >= 780px) {
+        width: 40vw;
+      }
+
       color: var(--text-color);
       font-family: var(--font-family-primary);
       text-decoration: none;
@@ -107,7 +111,11 @@ const { place, score, username } = Astro.props;
         line-height: 0.9;
 
         & .number {
-          font-size: 3.5rem;
+          font-size: 1.5rem;
+
+          @media (width >= 780px) {
+            font-size: 3.5rem;
+          }
         }
 
         & .subtitle {
@@ -122,8 +130,15 @@ const { place, score, username } = Astro.props;
 
       & .username {
         width: 75%;
-        font-size: 3.8rem;
-        padding: 0 1.5rem;
+        font-size: 1.5rem;
+        padding: 0 1.3rem;
+        word-break: break-all;
+        line-height: 0.9;
+
+        @media (width >= 780px) {
+          font-size: 3rem;
+          padding: 0 1.5rem;
+        }
       }
 
       & .score {

diff --git a/src/pages/ranking/index.astro b/src/pages/ranking/index.astro
@@ -51,14 +51,19 @@ import { RANKING_MOCK } from '@data/ranking';
       align-items: center;
 
       & .title {
-        width: 45vw;
+        width: 85vw;
         position: relative;
         font-family: var(--font-family-primary);
-        font-size: 5.5rem;
+        font-size: 3.5rem;
         user-select: none;
         text-align: center;
         margin: 1rem 0 2rem;
 
+        @media (width >= 768px) {
+          font-size: 5.5rem;
+          width: 45vw;
+        }
+
         &::after {
           content: '';
           position: absolute;
@@ -71,24 +76,38 @@ import { RANKING_MOCK } from '@data/ranking';
       }
 
       & .search-wrapper {
-        width: 43vw;
+        width: 90vw;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: space-between;
         gap: 1rem;
         padding: 1rem 1rem 2rem;
 
+        @media (width >= 768px) {
+          width: 45vw;
+        }
+
         & p {
           font-size: 1.2rem;
           font-weight: 600;
           margin: 0;
           flex: 0.7;
+          text-wrap: pretty;
+
+          @media (width <= 768.98px) {
+            text-align: center;
+          }
         }
 
         & search {
           --transition: 0.3s ease-in-out;
           --border: 1px;
-          --input-size: 17rem;
+          --input-size: 9rem;
+
+          @media (width >= 768px) {
+            --input-size: 17rem;
+          }
 
           display: flex;
           gap: 1rem;