#87 Agregar validaciones para ajustar responsive

PyConColombia · May 18, 2024 · 1e35964 · 1e35964
1 parent 73753b9
commit 1e35964
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 5 deletions.
diff --git a/src/app/[lang]/keynotes/components/Card.js b/src/app/[lang]/keynotes/components/Card.js
@@ -26,7 +26,7 @@ const Card = ({ speakerData, reverse, index, lang }) => {
 
   return (
     <Row className="keynote-card">
-      <Col xs={12} md={{ span: 4, order: reverse ? 'last' : 'first' }}>
+      <Col xs={12} lg={{ span: 4, order: reverse ? 'last' : 'first' }}>
         <Ratio aspectRatio="1x1">
           <Link href={`/${lang}/keynotes/${speakerData.id}`}>
             <Image
@@ -39,9 +39,9 @@ const Card = ({ speakerData, reverse, index, lang }) => {
           </Link>
         </Ratio>
       </Col>
-      <Col xs={12} md={8}>
+      <Col xs={12} lg={8}>
         <Row>
-          <Col xs={12} lg={{ span: 8, order: reverse ? 'last' : 'first' }}>
+          <Col xs={12}>
             <h3 className={`keynote-title ${reverse ? 'text-right' : 'text-left'}`}>
               <span className="bold">
                 {speakerData.first_name} {speakerData.last_name}
@@ -54,8 +54,8 @@ const Card = ({ speakerData, reverse, index, lang }) => {
               )}
             </h3>
           </Col>
-          <Col xs={12} lg={4}>
-            <div className={`social-icons ${reverse ? 'text-left' : 'text-right'}`}>
+          <Col xs={12}>
+            <div className={`social-icons ${reverse ? 'text-right' : 'text-left'}`}>
               {speakerData.facebook && (
                 <a
                   href={`https://www.facebook.com/${speakerData.facebook}`}

diff --git a/src/styles/partials/_call-for-proposals.sass b/src/styles/partials/_call-for-proposals.sass
@@ -168,3 +168,8 @@
         background-repeat: repeat-x
         background-size: contain
         height: 30px
+
+@media screen and (max-width: 768px)
+    .call-for-proposals
+        .welcome
+            background-image: none
diff --git a/src/styles/partials/_index.sass b/src/styles/partials/_index.sass
@@ -231,3 +231,19 @@ $duration: 10s
     input
         border-radius: 30px
         font-size: 15px
+
+@media screen and (max-width: 768px)
+    .welcome
+        .welcome-container
+            background-image: none
+            .description
+                font-size: 30px
+                line-height: 50px
+                padding: 20px
+
+            .icons-container
+                display: none
+
+    #call-speakers
+        .background
+            background-image: none
diff --git a/src/styles/partials/_keynotes.sass b/src/styles/partials/_keynotes.sass
@@ -168,3 +168,19 @@
 .text-border-purple
     border: 1px solid variables.$border-purple
     color: variables.$border-purple
+
+@media screen and (max-width: 768px)
+    #keynotes
+        .keynotes-bg
+            .welcome
+                padding: 20px 0
+
+@media (min-width: 992px) and (max-width: 1200px)
+    .border-pink
+        border: 20px solid variables.$border-pink
+    .border-blue
+        border: 20px solid variables.$border-blue
+    .border-yellow
+        border: 20px solid variables.$border-yellow
+    .border-purple
+        border: 20px solid variables.$border-purple