Merge pull request hlxsites#1193 from hlxsites/1192-ux-process-steps-…

…rebrand

1192 [UX] Process Steps and Blog/News Rebrand

blocks/card-list/card-list.css

@@ -222,6 +222,10 @@
   gap: 1.5rem
 }
 
+.card-list-wrapper :is(.gap-y-0) {
+  row-gap: 0px
+}
+
 .card-list-wrapper :is(.overflow-hidden) {
   overflow: hidden
 }
@@ -294,9 +298,14 @@
   padding-right: 1.5rem
 }
 
-.card-list-wrapper :is(.py-1) {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem
+.card-list-wrapper :is(.py-0) {
+  padding-top: 0px;
+  padding-bottom: 0px
+}
+
+.card-list-wrapper :is(.py-0\.5) {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem
 }
 
 .card-list-wrapper :is(.py-4) {

blocks/card-list/card-list.js

@@ -95,16 +95,16 @@ export function createFilters(articles, viewAll = false) {
     newUrl.pathname = window.location.pathname.substring(0, window.location.pathname.indexOf('/topics/'));
   }
   const tags = viewAll ? div(
-    { class: 'flex flex-wrap gap-2 mb-4' },
+    { class: 'flex flex-wrap gap-2 gap-y-0 mb-4' },
     a(
       {
         class:
-          'text-center my-2 inline-block rounded-full px-4 py-1 font-semibold text-danaherpurple-500 bg-danaherpurple-50 hover:text-white hover:bg-danaherpurple-500',
+          'text-center my-2 inline-block rounded-full px-4 py-0.5 font-semibold text-danaherpurple-500 bg-danaherpurple-50 hover:text-white hover:bg-danaherpurple-500',
         href: makePublicUrl(newUrl.toString()),
       },
       'View All',
     ),
-  ) : div({ class: 'flex flex-wrap gap-2 mb-4' });
+  ) : div({ class: 'flex flex-wrap gap-2 gap-y-0 mb-4' });
 
   [...keywords].sort().forEach((keyword) => {
     let currentUrl;
@@ -119,7 +119,7 @@ export function createFilters(articles, viewAll = false) {
     const tagAnchor = a(
       {
         class:
-          'text-center my-2 inline-block rounded-full px-4 py-1 font-semibold text-danaherpurple-500 bg-danaherpurple-50 hover:text-white hover:bg-danaherpurple-500',
+          'text-center my-2 inline-block rounded-full px-4 py-0.5 font-semibold text-danaherpurple-500 bg-danaherpurple-50 hover:text-white hover:bg-danaherpurple-500',
         href: makePublicUrl(newUrl.toString()),
       },
       keyword,

blocks/side-nav/side-nav.css

@@ -73,6 +73,14 @@
   padding-bottom: 1rem
 }
 
+.side-nav-wrapper :is(.pl-2) {
+  padding-left: 0.5rem
+}
+
+.side-nav-wrapper :is(.pl-2\.5) {
+  padding-left: 0.625rem
+}
+
 .side-nav-wrapper :is(.pr-2) {
   padding-right: 0.5rem
 }

blocks/side-nav/side-nav.js

@@ -25,7 +25,7 @@ function renderSideNav(sideNavItems) {
           class: 'flex gap-3',
         },
         a({
-          class: 'py-4 pr-2 text-base',
+          class: 'py-4 pr-2 pl-2.5 text-base',
           href: makePublicUrl(sideNavItem.path),
         }, sideNavItem.title),
       ),

styles/styles.css

@@ -1019,7 +1019,7 @@ header {
 
 @media (min-width: 1024px) {
   header {
-    height: 179px;
+    height: 170px;
   }
 }
 

styles/tailwind.css

@@ -199,7 +199,7 @@
   }
 
   header {
-    @apply h-[52px] md:h-[80px] lg:h-[179px] bg-white print:hidden;
+    @apply h-[52px] md:h-[80px] lg:h-[170px] bg-white print:hidden;
   }
 
   .topic main, .topichub main {