wknd styles

blocks/activity-details/activity-details.css

@@ -0,0 +1,28 @@
+.activity-details-container {
+    grid-area: left;
+}
+
+.activity-details dl {
+    font-family: var(--body-font-family);
+    text-transform: uppercase;
+}
+
+.activity-details dt {
+    border-left: 5px solid #ebebeb;
+    color: #696969;
+    font-size: 9pt;
+    padding-top: 1em;
+    padding-left: 1em;
+}
+
+.activity-details dd {
+    border-left: 5px solid #ebebeb;
+    padding-top: .5em;
+    padding-bottom: 1em;
+    padding-left: 1em;
+    font-weight: 600;
+    font-size: 14px;
+    margin-inline-start: 0;
+    margin-bottom: 1.25em;
+}
+

blocks/activity-details/activity-details.js

@@ -0,0 +1,18 @@
+/**
+ *
+ * @param {HTMLElement} block
+ */
+export default function decorate(block) {
+  /* change to definition list */
+  const dl = document.createElement('dl');
+  [...block.children].forEach((row) => {
+    // const term = row.firstElementChild.textContent;
+    // const def = row.lastElementChild.textContent;
+    const dt = document.createElement('dt');
+    const dd = document.createElement('dd');
+    dt.append(...row.firstElementChild.childNodes);
+    dd.append(...row.lastElementChild.childNodes);
+    dl.append(dt, dd);
+  });
+  block.replaceChildren(dl);
+}

blocks/hero/hero.css

@@ -3,18 +3,27 @@
 main .hero-container > div {
     max-width: unset;
 }
-  
+
 main .hero-container {
     padding: 0;
 }
-  
+
 main .hero {
     position: relative;
     padding: 32px;
     min-height: 300px;
     color: var(--background-color);
 }
 
+main .hero h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    line-height: 1.2;
+    margin-bottom: 1rem;
+    margin-top: 0;
+    color: darkgrey;
+}
+
 main .hero .hero-body {
     max-width: 1200px;
     margin-left: auto;
@@ -34,11 +43,11 @@ main .hero picture {
 }
 
 main .hero img {
-    object-fit: cover;
+    object-fit: fill;
     width: 100%;
     height: 100%;
 }
 
 .hero [data-align="center"] {
     text-align: center;
-}
+}

blocks/tabs/tabs.css

@@ -0,0 +1,30 @@
+.tabs ul {
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 0;
+    list-style: none;
+}
+
+.tabs li {
+    box-sizing: border-box;
+    border-bottom: 1px solid transparent;
+    cursor: pointer;
+}
+
+.tabs li button {
+    font-size: 14px;
+    font-weight: unset;
+    text-transform: uppercase;
+    padding: 1em 1.5em;
+    max-height: 3pc;
+    min-width: 3pc;
+    border-radius: 0;
+    background: none;
+    color: black;
+}
+
+.tabs li button.active {
+    border: none;
+    background-color: #202020;
+    color: #fff;
+}

blocks/tabs/tabs.js

@@ -0,0 +1,98 @@
+/**
+ * @typedef TabInfo
+ * @property {string} name
+ * @property {HTMLElement} $tab
+ * @property {HTMLElement} $content
+ */
+
+/**
+ * @param {HTMLElement} $block
+ * @return {TabInfo[]}
+ */
+export function createTabs($block) {
+  const $ul = $block.querySelector('ul');
+  if (!$ul) {
+    return null;
+  }
+  /** @type TabInfo[] */
+  const tabs = [...$ul.querySelectorAll('li')].map(($li) => {
+    const title = $li.textContent;
+    const name = title.toLowerCase().trim();
+    return {
+      title,
+      name,
+      $tab: $li,
+    };
+  });
+  // move $ul below section div
+  $block.replaceChildren($ul);
+
+  // search referenced sections and move them inside the tab-container
+  const $wrapper = $block.parentElement;
+  const $container = $wrapper.parentElement;
+  const $sections = document.querySelectorAll('[data-tab]');
+
+  // move the tab's sections before the tab riders.
+  [...$sections].forEach(($tabContent) => {
+    const name = $tabContent.dataset.tab.toLowerCase().trim();
+    /** @type TabInfo */
+    const tab = tabs.find((t) => t.name === name);
+    if (tab) {
+      const $el = document.createElement('div');
+      $el.classList.add('tab-item');
+      $el.append(...$tabContent.children);
+      $el.classList.add('hidden');
+      $container.insertBefore($el, $wrapper);
+      $tabContent.remove();
+      tab.$content = $el;
+    }
+  });
+  return tabs;
+}
+
+/**
+ * @param {HTMLElement} $block
+ */
+export default function decorate($block) {
+  const tabs = createTabs($block);
+
+  // move the tab riders in front
+  const $wrapper = $block.parentElement;
+  const $container = $wrapper.parentElement;
+  $container.insertBefore($wrapper, $container.firstElementChild);
+
+  tabs.forEach((tab, index) => {
+    const $button = document.createElement('button');
+    const { $tab, title, name } = tab;
+    $button.textContent = title;
+    $tab.replaceChildren($button);
+
+    $button.addEventListener('click', () => {
+      const $activeButton = $block.querySelector('button.active');
+      const blockPosition = $block.getBoundingClientRect().top;
+      const offsetPosition = blockPosition + window.scrollY - 80;
+
+      if ($activeButton !== $tab) {
+        $activeButton.classList.remove('active');
+        $button.classList.add('active');
+
+        tabs.forEach((t) => {
+          if (name === t.name) {
+            t.$content.classList.remove('hidden');
+          } else {
+            t.$content.classList.add('hidden');
+          }
+          window.scrollTo({
+            top: offsetPosition,
+            behavior: 'smooth',
+          });
+        });
+      }
+    });
+
+    if (index === 0) {
+      $button.classList.add('active');
+      tab.$content.classList.remove('hidden');
+    }
+  });
+}