Improve about, header and styles (#65)

* change about and header style * feat: change backgroungs and header style * feat: split sections in about page --------- Co-authored-by: raymond1242 <[email protected]>
FOPInformatica · Dec 1, 2023 · 8258c4c · 8258c4c
1 parent c2efb0b
commit 8258c4c
Show file tree

Hide file tree

Showing 12 changed files with 220 additions and 69 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -3,10 +3,10 @@
     <div class="header-logo">
       <a href="/">
         <svg viewBox="0 0 79 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M4.032 9.79599H15.3V4.57599H4.032V9.79599ZM4.032 19.66H14.94V14.764H4.032V19.66ZM0 4.57599V29.776H5.832V4.57599H0Z" fill="white"/>
-          <path d="M49.4648 4.57599V29.776H55.5488V4.57599H49.4648ZM53.2808 9.57999H58.2128C59.4368 9.57999 60.3968 9.85599 61.0928 10.408C61.7888 10.96 62.1368 11.764 62.1368 12.82C62.1368 13.852 61.7888 14.644 61.0928 15.196C60.3968 15.748 59.4368 16.024 58.2128 16.024H53.2808V21.028H58.2128C60.3488 21.028 62.1368 20.704 63.5768 20.056C65.0408 19.384 66.1448 18.436 66.8888 17.212C67.6329 15.964 68.0048 14.5 68.0048 12.82C68.0048 11.092 67.6329 9.61599 66.8888 8.39199C66.1448 7.16799 65.0408 6.23199 63.5768 5.58399C62.1368 4.91199 60.3488 4.57599 58.2128 4.57599H53.2808V9.57999Z" fill="white"/>
-          <path d="M71.8945 4.57599V29.776H78.0865V4.57599H71.8945Z" fill="white"/>
-          <path d="M43.6046 21.887L43.8378 22.0222L43.9551 21.7795C44.6755 20.2889 45.1273 18.6457 45.2494 16.9099L45.2682 16.6424H45H41.2316H41.0054L40.9829 16.8675C40.8843 17.8528 40.6023 18.7835 40.2111 19.6608L40.1196 19.8661L40.3141 19.9789L43.6046 21.887ZM39.6512 21.1735L39.454 21.0591L39.322 21.245C38.7593 22.0374 38.0665 22.7217 37.2829 23.2971L37.1028 23.4293L37.214 23.623L39.1 26.9096L39.2346 27.1441L39.4579 26.9916C40.8526 26.0386 42.0523 24.8254 42.9981 23.4228L43.1477 23.2009L42.9162 23.0667L39.6512 21.1735ZM36.0449 24.3235L35.9313 24.1257L35.724 24.2208C34.8584 24.6176 33.9202 24.8665 32.9283 24.9681L32.7037 24.9911V25.2168V29V29.2684L32.9715 29.2494C34.7011 29.1264 36.3366 28.6723 37.8186 27.9464L38.0584 27.8289L37.9254 27.5974L36.0449 24.3235ZM31.3434 25.2114L31.3434 24.9855L31.1187 24.9627C26.5562 24.4988 22.9711 20.662 22.9711 15.958C22.9711 12.9242 24.4696 10.2511 26.7508 8.59383L26.9326 8.46178L26.8207 8.267L24.9402 4.99502L24.8057 4.76095L24.5826 4.91303C21.065 7.31137 18.75 11.3623 18.75 15.958C18.75 23.0026 24.1898 28.7582 31.0756 29.2477L31.3433 29.2667L31.3433 28.9983L31.3434 25.2114ZM41.019 15.0473L41.0413 15.2726H41.2677H44.9888H45.2573L45.2381 15.0048C45.1142 13.2695 44.668 11.6299 43.9454 10.1405L43.8279 9.89826L43.595 10.0334L40.3572 11.9123L40.1613 12.026L40.2551 12.2321C40.6535 13.1071 40.92 14.05 41.019 15.0473ZM39.3451 10.6595L39.4775 10.8425L39.6729 10.7292L42.9234 8.8449L43.1551 8.71057L43.0052 8.48865C42.0581 7.08695 40.864 5.86617 39.4669 4.91269L39.2438 4.7604L39.1092 4.99466L37.2286 8.2685L37.1166 8.46336L37.2985 8.59536C38.0859 9.16683 38.7724 9.86869 39.3451 10.6595ZM30.1631 0.75H29.9131V1V12.2182V12.4682H30.1631H33.8842H34.1342V12.2182V1V0.75H33.8842H30.1631Z" fill="white" stroke="white" stroke-width="0.5"/>
+          <path d="M4.032 9.79599H15.3V4.57599H4.032V9.79599ZM4.032 19.66H14.94V14.764H4.032V19.66ZM0 4.57599V29.776H5.832V4.57599H0Z" fill="red"/>
+          <path d="M49.4648 4.57599V29.776H55.5488V4.57599H49.4648ZM53.2808 9.57999H58.2128C59.4368 9.57999 60.3968 9.85599 61.0928 10.408C61.7888 10.96 62.1368 11.764 62.1368 12.82C62.1368 13.852 61.7888 14.644 61.0928 15.196C60.3968 15.748 59.4368 16.024 58.2128 16.024H53.2808V21.028H58.2128C60.3488 21.028 62.1368 20.704 63.5768 20.056C65.0408 19.384 66.1448 18.436 66.8888 17.212C67.6329 15.964 68.0048 14.5 68.0048 12.82C68.0048 11.092 67.6329 9.61599 66.8888 8.39199C66.1448 7.16799 65.0408 6.23199 63.5768 5.58399C62.1368 4.91199 60.3488 4.57599 58.2128 4.57599H53.2808V9.57999Z" fill="red"/>
+          <path d="M71.8945 4.57599V29.776H78.0865V4.57599H71.8945Z" fill="red"/>
+          <path d="M43.6046 21.887L43.8378 22.0222L43.9551 21.7795C44.6755 20.2889 45.1273 18.6457 45.2494 16.9099L45.2682 16.6424H45H41.2316H41.0054L40.9829 16.8675C40.8843 17.8528 40.6023 18.7835 40.2111 19.6608L40.1196 19.8661L40.3141 19.9789L43.6046 21.887ZM39.6512 21.1735L39.454 21.0591L39.322 21.245C38.7593 22.0374 38.0665 22.7217 37.2829 23.2971L37.1028 23.4293L37.214 23.623L39.1 26.9096L39.2346 27.1441L39.4579 26.9916C40.8526 26.0386 42.0523 24.8254 42.9981 23.4228L43.1477 23.2009L42.9162 23.0667L39.6512 21.1735ZM36.0449 24.3235L35.9313 24.1257L35.724 24.2208C34.8584 24.6176 33.9202 24.8665 32.9283 24.9681L32.7037 24.9911V25.2168V29V29.2684L32.9715 29.2494C34.7011 29.1264 36.3366 28.6723 37.8186 27.9464L38.0584 27.8289L37.9254 27.5974L36.0449 24.3235ZM31.3434 25.2114L31.3434 24.9855L31.1187 24.9627C26.5562 24.4988 22.9711 20.662 22.9711 15.958C22.9711 12.9242 24.4696 10.2511 26.7508 8.59383L26.9326 8.46178L26.8207 8.267L24.9402 4.99502L24.8057 4.76095L24.5826 4.91303C21.065 7.31137 18.75 11.3623 18.75 15.958C18.75 23.0026 24.1898 28.7582 31.0756 29.2477L31.3433 29.2667L31.3433 28.9983L31.3434 25.2114ZM41.019 15.0473L41.0413 15.2726H41.2677H44.9888H45.2573L45.2381 15.0048C45.1142 13.2695 44.668 11.6299 43.9454 10.1405L43.8279 9.89826L43.595 10.0334L40.3572 11.9123L40.1613 12.026L40.2551 12.2321C40.6535 13.1071 40.92 14.05 41.019 15.0473ZM39.3451 10.6595L39.4775 10.8425L39.6729 10.7292L42.9234 8.8449L43.1551 8.71057L43.0052 8.48865C42.0581 7.08695 40.864 5.86617 39.4669 4.91269L39.2438 4.7604L39.1092 4.99466L37.2286 8.2685L37.1166 8.46336L37.2985 8.59536C38.0859 9.16683 38.7724 9.86869 39.3451 10.6595ZM30.1631 0.75H29.9131V1V12.2182V12.4682H30.1631H33.8842H34.1342V12.2182V1V0.75H33.8842H30.1631Z" fill="red" stroke="red" stroke-width="0.5"/>
         </svg>
       </a>
     </div>

diff --git a/_includes/sections/banner.html b/_includes/sections/banner.html
@@ -6,7 +6,7 @@ <h2 class="site-subtitle">
                 Segunda Fase
             </h2>
             <p>
-                Fecha: 28 de Enero 2024<br>
+                Fecha: 18 de Febrero 2024<br>
             </p>
             <a class="banner-btn" href="/historia/2023/11/10/primera-fase-opi-2023.html">
                 Ir a la publicación

diff --git a/_layouts/home.html b/_layouts/home.html
@@ -17,7 +17,7 @@ <h1 class="full-title">
         </h1>
       {%- endif -%}
 
-      <div class="wrapper">
+      <div class="wrapper-home">
         {%- include sections/banner.html -%}
         {%- include sections/description.html -%}
         {%- include latest_news.html limit=3 -%}

diff --git a/_sass/about.scss b/_sass/about.scss
@@ -1,31 +1,114 @@
 .about-page {
+  background-color: rgb(248, 249, 255);
   .about-description {
-    font-size: 25px;
-    margin: 100px 0;
+    background-color: white;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    flex-direction: row;
+    padding: 90px 100px;
+    text-align: center;
+
+    small {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .about-description-title {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      text-align: right;
+      padding: 0 50px;
+      color: $secondary-3;
+      font-size: 44px;
+      font-weight: 700;
+
+      span {
+        color: $primary-1;
+      }
+    }
+
+    .about-description-text {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: left;
+      margin-right: 100px;
+      color: $secondary-4;
+      font-size: 17px;
+    }
+  }
+
+  .about-slack {
+    display: flex;
+    flex-direction: column;
     text-align: center;
+    background-color: white;
+    padding-bottom: 40px;
+    font-size: 18px;
 
     .about-slack-link {
-      margin: 20px 0;
+      margin: 22px;
+      padding: 0px;
 
       img {
-        height: 30px;
+        height: 25px;
       }
     }
+
+    a:hover {
+      text-decoration: none;
+    }
+  }
+
+  .about-description-last {
+    padding: 80px 100px;
+    text-align: center;
+    font-size: 20px;
+    color: $secondary-4;
+    font-weight: 300;
+  }
+
+  .about-related-members {
+    background-color: white;
+    padding: 60px 100px;
   }
 
   .about-members-list {
+    padding: 0 90px;
     display: flex;
     flex-direction: column;
-    gap: 30px;
+    gap: 40px;
     margin: 50px 0;
+
+    .about-members-wrapper {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 30px;
+
+      @media (max-width: 1200px) {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+
+      @media (max-width: 850px) {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 40px;
+      }
+
+    }
+
   }
 }
 
 .about-member {
   display: flex;
-  flex-direction: row;
-  justify-content: start;
-  gap: 80px;
+  flex-direction: column;
+  gap: 20px;
+  padding: 15PX;
+  background-color: white;
+  border-radius: 15px;
+  text-align: center;
 
   @media (max-width: 991.98px) {
     flex-wrap: wrap;
@@ -34,56 +117,65 @@
   }
 
   .about-member-picture {
-    padding: 0 40px;
+    margin: 0 auto;
 
     @media (max-width: 991.98px) {
       padding: 0;
     }
 
     img {
-      width: 340px;
-      min-width: 300px;
+      width: 160px;
+      border-radius: 50%;
+      min-width: 150px;
     }
   }
 }
 
 .about-members-title {
+  text-align: center;
+  padding: 10px 0;
   color: $primary-2;
-  font-size: 30px;
+  font-size: 32px;
+  font-weight: 700;
+}
+.about-members-subtitle {
+  color: $primary-1;
   font-weight: 700;
 }
 
 .about-collaborator {
-  font-size: 20px;
-  font-weight: 700;
+  font-size: 24px;
+  font-weight: 500;
 }
 
 .about-member-description {
   display: flex;
   flex-direction: column;
   flex: 50%;
   gap: 15px;
+  justify-content: center;
 
   @media (max-width: 991.98px) {
     align-items: center;
   }
 
   .about-member-name {
     color: $primary-2;
-    font-size: 30px;
-    font-weight: 700;
+    font-size: 24px;
+    font-weight: 500;
   }
 
   .about-member-title {
     color: $secondary-4;
-    font-size: 22px;
-    font-weight: 600;
+    font-size: 16px;
+    font-weight: 400;
   }
 
   .about-member-social {
     display: flex;
     flex-direction: row;
     gap: 10px;
+    justify-content: center;
   }
 
   .about-member-text {

diff --git a/_sass/blog.scss b/_sass/blog.scss
@@ -3,16 +3,16 @@
 }
 
 .full-title {
-  min-height: 200px;
+  height: 200px;
   background-color: $secondary-2;
   font-size: 48px;
   font-weight: 600;
   color: white;
   display: flex;
-  text-align: center;
+  padding: 0 90px;
   align-items: center;
   justify-content: center;
-  margin-bottom: 40px;
+  margin-bottom: 0;
 
   @media (max-width: 991.98px) {
     padding: 0;
@@ -53,7 +53,8 @@
   }
 }
 .blog-page {
-  padding: 0 40px;
+  padding: 0 90px;
+  background-color: white;
 
   .post-excerpt {
     margin-bottom: 15px;
@@ -62,6 +63,7 @@
   .post-list {
     display: flex;
     flex-direction: column;
+    padding: 40px 0;
 
     .post-list-item {
       display: flex;
@@ -78,10 +80,6 @@
   }
 }
 
-.post-list {
-  margin-bottom: 100px;
-}
-
 article.post {
   margin: 0 50px;
 

diff --git a/_sass/header.scss b/_sass/header.scss
@@ -1,13 +1,13 @@
 .site-header {
-  background-color: $primary-1;
-  color: white;
+  background-color: white;
+  color: black;
   border: none;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
 
   a {
-    color: white;
+    color: black;
   }
 }
 
@@ -18,9 +18,12 @@
   flex-wrap: wrap;
   height: 100%;
   width: 100%;
-.menu-bar,.hidden{
-  display: none;
-}
+  padding: 10px 0;
+
+  .menu-bar,.hidden{
+    display: none;
+  }
+
   @media (max-width: $breakpoint-md) {
     justify-content: center;
   }
@@ -37,22 +40,21 @@
   }
 
   .header-pages-links {
-    flex: 1 1 auto;
     display: flex;
+    justify-content: space-between;
 
     @media (max-width: $breakpoint-md) {
       justify-content: center;
     }
 
     .header-page-item {
       padding: 5px;
-      font-size: 18px;
-      font-weight: 300;
+      font-size: 17px;
+      font-weight: 400;
       padding: 0px 14px;
     }
-
   }
-  
+
   .header-contact {
     flex: 0 0 200px;
     display: flex;

diff --git a/_sass/latest_news.scss b/_sass/latest_news.scss
@@ -1,7 +1,8 @@
 .latest-news {
+  background-color: white;
   display: flex;
   flex-direction: column;
-  margin: 30px 0;
+  padding: 30px 90px;
 
   .latest-news-header {
     display: flex;
@@ -33,6 +34,7 @@
     flex-wrap: wrap;
     gap: 35px;
     justify-content: center;
+    padding-bottom: 30px;
 
     .latest-news-item {
       display: flex;