From 231cdcfa18941c5ef07248345ea2295bf994fc35 Mon Sep 17 00:00:00 2001
From: Raymond Negron Valqui <33165861+raymond1242@users.noreply.github.com>
Date: Fri, 15 Mar 2024 05:45:28 -0500
Subject: [PATCH] feat: improve mobile view (#76)

* feat: improve mobile view

* feat: lint

* feat: padding title new
---
 _sass/blog.scss                     |  2 +-
 _sass/sections/EGOI.scss            |  7 +++++-
 _sass/sections/OII.scss             | 16 ++++++++++++++
 _sass/sections/banner.scss          | 33 ++++++-----------------------
 _sass/sections/ioi-egoi-2024.scss   |  6 ++++++
 _sass/sections/winners-phase-2.scss |  8 +++++++
 6 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/_sass/blog.scss b/_sass/blog.scss
index d92dc06..804a982 100644
--- a/_sass/blog.scss
+++ b/_sass/blog.scss
@@ -15,7 +15,7 @@
   margin-bottom: 0;
 
   @media (max-width: 991.98px) {
-    padding: 0;
+    padding: 2rem 1rem;
   }
 }
 
diff --git a/_sass/sections/EGOI.scss b/_sass/sections/EGOI.scss
index d66d7d9..c4e8a54 100644
--- a/_sass/sections/EGOI.scss
+++ b/_sass/sections/EGOI.scss
@@ -17,7 +17,6 @@
                 margin: 10px 0;
                 font-size: 23px;
                 font-weight: 500;
-                width: 250px;
                 justify-content: center;
             }
 
@@ -43,3 +42,9 @@
         }
     }
 }
+
+@media (max-width: $breakpoint-sm) {
+    .egoi-wrapper {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+}
diff --git a/_sass/sections/OII.scss b/_sass/sections/OII.scss
index e56b6bd..9297340 100644
--- a/_sass/sections/OII.scss
+++ b/_sass/sections/OII.scss
@@ -47,3 +47,19 @@
         width: 180px;
     }
 }
+
+@media (max-width: $breakpoint-md) {
+    .oii-wrapper {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .oii-calendar{
+        flex-direction: column;
+        gap: 1rem;
+        padding: 2rem;
+
+        img {
+            width: 150px;
+        }
+    }
+}
diff --git a/_sass/sections/banner.scss b/_sass/sections/banner.scss
index c97bb79..a7878d2 100644
--- a/_sass/sections/banner.scss
+++ b/_sass/sections/banner.scss
@@ -46,7 +46,6 @@
 
     .banner-phase {
         display: flex;
-        width: 350px;
         flex-direction: column;
         margin: auto;
         padding: 1.5rem;
@@ -60,14 +59,15 @@
     .banner-base {
         display: flex;
         flex-direction: column;
-        width: 360px;
         padding: 1.5rem;
         font-size: 18px;
         font-weight: 300;
     }
 
     .banner-picture {
-        width: 745px;
+        display: grid;
+        gap: 0.5rem;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
 
         img {
             border-radius: 24px;
@@ -82,23 +82,16 @@
     }
 
     @media screen and (max-width: $breakpoint-xxl) {
-        padding: 10px 90px;
 
         .site-title {
             font-size: 32px;
         }
 
-        .banner-phase {
-            min-width: 320px;
-        }
-
         .banner-base {
-            min-width: 320px;
             font-size: 16px;
         }
 
         .banner-picture {
-            min-width: 640px;
             text-align: center;
 
             img {
@@ -108,12 +101,7 @@
     }
 
     @media screen and (max-width: $breakpoint-xl) {
-        .banner-phase {
-            width: 260px;
-        }
-
         .banner-base {
-            width: 240px;
             font-size: 14px;
         }
 
@@ -142,18 +130,13 @@
             font-size: 20px;
         }
 
-        .banner-phase {
-            width: 450px;
-        }
-
         .banner-base {
-            width: 450px;
             font-size: 16px;
         }
 
         .banner-picture {
             display: grid;
-            grid-template-columns: repeat(2, minmax(0, 1fr));   
+            grid-template-columns: repeat(2, minmax(0, 1fr));
 
             img {
                 width: 290px;
@@ -162,17 +145,13 @@
     }
 
     @media (max-width: $breakpoint-md) {
-        .banner-phase {
-            width: 450px;
-            font-size: 16px;
-        }
-
         .banner-base {
-            width: 450px;
             font-size: 16px;
         }
 
         .banner-picture {
+            grid-template-columns: repeat(1, minmax(0, 1fr));
+
             img {
                 width: 300px;
             }
diff --git a/_sass/sections/ioi-egoi-2024.scss b/_sass/sections/ioi-egoi-2024.scss
index e7beb1b..4be36da 100644
--- a/_sass/sections/ioi-egoi-2024.scss
+++ b/_sass/sections/ioi-egoi-2024.scss
@@ -18,3 +18,9 @@
         color: black;
     }
 }
+
+@media (max-width: $breakpoint-md) {
+    .ioi-egoi-wrapper {
+        padding: 40px 30px;
+    }
+}
diff --git a/_sass/sections/winners-phase-2.scss b/_sass/sections/winners-phase-2.scss
index 7e7e580..322acbd 100644
--- a/_sass/sections/winners-phase-2.scss
+++ b/_sass/sections/winners-phase-2.scss
@@ -31,3 +31,11 @@
         }
     }
 }
+
+@media (max-width: $breakpoint-md) {
+    .winners-wrapper {
+        padding: 40px 30px;
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+        gap: 1rem;
+    }
+}