Prod Sync

README.md

@@ -31,8 +31,8 @@ feat-30-integrate-accessible
 
 The following options can be selected as the type: 
 
-Feat (new feature or enhancement) 
-Fix (bug fix) 
+- Feat (new feature or enhancement) 
+- Fix (bug fix) 
 
 The short issue name must not be more than 15 characters long. 
 

blocks/carousel/carousel.js

@@ -208,7 +208,7 @@ function Carousel(carouselEl, items, options) {
   init();
 }
 
-const SLIDE_DELAY = 5000;
+const SLIDE_DELAY = 7000;
 const SLIDE_TRANSITION = 1000;
 
 function configureNavigation(elementControls) {
@@ -258,15 +258,15 @@ export default function decorate(block) {
       const content = contentEl.closest('div');
       content.classList.add(...'lg:w-1/2 px-4 lg:px-8 xl:pr-10 pb-10 pt-6 md:pt-4 lg:py-20'.split(' '));
       const heading = content.querySelector('h2');
-      const paragraphs = content.querySelectorAll('p:not(.button-container):not(:has(a[title="link"]))');
+      const paragraphs = content.querySelectorAll('p:not(.button-container)');
       const allBtns = content.querySelectorAll('p.button-container .btn, a[title="link"]');
       if (heading) heading.classList.add(...'text-2xl md:text-4xl tracking-wide md:tracking-tight m-0 font-medium md:font-normal leading-8 md:leading-[55px]'.split(' '));
-      if (paragraphs.length > 0) {
-        paragraphs.forEach((paragraph) => {
+      paragraphs.forEach((paragraph) => {
+        if (!paragraph.querySelector('a[title="link"]')) {
           if (paragraph.nextElementSibling && ['H1', 'H2', 'H3'].includes(paragraph.nextElementSibling.nodeName)) paragraph.classList.add(...'text-danaherpurple-500'.split(' '));
           else paragraph.classList.add(...'text-xl font-extralight tracking-tight leading-7 mt-6'.split(' '));
-        });
-      }
+        }
+      });
       if (allBtns.length > 0) {
         const actions = div({ class: 'flex flex-col md:flex-row gap-5 mt-10' });
         allBtns.forEach((elBtn) => {

blocks/columns/columns.css

@@ -38,7 +38,7 @@
   @apply block;
 }
 
-.columns.bottom-border-right > div > div > p:nth-child(3n+3) {
+.columns.bottom-border-right > div > div > p.link {
   @apply border-b border-solid border-black my-6;
 }
 
@@ -50,7 +50,11 @@ main .top-border > div.columns-wrapper:first-child {
   @apply !py-0;
 }
 
-.columns.bg-color-right > div > div:nth-child(2) > p > a {
+.columns.bg-color-right > div > div:nth-child(2) > p {
+  @apply href-text;
+}
+
+.columns.bg-color-right > div > div:nth-child(2) > p:last-child > a {
   @apply btn-outline-trending-brand text-lg rounded-full px-6 py-3 !no-underline;
 }
 
@@ -62,7 +66,9 @@ main .top-border > div.columns-wrapper:first-child {
   @apply py-2 px-6 leading-7 text-base !text-white;
 }
 
-.columns.bg-color-right > div > div:nth-child(2) > h2 {
+.columns.bg-color-right > div > div:nth-child(2) > h2,
+.columns.bg-color-right > div > div:nth-child(2) > h3, 
+.columns.bg-color-right > div > div:nth-child(2) > h4 {
   @apply py-2 px-6 !text-white;
 }
 

blocks/columns/columns.js

@@ -29,7 +29,7 @@ export default function decorate(block) {
       if (anc) {
         [...anc].forEach((item) => {
           if (item.title === 'link') {
-            item.parentElement.classList.add('pb-8');
+            item.parentElement.classList.add('link', 'pb-8');
             item.textContent += ' ->';
             item.classList.add(...'text-sm font-bold text-danaherpurple-500'.split(' '));
           }

scripts/lib-franklin.js

@@ -41,7 +41,7 @@ export function sampleRUM(checkpoint, data = {}) {
     window.hlx = window.hlx || {};
     if (!window.hlx.rum) {
       const usp = new URLSearchParams(window.location.search);
-      const weight = usp.get('rum') === 'on' ? 1 : 100; // with parameter, weight is 1. Defaults to 100.
+      const weight = usp.get('rum') === 'on' ? 1 : 20; // with parameter, weight is 1. Defaults to 100.
       const id = Array.from({ length: 75 }, (_, i) => String.fromCharCode(48 + i))
         .filter((a) => /\d|[A-Z]/i.test(a))
         .filter(() => Math.random() * 75 > 70)

styles/styles.css

@@ -971,7 +971,7 @@
     gap: 0.75rem;
 }
 
-.columns.bottom-border-right > div > div > p:nth-child(3n+3) {
+.columns.bottom-border-right > div > div > p.link {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
     border-bottom-width: 1px;
@@ -989,7 +989,36 @@ main .top-border > div.columns-wrapper:first-child {
     padding-bottom: 0px !important;
 }
 
-.columns.bg-color-right > div > div:nth-child(2) > p > a {
+.columns.bg-color-right > div > div:nth-child(2) > p a {
+    position: relative;
+    z-index: 0;
+    word-break: break-all;
+    text-decoration-line: underline;
+    text-decoration-color: #3bc7e5;
+    text-decoration-thickness: 3px;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+    transition-duration: 700ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.columns.bg-color-right > div > div:nth-child(2) > p a:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(59 199 229 / var(--tw-bg-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+@media (min-width: 768px) {
+
+    .columns.bg-color-right > div > div:nth-child(2) > p a {
+        overflow-wrap: normal;
+        word-break: normal;
+    }
+}
+
+.columns.bg-color-right > div > div:nth-child(2) > p:last-child > a {
     border-width: 2px;
     --tw-border-opacity: 1;
     border-color: rgb(117 35 255 / var(--tw-border-opacity));
@@ -999,14 +1028,14 @@ main .top-border > div.columns-wrapper:first-child {
     color: rgb(117 35 255 / var(--tw-text-opacity));
 }
 
-.columns.bg-color-right > div > div:nth-child(2) > p > a:hover {
+.columns.bg-color-right > div > div:nth-child(2) > p:last-child > a:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(117 35 255 / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.columns.bg-color-right > div > div:nth-child(2) > p > a {
+.columns.bg-color-right > div > div:nth-child(2) > p:last-child > a {
     border-radius: 9999px;
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -1034,7 +1063,9 @@ main .top-border > div.columns-wrapper:first-child {
     color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
 }
 
-.columns.bg-color-right > div > div:nth-child(2) > h2 {
+.columns.bg-color-right > div > div:nth-child(2) > h2,
+.columns.bg-color-right > div > div:nth-child(2) > h3, 
+.columns.bg-color-right > div > div:nth-child(2) > h4 {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     padding-left: 1.5rem;