Use cards for shop

docs/shop.html

@@ -1,7 +1,7 @@
 ---
-title: "The Bulma Shop"
+title: "The Official Bulma Shop"
 layout: default
-theme: primary
+theme: shop
 route: shop
 hide_footer: true
 breadcrumb:
@@ -14,36 +14,47 @@ breadcrumb:
     --shop-duration: 500ms;
   }
 
-  .shop-open-cart {
-    margin-top: 1.5rem;
+  .shop-hero {
+    min-height: calc(100vh - 6.5rem);
   }
 
-  @media screen and (min-width: 800px) {
+  .shop-hero .bd-hero {
+    position: relative;
+  }
+
+  .shop-hero .bd-hero-body {
+    position: relative;
+    margin: 0 auto;
+    max-width: 110rem;
+    width: 100%;
+  }
+
+  .shop-open-cart {
+    margin-top: 1.5rem;
+    min-width: 10em;
+  }
+
+  .shop-open-cart .tag {
+    margin: 0 -0.625em 0 0.625em;
+    padding: 0 0.5em;
+    min-width: 2em;
+    background-color: transparent;
+    color: currentColor;
+    border: 1px solid currentColor;
+  }
+
+  @media screen and (min-width: 1000px) {
     .shop-open-cart {
       margin-top: 0;
-      position: absolute;
-      right: 3rem;
-      top: calc(50% - 1rem);
+      position: fixed;
+      bottom: 1.5rem;
+      right: 1.5rem;
+      z-index: 30;
     }
   }
 
-  .shop-product-heading {
-    align-items: center;
-    gap: 1em;
-    justify-content: space-between;
-    display: flex;
-    font-size: 1.25em;
-    margin-bottom: 0.25em;
-  }
-
-  .shop-product-title {
-    color: var(--bulma-text-strong);
-    font-weight: 700;
-  }
-
-  .shop-product-price {
-    color: var(--bulma-text-strong);
-    font-size: 0.875em;
+  .shop-cart-count {
+    background-color: var(--bulma-primary-50);
   }
 
   .shop-cart,
@@ -59,7 +70,7 @@ breadcrumb:
   .shop-cart {
     opacity: 0;
     position: fixed;
-    z-index: 10;
+    z-index: 40;
     pointer-events: none;
   }
 
@@ -77,7 +88,7 @@ breadcrumb:
     max-width: 22rem;
     padding: 2rem;
     position: absolute;
-    z-index: 20;
+    z-index: 50;
     transform: translateX(100%);
     transition-duration: var(--shop-duration);
     transition-property: transform;
@@ -167,6 +178,8 @@ breadcrumb:
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
     gap: 3rem;
+    max-width: 110rem;
+    margin: 0 auto;
   }
 
   .shop-products.has-loaded .shop-product.is-placeholder {
@@ -176,9 +189,39 @@ breadcrumb:
   .shop-product {
     display: flex;
     flex-direction: column;
+    margin-bottom: 0 !important;
+    overflow: hidden;
   }
 
-  .shop-product .variants {
+  .shop-product .card-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .shop-product-heading {
+    align-items: center;
+    gap: 1em;
+    justify-content: space-between;
+    display: flex;
+    font-size: 1.25em;
+    margin-top: 0.25em;
+    margin-bottom: 0.5em;
+  }
+
+  .shop-product-title {
+    color: var(--bulma-text-strong);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  .shop-product-price {
+    color: var(--bulma-text-strong);
+    font-size: 0.875em;
+  }
+
+  .shop-product-variants {
+    margin-bottom: 0 !important;
     margin-top: 1em;
   }
 
@@ -189,9 +232,7 @@ breadcrumb:
   }
 
   .shop-product-image {
-    border-radius: 0.5rem;
     cursor: pointer;
-    margin-bottom: 0.5em;
     overflow: hidden;
   }
 
@@ -240,6 +281,7 @@ breadcrumb:
 
   .shop-product-buttons {
     justify-content: space-between;
+    margin-top: 1em;
   }
 
   .shop-modal {
@@ -262,6 +304,7 @@ breadcrumb:
 
   .shop-modal-content .shop-product-tagline {
     color: var(--bulma-text-strong);
+    margin-bottom: 1em;
   }
 
   .shop-modal-content .shop-product-rest {
@@ -270,6 +313,7 @@ breadcrumb:
 
   .shop-modal-buttons {
     justify-content: space-between;
+    margin-top: 1em;
   }
 
   .shop-modal-close {
@@ -322,11 +366,11 @@ breadcrumb:
 </div>
 {% endcapture %}
 
-<div style="min-height: calc(100vh - 6.5rem);">
-  <section class="bd-hero" style="position: relative;">
+<div class="shop-hero">
+  <section class="bd-hero">
     <div class="bd-hero-body">
       <h1 class="bd-hero-title algolia-lvl0">
-        The Bulma Shop
+        The Official Bulma Shop
       </h1>
 
       <hr class="bd-hr">
@@ -337,9 +381,10 @@ breadcrumb:
 
       <button id="open-cart" class="shop-open-cart button">
         <span class="icon">
-          <i class="fa-solid fa-basket-shopping"></i>
+          <i class="fa-solid fa-bag-shopping"></i>
         </span>
         <span>Open Cart</span>
+        <span id="cart-count" class="shop-cart-count tag" style="display: none;">8</span>
       </button>
     </div>
   </section>
@@ -366,11 +411,10 @@ breadcrumb:
       </div>
     </div>
 
-    <div id="products" class="shop-products">
-      {{ shop_placeholder }}
-      {{ shop_placeholder }}
-      {{ shop_placeholder }}
-      {{ shop_placeholder }}
+    <div id="products" data-count="8" class="shop-products">
+      {% for i in (1..8) %}
+        {{ shop_placeholder }}
+      {% endfor %}
     </div>
   </div>
 </div>