Merge pull request #26 from colmedev/colmedev/responsive-creators

feat: 💄 Improve responsive in creators view
UXCorpRangel · Sep 20, 2024 · 14642c7 · 14642c7
2 parents fc86e39 + 4024f97
commit 14642c7
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 10 deletions.
diff --git a/src/components/Creator/Creator.astro b/src/components/Creator/Creator.astro
@@ -54,8 +54,12 @@ const { name, description, avatar, direction, links, birthdate, isAmazing = fals
 
 <style>
   .creator {
-    max-width: 45vw;
+    display: flex;
+    flex-direction: column;
+    max-width: 864px;
     user-select: none;
+    padding-inline: 1rem;
+    padding-bottom: 1.5rem;
 
     & header {
       display: flex;
@@ -99,7 +103,14 @@ const { name, description, avatar, direction, links, birthdate, isAmazing = fals
 
         & .networking {
           display: flex;
-          gap: 1.5rem;
+          gap: 1rem;
+          flex-wrap: wrap;
+          justify-content: center;
+
+          @media (width >= 768px) {
+            flex-wrap: nowrap;
+            gap: 1.5rem;
+          }
 
           & a {
             position: relative;
@@ -150,7 +161,11 @@ const { name, description, avatar, direction, links, birthdate, isAmazing = fals
 
     &.left {
       & header {
-        flex-direction: row;
+        flex-direction: column;
+
+        @media (width >= 768px) {
+          flex-direction: row;
+        }
 
         & .avatar-wrapper {
           &.party::after {
@@ -164,18 +179,30 @@ const { name, description, avatar, direction, links, birthdate, isAmazing = fals
         }
 
         & .creator-card {
-          align-items: flex-start;
+          align-items: center;
+
+          @media (width >= 768px) {
+            align-items: flex-start;
+          }
         }
       }
 
       & p {
-        text-align: start;
+        text-align: center;
+
+        @media (width >= 768px) {
+          text-align: start;
+        }
       }
     }
 
     &.right {
       & header {
-        flex-direction: row-reverse;
+        flex-direction: column;
+
+        @media (width >= 768px) {
+          flex-direction: row-reverse;
+        }
 
         & .avatar-wrapper {
           &.party::after {
@@ -189,12 +216,20 @@ const { name, description, avatar, direction, links, birthdate, isAmazing = fals
         }
 
         & .creator-card {
-          align-items: flex-end;
+          align-items: center;
+
+          @media (width >= 768px) {
+            align-items: flex-end;
+          }
         }
       }
 
       & p {
-        text-align: end;
+        text-align: center;
+
+        @media (width >= 768px) {
+          text-align: end;
+        }
       }
     }
   }

diff --git a/src/pages/creators.astro b/src/pages/creators.astro
@@ -36,14 +36,20 @@ import { creators } from '@data/creators';
     margin-bottom: 5rem;
 
     & .title {
-      width: 45vw;
+      width: 70%;
+      max-width: 864px;
       position: relative;
       font-family: var(--font-family-primary);
-      font-size: 5.5rem;
+      font-size: 3.5rem;
       text-align: center;
       margin: 1rem 0 2rem;
       user-select: none;
 
+      @media (width >= 768px) {
+        width: 100%;
+        font-size: 5.5rem;
+      }
+
       &::after {
         content: '';
         position: absolute;