Fix dimensions and adding posts (#66)

* feat: make responsive banner * feat: adding post to bootcamp and solutions --------- Co-authored-by: raymond1242 <[email protected]>
FOPInformatica · Dec 6, 2023 · 8e171a7 · 8e171a7
1 parent 8258c4c
commit 8e171a7
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 109 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
diff --git a/_posts/2023-11-28-olimpiada-mirror-primera-fase-2023.markdown b/_posts/2023-11-28-olimpiada-mirror-primera-fase-2023.markdown
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: "Competencia Mirror de la Olimpiada Peruana de Informática Primera Fase"
-date: 2023-11-26 13:00:00 -0500
+date: 2023-11-29 13:00:00 -0500
 categories: historia
 author: FOPI
 image: /assets/images/olimpiada-mirror.png
@@ -16,4 +16,4 @@ author_company: FOPI
 
 ¡Dale rienda suelta a tu curiosidad y participa en este emocionante Mirror Contest! 🌐🏆 ¡Que la resolución de problemas comience! 🔥
 
-#OPInformática #MirrorContest #DesafíoDeProgramación #CompetenciaInformática
+#FOPInformática #MirrorContest #DesafíoDeProgramación #CompetenciaInformática
diff --git a/_posts/2023-12-06-bootcamp-2023.markdown b/_posts/2023-12-06-bootcamp-2023.markdown
@@ -0,0 +1,25 @@
+---
+layout: post
+title: "Campamento de Programación Olímpica Internacional para Principiantes"
+date: 2023-12-05 13:00:00 -0500
+categories: historia
+author: FOPI
+image: /assets/images/Bootcamp-2023.png
+is_post: true
+avatar: /assets/images/fopi-logo.png
+author_company: FOPI
+---
+
+🚀 ¡Atención futuros programadores! 🌐✨ Anunciamos con emoción el Campamento Online Iberoamericano para Principiantes en Programación Competitiva. ¿Te entusiasma aprender o mejorar tus habilidades de programación?
+
+💻 ¡Es tu oportunidad de sumergirte en el mundo de la programación competitiva! No importa si eres principiante o ya tienes experiencia, ¡todos son bienvenidos! 🌟 Este campamento será una experiencia única para expandir tus conocimientos y conectar con apasionados de la programación de toda Iberoamérica.
+
+📆 ¡La fecha límite para inscribirse es el 9 de diciembre! No pierdas la oportunidad de formar parte de esta increíble comunidad. 🚀 ¡Prepárate para desafiar tu mente y llevar tus habilidades al siguiente nivel! 🌐💡
+
+Recordatorio❗️ No se olviden de ingresar al enlace de Discord que se encuentra en las Bases. 
+
+Conoce las bases del campamento en el siguiente [enlace](https://drive.google.com/file/d/1if3m0DPda6trD5AiqqxIxc7C398yw7LE/view?usp=sharing).
+
+Formulario de inscripción [enlace](https://forms.gle/EXx7Q6Mn3nVLYkPUA).
+
+#CampamentoProgramación #ProgramaciónCompetitiva #AprendizajeOnline #InscripcionesAbiertas
diff --git a/_posts/2023-12-07-solucionario-2023.markdown b/_posts/2023-12-07-solucionario-2023.markdown
@@ -0,0 +1,21 @@
+---
+layout: post
+title: "Solucionario Primera Fase Olimpiadas Peruanas de Informática 2023"
+date: 2023-12-05 13:00:00 -0500
+categories: historia
+author: FOPI
+image: /assets/images/solucionario-fase-1-2023.png
+is_post: true
+avatar: /assets/images/fopi-logo.png
+author_company: FOPI
+---
+
+🔍 ¡Buenas noticias, competidores! 🌐✨ El solucionario del Concurso de la Primera Fase de las Olimpiadas Peruanas de Informática 2023 ya está disponible. ¿Estás listo para descubrir las respuestas y mejorar tus habilidades?
+
+📚 Encuentra el solucionario completo en el siguiente [enlace](https://github.com/FOPInformatica/soluciones/tree/master/OPI/2024/Fase%201)
+
+¡Sumérgete en las soluciones y desentraña los secretos detrás de cada desafío!
+
+🚀 ¡Esperamos que encuentres este recurso útil para tu aprendizaje y desarrollo en el emocionante mundo de la programación! 💻🌟
+
+#FOPInformática #Solucionario #AprendizajeProgramación #DesafíosResueltos
diff --git a/_sass/main.scss b/_sass/main.scss
@@ -56,7 +56,7 @@ main.page-content {
   padding: 0;
 
   .wrapper {
-    padding: 0;
+    padding: 20px 0;
     max-width: none;
     background-color: white;
 
@@ -80,17 +80,14 @@ main.page-content {
     max-width: none;
 
     @media (max-width: $breakpoint-lg) {
-      padding: 0 5rem;
       margin: 0;
     }
 
     @media (max-width: $breakpoint-md) {
-      padding: 0 2.5rem;
       margin: 0;
     }
 
     @media (max-width: $breakpoint-sm) {
-      padding: 0 2rem;
       margin: 0;
     }
   }

diff --git a/_sass/sections/banner.scss b/_sass/sections/banner.scss
@@ -46,7 +46,7 @@
 
     .banner-phase {
         display: flex;
-        max-width: 360px;
+        width: 350px;
         flex-direction: column;
         margin: auto;
         padding: 1.5rem;
@@ -60,16 +60,14 @@
     .banner-base {
         display: flex;
         flex-direction: column;
-        max-width: 360px;
+        width: 360px;
         padding: 1.5rem;
         font-size: 18px;
         font-weight: 300;
     }
 
     .banner-picture {
-        display: inline;
-        max-width: 750px;
-        margin: auto;
+        width: 745px;
 
         img {
             border-radius: 24px;
@@ -83,29 +81,100 @@
         }
     }
 
-    @media (max-width: 1350px) {
-        padding: 40px 0px;
+    @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 {
-            display: inline;
-            width: auto;
-            max-width: 400px;
+            min-width: 640px;
+            text-align: center;
+
+            img {
+                width: 300px;
+            }
         }
     }
 
-    @media (max-width: 900px) {
-        flex-direction: column;
+    @media screen and (max-width: $breakpoint-xl) {
+        .banner-phase {
+            width: 260px;
+        }
+
+        .banner-base {
+            width: 240px;
+            font-size: 14px;
+        }
 
         .banner-picture {
-            margin: auto;
-            text-align: center;
             align-items: center;
-            justify-content: center;
-            max-width: none;
+            width: fit-content;
+
+            img {
+                width: 300px;
+            }
+        }
+
+    }
+
+    @media (max-width: $breakpoint-lg) {
+        display: flex;
+        flex-direction: column;
+        padding: 10px;
+        gap: 1rem;
+
+        .site-title {
+            font-size: 32px;
+        }
+
+        .site-subtitle {
+            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));   
+
+            img {
+                width: 290px;
+            }
+        }
+    }
 
+    @media (max-width: $breakpoint-md) {
+        .banner-phase {
+            width: 450px;
+            font-size: 16px;
+        }
+
+        .banner-base {
+            width: 450px;
+            font-size: 16px;
+        }
+
+        .banner-picture {
             img {
-                width: 480px;
-                max-width: 450px;
+                width: 300px;
             }
         }
     }

diff --git a/assets/images/Bootcamp-2023.png b/assets/images/Bootcamp-2023.png
diff --git a/assets/images/solucionario-fase-1-2023.png b/assets/images/solucionario-fase-1-2023.png