refactor(deps): upgrade bootstrap from v4.6 to v5.2

- update class name of the spacing, font style, cards and toasts
- update attribute names &  tooltip usage
- remove custom smooth scroll
- syntax colors

_sass/addon/commons.scss

@@ -79,6 +79,8 @@ h5 {
 
 a {
   @extend %link-color;
+
+  text-decoration: none;
 }
 
 img {
@@ -200,13 +202,8 @@ footer {
   a {
     @extend %text-color;
 
-    &:link {
-      @extend %no-decoration;
-    }
-
     &:hover {
       @extend %link-hover;
-      @extend %no-decoration;
     }
   }
 
@@ -657,10 +654,6 @@ i {
   box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
 }
 
-.no-text-decoration {
-  @extend %no-decoration;
-}
-
 /* overwrite bootstrap muted */
 .text-muted {
   color: var(--text-muted-color) !important;
@@ -763,10 +756,6 @@ $btn-mb: 0.5rem;
 
   a {
     @extend %sidebar-links;
-
-    &:hover {
-      @extend %no-decoration;
-    }
   }
 
   #avatar {
@@ -1263,8 +1252,6 @@ $btn-mb: 0.5rem;
   }
 
   &.toast {
-    display: none;
-
     &.show {
       display: block;
       min-width: 20rem;
@@ -1615,7 +1602,7 @@ $btn-mb: 0.5rem;
 
   #search-wrapper {
     margin-right: calc(
-      #{$main-content-max-width} * 0.25 - #{$search-max-width}
+      #{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
     );
   }
 
@@ -1623,6 +1610,8 @@ $btn-mb: 0.5rem;
   #main,
   footer > .container {
     max-width: $main-content-max-width;
+    padding-left: 1.75rem !important;
+    padding-right: 1.75rem !important;
   }
 
   #core-wrapper,

_sass/addon/module.scss

@@ -122,10 +122,6 @@
   -webkit-box-orient: vertical;
 }
 
-%no-decoration {
-  text-decoration: none;
-}
-
 /* ---------- scss mixin --------- */
 
 @mixin mt-mb($value) {

_sass/addon/syntax.scss

@@ -117,10 +117,6 @@ code {
   blockquote & {
     color: inherit;
   }
-
-  .highlight > & {
-    color: transparent;
-  }
 }
 
 td.rouge-code {
@@ -176,7 +172,7 @@ div {
   align-items: center;
   height: $code-header-height;
   margin-left: 1rem;
-  margin-right: 0.25rem;
+  margin-right: 0.5rem;
 
   /* the label block */
   span {

_sass/colors/dark-typography.scss

@@ -115,10 +115,6 @@
   }
 
   .categories {
-    &.card {
-      border-color: var(--main-border-color);
-    }
-
     .card-header {
       background-color: var(--card-header-bg);
     }

_sass/colors/light-typography.scss

@@ -98,6 +98,7 @@
   }
 
   /* Categories */
+  --categories-border: rgba(0, 0, 0, 0.125);
   --categories-hover-bg: var(--btn-border-color);
   --categories-icon-hover-color: darkslategray;
 

_sass/layout/categories.scss

@@ -8,6 +8,7 @@
 
 .categories {
   margin-bottom: 2rem;
+  border-color: var(--categories-border);
 
   &.card,
   .list-group {
@@ -15,8 +16,16 @@
   }
 
   .card-header {
-    padding-right: 12px;
-    border-radius: $base-radius $base-radius 0 0;
+    $radius: calc($base-radius - 1px);
+
+    padding: 0.75rem;
+    border-radius: $radius;
+    border-bottom: 0;
+
+    &.hide-border-bottom {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   }
 
   i {
@@ -34,6 +43,10 @@
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }
+
+    &:last-child {
+      border-bottom: 0;
+    }
   }
 } /* .categories */
 

_sass/layout/home.scss

@@ -43,7 +43,6 @@
 
       .card-title {
         @extend %text-clip;
-        @include mt-mb(0.5rem);
 
         font-size: 1.25rem;
       }
@@ -53,9 +52,6 @@
       }
 
       .card-text.post-content {
-        margin-top: 0;
-        margin-bottom: 0.5rem;
-
         @extend %muted;
 
         p {
@@ -160,11 +156,6 @@
         width: 60%;
         padding: 1.75rem 1.75rem 1.25rem 1.75rem;
 
-        .card-title {
-          margin-top: 0;
-          margin-bottom: 0.5rem;
-        }
-
         .card-text {
           display: inherit !important;
         }
@@ -183,11 +174,6 @@
 
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
-  #post-list .card {
-    margin-left: -0.5rem;
-    margin-right: -0.5rem;
-  }
-
   .pagination {
     justify-content: space-evenly;
 

_sass/layout/post.scss

@@ -347,13 +347,10 @@ h1 + .post-meta {
     -webkit-box-orient: vertical;
   }
 
-  a:hover {
-    @extend %no-decoration;
-  }
-
   .card {
     h3 {
       @extend %text-color;
+      @extend %text-clip;
     }
   }
 }