Merge branch 'main' into add-custom-drift-script

blocks/breadcrumb/breadcrumb.css

@@ -76,7 +76,7 @@ main .section.breadcrumb-container > div:first-child > *:first-child > *:first-c
 }
 
 .breadcrumb .breadcrumb__col ul li.breadcrumb__ellipsis::before {
-  content: "...";
+  content: "Home";
 }
 
 .breadcrumb .breadcrumb__col ul li.breadcrumb__ellipsis span {

blocks/content-text-body/content-text-body.css

@@ -12,22 +12,31 @@
 /* Block - Content Text Body */
 .content-text-body h2,
 .content-text-body h3,
-.content-text-body h4,
-.content-text-body h5 {
-  margin: var(--spacer-element-08) 0 0 0;
+
+.content-text-body h4 {
+  margin: var(--spacer-element-11) 0 0 0;
 }
 
 .content-text-body h5 {
+  margin: var(--spacer-element-05) 0 0 0;
   font-family: var(--sans-serif-font-light);
   font-size: var(--font-size-16);
   font-weight: 300;
 }
 
+.content-text-body li::marker {
+  font-size: var(--font-size-21) !important;
+}
+
+.content-text-body ul li {
+  margin: var(--spacer-element-03) 0 0 0;
+}
+
 .content-text-body p,
 .content-text-body ul,
 .content-text-body ol,
 .content-text-body blockquote {
-  margin: var(--spacer-element-08) 0 0 0;
+  margin: var(--spacer-element-03) 0 0 0;
   font-size: var(--font-size-16);
 }
 
@@ -37,7 +46,7 @@
 .content-text-body h5 + ul,
 .content-text-body h5 + p,
 .content-text-body p + ul {
-  margin-top: 0;
+  margin-top: 8;
 }
 
 .content-text-body p span.icon {

blocks/short-cards/short-cards.css

@@ -39,7 +39,7 @@ main .section.short-cards-container.section-full-width > .short-cards-wrapper:la
   min-height: var(--spacer-layout-06);
   padding: var(--spacer-element-08);
   font-size: var(--font-size-18);
-  font-family: var(--sans-serif-font-medium);
+  font-family: var(--sans-serif-font-regular);
   font-weight: 500;
   line-height: 160%;
   text-decoration: none;

styles/styles.css

@@ -213,6 +213,7 @@
   --spacer-element-08: 32px;
   --spacer-element-09: 40px;
   --spacer-element-10: 48px;
+  --spacer-element-11: 64px;
 
   /* layout spacers */
   --spacer-layout-01: 16px;

tools/tagger/tagger.js

@@ -1,3 +1,5 @@
+let selectedOrder = [];
+
 function renderItems(items, catId) {
   let html = '';
   items.forEach((tag) => {
@@ -66,6 +68,17 @@ function filter() {
 
 function toggleTag(target) {
   target.classList.toggle('selected');
+  const { title } = target.querySelector('.tag').dataset;
+  const category = target.closest('.category').querySelector('h2').textContent; // Assuming category title is in h2
+  const tagIdentifier = { title, category };
+
+  if (target.classList.contains('selected')) {
+    selectedOrder.push(tagIdentifier); // Add to the selection order
+  } else {
+    selectedOrder = selectedOrder.filter(
+      (item) => item.title !== title || item.category !== category,
+    );
+  }
   // eslint-disable-next-line no-use-before-define
   displaySelected();
 }
@@ -76,20 +89,33 @@ function displaySelected() {
   const toCopyBuffer = [];
 
   selTagsEl.innerHTML = '';
-  const selectedTags = document.querySelectorAll('#results .path.selected');
-  if (selectedTags.length > 0) {
-    selectedTags.forEach((path) => {
+  selectedOrder.forEach(({ title, category }) => {
+    // Find the category element
+    const categories = document.querySelectorAll('#results .category');
+    let path;
+    categories.forEach((cat) => {
+      if (cat.querySelector('h2').textContent === category) {
+        const tag = Array.from(cat.querySelectorAll('.tag')).find((t) => t.dataset.title === title);
+        if (tag) {
+          path = tag.closest('.path');
+        }
+      }
+    });
+
+    if (path) {
       const clone = path.cloneNode(true);
       clone.classList.remove('filtered', 'selected');
       const tag = clone.querySelector('.tag');
       tag.innerHTML = tag.dataset.title;
       clone.addEventListener('click', () => {
         toggleTag(path);
       });
-      toCopyBuffer.push(tag.dataset.title);
+      toCopyBuffer.push(`${tag.dataset.title}`);
       selTagsEl.append(clone);
-    });
+    }
+  });
 
+  if (selectedOrder.length > 0) {
     selEl.classList.remove('hidden');
   } else {
     selEl.classList.add('hidden');
@@ -113,11 +139,20 @@ async function init() {
     copyButton.disabled = true;
   });
 
-  selEl.querySelector('button.clear').addEventListener('click', () => {
-    const selectedTags = document.querySelectorAll('#results .path.selected');
-    selectedTags.forEach((tag) => {
-      toggleTag(tag);
+  const clearButton = selEl.querySelector('button.clear');
+  clearButton.addEventListener('click', () => {
+    // Remove the 'filtered' class from all tags
+    document.querySelectorAll('#results .tag').forEach((tag) => {
+      tag.closest('.path').classList.remove('filtered');
+    });
+
+    // Remove the 'selected' class from all selected tags
+    document.querySelectorAll('.selected').forEach((selectedTag) => {
+      selectedTag.classList.remove('selected');
     });
+
+    selectedOrder = [];
+    displaySelected();
     copyButton.disabled = false;
   });