Update banner for sale

static/styles/main.css

@@ -45,7 +45,11 @@ a {
   color: var(--fg-color);
 }
 
-h1, h2, h3, h4, h5 {
+h1,
+h2,
+h3,
+h4,
+h5 {
   margin: 0;
   font-weight: 700;
   line-height: 1.3;
@@ -73,7 +77,8 @@ h5 {
   font-size: 1.2rem;
 }
 
-small, .text-small {
+small,
+.text-small {
   font-size: 0.833rem;
 }
 
@@ -86,6 +91,7 @@ blockquote q {
   /*font-weight: bold;*/
   font-size: 1.5rem;
 }
+
 blockquote cite {
   display: block;
 }
@@ -131,10 +137,12 @@ table a {
   border-collapse: separate;
   border-spacing: 0 1rem;
 }
+
 .form-table th,
 .form-table td {
   border: none;
 }
+
 .form-table th,
 .form-table td {
   padding: 0 1rem 1rem 0;
@@ -177,8 +185,8 @@ input[type=checkbox] {
   accent-color: var(--yellow-color);
 }
 
-input[type=radio] + label,
+input[type=radio]+label,
-input[type=checkbox] + label {
+input[type=checkbox]+label {
   display: inline-block;
   margin: 1rem 0;
 }
@@ -191,9 +199,11 @@ textarea {
 ::-webkit-input-placeholder {
   font-style: oblique;
 }
+
 ::-moz-input-placeholder {
   font-style: oblique;
 }
+
 ::-ms-input-placeholder {
   font-style: oblique;
 }
@@ -247,6 +257,7 @@ figure {
   padding: 0;
   box-sizing: border-box;
 }
+
 img {
   box-sizing: border-box;
   max-width: 100%;
@@ -260,9 +271,9 @@ main {
   min-height: calc(100vh - 500px);
 }
 
-.site__header > nav,
+.site__header>nav,
-main > article,
+main>article,
-footer > section {
+footer>section {
   max-width: 1280px;
   padding: 1rem;
   margin: 0 auto;
@@ -287,8 +298,8 @@ section:not(:last-child) {
   overflow: auto;
   justify-content: center;
   align-items: center;
-    background-color: rgb(0,0,0);
+  background-color: rgb(0, 0, 0);
-    background-color: rgba(0,0,0,0.4);
+  background-color: rgba(0, 0, 0, 0.4);
 }
 
 
@@ -343,7 +354,7 @@ section:not(:last-child) {
   background-color: var(--bg-alt-color);
 }
 
-.site__logo > img {
+.site__logo>img {
   height: 4rem;
 }
 
@@ -358,28 +369,34 @@ section:not(:last-child) {
 }
 
 @media screen and (max-width: 900px) {
+
   .site__logo,
   .nav__main,
   .nav__account {
     margin-right: 0;
   }
+
   .site__nav {
     display: grid;
     grid-template-columns: 2fr 0.5fr 0.5fr;
     gap: 1rem;
   }
+
   .site__logo {
     grid-column: 1;
   }
+
   .nav__main {
     grid-column: 1/4;
     grid-row: 2;
     justify-content: space-between;
   }
+
   .nav__account {
     grid-column: 2;
     grid-row: 1;
   }
+
   .site__cart {
     grid-column: 3;
     grid-row: 1;
@@ -390,18 +407,22 @@ section:not(:last-child) {
   .site__nav {
     grid-template-columns: repeat(2, 1fr);
   }
+
   .site__logo {
     grid-column: span 2;
     justify-self: center;
   }
+
   .nav__main {
     grid-column: 1/3;
     grid-row: 3;
   }
+
   .nav__account {
     grid-column: 1;
     grid-row: 2;
   }
+
   .site__cart {
     grid-column: 2;
     grid-row: 2;
@@ -501,6 +522,8 @@ section:not(:last-child) {
   color: white;
 
   display: flex;
+  flex-direction: column;
+  gap: 1rem;
   justify-content: center;
   align-items: center;
   width: 100vw;
@@ -514,28 +537,35 @@ section:not(:last-child) {
   top: 0;
   left: 0;
   position: absolute;
-  background-image: url(/static/images/banner_sizes.jpg);
+  background-image: url(/static/images/secret_sunday_sale_banner.jpg);
-  animation: slide-out-image-1 var(--total-duration) 3s
+  /*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%);
   }
@@ -546,8 +576,7 @@ section:not(:last-child) {
   right: 0;
   background-image: url(/static/images/banner_merch.jpg);
   position: absolute;
-  animation: slide-in-image-2 var(--total-duration) 3s
+  animation: slide-in-image-2 var(--total-duration) 3s cubic-bezier(0.54, 0.12, 0.44, 1) infinite;
-    cubic-bezier(0.54, 0.12, 0.44, 1) infinite;
 }
 
 /* start + pause + start + pause = totall */
@@ -556,15 +585,19 @@ section:not(:last-child) {
   0% {
     transform: translateX(0);
   }
+
   25% {
     transform: translateX(-100%);
   }
+
   50% {
     transform: translateX(-100%);
   }
+
   75% {
     transform: translateX(-200%);
   }
+
   100% {
     transform: translateX(-200%);
   }
@@ -577,14 +610,17 @@ section:not(:last-child) {
 .site__banner--site {
   background-image: url("/static/images/site_banner.jpg");
 }
+
 .site__banner--fairtrade {
   padding: 6rem 1rem;
   background-image: url("/static/images/fairtrade_banner.jpg");
 }
+
 .site__banner--reviews {
   padding: 6rem 1rem;
   background-image: url("/static/images/reviews_banner.jpg");
 }
+
 .site__banner--about {
   padding: 6rem 1rem;
   background-image: url("/static/images/coffee_banner.jpg");
@@ -650,6 +686,7 @@ section:not(:last-child) {
 .breadcrumbs {
   margin-bottom: 1.5rem;
 }
+
 .breadcrumbs menu {
   margin: 0;
   padding: 0 1rem;
@@ -664,7 +701,7 @@ section:not(:last-child) {
 /* ==========================================================================
    Articles
    ========================================================================== */
-article > header {
+article>header {
   margin-bottom: 1rem;
 }
 
@@ -686,7 +723,7 @@ article > header {
 
 }
 
-article + article {
+article+article {
   margin-top: 8rem;
 }
 
@@ -765,6 +802,7 @@ article + article {
     grid-template-columns: 1fr;
     gap: 6rem;
   }
+
   .product__figure {
     grid-row: span 2;
   }
@@ -828,7 +866,7 @@ article + article {
   justify-items: center;
 }
 
-.subscription-products > div {
+.subscription-products>div {
   border: var(--default-border);
   width: 100%;
   box-sizing: border-box;
@@ -840,7 +878,7 @@ article + article {
   visibility: hidden;
 }
 
-.subscription-products input[type=radio]:checked ~ .product-prices {
+.subscription-products input[type=radio]:checked~.product-prices {
   visibility: visible;
 }
 
@@ -854,6 +892,7 @@ article + article {
   .subscription-products {
     flex-direction: column;
   }
+
   .subscription-coffee {
     grid-template-columns: 1fr;
   }
@@ -900,6 +939,7 @@ article + article {
   gap: 1rem;
   flex-direction: column;
 }
+
 .product__form #id_variant div label {
   display: flex;
   gap: 1rem;
@@ -915,18 +955,23 @@ article + article {
     grid-template-columns: 1fr;
     grid-template-rows: 4rem 1fr auto;
   }
+
   .product__gallery {
     display: flex;
   }
+
   .gallery__thumbnail {
     max-height: 4rem;
   }
+
   .gallery__thumbnail:not(:last-child) {
     margin-right: 0.5rem;
   }
+
   .product__image {
     max-height: 16rem;
   }
+
   .product__info {
     grid-column: 1;
   }
@@ -938,6 +983,7 @@ article + article {
 .cart__list {
   margin-bottom: 2rem;
 }
+
 .cart__item {
   padding: 1rem 0;
   border-bottom: var(--default-border);
@@ -954,6 +1000,7 @@ article + article {
 .cart__summary {
   text-align: right;
 }
+
 .cart__totals {
   width: unset;
   font-size: 1.5rem;
@@ -963,6 +1010,7 @@ article + article {
 .cart__totals td {
   border: none;
 }
+
 .cart__totals th:first-child,
 .cart__totals td:first-child {
   text-align: right;
@@ -976,7 +1024,7 @@ article + article {
   justify-content: flex-end;
 }
 
-.cart__proceed > .btn {
+.cart__proceed>.btn {
   font-size: 1.75rem;
 }
 
@@ -1064,10 +1112,12 @@ article + article {
   .checkout__address-form {
     grid-template-columns: 1fr;
   }
+
   .checkout__address-form .errorlist {
     grid-column: 1;
+  }
 }
-}
+
 .checkout__address-form p:last-child {
   align-self: end;
 }
@@ -1125,7 +1175,7 @@ footer {
   background-color: var(--bg-alt-color);
 }
 
-footer > section {
+footer>section {
   text-align: center;
 
 }
@@ -1146,10 +1196,10 @@ footer > section {
 .wholesale-fields {
   width: fit-content;
 }
+
 .wholesale-field {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0.5rem;
   margin-bottom: 1rem;
 }
-

templates/partials/carousel.html

@@ -1,10 +1,9 @@
 <div class="carousel">
   <div class="carousel__wrapper">
     <div class="carousel__item hero-image-1">
-            <h1>Subscribe and save 10%</h1>
+      <h1>Labor Day Weekend Sale</h1>
-        </div>
+      <h3>10% off 12oz and 16oz bags</h3>
-        <div class="carousel__item hero-image-2">
+      <h4>Use code: LABOR23</h4>
-            <h1>Merchandise now available!</h1>
     </div>
   </div>
 </div>