Added a Timeline feature, removed the margin-bottom from article > header > h[1-6] And added the border-color for dark theme on the article > header

scss/_index.scss

@@ -46,6 +46,8 @@
 @use "components/tooltip"; // data-tooltip
 @use "components/notification"; // dialog[role="alert"]
 
+@use "components/timeline"; // addition, kind of out of scope but wanted to add
+
 // Utilities
 @use "utilities/accessibility"; // -ms-touch-action, aria-*
 @use "utilities/reduce-motion"; // prefers-reduced-motion

scss/_settings.scss

@@ -143,6 +143,7 @@ $modules: map.merge(
     "components/progress": true,
     "components/tooltip": true,
     "components/notification": true,
+    "components/timeline": true,
 
     // Utilities
     "utilities/accessibility": true,

scss/components/_card.scss

@@ -31,6 +31,15 @@
         var(#{$css-var-prefix}card-border-color);
       border-top-right-radius: var(#{$css-var-prefix}border-radius);
       border-top-left-radius: var(#{$css-var-prefix}border-radius);
+
+      > h1,
+      > h2,
+      > h3,
+      > h4,
+      > h5,
+      > h6 {
+        margin-bottom: 0;
+      }
     }
 
     > footer {

scss/components/_timeline.scss

@@ -0,0 +1,136 @@
+@use "sass:string";
+@use "sass:map";
+@use "sass:math";
+@use "../settings" as *; // for spacing, breakpoints, and if columns are defined.
+
+@if map.get($modules, "components/timeline") {
+  // The actual timeline (the vertical ruler)
+  #{$parent-selector} .timeline {
+    position: relative;
+    max-width: 100%;
+    margin: 0 auto;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      width: 6px;
+      margin-left: -3px;
+      background-color: var(#{$css-var-prefix}timeline-line-color);
+      content: "";
+    }
+
+    // Point around content
+    > .point {
+      position: relative;
+      width: 50%;
+      padding: 10px 25px;
+      background-color: inherit;
+
+      // circle
+      &::after {
+        z-index: 1;
+        position: absolute;
+        top: 13px;
+        right: -13px;
+        width: 25px;
+        height: 25px;
+        border: 4px solid var(#{$css-var-prefix}timeline-dot-border-color);
+        border-radius: 50%;
+        background-color: var(#{$css-var-prefix}timeline-dot-background-color);
+        content: "";
+      }
+
+      // Place the container to the left
+      &.left {
+        left: 0;
+
+        &::before {
+          z-index: 1;
+          position: absolute;
+          top: 15px;
+          right: 15px;
+          width: 0;
+          height: 0;
+          border: medium solid var(#{$css-var-prefix}timeline-arrow-color);
+          border-width: 10px 0 10px 10px;
+          border-color: transparent
+            transparent
+            transparent
+            var(#{$css-var-prefix}timeline-arrow-color);
+          content: " ";
+        }
+      }
+
+      // Place the container to the right
+      &.right {
+        left: 50%;
+
+        &::before {
+          z-index: 1;
+          position: absolute;
+          top: 15px;
+          left: 15px;
+          width: 0;
+          height: 0;
+          border: medium solid var(#{$css-var-prefix}timeline-arrow-color);
+          border-width: 10px 10px 10px 0;
+          border-color: transparent
+            var(#{$css-var-prefix}timeline-arrow-color)
+            transparent
+            transparent;
+          content: " ";
+        }
+
+        &::after {
+          left: -13px;
+        }
+      }
+    }
+  }
+  // Media queries - Responsive timeline on screens less than 600px wide
+  @media screen and (max-width: 600px) {
+    // Place the timelime to the left
+    #{$parent-selector} .timeline {
+      // the line
+      &::after {
+        left: 13px;
+      }
+
+      // after = dot
+      // before = arrow
+      > .point {
+        // Full-width containers
+        width: 100%;
+        padding-right: 25px;
+        padding-left: 40px;
+
+        // Make all right containers behave like the left ones
+        &.right {
+          left: 0;
+        }
+
+        // after = dot
+        &::after,
+        &.left::after,
+        &.right::after {
+          left: 0;
+        }
+
+        // before = arrow
+        // Make sure that all arrows are pointing leftwards
+        // &::before,
+        &.left::before,
+        &.right::before {
+          //left: 60px;
+          top: 16px;
+          left: 30px;
+          border-width: 10px 10px 10px 0;
+          border-color: transparent var(#{$css-var-prefix}timeline-arrow-color) transparent
+            transparent;
+        }
+      }
+    }
+  }
+}

scss/layout/_landmarks.scss

@@ -11,6 +11,11 @@
   // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
   // ––––––––––––––––––––
 
+  // add smooth scrolling
+  html {
+    scroll-behavior: smooth;
+  }
+
   // 1. Remove the margin in all browsers (opinionated)
   body {
     width: 100%;

scss/themes/default/_dark.scss

@@ -167,7 +167,7 @@
   // Card (<article>)
   @if map.get($modules, "components/card") {
     #{$css-var-prefix}card-background-color: #{$slate-900};
-    #{$css-var-prefix}card-border-color: var(#{$css-var-prefix}card-background-color);
+    #{$css-var-prefix}card-border-color: var(#{$css-var-prefix}muted-border-color);
     #{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
     #{$css-var-prefix}card-sectioning-background-color: #{color.mix($slate-900, $slate-850, 75%)};
   }
@@ -184,6 +184,23 @@
   // Loading ([aria-busy=true])
   @if map.get($modules, "components/loading") {
     #{$css-var-prefix}loading-spinner-opacity: 0.5;
+    // Loading icon (animated)
+    // Change the icon color to black for .contrast buttons
+    @if $enable-classes {
+      #{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
+        &.contrast:is(
+            button,
+            [type="submit"],
+            [type="button"],
+            [type="reset"],
+            [role="button"]
+          ):not(.outline) {
+          &::before {
+            filter: brightness(0);
+          }
+        }
+      }
+    }
   }
 
   // Modal (<dialog>)
@@ -239,23 +256,17 @@
     }
   }
 
-  // Loading icon (animated)
-  @if map.get($modules, "components/loading") {
-    // Change the icon color to black for .contrast buttons
-    @if $enable-classes {
-      #{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
-        &.contrast:is(
-            button,
-            [type="submit"],
-            [type="button"],
-            [type="reset"],
-            [role="button"]
-          ):not(.outline) {
-          &::before {
-            filter: brightness(0);
-          }
-        }
-      }
+  // Timeline
+  @if map.get($modules, "components/timeline") {
+    #{$css-var-prefix}timeline-line-color: var(#{$css-var-prefix}primary-background);
+    #{$css-var-prefix}timeline-dot-background-color: var(#{$css-var-prefix}primary-inverse);
+    #{$css-var-prefix}timeline-dot-border-color: var(#{$css-var-prefix}primary-background);
+    @if map.get($modules, "components/card") {
+      #{$css-var-prefix}timeline-arrow-color: var(
+        #{$css-var-prefix}card-sectioning-background-color
+      );
+    } @else {
+      #{$css-var-prefix}timeline-arrow-color: #{color.mix($slate-900, $slate-850, 75%)};
     }
   }
 }

scss/themes/default/_light.scss

@@ -218,4 +218,18 @@
       #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
     }
   }
+
+  // Timeline
+  @if map.get($modules, "components/timeline") {
+    #{$css-var-prefix}timeline-line-color: var(#{$css-var-prefix}primary-background);
+    #{$css-var-prefix}timeline-dot-background-color: var(#{$css-var-prefix}primary-inverse);
+    #{$css-var-prefix}timeline-dot-border-color: var(#{$css-var-prefix}primary-background);
+    @if map.get($modules, "components/card") {
+      #{$css-var-prefix}timeline-arrow-color: var(
+        #{$css-var-prefix}card-sectioning-background-color
+      );
+    } @else {
+      #{$css-var-prefix}timeline-arrow-color: #{color.mix($slate-50, $white, 25%)};
+    }
+  }
 }