WIP: #395 Speakers confirmados

web/themes/coming_soon_th/src/sass/_variables.scss

@@ -16,7 +16,7 @@ $color-yellow-1: #FAE673;
 $color-white-1: #F3F3EE;
 
 $font-primary: 'Source Sans Pro';
-$font-secondary: 'layfair Display';
+$font-secondary: 'Playfair Display';
 
 // Media query
 $desk: 968px;

web/themes/coming_soon_th/src/sass/components/_confirmed-speakers.scss

@@ -1,11 +1,65 @@
 .confirmed-speakers {
+  margin-top: 80px;
+
   > h2 {
     font-size: 36px;
     color: $color-grey-1;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    text-align: center;
+
+    @media (min-width: $desk) {
+      text-align: left;
+    }
   }
 
   > .list {
-    display: flex;
-    justify-content: space-between;
+
+    @media (min-width: $desk) {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .speaker {
+      margin: 0 20px;
+      margin-bottom: 2em;
+      background-color: #F3F3EE;
+      text-align: center;
+
+      @media (min-width: $desk) {
+        width: 20%;
+        clear: none;
+      }
+
+      .speaker--picture {
+        background: #DCDCDC;
+        text-align: center;
+        overflow: hidden;
+        margin-bottom: 10px;
+        display: inline-block;
+        vertical-align: bottom;
+        width: 100%;
+        object-fit: cover;
+
+        @media (min-width: $desk) {
+          height: 200px;
+        }
+      }
+
+      .speaker--name {
+        margin: 0 0 .5rem;
+        color: #435772;
+        text-transform: none;
+      }
+
+      .speaker--session {
+        color: #435772;
+        margin: 0 0 .5rem;
+      }
+
+      .speaker--content {
+        padding: .5rem;
+      }
+    }
   }
 }

web/themes/coming_soon_th/src/sass/components/_header.scss

@@ -33,9 +33,14 @@
 
         h2 {
           margin: 0;
-          font-size: 30px;
           color: $color-grey-1;
-          line-height: 26px;
+          font-size: 20px;
+          line-height: 20px;
+
+          @media (min-width: $desk) {
+            font-size: 30px;
+            line-height: 26px;
+          }
         }
       }
     }

web/themes/coming_soon_th/src/sass/components/_hero.scss

@@ -6,33 +6,48 @@
   margin-bottom: 40px;
 
   @media (min-width: $desk) {
-    padding: 300px 20px 30px;
+    padding: 30vh 20px 30px;
+    height: 100vh;
   }
 
   h1 {
     font-family: $font-secondary;
-    font-size: 48px;
-    line-height: 64px;
+    font-size: 36px;
+    line-height: 42px;
     text-decoration-line: underline;
     font-weight: normal;
     color: $color-grey-1;
+    margin-bottom: 4rem;
+
+    @media (min-width: $desk) {
+      font-size: 48px;
+      line-height: 64px;
+    }
   }
 
   h2 {
-
+    font-size: 24px;
+    line-height: 26px;
+    letter-spacing: 0.1em;
+    color: $color-grey-1;
   }
 
   h3 {
-
+    font-size: 22px;
+    line-height: 26px;
+    letter-spacing: 0.5em;
+    color: $color-grey-1;
   }
 
   .overflow-footer {
     background: $color-yellow-1;
-    color: $color-brown-1;
+    color: $color-grey-1;
     position: relative;
     bottom: -70px;
     padding: 30px 40px 40px;
-    font-size: 24px;
+    font-size: 20px;
+    font-weight: bold;
     width: 100%;
+    letter-spacing: 0.1em;
   }
 }

web/themes/coming_soon_th/templates/layout/page-en.html.twig

@@ -50,24 +50,46 @@
   </div>
 </div>
 
-{#<div class="confirmed-speakers container">#}
-{#  <h2>CONFIRMED SPEAKERS</h2>#}
-
-{#  <div class="list">#}
-{#    <div>#}
-{#      <img src="https://via.placeholder.com/261x194" alt="[ Speaker name ]">#}
-{#    </div>#}
-{#    <div>#}
-{#      <img src="https://via.placeholder.com/261x194" alt="[ Speaker name ]">#}
-{#    </div>#}
-{#    <div>#}
-{#      <img src="https://via.placeholder.com/261x194" alt="[ Speaker name ]">#}
-{#    </div>#}
-{#    <div>#}
-{#      <img src="https://via.placeholder.com/261x194" alt="[ Speaker name ]">#}
-{#    </div>#}
-{#  </div>#}
-{#</div>#}
+<div class="confirmed-speakers container">
+  <h2>Confirmed speakers</h2>
+  <div class="list">
+    <div class="speaker">
+      <img class="speaker--picture" src="/{{ directory }}/images/speakers/lauri.jpg" alt="Lauri Eskola">
+      <div class="speaker--content">
+        <h3 class="speaker--name">Lauri Eskola</h3>
+        <p class="speaker--session">Drupal Core markup in continuous upgrade path</p>
+      </div>
+    </div>
+    <div class="speaker">
+      <img class="speaker--picture" src="/{{ directory }}/images/speakers/cristina.jpg" alt="Cristina Chumillas">
+      <div class="speaker--content">
+        <h3 class="speaker--name">Cristina Chumillas</h3>
+        <p class="speaker--session">The future of Drupal's UI</p>
+      </div>
+    </div>
+    <div class="speaker">
+      <img class="speaker--picture" src="/{{ directory }}/images/speakers/paloma.jpg" alt="Paloma Simon">
+      <div class="speaker--content">
+        <h3 class="speaker--name">Paloma Simon</h3>
+        <p class="speaker--session">#IamRemarkable</p>
+      </div>
+    </div>
+    <div class="speaker">
+      <img class="speaker--picture" src="/{{ directory }}/images/speakers/christian.jpg" alt="Christian López">
+      <div class="speaker--content">
+        <h3 class="speaker--name">Christian López</h3>
+        <p class="speaker--session">Getting ready for Drupal 9: Upgrading your module</p>
+      </div>
+    </div>
+    <div class="speaker">
+      <img class="speaker--picture" src="/{{ directory }}/images/speakers/marcos.jpg" alt="Marcos Cano">
+      <div class="speaker--content">
+        <h3 class="speaker--name">Marcos Cano</h3>
+        <p class="speaker--session">Flujos de contenido estructurado en Drupal</p>
+      </div>
+    </div>
+  </div>
+</div>
 
 <div class="about-venue image-left container clearfix">
   <div class="content">