feat: adding banner section and post related to Bases olimpiadas (#63)

Co-authored-by: raymond1242 <[email protected]>

_includes/sections/banner.html

@@ -0,0 +1,34 @@
+<div class="site-banner">
+    <div class="banner-wrapper">
+        <div class="banner-phase">
+            <h1 class="site-title">Olimpiada Peruana de Informática 2024</h1>
+            <h2 class="site-subtitle">
+                Primera Fase
+            </h2>
+            <p>
+                Fecha: 26 de Noviembre<br>
+                Inscríbete en el siguiente formulario
+                <a href="https://forms.gle/zuJm3DbueQYxQeGV7" target="_blank">aquí</a>
+            </p>
+            <a class="banner-btn" href="/historia/2023/11/10/primera-fase-opi-2023.html">
+                Ir a la publicación
+            </a>
+        </div>
+        <div class="banner-base">
+            <h2 class="">Bases del Concurso OPI 2024</h2>
+            <p>
+                Conoce todo sobre las bases de la Olimpiada Peruana de Informática 2024 en el siguiente
+                <a href="https://docs.google.com/document/d/1M-5ssBHV9DKoAXWY6OaeG9bD9o8Sn36ZDqrVM0Mnui0/edit?usp=sharing" target="_blank">
+                    enlace
+                </a>
+                🚀
+            </p>
+        </div>
+    </div>
+    <div class="banner-picture">
+        <img src="/assets/images/OPI-2023.jpg" width="400" alt="OPI image">
+        <img src="/assets/images/IOI-2022.jpg" width="320" alt="IOI image">
+        <img src="/assets/images/IOI-3-2022.jpg" width="320" alt="IOI-3 image">
+        <img src="/assets/images/IOI-2-2022.jpg" width="400" alt="IOI-2 image">
+    </div>
+</div>

_layouts/home.html

@@ -18,6 +18,7 @@ <h1 class="full-title">
       {%- endif -%}
 
       <div class="wrapper">
+        {%- include sections/banner.html -%}
         {%- include sections/description.html -%}
         {%- include latest_news.html limit=3 -%}
       </div>

_posts/2023-11-10-primera-fase-opi-2023.markdown

@@ -7,7 +7,7 @@ author: FOPI
 image: /assets/images/phase-1-2023.png
 is_post: true
 avatar: /assets/images/fopi-logo.png
-author_company: Google
+author_company: FOPI
 ---
 
 ¡Ya están abiertas las inscripciones para la Primera Fase de la Olimpiada Peruana de Informática 2023!

_posts/2023-11-14-llamado-problemas-2023.markdown

@@ -7,7 +7,7 @@ author: FOPI
 image: /assets/images/llamado-problemas-2023.png
 is_post: true
 avatar: /assets/images/fopi-logo.png
-author_company: Google
+author_company: FOPI
 ---
 La Federación Olímpica Peruana de Informática hace un llamado público a quienes quieran colaborar proponiendo problemas para la competición. 🚀
 Tu propuesta podrá ser usada para la Fase 1, Fase 2, LCQ y OII 2024

_posts/2023-11-24-bases-olimpiadas-2024.markdown

@@ -0,0 +1,20 @@
+---
+layout: post
+title: "Bases Olimpiada Peruana de Informática 2023 - 2024"
+date: 2023-11-23 13:00:00 -0500
+categories: historia
+author: FOPI
+image: /assets/images/bases-2024.png
+is_post: true
+avatar: /assets/images/fopi-logo.png
+author_company: FOPI
+---
+! Ya están disponibles las Bases de Informática para las Olimpiadas 2023 - 2024 !
+
+En este documento se detalla la estructura de la competencia, los requisitos para participar, criterios de evaluación, premios y mucho más.
+
+Conoce los detalles de la competencia en el siguiente [enlace de las Bases](https://docs.google.com/document/d/1M-5ssBHV9DKoAXWY6OaeG9bD9o8Sn36ZDqrVM0Mnui0/edit?usp=sharing)
+
+! Estén atentos a nuestras próximas publicaciones ! 🚀
+
+#olimpiadas2023 #code #fopi

_sass/main.scss

@@ -43,9 +43,10 @@ a.btn {
 }
 
 main.page-content {
+  padding: 0;
 
   .wrapper {
-    margin: 0 8rem;
+    padding: 30px 90px;
     max-width: none;
 
     @media (max-width: $breakpoint-lg) {

_sass/sections/banner.scss

@@ -0,0 +1,110 @@
+.site-banner {
+    display: flex;
+    gap: 2rem;
+    padding-top: 35px;
+    margin: auto;
+    align-items: center;
+    justify-content: center;
+
+    .site-title {
+        color: red;
+        font-size: 40px;
+        font-weight: 400;
+    }
+
+    .site-subtitle {
+        font-size: 25px;
+        font-weight: 400;
+        margin: 10px 0;
+        color: #515151;
+    }
+
+    .banner-btn {
+        margin: 4px 0;
+        padding: 12px 18px;
+        border: 1px solid $primary-2;
+        color: white;
+        border-radius: 18px;
+        font-size: 16px;
+        font-weight: 300;
+        cursor: pointer;
+        width: fit-content;
+        background-color: $primary-2;
+        transition: all 0.2s ease-in-out;
+    }
+
+    .banner-btn:hover {
+        background-color: $secondary-1;
+        color: $primary-2;
+    }
+
+    .banner-wrapper {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .banner-phase {
+        display: flex;
+        max-width: 360px;
+        flex-direction: column;
+        margin: auto;
+        padding: 1.5rem;
+        border: 1px solid rgb(242, 242, 242);
+        border-radius: 24px;
+        box-shadow:  4px 5px 5px #dbdbdb;
+        font-weight: 300;
+    }
+
+    .banner-base {
+        display: flex;
+        flex-direction: column;
+        max-width: 360px;
+        padding: 1.5rem;
+        font-size: 18px;
+        font-weight: 300;
+    }
+
+    .banner-picture {
+        display: inline;
+        max-width: 750px;
+        margin: auto;
+
+        img {
+            border-radius: 24px;
+            margin: 4px;
+            transition: all 0.3s ease-in-out;
+        }
+
+        img:hover {
+            transform: scale(1.02);
+            box-shadow:  4px 5px 5px #dbdbdb;
+        }
+    }
+
+    @media (max-width: 1350px) {
+        padding: 40px 0px;
+
+        .banner-picture {
+            display: inline;
+            width: auto;
+            max-width: 400px;
+        }
+    }
+
+    @media (max-width: 900px) {
+        flex-direction: column;
+
+        .banner-picture {
+            margin: auto;
+            text-align: center;
+            align-items: center;
+            justify-content: center;
+            max-width: none;
+
+            img {
+                width: 480px;
+                max-width: 450px;
+            }
+        }
+    }
+}

_sass/sections/description.scss

@@ -7,7 +7,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    gap: 100px;
+    gap: 80px;
 
     @media (max-width: 640px) {
       flex-direction: column;
@@ -18,7 +18,7 @@
       width: 50%;
       font-size: 40px;
       font-weight: 700;
-      margin: 0px 50px;
+      margin: 0px 60px;
       color: $primary-1;
 
       @media (max-width: 640px) {

assets/css/styles.scss

@@ -9,6 +9,7 @@
 @import "events";
 @import "latest_news";
 @import "sections/description";
+@import "sections/banner";
 @import "about";
 @import "promos";
 @import "utils/progressbar";