testing

HeroDigital · Mar 18, 2024 · 235b8bd · 235b8bd
1 parent d21c1b1
commit 235b8bd
Show file tree

Hide file tree

Showing 21 changed files with 1,992 additions and 327 deletions.
diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
@@ -1,27 +1,82 @@
+.cards-container {
+  padding: 30px !important;
+}
+
 .cards > ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
-  grid-gap: 16px;
+  /* grid-template-columns: repeat(auto-fill, minmax(278px, 1fr)); */
+  grid-gap: 30px;
 }
 
 .cards > ul > li {
   border: 1px solid var(--dark-color);
-  background-color: var(--background-color)
+  background-color: var(--background-color);
+  position: relative;
+  display: grid;
+  overflow: hidden;
+}
+@media (width > 767px) {
+  .cards > ul > li {
+    display: list-item;
+    height: 288px;
+  }
 }
 
 .cards .cards-card-body {
   margin: 16px;
+  bottom: 0;
+  color: white;
+  background: rgba(0, 0, 0, 0.7);
+  padding: 18px;
+
+  grid-row: 1;
+  grid-column: 1;
+  z-index: 1;
 }
 
-.cards .cards-card-image p {
-  margin: 0;
+@media (width > 767px) {
+  .cards .cards-card-body {
+    position: absolute;
+    right: 0;
+    left: 0;
+  } 
 }
 
-.cards .cards-card-image {
+.cards .cards-card-image-container {
+  position: relative;
   line-height: 0;
+  grid-row: 1;
+  grid-column: 1;
+}
+
+.cards .cards-card-image-container picture::before {
+  background: rgba(0, 0, 0, 0.25);
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.cards .cards-card-image-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* Adjust transparency here */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cards .cards-card-image-text {
+  color: white; /* Text color */
+  font-size: 18px; /* Text size */
+  font-weight: bold; /* Text weight */
 }
 
 .cards .cards-card-body > *:first-child {
@@ -32,4 +87,168 @@
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
+  height: 100%;
+}
+
+@media (width > 767px) {
+  .cards > ul > li img {
+    height: 288px;
+  }
+}
+
+.cards .cards-card-body h3 {
+  font-size: 1.125rem;
+  color: white;
+  margin-top: 6px;
+  margin-bottom: 0;
+  overflow: hidden;
+  font-weight: 400;
+}
+
+.cards .cards-card-body h3:nth-child(1) {
+  text-align: right;
 }
+
+.cards .cards-card-body p {
+  margin: 10px 0 0 0;
+  color: white;
+  overflow: auto;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 300;
+}
+
+.cards .cards-card-body p a {
+  border-radius: 0;
+  color: #0049ab;
+  background: #f0f0f0;
+  height: 40px;
+  margin: 0;
+}
+
+.cards .cards-card-body h3 picture img {
+  height: 20px;
+  width: 20px;
+  cursor: pointer;
+}
+
+.cards-container .default-content-wrapper h2 {
+  font-size: 1.5rem;
+  letter-spacing: -.5px;
+  color: #000;
+  font-weight: 400;
+  line-height: 1.67;
+  margin-bottom: 20px;
+}
+
+.cards-container .default-content-wrapper p.button-container {
+  margin-bottom: 0;
+  text-align: center;
+}
+
+.cards-container .default-content-wrapper p.button-container a {
+  margin-bottom: 0;
+  border-radius: 0;
+  background: #f0f0f0;
+  color: #000;
+  padding: 0 36px;
+  min-width: 160px;
+  font-weight: 500;
+  text-transform: uppercase;
+  transition: background-color .3s ease-in-out;
+  text-align: center;
+  border: 1px solid transparent;
+  font-size: 1rem;
+  line-height: 3rem;
+  height: 3rem;
+}
+
+@media (width > 767px) {
+
+  .cards-container {
+    padding: 60px 26px !important;
+  }
+
+  .cards > ul > li img {
+    height: 396px;
+  }
+
+  .cards > ul > li {
+    height: 396px;
+  }
+
+  .cards > ul {
+    display: grid;
+    grid-template-columns: 1fr 0.5fr 1fr;
+    grid-template-rows: repeat(3, 1fr);
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
+  }
+
+  .cards ul li#list-item-1 {
+    grid-area: 1 / 1 / 2 / 3;
+  }
+
+  .cards ul li#list-item-2 {
+    grid-area: 1 / 3 / 2 / 4;
+  }
+
+  .cards ul li#list-item-3 {
+    grid-area: 2 / 1 / 3 / 2;
+  }
+
+  .cards ul li#list-item-4 {
+    grid-area: 2 / 2 / 3 / 4;
+  }
+
+  .cards ul li#list-item-5 {
+    grid-area: 3 / 1 / 4 / 4;
+  }
+
+  .cards .cards-card-body {
+    bottom: unset;
+    top: 25%;
+  }
+
+  .cards .cards-card-body p {
+    display: none;
+  }
+
+  .cards > ul > li:hover .cards-card-body p {
+    display: block;
+  }
+
+  .cards .cards-card-body p.button-container {
+    display: block;
+    margin-top: 16px;
+  }
+  .cards .cards-card-body h3:nth-child(1) {
+    position: relative
+  }
+
+  .cards > ul > li:hover .cards-card-body h3:nth-child(1) {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+  }
+
+  .cards > ul > li:hover .cards-card-body {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+
+  .cards-container .default-content-wrapper h2 {
+    font-size: 2.25rem;
+    letter-spacing: -.2px;
+    margin-bottom: 40px;
+  }
+
+}
diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js
@@ -1,23 +1,28 @@
 import { createOptimizedPicture } from '../../scripts/aem.js';
-import { moveInstrumentation } from '../../scripts/scripts.js';
 
 export default function decorate(block) {
-  /* change to ul, li */
+  // Change to ul, li
   const ul = document.createElement('ul');
-  [...block.children].forEach((row) => {
+  [...block.children].forEach((row, index) => {
     const li = document.createElement('li');
-    moveInstrumentation(row, li);
+    li.id = `list-item-${index + 1}`; // Assigning unique IDs to each li
     while (row.firstElementChild) li.append(row.firstElementChild);
     [...li.children].forEach((div) => {
-      if (div.children.length === 1 && div.querySelector('picture')) div.className = 'cards-card-image';
+      if (div.children.length === 1 && div.querySelector('img')) div.className = 'cards-card-image-container';
       else div.className = 'cards-card-body';
     });
     ul.append(li);
   });
   ul.querySelectorAll('img').forEach((img) => {
-    const optimizedPic = createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }]);
-    moveInstrumentation(img, optimizedPic.querySelector('img'));
-    img.closest('picture').replaceWith(optimizedPic);
+    const container = img.parentElement;
+    container.classList.add('cards-card-image-container');
+    const squareOverlay = document.createElement('div');
+    squareOverlay.classList.add('cards-card-image-overlay');
+    squareOverlay.innerHTML = `<div class="cards-card-image-text">${img.alt}</div>`;
+    container.appendChild(squareOverlay);
+    container.replaceWith(
+      createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }]),
+    );
   });
   block.textContent = '';
   block.append(ul);