diff --git a/assets/scss/_alerts.scss b/assets/scss/_alerts.scss
index 5ce5cc22a2..116e127851 100644
--- a/assets/scss/_alerts.scss
+++ b/assets/scss/_alerts.scss
@@ -1,20 +1,20 @@
 // Style alert boxes.
 
 .alert {
-    font-weight: $font-weight-medium;
-    background: $white;
-    color: inherit;
-    border-radius: 0;
+  font-weight: $font-weight-medium;
+  background: $white;
+  color: inherit;
+  border-radius: 0;
 
-    @each $color, $value in $theme-colors {
-        &-#{$color} {
-            & .alert-heading {
-                color: $value;
-            }
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      & .alert-heading {
+        color: $value;
+      }
 
-            border-style: solid;
-            border-color: $value;
-            border-width: 0 0 0 4px;
-        }
+      border-style: solid;
+      border-color: $value;
+      border-width: 0 0 0 4px;
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/assets/scss/_blog.scss b/assets/scss/_blog.scss
index 19ff41e2c3..0cbf655002 100644
--- a/assets/scss/_blog.scss
+++ b/assets/scss/_blog.scss
@@ -11,4 +11,4 @@
     display: none;
     @extend .d-lg-block;
   }
-}
\ No newline at end of file
+}
diff --git a/assets/scss/_boxes.scss b/assets/scss/_boxes.scss
index 410a6f45a2..ac77a84fc0 100644
--- a/assets/scss/_boxes.scss
+++ b/assets/scss/_boxes.scss
@@ -1,78 +1,89 @@
 // Boxes on the home page and similar.
-.td-box {}
+.td-box {
+}
 
 // box-variant creates the main style for a colored section used on the site.
 @mixin box-variant($parent, $color-name, $color-value) {
-    $text-color: color-contrast($color-value);
-    $link-color: mix($blue, $text-color, lightness($color-value));
-    $link-hover-color: rgba($link-color, 0.5) !default;
-
-    #{$parent} {
-        &--#{$color-name} {
-            color: $text-color;
-            background-color: #{$color-value};
-
-            .td-arrow-down {
-                &::before {
-                    left: 50%;
-                    margin-left: -30px;
-                    bottom: -25px;
-                    border: {
-                        style: solid;
-                        width: 25px 30px 0 30px;
-                        color: #{$color-value} transparent transparent transparent;
-                    };
-                    z-index: 3;
-                    position: absolute;
-                    content: "";
-                }
-            }
+  $text-color: color-contrast($color-value);
+  $link-color: mix($blue, $text-color, lightness($color-value));
+  $link-hover-color: rgba($link-color, 0.5) !default;
+
+  #{$parent} {
+    &--#{$color-name} {
+      color: $text-color;
+      background-color: #{$color-value};
+
+      .td-arrow-down {
+        &::before {
+          left: 50%;
+          margin-left: -30px;
+          bottom: -25px;
+          border: {
+            style: solid;
+            width: 25px 30px 0 30px;
+            color: #{$color-value} transparent transparent transparent;
+          }
+          z-index: 3;
+          position: absolute;
+          content: "";
         }
+      }
     }
+  }
 
-    // Improve contrast for the links in paragraphs.
-    @include link-variant("#{$parent}--#{$color-name} p > a", $link-color, $link-hover-color, false);
-
-    @if $enable-gradients {
-        @include bg-gradient-variant("#{$parent}--1#{$color-name}#{$parent}--gradient", $color-value, true);
-    }
+  // Improve contrast for the links in paragraphs.
+  @include link-variant(
+    "#{$parent}--#{$color-name} p > a",
+    $link-color,
+    $link-hover-color,
+    false
+  );
+
+  @if $enable-gradients {
+    @include bg-gradient-variant(
+      "#{$parent}--1#{$color-name}#{$parent}--gradient",
+      $color-value,
+      true
+    );
+  }
 }
 
 // Common min-height modifiers used for boxes.
 @mixin td-box-height-modifiers($parent) {
-    #{$parent} {
-        &--height-auto {}
+  #{$parent} {
+    &--height-auto {
+    }
 
-        &--height-min {
-            min-height: 300px;
-        }
+    &--height-min {
+      min-height: 300px;
+    }
 
-        &--height-med {
-            min-height: 400px;
-        }
+    &--height-med {
+      min-height: 400px;
+    }
 
-        &--height-max {
-            min-height: 500px;
-        }
+    &--height-max {
+      min-height: 500px;
+    }
 
-        &--height-full {
-            min-height: 100vh;
-        }
+    &--height-full {
+      min-height: 100vh;
+    }
 
-        @include media-breakpoint-up(md) {
-            &--height-min {
-                min-height: 450px;
-            }
+    @include media-breakpoint-up(md) {
+      &--height-min {
+        min-height: 450px;
+      }
 
-            &--height-med {
-                min-height: 500px;
-            }
+      &--height-med {
+        min-height: 500px;
+      }
 
-            &--height-max {
-                min-height: 650px;
-            }
-        }
+      &--height-max {
+        min-height: 650px;
+      }
     }
+  }
 }
 
 @include td-box-height-modifiers(".td-box");
@@ -80,48 +91,48 @@
 // Styling for section boxes
 .td-box {
   .row.section {
-       padding-left: 5vw;
-       padding-right: 5vw;
-       flex-direction: column;
+    padding-left: 5vw;
+    padding-right: 5vw;
+    flex-direction: column;
 
-       > table {
-        @extend .table-striped;
+    > table {
+      @extend .table-striped;
 
-        @extend .table-responsive;
+      @extend .table-responsive;
 
-        @extend .table;
-       }
-   }
+      @extend .table;
+    }
+  }
 
   .row {
-       padding-left: 5vw;
-       padding-right: 5vw;
-       flex-direction: row;
+    padding-left: 5vw;
+    padding-right: 5vw;
+    flex-direction: row;
   }
 }
 // Styling for community page link boxes
 
 .td-box.linkbox {
-   padding: 5vh 5vw;
+  padding: 5vh 5vw;
 }
 
 // This allows "painting by numbers"
 @for $i from 1 through length($td-box-colors) {
-    $c: nth($td-box-colors, $i);
-    $name: $i - 1;
+  $c: nth($td-box-colors, $i);
+  $name: $i - 1;
 
-    @include box-variant(".td-box", $name, $c);
+  @include box-variant(".td-box", $name, $c);
 }
 
 // Same as above with all the theme color names.
 @each $color, $value in $colors {
-    @include box-variant(".td-box", $color, $value);
+  @include box-variant(".td-box", $color, $value);
 }
 
 @each $color, $value in $theme-colors {
-    @include box-variant(".td-box", $color, $value);
+  @include box-variant(".td-box", $color, $value);
 }
 
 @each $color, $value in $grays {
-    @include box-variant(".td-box", $color, $value);
+  @include box-variant(".td-box", $color, $value);
 }
diff --git a/assets/scss/_breadcrumb.scss b/assets/scss/_breadcrumb.scss
index 0f075a874a..0d32ab7554 100644
--- a/assets/scss/_breadcrumb.scss
+++ b/assets/scss/_breadcrumb.scss
@@ -1,7 +1,9 @@
 // Breadcrumb
 
 .td-breadcrumbs {
-  @media print {display: none !important; }
+  @media print {
+    display: none !important;
+  }
 
   .breadcrumb {
     background: inherit;
diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss
index 4ec1321849..2139b5b4ca 100644
--- a/assets/scss/_buttons.scss
+++ b/assets/scss/_buttons.scss
@@ -1,15 +1,15 @@
 // Buttons
 
 @if $enable-rounded {
-    .btn {
-        border-radius: 1rem;
+  .btn {
+    border-radius: 1rem;
 
-        &-lg {
-            border-radius: 2rem;
-        }
+    &-lg {
+      border-radius: 2rem;
+    }
 
-        &-sm {
-            border-radius: 1rem;
-        }
+    &-sm {
+      border-radius: 1rem;
     }
+  }
 }
diff --git a/assets/scss/_code.scss b/assets/scss/_code.scss
index b96850bff6..759c7e5634 100644
--- a/assets/scss/_code.scss
+++ b/assets/scss/_code.scss
@@ -1,101 +1,101 @@
 // Code formatting.
 
 .td-content {
-	// Highlighted code.
-    .highlight {
-        @extend .card;
-	
-        margin: 2rem 0;
-        padding: 0;
-        position: relative;
+  // Highlighted code.
+  .highlight {
+    @extend .card;
 
-        .click-to-copy {
-            display: block;
-            text-align: right;
-            height: 1ex;
-        }
-
-        pre {
-            margin: 0;
-            padding: 1rem;
+    margin: 2rem 0;
+    padding: 0;
+    position: relative;
 
-            // Default click-to-copy button
+    .click-to-copy {
+      display: block;
+      text-align: right;
+      height: 1ex;
+    }
 
-            button {
-               position: absolute;
-               color: $gray-400;
-               border-radius: 3px;
-               border-width: 0;
-               background-color: inherit;
-               box-shadow: 1px 1px $gray-400;
-               right: 8px;
-               top: 6px;
+    pre {
+      margin: 0;
+      padding: 1rem;
 
-               &:hover {
-                  color: $dark;
-                  background-color: $gray-400;
-               }
-               &:active {
-                  color: $dark;
-                  background-color: $gray-400;
-                  transform: translateY(2px);
-               }
-            }
+      // Default click-to-copy button
 
-            .c2c-tooltip {
-               background: $dark;
-               color: $white;
-               padding: 2px 4px;
-               border-radius: 3px;
-               display: block;
-               visibility: hidden;
-               opacity: 0;
-               transition: visibility 0s, opacity 0.5s linear;
-            }
+      button {
+        position: absolute;
+        color: $gray-400;
+        border-radius: 3px;
+        border-width: 0;
+        background-color: inherit;
+        box-shadow: 1px 1px $gray-400;
+        right: 8px;
+        top: 6px;
 
-            .c2c-tooltip[show-tooltip] {
-               visibility: visible;
-               opacity: 1;
-            }
+        &:hover {
+          color: $dark;
+          background-color: $gray-400;
         }
-    }
+        &:active {
+          color: $dark;
+          background-color: $gray-400;
+          transform: translateY(2px);
+        }
+      }
 
-    // Inline code
-    p code, li > code, table code {
-        color: inherit;
-        padding: 0.2em 0.4em;
-        margin: 0;
-        font-size: 85%;
-        word-break: normal;
-        background-color: rgba($black, 0.05);
-        border-radius: $border-radius;
+      .c2c-tooltip {
+        background: $dark;
+        color: $white;
+        padding: 2px 4px;
+        border-radius: 3px;
+        display: block;
+        visibility: hidden;
+        opacity: 0;
+        transition: visibility 0s, opacity 0.5s linear;
+      }
 
-        br {
-            display: none;
-        }
+      .c2c-tooltip[show-tooltip] {
+        visibility: visible;
+        opacity: 1;
+      }
     }
+  }
 
+  // Inline code
+  p code,
+  li > code,
+  table code {
+    color: inherit;
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    word-break: normal;
+    background-color: rgba($black, 0.05);
+    border-radius: $border-radius;
 
-    // Code blocks
-    pre {
-        word-wrap: normal;
-        background-color: $gray-100;
-        padding: $spacer;
-     
-
-        > code {
-	    background-color: inherit !important;
-            padding: 0;
-            margin: 0;
-            font-size: 100%;
-            word-break: normal;
-            white-space: pre;
-            border: 0;
-        }
+    br {
+      display: none;
     }
+  }
 
-    pre.mermaid {
-        background-color: inherit;
-        font-size: 0;
+  // Code blocks
+  pre {
+    word-wrap: normal;
+    background-color: $gray-100;
+    padding: $spacer;
+
+    > code {
+      background-color: inherit !important;
+      padding: 0;
+      margin: 0;
+      font-size: 100%;
+      word-break: normal;
+      white-space: pre;
+      border: 0;
     }
+  }
+
+  pre.mermaid {
+    background-color: inherit;
+    font-size: 0;
+  }
 }
diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss
index a237baf28e..fe390dd342 100644
--- a/assets/scss/_colors.scss
+++ b/assets/scss/_colors.scss
@@ -1,41 +1,45 @@
 // Add some local palette classes so you can do -bg-warning -text-warning etc. Even -bg-1 if you want to paint by numbers.
 @mixin palette-variant($color-name, $color-value) {
-    $text-color: color-contrast($color-value);
-    $link-color: mix($blue, $text-color, lightness($color-value));
-
-    $link-hover-color: rgba($link-color, .5) !default;
-
-    .-bg-#{$color-name} {
-        color: $text-color;
-        background-color: $color-value;
-    }
-
-    // Make links in paragraphs stand out more.
-    @include link-variant(".-bg-#{$color-name} p > a", $link-color, $link-hover-color, false);
-
-
-    .-text-#{$color-name} {
-        color: $color-value;
-    }
+  $text-color: color-contrast($color-value);
+  $link-color: mix($blue, $text-color, lightness($color-value));
+
+  $link-hover-color: rgba($link-color, 0.5) !default;
+
+  .-bg-#{$color-name} {
+    color: $text-color;
+    background-color: $color-value;
+  }
+
+  // Make links in paragraphs stand out more.
+  @include link-variant(
+    ".-bg-#{$color-name} p > a",
+    $link-color,
+    $link-hover-color,
+    false
+  );
+
+  .-text-#{$color-name} {
+    color: $color-value;
+  }
 }
 
 @each $color, $value in $colors {
-    @include palette-variant($color, $value);
+  @include palette-variant($color, $value);
 }
 
 @each $color, $value in $theme-colors {
-    @include palette-variant($color, $value);
+  @include palette-variant($color, $value);
 }
 
 @each $color, $value in $grays {
-    @include palette-variant($color, $value);
+  @include palette-variant($color, $value);
 }
 
 // This allows "painting by numbers", i.e. picking colors by a shortcode Ordinal.
 @for $i from 1 through length($td-box-colors) {
-    $value: nth($td-box-colors, $i);
-    $name: $i - 1;
-    $text-color: color-contrast($value);
+  $value: nth($td-box-colors, $i);
+  $name: $i - 1;
+  $text-color: color-contrast($value);
 
-    @include palette-variant($name, $value);
-}
\ No newline at end of file
+  @include palette-variant($name, $value);
+}
diff --git a/assets/scss/_content.scss b/assets/scss/_content.scss
index 9a9f3969ef..0d60885077 100644
--- a/assets/scss/_content.scss
+++ b/assets/scss/_content.scss
@@ -3,80 +3,97 @@
 //
 
 .td-content {
-    order: 1;
+  order: 1;
 
-    p, li, td {
-        font-weight: $font-weight-body-text;
-    }
+  p,
+  li,
+  td {
+    font-weight: $font-weight-body-text;
+  }
 
-    > h1 {
-        font-weight: $font-weight-bold;
-        margin-bottom: 1rem;
-    }
+  > h1 {
+    font-weight: $font-weight-bold;
+    margin-bottom: 1rem;
+  }
 
-    > h2 {
-        margin-bottom: 1rem;
-    }
+  > h2 {
+    margin-bottom: 1rem;
+  }
 
-    > h2:not(:first-child) {
-        margin-top: 3rem;
-    }
+  > h2:not(:first-child) {
+    margin-top: 3rem;
+  }
 
-    > h2 + h3 {
-         margin-top: 1rem;
-    }
-
-    > h3, > h4, > h5, > h6 {
-        margin-bottom: 1rem;
-        margin-top: 2rem;
-    }
-
-    img {
-        @extend .img-fluid;
-    }
-
-    table {
-        @extend .table-striped;
-
-        @extend .table-responsive;
-
-        @extend .table;
-    }
-
-    blockquote {
-        padding: 0 0 0 1rem;
-        margin-bottom: $spacer;
-        color: $gray-600;
-        border-left: 6px solid $secondary;
-    }
-
-    ul li, ol li {
-        margin-bottom: .25rem;
-    }
-
-    strong {
-        font-weight: $font-weight-bold;
-    }
-
-    > pre, > .highlight, > .lead, > h1, > h2, > ul, > ol, > p, > blockquote, > dl dd, .footnotes, > .alert {
-        @extend .td-max-width-on-larger-screens;
-    }
-
-    .alert:not(:first-child) {
-        margin-top: 2 * $spacer;
-        margin-bottom: 2 * $spacer;
-    }
-
-    .lead {
-        margin-bottom: 1.5rem;
-    }
+  > h2 + h3 {
+    margin-top: 1rem;
+  }
+
+  > h3,
+  > h4,
+  > h5,
+  > h6 {
+    margin-bottom: 1rem;
+    margin-top: 2rem;
+  }
+
+  img {
+    @extend .img-fluid;
+  }
+
+  table {
+    @extend .table-striped;
+
+    @extend .table-responsive;
+
+    @extend .table;
+  }
+
+  blockquote {
+    padding: 0 0 0 1rem;
+    margin-bottom: $spacer;
+    color: $gray-600;
+    border-left: 6px solid $secondary;
+  }
+
+  ul li,
+  ol li {
+    margin-bottom: 0.25rem;
+  }
+
+  strong {
+    font-weight: $font-weight-bold;
+  }
+
+  > pre,
+  > .highlight,
+  > .lead,
+  > h1,
+  > h2,
+  > ul,
+  > ol,
+  > p,
+  > blockquote,
+  > dl dd,
+  .footnotes,
+  > .alert {
+    @extend .td-max-width-on-larger-screens;
+  }
+
+  .alert:not(:first-child) {
+    margin-top: 2 * $spacer;
+    margin-bottom: 2 * $spacer;
+  }
+
+  .lead {
+    margin-bottom: 1.5rem;
+  }
 }
 
 .td-title {
-    margin-top: 1rem;
-    margin-bottom: .5rem;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
 
-    @include media-breakpoint-up(sm) {
-        font-size: 3rem;
-    }
-}
\ No newline at end of file
+  @include media-breakpoint-up(sm) {
+    font-size: 3rem;
+  }
+}
diff --git a/assets/scss/_drawio.scss b/assets/scss/_drawio.scss
index 0fd6d4bd6d..0bbafe6342 100644
--- a/assets/scss/_drawio.scss
+++ b/assets/scss/_drawio.scss
@@ -1,40 +1,39 @@
 div.drawio {
-    display: inline-block;
-    position: relative;
+  display: inline-block;
+  position: relative;
 
-    button {
-        @extend .btn;
-        @extend .btn-outline-primary;
-        position: absolute;
-        bottom: 5px;
-        right: 5px;
-        padding: 0.4em 0.5em;
-        font-size: 0.8em;
-        display: none;
-    }
+  button {
+    @extend .btn;
+    @extend .btn-outline-primary;
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    padding: 0.4em 0.5em;
+    font-size: 0.8em;
+    display: none;
+  }
 
-    &:hover button {
-        display: inline;
-    }
+  &:hover button {
+    display: inline;
+  }
 }
 
 div.drawioframe {
-    position: fixed;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0px;
-    z-index: 1000;
-    background: #000b;
-    border: 0;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0px;
+  z-index: 1000;
+  background: #000b;
+  border: 0;
 
-    iframe {
-        position: absolute;
-        height: 90%;
-        width: 90%;
-        top: 5%;
-        left: 5%;
-        z-index: 1010;
-    }
+  iframe {
+    position: absolute;
+    height: 90%;
+    width: 90%;
+    top: 5%;
+    left: 5%;
+    z-index: 1010;
+  }
 }
-
diff --git a/assets/scss/_main-container.scss b/assets/scss/_main-container.scss
index 47207733ac..f64592b01b 100644
--- a/assets/scss/_main-container.scss
+++ b/assets/scss/_main-container.scss
@@ -1,32 +1,34 @@
 // The outer page container i.e. common styles for any page.
 .td-outer {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 }
 
 // The outer page container for the default base template.
 .td-default {
-    main {
-        > section:first-of-type {
-            @include media-breakpoint-up(md) {
-                padding-top: 8rem;
-            }
-        }
+  main {
+    > section:first-of-type {
+      @include media-breakpoint-up(md) {
+        padding-top: 8rem;
+      }
+    }
 
-        section {
-            @extend .td-block-padding;
-        }
+    section {
+      @extend .td-block-padding;
     }
+  }
 }
 
 .td-main {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 
 .td-404 main,
 .td-main main {
   padding-top: 1.5rem;
   padding-bottom: 2rem;
-  @include media-breakpoint-up(md) { padding-top: 5.5rem; }
+  @include media-breakpoint-up(md) {
+    padding-top: 5.5rem;
+  }
 }
diff --git a/assets/scss/_pageinfo.scss b/assets/scss/_pageinfo.scss
index 1144db9de9..c855dae791 100644
--- a/assets/scss/_pageinfo.scss
+++ b/assets/scss/_pageinfo.scss
@@ -1,18 +1,16 @@
 .pageinfo {
-    font-weight: $font-weight-medium;
-    background: $gray-100;
-    color: inherit;
-    border-radius: 0;
-    margin: 2rem;
-    padding: 1.5rem;
-    padding-bottom: 0.5rem;
+  font-weight: $font-weight-medium;
+  background: $gray-100;
+  color: inherit;
+  border-radius: 0;
+  margin: 2rem;
+  padding: 1.5rem;
+  padding-bottom: 0.5rem;
 
-    @each $color, $value in $theme-colors {
-        &-#{$color} {
-
-            border-style: solid;
-            border-color: $value;
-        }
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      border-style: solid;
+      border-color: $value;
     }
-   
+  }
 }
diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
index 9951056b75..4be6ee767c 100644
--- a/assets/scss/_search.scss
+++ b/assets/scss/_search.scss
@@ -1,120 +1,117 @@
 // Search
 
 .td-search {
-    background: transparent;
-    position: relative;
-    width: 100%;
-
-    // Search icon
-    &__icon {
-        // Vertically center the content.
-        display: flex;
-        align-items: center;
-        height: 100%;
-
-        // Position this on the left of the input.
-        position: absolute;
-        left: 0.75em;
-
-        // Click-through to the underlying input.
-        pointer-events: none;
-
-        &:before {
-            @extend .fa;
-            content: fa-content($fa-var-search);
-        }
-
-        // Styling adjustments for the navbar
-        @at-root {
-            .td-navbar & {
-                color: $navbar-dark-color;
-            }
-        }
+  background: transparent;
+  position: relative;
+  width: 100%;
+
+  // Search icon
+  &__icon {
+    // Vertically center the content.
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    // Position this on the left of the input.
+    position: absolute;
+    left: 0.75em;
+
+    // Click-through to the underlying input.
+    pointer-events: none;
+
+    &:before {
+      @extend .fa;
+      content: fa-content($fa-var-search);
     }
 
-    // Search input element
-    &__input {
-        width: 100%;
-        text-indent: 1.25em;
-
-        @if $enable-rounded {
-            border-radius: 1rem;
-        }
-
-        &:not(:focus) {
-            background: transparent;
-        }
+    // Styling adjustments for the navbar
+    @at-root {
+      .td-navbar & {
+        color: $navbar-dark-color;
+      }
+    }
+  }
 
-        &.form-control:focus {
-            border-color: tint-color($primary, 95%);
-            box-shadow: 0 0 0 2px tint-color($primary, 40%);
-            color: inherit;
-        }
+  // Search input element
+  &__input {
+    width: 100%;
+    text-indent: 1.25em;
 
-        // Styling adjustments for the navbar
-        @at-root {
-            .td-navbar & {
-                border: none;
-                color: $navbar-dark-color;
+    @if $enable-rounded {
+      border-radius: 1rem;
+    }
 
-                @include placeholder {
-                    color: $navbar-dark-color;
-                }
-            }
-        }
+    &:not(:focus) {
+      background: transparent;
+    }
 
+    &.form-control:focus {
+      border-color: tint-color($primary, 95%);
+      box-shadow: 0 0 0 2px tint-color($primary, 40%);
+      color: inherit;
     }
 
-    // Hide icon on focus
-    &:focus-within {
+    // Styling adjustments for the navbar
+    @at-root {
+      .td-navbar & {
+        border: none;
+        color: $navbar-dark-color;
 
-        .td-search__icon {
-            display: none;
+        @include placeholder {
+          color: $navbar-dark-color;
         }
+      }
+    }
+  }
 
-        .td-search-input {
-            text-indent: 0px;
-        }
+  // Hide icon on focus
+  &:focus-within {
+    .td-search__icon {
+      display: none;
     }
 
-    &:not(:focus-within) {
-        color: $input-placeholder-color;
+    .td-search-input {
+      text-indent: 0px;
     }
+  }
+
+  &:not(:focus-within) {
+    color: $input-placeholder-color;
+  }
 }
 
 // Offline search
 
 .td-search--offline {
+  &:focus-within {
+    // Don't hide the search icon on focus: this gives better UX when user
+    // explores content of search-results popup and focus is lost.
 
-    &:focus-within {
-        // Don't hide the search icon on focus: this gives better UX when user
-        // explores content of search-results popup and focus is lost.
-
-        .td-search__icon {
-            display: flex;
-            color: $input-placeholder-color;
-        }
+    .td-search__icon {
+      display: flex;
+      color: $input-placeholder-color;
     }
+  }
 }
 
 .td-offline-search-results {
-    max-width: 90%;
+  max-width: 90%;
 
-    .card {
-        margin-bottom: $spacer * .5;
+  .card {
+    margin-bottom: $spacer * 0.5;
 
-        .card-header {
-            font-weight: bold;
-        }
+    .card-header {
+      font-weight: bold;
     }
+  }
 
-    &__close-button {
-        // cursor: pointer;
-        float: right;
+  &__close-button {
+    // cursor: pointer;
+    float: right;
 
-        &:after {
-            @extend .fas;
-            content: fa-content($fa-var-times);
-        }
+    &:after {
+      @extend .fas;
+      content: fa-content($fa-var-times);
     }
+  }
 }
diff --git a/assets/scss/_sidebar-toc.scss b/assets/scss/_sidebar-toc.scss
index 5e7e2f1055..249ec25f39 100644
--- a/assets/scss/_sidebar-toc.scss
+++ b/assets/scss/_sidebar-toc.scss
@@ -2,61 +2,60 @@
 // Right side toc
 //
 .td-sidebar-toc {
-    border-left: 1px solid $border-color;
-
-    @supports (position: sticky) {
-        position: sticky;
-        top: 4rem;
-        height: calc(100vh - 4rem);
-        overflow-y: auto;
-    }
-
-    order: 2;
-    padding-top: 0.75rem;
-    padding-bottom: 1.5rem;
-    vertical-align: top;
-
+  border-left: 1px solid $border-color;
+
+  @supports (position: sticky) {
+    position: sticky;
+    top: 4rem;
+    height: calc(100vh - 4rem);
+    overflow-y: auto;
+  }
+
+  order: 2;
+  padding-top: 0.75rem;
+  padding-bottom: 1.5rem;
+  vertical-align: top;
 }
 
 .td-page-meta {
-    a {
-        display: block;
-        font-weight: $font-weight-medium;
-    }
+  a {
+    display: block;
+    font-weight: $font-weight-medium;
+  }
 }
 
 .td-toc {
-
-    a {
-        display: block;
-        font-weight: $font-weight-light;
-        padding-bottom: .25rem;
+  a {
+    display: block;
+    font-weight: $font-weight-light;
+    padding-bottom: 0.25rem;
+  }
+
+  li {
+    list-style: none;
+    display: block;
+  }
+
+  li li {
+    margin-left: 0.5rem;
+  }
+
+  #TableOfContents {
+    // Hugo's ToC is a mouthful, this can be used to style the top level h2 entries.
+    > ul > li > ul > li > a {
     }
 
-    li {
-        list-style: none;
-        display: block;
-    }
-
-    li li {
-        margin-left: 0.5rem;
-    }
-
-    #TableOfContents {
-        // Hugo's ToC is a mouthful, this can be used to style the top level h2 entries.
-        > ul > li > ul > li > a {}
-
-        a {
-            color: $gray-600;
+    a {
+      color: $gray-600;
 
-            &:hover {
-                color: $blue;
-                text-decoration: none;
-            }
-        }
+      &:hover {
+        color: $blue;
+        text-decoration: none;
+      }
     }
+  }
 
-    ul {
-        padding-left: 0;
-    }
+  ul {
+    padding-left: 0;
+  }
 }
diff --git a/assets/scss/_sidebar-tree.scss b/assets/scss/_sidebar-tree.scss
index b01cc3d991..661cc62375 100644
--- a/assets/scss/_sidebar-tree.scss
+++ b/assets/scss/_sidebar-tree.scss
@@ -2,161 +2,163 @@
 // Left side navigation
 //
 .td-sidebar-nav {
-    padding-right: 0.5rem;
-    margin-right: -15px;
-    margin-left: -15px;
-
-    @include media-breakpoint-up(md) {
-        @supports (position: sticky) {
-            max-height: calc(100vh - 10rem);
-            overflow-y: auto;
-        }
+  padding-right: 0.5rem;
+  margin-right: -15px;
+  margin-left: -15px;
+
+  @include media-breakpoint-up(md) {
+    @supports (position: sticky) {
+      max-height: calc(100vh - 10rem);
+      overflow-y: auto;
     }
+  }
 
+  @include media-breakpoint-up(md) {
+    display: block !important;
+  }
 
-    @include media-breakpoint-up(md) {
-        display: block !important;
+  &__section {
+    li {
+      list-style: none;
     }
 
+    ul {
+      padding: 0;
+      margin: 0;
+    }
 
-    &__section {
-        li {
-            list-style: none;
-        }
-
-        ul {
-            padding: 0;
-            margin: 0;
-        }
-
-        @include media-breakpoint-up(md) {
-            & .ul-1 ul {
-                padding-left: 1.5em;
-            }
-        }
-
-
-        padding-left: 0;
+    @include media-breakpoint-up(md) {
+      & .ul-1 ul {
+        padding-left: 1.5em;
+      }
     }
 
-    &__section-title {
-        display: block;
-        font-weight: $font-weight-medium;
+    padding-left: 0;
+  }
 
-        .active {
-            font-weight: $font-weight-bold;
-        }
+  &__section-title {
+    display: block;
+    font-weight: $font-weight-medium;
 
-        a {
-            color: $gray-900;
-        }
+    .active {
+      font-weight: $font-weight-bold;
     }
 
-    .td-sidebar-link {
-        display: block;
-        padding-bottom: 0.375rem;
-
-        &__page {
-            color: $gray-700;
-            font-weight: $font-weight-light;
-        }
+    a {
+      color: $gray-900;
     }
+  }
 
-    a {
-        &:hover {
-            color: $blue;
-            text-decoration: none;
-        }
+  .td-sidebar-link {
+    display: block;
+    padding-bottom: 0.375rem;
 
-        &.active {
-            font-weight: $font-weight-bold;
-        }
+    &__page {
+      color: $gray-700;
+      font-weight: $font-weight-light;
     }
+  }
 
-    .dropdown {
-        a {
-            color: $gray-700;
-        }
-
-        .nav-link {
-             padding: 0 0 1rem;
-        }
+  a {
+    &:hover {
+      color: $blue;
+      text-decoration: none;
     }
 
-    & > .td-sidebar-nav__section {
-        padding-top: .5rem;
-        padding-left: 1.5rem;
+    &.active {
+      font-weight: $font-weight-bold;
     }
+  }
 
-    li i { // Layout of icons
-        padding-right: 0.5em;
-        &:before{
-            display: inline-block;
-            text-align: center;
-            min-width: 1em;
-        }
+  .dropdown {
+    a {
+      color: $gray-700;
     }
 
-    .td-sidebar-link.tree-root{
-        font-weight: $font-weight-bold;
-        color: $td-sidebar-tree-root-color;
-        border-bottom: 1px $td-sidebar-tree-root-color solid;
-        margin-bottom: 1rem;
+    .nav-link {
+      padding: 0 0 1rem;
     }
+  }
+
+  & > .td-sidebar-nav__section {
+    padding-top: 0.5rem;
+    padding-left: 1.5rem;
+  }
+
+  li i {
+    // Layout of icons
+    padding-right: 0.5em;
+    &:before {
+      display: inline-block;
+      text-align: center;
+      min-width: 1em;
+    }
+  }
+
+  .td-sidebar-link.tree-root {
+    font-weight: $font-weight-bold;
+    color: $td-sidebar-tree-root-color;
+    border-bottom: 1px $td-sidebar-tree-root-color solid;
+    margin-bottom: 1rem;
+  }
 }
 
 .td-sidebar {
-    @include media-breakpoint-up(md) {
-        padding-top: 4rem;
-        background-color: $td-sidebar-bg-color;
-        padding-right: 1rem;
-        border-right: 1px solid $td-sidebar-border-color;
-    }
-
+  @include media-breakpoint-up(md) {
+    padding-top: 4rem;
+    background-color: $td-sidebar-bg-color;
+    padding-right: 1rem;
+    border-right: 1px solid $td-sidebar-border-color;
+  }
+
+  padding-bottom: 1rem;
+
+  &__toggle {
+    line-height: 1;
+    color: $gray-900;
+    margin: 1rem;
+  }
+
+  &__search {
+    padding: 1rem 15px;
+    margin-right: -15px;
+    margin-left: -15px;
+  }
 
-    padding-bottom: 1rem;
+  &__inner {
+    order: 0;
 
-    &__toggle {
-        line-height: 1;
-        color: $gray-900;
-        margin: 1rem;
+    @include media-breakpoint-up(md) {
+      @supports (position: sticky) {
+        position: sticky;
+        top: 4rem;
+        z-index: 10;
+        height: calc(100vh - 6rem);
+      }
     }
 
-    &__search {
-        padding: 1rem 15px;
-        margin-right: -15px;
-        margin-left: -15px;
+    @include media-breakpoint-up(xl) {
+      flex: 0 1 320px;
     }
 
-    &__inner {
-        order: 0;
-
-        @include media-breakpoint-up(md) {
-            @supports (position: sticky) {
-                position: sticky;
-                top: 4rem;
-                z-index: 10;
-                height: calc(100vh - 6rem);
-            }
-        }
-
-
-        @include media-breakpoint-up(xl) {
-            flex: 0 1 320px;
-        }
-
-
-        .td-search-box {
-            width: 100%;
-        }
+    .td-search-box {
+      width: 100%;
     }
-
-    #content-desktop {display: block;}
-    #content-mobile {display: none;}
-
-    @include media-breakpoint-down(lg) {
-
-    #content-desktop {display: none;}
-    #content-mobile {display: block;}
+  }
+
+  #content-desktop {
+    display: block;
+  }
+  #content-mobile {
+    display: none;
+  }
+
+  @include media-breakpoint-down(lg) {
+    #content-desktop {
+      display: none;
+    }
+    #content-mobile {
+      display: block;
     }
+  }
 }
diff --git a/assets/scss/_taxonomy.scss b/assets/scss/_taxonomy.scss
index ca6a360c4d..c1ff998f9a 100644
--- a/assets/scss/_taxonomy.scss
+++ b/assets/scss/_taxonomy.scss
@@ -50,14 +50,12 @@
   }
 
   .taxo-text-tags {
-
     li + li::before {
       content: none;
     }
   }
 
   .taxo-fruits {
-
     .taxonomy-count,
     .taxonomy-label {
       display: inherit;
@@ -125,15 +123,15 @@
   margin: 0 0.5em 0.2em 0;
   text-decoration: none;
   -webkit-transition: color 0.2s;
-  -webkit-clip-path: polygon(100% 0,100% 100%,0.8em 100%,0 50%,0.8em 0);
-  clip-path: polygon(100% 0,100% 100%,0.8em 100%,0 50%,0.8em 0);
+  -webkit-clip-path: polygon(100% 0, 100% 100%, 0.8em 100%, 0 50%, 0.8em 0);
+  clip-path: polygon(100% 0, 100% 100%, 0.8em 100%, 0 50%, 0.8em 0);
 
   &:hover {
     background-color: $primary;
     color: $white;
 
-    .taxonomy-count{
-      color: $dark!important;
+    .taxonomy-count {
+      color: $dark !important;
     }
   }
 
@@ -144,7 +142,6 @@
 
 // Example for simple tags layout
 .taxo-text-tags {
-
   .taxonomy-term {
     background: none;
     border-width: 0;
@@ -165,8 +162,8 @@
       background: none;
       color: $link-color;
 
-      .taxonomy-count{
-        color: $dark!important;
+      .taxonomy-count {
+        color: $dark !important;
       }
     }
 
@@ -201,7 +198,6 @@
 
 // Example for icon tags
 .taxo-fruits {
-
   .taxonomy-term[data-taxonomy-term]::before {
     font-style: normal;
     font-variant: normal;
@@ -254,8 +250,8 @@
       background: none;
       color: $link-color;
 
-      .taxonomy-count{
-        color: $dark!important;
+      .taxonomy-count {
+        color: $dark !important;
       }
     }
 
@@ -333,16 +329,16 @@
 
 .article-teaser {
   &.card {
-      padding: 1.0em;
-      margin-bottom: 1.5em;
+    padding: 1em;
+    margin-bottom: 1.5em;
   }
 
   .breadcrumb {
-      margin-bottom: 0em;
-      font-size: 0.85rem;
+    margin-bottom: 0em;
+    font-size: 0.85rem;
   }
 
   .article-meta {
-      margin-bottom: 0em;
+    margin-bottom: 0em;
   }
 }
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index eb5eb61eb3..546c525fee 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -5,18 +5,18 @@ $enable-shadows: true !default;
 
 // Theme colors
 
-$primary: #30638E !default;
-$secondary: #FFA630 !default;
-$success: #3772FF !default;
-$info: #C0E0DE !default;
-$warning: #ED6A5A !default;
-$danger: #ED6A5A !default;
+$primary: #30638e !default;
+$secondary: #ffa630 !default;
+$success: #3772ff !default;
+$info: #c0e0de !default;
+$warning: #ed6a5a !default;
+$danger: #ed6a5a !default;
 $white: #fff !default;
-$light: #D3F3EE !default;
+$light: #d3f3ee !default;
 
-$dark: #403F4C !default;
-$blue: #72A1E5 !default;
-$orange: #BA5A31 !default;
+$dark: #403f4c !default;
+$blue: #72a1e5 !default;
+$orange: #ba5a31 !default;
 $gray-100: #f8f9fa !default;
 $gray-200: #eee !default;
 $gray-300: #dee2e6 !default;
@@ -40,7 +40,8 @@ $td-sidebar-border-color: $border-color !default;
 // Background colors for the sections on home page etc. It is a paint by number system, starting at 0, where the number is taken from the shortcode's ordinal
 // if not provided by the user.
 // These colors are all part of the theme palette, but the mix is fairly random to create variation. This can be overridden by the project if needed.
-$td-box-colors: $dark, $primary, $secondary, $info, $white, $gray-600, $success, $warning, $dark, $danger, $primary, $secondary, $info !default;
+$td-box-colors: $dark, $primary, $secondary, $info, $white, $gray-600, $success,
+  $warning, $dark, $danger, $primary, $secondary, $info !default;
 
 $link-color: adjust-color($blue, $lightness: -15%) !default;
 $link-decoration: none !default;
@@ -56,15 +57,18 @@ $google_font_family: "Open+Sans:300,300i,400,400i,700,700i" !default;
 $web-font-path: "https://fonts.googleapis.com/css?family=#{$google_font_family}&display=swap";
 $font-awesome-font-name: "Font Awesome 6 Free" !default;
 
-$td-fonts-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$td-fonts-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  "Segoe UI Symbol";
 
 @if $td-enable-google-fonts {
-    $td-fonts-serif: prepend($td-fonts-serif, "#{$google_font_name}");
+  $td-fonts-serif: prepend($td-fonts-serif, "#{$google_font_name}");
 }
 
 $font-family-sans-serif: $td-fonts-serif !default;
 
-$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+  "Liberation Mono", "Courier New", monospace !default;
 $font-family-base: $font-family-sans-serif !default;
 $font-size-base: 1rem !default;
 
@@ -108,7 +112,10 @@ $td-block-space-bottom-base: 4 * $spacer !default;
 
 $pagination-color: $gray-600 !default;
 $pagination-border-color: rgba($black, 0.1) !default;
-$pagination-active-border-color: adjust-color($primary, $lightness: -5%) !default;
+$pagination-active-border-color: adjust-color(
+  $primary,
+  $lightness: -5%
+) !default;
 $pagination-disabled-color: $gray-300 !default;
 
 // Navbar
diff --git a/assets/scss/blocks/_blocks.scss b/assets/scss/blocks/_blocks.scss
index 1e374678cf..044c11ad50 100644
--- a/assets/scss/blocks/_blocks.scss
+++ b/assets/scss/blocks/_blocks.scss
@@ -1,7 +1,7 @@
 @import "cover";
 
 .td-bg-arrow {
-    &-wrapper {
-        position: relative;
-    }
-}
\ No newline at end of file
+  &-wrapper {
+    position: relative;
+  }
+}
diff --git a/assets/scss/blocks/_cover.scss b/assets/scss/blocks/_cover.scss
index 4645c5278f..703ef43e2b 100644
--- a/assets/scss/blocks/_cover.scss
+++ b/assets/scss/blocks/_cover.scss
@@ -3,22 +3,22 @@
 @include td-box-height-modifiers(".td-cover-block");
 
 .td-cover-logo {
-    margin-right: 0.5em;
+  margin-right: 0.5em;
 }
 
 .td-cover-block {
-    position: relative;
-    padding-top: 5rem;
-    padding-bottom: 5rem;
-    background: {
-        repeat: no-repeat;
-        position: 50% 0;
-        size: cover;
-    };
+  position: relative;
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+  background: {
+    repeat: no-repeat;
+    position: 50% 0;
+    size: cover;
+  }
 
-    & > .byline {
-        position: absolute;
-        bottom: 2px;
-        right: 4px;
-    }
-}
\ No newline at end of file
+  & > .byline {
+    position: absolute;
+    bottom: 2px;
+    right: 4px;
+  }
+}
diff --git a/assets/scss/rtl/_main.scss b/assets/scss/rtl/_main.scss
index 693f660d01..6ea131e314 100644
--- a/assets/scss/rtl/_main.scss
+++ b/assets/scss/rtl/_main.scss
@@ -5,47 +5,51 @@ body:lang(dv),
 body:lang(he),
 body:lang(ku),
 body:lang(ur) {
+  @import "spacing";
 
-    @import 'spacing';
+  direction: rtl;
+  text-align: right;
 
-    direction: rtl;
+  .dropdown-menu {
     text-align: right;
+  }
 
-    .dropdown-menu {
-        text-align: right;
-    }
+  .text-right {
+    text-align: left !important;
+  }
 
-    .text-right {
-        text-align: left !important;
-    }
+  pre {
+    text-align: left;
+    direction: ltr;
+  }
 
-    pre {
-        text-align: left;
-        direction: ltr;
-    }
-
-    .td-rss-button {
-        left: 1rem !important;
-        right: auto !important;
-    }
+  .td-rss-button {
+    left: 1rem !important;
+    right: auto !important;
+  }
 }
 
 body:lang(fa) {
-    @import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v27.0.1/dist/font-face.css');
-    font-family: 'Vazir', "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  @import url("https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v27.0.1/dist/font-face.css");
+  font-family: "Vazir", "Open Sans", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 body:lang(he) {
-    @if $td-enable-google-fonts {
-        @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');
-    }
-    font-family: 'Rubik', "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  @if $td-enable-google-fonts {
+    @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap");
+  }
+  font-family: "Rubik", "Open Sans", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 body:lang(ar) {
-    @if $td-enable-google-fonts {
-        @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
-    }
-    font-family: 'Tajawal', "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  @if $td-enable-google-fonts {
+    @import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap");
+  }
+  font-family: "Tajawal", "Open Sans", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
 }
-
diff --git a/assets/scss/rtl/_spacing.scss b/assets/scss/rtl/_spacing.scss
index 486c747246..6ead6b0dd9 100644
--- a/assets/scss/rtl/_spacing.scss
+++ b/assets/scss/rtl/_spacing.scss
@@ -1,91 +1,87 @@
 @each $breakpoint in map-keys($grid-breakpoints) {
-    @include media-breakpoint-up($breakpoint) {
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-        @each $prop,
-        $abbrev in (margin: m, padding: p) {
-
-            @each $size,
-            $length in $spacers {
-                .#{$abbrev}#{$infix}-#{$size} {
-                    #{$prop}: $length !important;
-                }
-
-                .#{$abbrev}t#{$infix}-#{$size},
-                .#{$abbrev}y#{$infix}-#{$size} {
-                    #{$prop}-top: $length !important;
-                }
-
-                .#{$abbrev}r#{$infix}-#{$size},
-                .#{$abbrev}x#{$infix}-#{$size} {
-                    #{$prop}-inline-end: $length !important;
-                }
-
-                .#{$abbrev}b#{$infix}-#{$size},
-                .#{$abbrev}y#{$infix}-#{$size} {
-                    #{$prop}-bottom: $length !important;
-                }
-
-                .#{$abbrev}l#{$infix}-#{$size},
-                .#{$abbrev}x#{$infix}-#{$size} {
-                    #{$prop}-inline-start: $length !important;
-                }
-            }
+    @each $prop, $abbrev in (margin: m, padding: p) {
+      @each $size, $length in $spacers {
+        .#{$abbrev}#{$infix}-#{$size} {
+          #{$prop}: $length !important;
         }
 
-        // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
-        @each $size,
-        $length in $spacers {
-            @if $size !=0 {
-                .m#{$infix}-n#{$size} {
-                    margin: -$length !important;
-                }
-
-                .mt#{$infix}-n#{$size},
-                .my#{$infix}-n#{$size} {
-                    margin-top: -$length !important;
-                }
+        .#{$abbrev}t#{$infix}-#{$size},
+        .#{$abbrev}y#{$infix}-#{$size} {
+          #{$prop}-top: $length !important;
+        }
 
-                .mr#{$infix}-n#{$size},
-                .mx#{$infix}-n#{$size} {
-                    margin-right: -$length !important;
-                }
+        .#{$abbrev}r#{$infix}-#{$size},
+        .#{$abbrev}x#{$infix}-#{$size} {
+          #{$prop}-inline-end: $length !important;
+        }
 
-                .mb#{$infix}-n#{$size},
-                .my#{$infix}-n#{$size} {
-                    margin-bottom: -$length !important;
-                }
+        .#{$abbrev}b#{$infix}-#{$size},
+        .#{$abbrev}y#{$infix}-#{$size} {
+          #{$prop}-bottom: $length !important;
+        }
 
-                .ml#{$infix}-n#{$size},
-                .mx#{$infix}-n#{$size} {
-                    margin-left: -$length !important;
-                }
-            }
+        .#{$abbrev}l#{$infix}-#{$size},
+        .#{$abbrev}x#{$infix}-#{$size} {
+          #{$prop}-inline-start: $length !important;
         }
+      }
+    }
 
-        // Some special margin utils
-        .m#{$infix}-auto {
-            margin: auto !important;
+    // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
+    @each $size, $length in $spacers {
+      @if $size !=0 {
+        .m#{$infix}-n#{$size} {
+          margin: -$length !important;
         }
 
-        .mt#{$infix}-auto,
-        .my#{$infix}-auto {
-            margin-top: auto !important;
+        .mt#{$infix}-n#{$size},
+        .my#{$infix}-n#{$size} {
+          margin-top: -$length !important;
         }
 
-        .mr#{$infix}-auto,
-        .mx#{$infix}-auto {
-            margin-right: auto !important;
+        .mr#{$infix}-n#{$size},
+        .mx#{$infix}-n#{$size} {
+          margin-right: -$length !important;
         }
 
-        .mb#{$infix}-auto,
-        .my#{$infix}-auto {
-            margin-bottom: auto !important;
+        .mb#{$infix}-n#{$size},
+        .my#{$infix}-n#{$size} {
+          margin-bottom: -$length !important;
         }
 
-        .ml#{$infix}-auto,
-        .mx#{$infix}-auto {
-            margin-left: auto !important;
+        .ml#{$infix}-n#{$size},
+        .mx#{$infix}-n#{$size} {
+          margin-left: -$length !important;
         }
+      }
+    }
+
+    // Some special margin utils
+    .m#{$infix}-auto {
+      margin: auto !important;
+    }
+
+    .mt#{$infix}-auto,
+    .my#{$infix}-auto {
+      margin-top: auto !important;
+    }
+
+    .mr#{$infix}-auto,
+    .mx#{$infix}-auto {
+      margin-right: auto !important;
+    }
+
+    .mb#{$infix}-auto,
+    .my#{$infix}-auto {
+      margin-bottom: auto !important;
+    }
+
+    .ml#{$infix}-auto,
+    .mx#{$infix}-auto {
+      margin-left: auto !important;
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/assets/scss/section-index.scss b/assets/scss/section-index.scss
index e00b004532..c34d699768 100644
--- a/assets/scss/section-index.scss
+++ b/assets/scss/section-index.scss
@@ -1,18 +1,17 @@
 .section-index {
+  .entry {
+    padding: 0.75rem;
+  }
 
-    .entry {
-        padding: .75rem;
-    }
-
-    h5 {
-        margin-bottom: 0;
+  h5 {
+    margin-bottom: 0;
 
-        a {
-            font-weight: 700;
-        }
+    a {
+      font-weight: 700;
     }
+  }
 
-    p {
-        margin-top: 0;
-    }
+  p {
+    margin-top: 0;
+  }
 }
diff --git a/assets/scss/shortcodes.scss b/assets/scss/shortcodes.scss
index 5d1f94f62c..517d3e8225 100644
--- a/assets/scss/shortcodes.scss
+++ b/assets/scss/shortcodes.scss
@@ -1,2 +1,2 @@
-@import "shortcodes/tabbed-pane.scss";
-@import "shortcodes/cards-pane.scss";
+@import "shortcodes/tabbed-pane.scss";
+@import "shortcodes/cards-pane.scss";
diff --git a/assets/scss/shortcodes/cards-pane.scss b/assets/scss/shortcodes/cards-pane.scss
index f1a66f7759..bea122b8ab 100644
--- a/assets/scss/shortcodes/cards-pane.scss
+++ b/assets/scss/shortcodes/cards-pane.scss
@@ -22,4 +22,4 @@
       padding: 0 1rem 1rem 1rem;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/assets/scss/support/_mixins.scss b/assets/scss/support/_mixins.scss
index b0d7bdf055..333c6eaff3 100644
--- a/assets/scss/support/_mixins.scss
+++ b/assets/scss/support/_mixins.scss
@@ -1,49 +1,47 @@
 // Some simple mixins.
 
-@mixin bg-gradient-variant($parent, $color,$ignore-warning: false) {
-    #{$parent} {
-        background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
-    }
+@mixin bg-gradient-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+    background: $color
+      linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+  }
 }
 
 @mixin link-variant($parent, $color, $hover-color, $underline: false) {
-    #{$parent} {
-        color: $color;
+  #{$parent} {
+    color: $color;
 
-        &:hover {
-            color: $hover-color;
-        }
+    &:hover {
+      color: $hover-color;
+    }
 
-        @if $underline {
-            text-decoration: underline;
-        }
+    @if $underline {
+      text-decoration: underline;
     }
+  }
 }
 
 @mixin optional-at-root($sel) {
-    @at-root #{if(not &, $sel, selector-append(&, $sel))} {
-        @content;
-    }
+  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
+    @content;
+  }
 }
 
 // placeholder allows styling of the placeholder used in search input etc.
 @mixin placeholder {
-    @include optional-at-root("::-webkit-input-placeholder") {
-        @content;
-    }
-
-
-    @include optional-at-root(":-moz-placeholder") {
-        @content;
-    }
+  @include optional-at-root("::-webkit-input-placeholder") {
+    @content;
+  }
 
+  @include optional-at-root(":-moz-placeholder") {
+    @content;
+  }
 
-    @include optional-at-root("::-moz-placeholder") {
-        @content;
-    }
+  @include optional-at-root("::-moz-placeholder") {
+    @content;
+  }
 
-
-    @include optional-at-root(":-ms-input-placeholder") {
-        @content;
-    }
+  @include optional-at-root(":-ms-input-placeholder") {
+    @content;
+  }
 }
diff --git a/assets/scss/support/_utilities.scss b/assets/scss/support/_utilities.scss
index ce9bc2e267..ce38d671c2 100644
--- a/assets/scss/support/_utilities.scss
+++ b/assets/scss/support/_utilities.scss
@@ -1,82 +1,78 @@
 // Mixins
 
 @mixin optional-at-root($sel) {
-    @at-root #{if(not &, $sel, selector-append(&, $sel))} {
-        @content;
-    }
+  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
+    @content;
+  }
 }
 
 @mixin placeholder {
-    @include optional-at-root("::-webkit-input-placeholder") {
-        @content;
-    }
+  @include optional-at-root("::-webkit-input-placeholder") {
+    @content;
+  }
 
+  @include optional-at-root(":-moz-placeholder") {
+    @content;
+  }
 
-    @include optional-at-root(":-moz-placeholder") {
-        @content;
-    }
+  @include optional-at-root("::-moz-placeholder") {
+    @content;
+  }
 
-
-    @include optional-at-root("::-moz-placeholder") {
-        @content;
-    }
-
-
-    @include optional-at-root(":-ms-input-placeholder") {
-        @content;
-    }
+  @include optional-at-root(":-ms-input-placeholder") {
+    @content;
+  }
 }
 
 // Common util classes.
 
 .td-border-top {
-    border: none;
-    border-top: 1px solid #eee;
+  border: none;
+  border-top: 1px solid #eee;
 }
 
 .td-border-none {
-    border: none;
+  border: none;
 }
 
 .td-block-padding {
-    padding-top: $td-block-space-top-base ;
-    padding-bottom: $td-block-space-bottom-base;
+  padding-top: $td-block-space-top-base;
+  padding-bottom: $td-block-space-bottom-base;
 
-    @include media-breakpoint-up(md) {
-        padding-top: $td-block-space-top-base * 1.25;
-        padding-bottom: $td-block-space-bottom-base * 1.25;
-    }
+  @include media-breakpoint-up(md) {
+    padding-top: $td-block-space-top-base * 1.25;
+    padding-bottom: $td-block-space-bottom-base * 1.25;
+  }
 }
 
 .td-overlay {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &--dark::after {
+    background-color: rgba($dark, 0.3);
+  }
+
+  &--light::after {
+    background-color: rgba($light, 0.3);
+  }
+
+  &__inner {
     position: relative;
-
-    &::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-    }
-
-    &--dark::after {
-        background-color: rgba($dark, 0.3);
-    }
-
-    &--light::after {
-        background-color: rgba($light, 0.3);
-    }
-
-    &__inner {
-        position: relative;
-        z-index: 1;
-    }
+    z-index: 1;
+  }
 }
 
 .td-max-width-on-larger-screens {
-    @include media-breakpoint-up(lg) {
-        max-width: 80%;
-    }
-
-}
\ No newline at end of file
+  @include media-breakpoint-up(lg) {
+    max-width: 80%;
+  }
+}