Merge branch 'release/2.0.15'

src/static/styles/main.css

@@ -11,6 +11,10 @@
     --green-color: #3ea165;
 
     --default-border: 2px solid var(--gray-color);
+
+    --animate: 1s;
+    --pause: 10s;
+    --total-duration: calc(var(--animate) * 2 + var(--pause) * 2);
 }
 
 html {
@@ -452,6 +456,102 @@ section:not(:last-child) {
     font-family: 'Vollkorn', serif;
 }
 
+.carousel {
+    width: 100vw;
+    height: 300px;
+    overflow: hidden;
+
+}
+
+.carousel__wrapper {
+    width: 200vw;
+    display: flex;
+    position: relative;
+}
+
+.carousel__item {
+    background-color: rgba(0, 0, 0, 0.4);
+    background-blend-mode: multiply;
+    background-size: cover;
+    background-position: center;
+    color: #f1e8e2;
+    text-align: center;
+    padding: 2rem 1rem;
+    box-sizing: border-box;
+    text-shadow: 1px 1px 2px black;
+    font-family: 'Vollkorn', serif;
+    color: white;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 300px;
+    background-position: top;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.hero-image-1 {
+  top: 0;
+  left: 0;
+  position: absolute;
+  background-image: url(/static/images/banner_sizes.jpg);
+  animation: slide-out-image-1 var(--total-duration) 3s
+    cubic-bezier(0.54, 0.12, 0.44, 1) infinite;
+}
+/* start + pause + start + pause = totall */
+/* 2.5s + 3s + 2.5s + 3s = 11s*/
+@keyframes slide-out-image-1 {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-100%);
+  }
+  25.0001% {
+    transform: translateX(100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  75% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+.hero-image-2 {
+  top: 0;
+  right: 0;
+  background-image: url(/static/images/banner_merch.jpg);
+  position: absolute;
+  animation: slide-in-image-2 var(--total-duration) 3s
+    cubic-bezier(0.54, 0.12, 0.44, 1) infinite;
+}
+
+/* start + pause + start + pause = totall */
+/* 2.5s + 3s + 2.5s + 3s = 11s*/
+@keyframes slide-in-image-2 {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(-100%);
+  }
+  75% {
+    transform: translateX(-200%);
+  }
+  100% {
+    transform: translateX(-200%);
+  }
+}
+
 .site__banner p {
     font-size: 2rem;
 }

src/storefront/templates/storefront/category_detail.html

@@ -6,8 +6,15 @@
 {% endblock %}
 
 {% block content %}
-<div class="site__banner site__banner--site">
-    <h1>Now three different size bags to choose from!</h1>
+<div class="carousel">
+    <div class="carousel__wrapper">
+        <div class="carousel__item hero-image-1">
+            <h1>Now three different size bags to choose from!</h1>
+        </div>
+        <div class="carousel__item hero-image-2">
+            <h1>Merchandise now available!</h1>
+        </div>
+    </div>
 </div>
 <article>
     <div class="breadcrumbs">

src/storefront/templates/storefront/product_list.html

@@ -14,8 +14,15 @@
 {% endblock product_categories %}
 
 {% block content %}
-<div class="site__banner site__banner--site">
-    <h1>Now three different size bags to choose from!</h1>
+<div class="carousel">
+    <div class="carousel__wrapper">
+        <div class="carousel__item hero-image-1">
+            <h1>Now three different size bags to choose from!</h1>
+        </div>
+        <div class="carousel__item hero-image-2">
+            <h1>Merchandise now available!</h1>
+        </div>
+    </div>
 </div>
 <article>
     <section class="product__list">