🚧 New homepage (#5785)

* 🎉 Begin work on new home * 🍱 Add new logo * 🚧 Add data * ✨ Add new stage * ✨ Add new formats section * ✨ Add teaser carousel with intro * 🐛 Remove comment * 💄 Adjust box-shadow * ♻️ Move teaser to component * ♻️ Remove variable * ♻️ Rename classes * 💄 Add introduction component styling * 💄 Adjust section width * 💄 Adjust stage sizing * 💄 Add some margins * 💄 Enhance basic carousel arrow styles * 💄 Add teaser carousel styles * ✨ Add pagination to teaser-carousel * ♻️ Calculate magic number with sass * 💄 Adjust breakpoints * 💬 Update copy according to localization docs * 🚚 Move style files * 💄 Hide link * 💄 Remove duplicate class delcaration * 💄 Update stage styles * 💄 Update carousel styles * 💄 Update formats styles * 💫 Add basic animation * 💄 Increase specificity Co-authored-by: Matthias Rohmer <12857772+matthiasrohmer@users.noreply.github.com>
ampproject · May 10, 2021 · 4118a5e · 4118a5e
1 parent 1d2e95b
commit 4118a5e
Show file tree

Hide file tree

Showing 12 changed files with 856 additions and 16 deletions.
diff --git a/frontend/icons/logo-outline.svg b/frontend/icons/logo-outline.svg
diff --git a/frontend/scss/base.scss b/frontend/scss/base.scss
@@ -34,6 +34,14 @@ html, body {
   box-shadow: 0 10px 15px 0 transparentize(color('black'), 0.6);
   transition: 400ms;
   background-color: color('white');
+  position: relative;
+  box-sizing: border-box;
+  margin: 1em;
+  border-style: none;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  z-index: 10;
+  pointer-events: all;
 
   &-prev {
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E");

diff --git a/frontend/templates/views/2021/partials/teaser.j2 b/frontend/templates/views/2021/partials/teaser.j2
@@ -1,17 +1,62 @@
-{% set teaser = teaser_doc %}
-{% set navigation_url = teaser.url.path %}
-
-<a class="ap-teaser" href="{{ navigation_url }}">
-  {% if teaser.formats %}
-    <div class="ap-teaser-tags">
-      {% for format in teaser.formats %}
-      <div class="ap-tag --{{ format }}"></div>
-      {% endfor %}
+{% if teaser_doc.view == '/views/detail/success-story-detail.j2' %}
+  {% set type = "success-story" %}
+  {% set url = teaser_doc.url.path %}
+  {% set image = teaser_doc.teaser.image.src %}
+  {% set alt = teaser_doc.teaser.image.alt %}
+  {% set meta = teaser_doc.category %}
+  {% set headline = teaser_doc.teaser.text %}
+{% else %}
+  {% set type = teaser_doc.type %}
+  {% set url = teaser_doc.url %}
+  {% set image = teaser_doc.image %}
+  {% set alt = teaser_doc.title %}
+  {% set meta = teaser_doc.date %}
+  {% set headline = teaser_doc.headline %}
+{% endif %}
+<a href="{{ url }}" class="ap-teaser --{{ type }}">
+  <div class="ap-teaser-card">
+    <div class="ap-teaser-card-header">
+      {% if teaser_doc.formats %}
+        {% set format = teaser_doc.formats[0] %}
+        {% do doc.icons.useIcon('/icons/amp-' + format + '.svg') %}
+          <div class="ap-teaser-card-header-logo">
+            <svg fill="url(#gradient-{{ format }})"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-{{ format }}"></use></svg>
+          </div>
+          <h6>{{ format }}</h6>
+      {% else %}
+      <h6>{{ teaser_doc.title }}</h6>
+      {% endif %}
     </div>
-  {% endif %}
-
-  <code class="ap-teaser-title">{{ teaser.title }}</code>
-  <p class="ap-teaser-copy">
-    {{ teaser.teaser.text }}
-  </p>
+    <div class="ap-teaser-card-image">
+      {% if teaser_doc.image and teaser_doc.image != '' or type == "success-story" %}
+        <amp-img class=""
+            src="{{ image }}"
+            layout="responsive"
+            width="160"
+            height="90"
+            alt="{{ alt }}">
+        </amp-img>
+      {% else %}
+        <div class="ap-o-news-icon">
+          <div class="ap-a-ico">
+            {% do doc.icons.useIcon('icons/news.svg') %}
+            <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#news"></use></svg>
+          </div>
+        </div>
+      {% endif %}
+    </div>
+    <div class="ap-teaser-card-body">
+      {% if type == "success-story" %}
+        <div class="ap-teaser-card-logo">
+          <amp-img
+              src="{{ teaser_doc.teaser.logo.src }}"
+              layout="fill"
+              alt="{{ teaser_doc.teaser.logo.alt }}">
+          </amp-img>
+        </div>
+      {% endif %}
+      <h4 class="ap-teaser-card-headline">{{ headline }}</h4>
+      <div class="ap-teaser-card-meta">{{ meta }}</div>
+    </div>
+  </div>
 </a>
diff --git a/frontend21/scss/amp-dev.scss b/frontend21/scss/amp-dev.scss
@@ -26,7 +26,6 @@
 @import 'components/content.scss';
 @import 'components/icon-text.scss';
 @import 'components/teaser-grid.scss';
-@import 'components/teaser-component.scss';
 @import 'components/table-component.scss';
 @import 'components/component-intro.scss';
 @import 'components/code-snippet.scss';
@@ -38,6 +37,11 @@
 @import 'components/filter-bubbles-list.scss';
 @import 'components/pill.scss';
 @import 'components/content/stage.scss';
+@import 'components/home/home-stage.scss';
+@import 'components/home/formats.scss';
+@import 'components/content/teaser-carousel.scss';
+@import 'components/content/teaser.scss';
+@import 'components/content/intro.scss';
 @import 'components/extra/about/components-showcase.scss';
 
 main {
@@ -50,6 +54,7 @@ main {
 
   @include respond-to('large') {
     grid-gap: 30px;
+    max-width: 1920px;
   }
 }
 

diff --git a/frontend21/scss/components/content/intro.scss b/frontend21/scss/components/content/intro.scss
@@ -0,0 +1,15 @@
+.#{project('intro')} {
+  margin-bottom: 72px;
+
+  h1 {
+    margin-bottom: 20px;
+  }
+
+  p {
+    margin-bottom: 40px;
+  }
+
+  @include respond-to('medium') {
+    margin-bottom: 100px;
+  }
+}
diff --git a/frontend21/scss/components/content/teaser-carousel.scss b/frontend21/scss/components/content/teaser-carousel.scss
@@ -0,0 +1,95 @@
+.#{project('teaser-carousel')} {
+  --spacing: 68px;
+
+  position: relative;
+  display: grid;
+  grid-gap: 15px;
+  grid-template-columns: var(--spacing) 1fr var(--spacing);
+  max-width: 1440px;
+  margin: 0 auto 100px;
+
+  &-container {
+    grid-column: 1/-1;
+    grid-row: 1;
+  }
+
+  &-controls {
+    display: none;
+
+    &.--prev {
+      left: 0;
+      grid-column: 1;
+    }
+
+    &.--next {
+      right: 0;
+      grid-column: 3;
+    }
+
+    .amp-carousel-button {
+      width: var(--spacing);
+      height: var(--spacing);
+      background-size: 28px 28px;
+    }
+
+    @include respond-to('small') {
+      display: initial;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      grid-row: 1;
+    }
+  }
+
+  &-pagination {
+    grid-row: 2;
+    grid-column: 1/-1;
+    margin: 0 auto;
+
+    &-item {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      margin: 0 5px;
+      background-color: color('iron');
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &[option][selected] {
+        outline: none;
+      }
+
+      &[selected] {
+        @include ci-websites;
+      }
+    }
+  }
+
+  @include respond-to('small') {
+    &-container {
+      padding: 0 var(--spacing)
+    }
+
+    .#{project('teaser')} {
+      padding-bottom: 15px;
+
+      &:nth-child(3n+1) {
+        align-items: center;
+      }
+      &:nth-child(3n+2) {
+        align-items: flex-end;
+      }
+
+      &:nth-child(3n+3) {
+        align-items: flex-start;
+      }
+    }
+  }
+}
diff --git a/frontend21/scss/components/content/teaser.scss b/frontend21/scss/components/content/teaser.scss
@@ -0,0 +1,75 @@
+.#{project('teaser')} {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &-card {
+    flex-direction: column;
+    max-width: 320px;
+    white-space: normal;
+    color: color('charade');
+    border-radius: 8px;
+    @include shadow-large;
+    transition: box-shadow 0.3s ease, transform 0.3s ease;
+
+    @include respond-to('medium') {
+      max-width: 390px;
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-within {
+      transform: translateY(-0.125em);
+      @include shadow-small;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      padding: 10px 30px;
+
+      &-logo {
+        width: 26px;
+        height: 26px;
+        margin-right: 10px;
+      }
+    }
+
+    &-image {
+      position: relative;
+      height: 220px;
+
+      amp-img img {
+        object-fit: cover;
+      }
+    }
+
+    &-logo {
+      position: relative;
+      height: 30px;
+
+      amp-img img {
+        object-fit: contain;
+        object-position: left center;
+      }
+    }
+
+    &-body {
+      padding: 25px 30px 20px;
+      flex-grow: 2;
+      display: flex;
+      flex-direction: column;
+    }
+
+    &-headline {
+      margin-top: 10px;
+      flex-grow: 2;
+    }
+
+    &-meta {
+      font-size: 14px;
+      color: color('river-bed');
+      text-transform: capitalize;
+    }
+  }
+}