feat: improve mobile view (#76)

* feat: improve mobile view * feat: lint * feat: padding title new
FOPInformatica · Mar 15, 2024 · 231cdcf · 231cdcf
1 parent 26c6c44
commit 231cdcf
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -31,3 +31,11 @@
         }
     }
 }
+
+@media (max-width: $breakpoint-md) {
+    .winners-wrapper {
+        padding: 40px 30px;
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+        gap: 1rem;
+    }
+}