refactor: add standardized spacing variables and more style cleanup (#1287)

* refactor: add standardized spacing variables and more style cleanup

* refactor: rename `spacing-xxl` to `spacing-2xl` and introduce `spacing-3xl` for consistent spacing variables.

* refactor: Migrate related content styling to use the `subsection-list` component with updated layout adjustments.

* style: adjust padding values for article list tiles.

* refactor: Introduce shadow variables and dynamic spacing to prevent shadow cutoff in list layouts.

* refactor: relocate dark scheme Mermaid variables within the root scope.

assets/scss/partials/layout/article.scss

@@ -111,14 +111,14 @@
     }
 
     li {
-        margin: 15px 0 15px 20px;
-        padding: 5px;
+        margin: var(--spacing-md) 0 var(--spacing-md) var(--spacing-lg);
+        padding: var(--spacing-xs);
 
         &>ol,
         &>ul {
-            margin-top: 10px;
-            padding-left: 10px;
-            margin-bottom: -5px;
+            margin-top: var(--spacing-sm);
+            padding-left: var(--spacing-sm);
+            margin-bottom: calc(var(--spacing-xs) * -1);
 
             &>li:last-child {
                 margin-bottom: 0;
@@ -182,7 +182,7 @@
 
 .article-toc {
     padding: 0 var(--card-padding);
-    margin-top: 20px;
+    margin-top: var(--spacing-lg);
 
     @include respond(lg) {
         display: none;
@@ -203,7 +203,7 @@
 
         summary {
             list-style: none;
-            padding: 15px 20px;
+            padding: var(--spacing-md) var(--spacing-lg);
             cursor: pointer;
 
             &::-webkit-details-marker {
@@ -213,7 +213,7 @@
             .article-toc-title {
                 display: flex;
                 align-items: center;
-                gap: 10px;
+                gap: var(--spacing-sm);
                 text-transform: uppercase;
                 font-size: 1.4rem;
                 font-weight: bold;
@@ -230,33 +230,6 @@
     }
 }
 
-.related-content {
-    overflow-x: auto;
-    padding-bottom: 15px;
-
-    &>.flex {
-        float: left;
-    }
-
-    article {
-        margin-right: 15px;
-        flex-shrink: 0;
-        overflow: hidden;
-
-        .article-title {
-            font-size: 1.8rem;
-            margin: 0;
-        }
-
-        &.has-image {
-            .article-details {
-                padding: 20px;
-                background: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.75) 100%);
-            }
-        }
-    }
-}
-
 .article-content {
     font-family: var(--article-font-family);
     font-size: var(--article-font-size);
@@ -313,7 +286,7 @@
         position: relative;
         margin: 1.5em 0;
         border-inline-start: var(--blockquote-border-size) solid var(--card-separator-color);
-        padding: 15px calc(var(--card-padding) - var(--blockquote-border-size));
+        padding: var(--spacing-md) calc(var(--card-padding) - var(--blockquote-border-size));
         background-color: var(--blockquote-background-color);
 
         .cite {
@@ -383,7 +356,7 @@
         flex-direction: row;
         justify-content: center;
         margin: 1.5em 0;
-        gap: 10px;
+        gap: var(--spacing-sm);
 
         figure {
             margin: 0;

assets/scss/partials/layout/list.scss

@@ -1,11 +1,9 @@
 .section-card {
-    border-radius: var(--card-border-radius);
-    background-color: var(--card-background);
+    @include card-style;
     padding: var(--small-card-padding);
-    box-shadow: var(--shadow-l1);
     display: flex;
     align-items: center;
-    gap: 20px;
+    gap: var(--spacing-lg);
 
     --separation: 15px;
 
@@ -47,16 +45,24 @@
 }
 
 .subsection-list {
-    overflow-x: auto;
-    margin-left: -24px;
+    --shadow-overlap-x: calc(var(--shadow-l2-blur) + 4px);
+    --shadow-overlap-y: calc(var(--shadow-l2-blur) + var(--shadow-l2-y) + 4px);
 
+    overflow-x: auto;
+
+    /// These values are computed from the shadow of the article-list--tile (which uses shadow-l1 and shadow-l2)
+    /// so that the shadow is not cut off
+    margin-left: calc(var(--shadow-overlap-x) * -1);
+    margin-right: calc(var(--shadow-overlap-x) * -1);
+    margin-bottom: calc(var(--shadow-overlap-y) * -1);
+    
     .article-list--tile {
         display: flex;
-        padding: 8px 0 34px 24px;
+        padding: var(--spacing-xs) var(--shadow-overlap-x) var(--shadow-overlap-y) var(--shadow-overlap-x);
         width: max-content;
+        gap: var(--spacing-lg);
 
         article {
-            margin-right: 20px;
             flex-shrink: 0;
 
             .article-title {
@@ -65,7 +71,7 @@
             }
 
             .article-details {
-                padding: 20px;
+                padding: var(--spacing-lg);
             }
         }
     }

assets/scss/partials/layout/search.scss

@@ -7,12 +7,12 @@
 
         label {
             font-size: 1.3rem;
-            top: 10px;
+            top: var(--spacing-sm);
         }
 
         input {
             font-size: 1.5rem;
-            padding: 30px 20px 15px 20px;
+            padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
         }
     }
 
@@ -23,21 +23,20 @@
 
     label {
         position: absolute;
-        top: 15px;
-        inset-inline-start: 20px;
+        top: var(--spacing-md);
+        inset-inline-start: var(--spacing-lg);
         font-size: 1.4rem;
         color: var(--card-text-color-tertiary);
     }
 
     input {
         padding: 40px 20px 20px;
-        border-radius: var(--card-border-radius);
-        background-color: var(--card-background);
-        box-shadow: var(--shadow-l1);
+        @include card-style;
         color: var(--card-text-color-main);
         width: 100%;
         border: 0;
         -webkit-appearance: none;
+        appearance: none;
 
         transition: box-shadow 0.3s ease;