_sass/addon/commons.scss in jekyll-theme-chirpy-5.6.1 vs _sass/addon/commons.scss in jekyll-theme-chirpy-6.0.0

@@ -32,68 +32,50 @@
   background: var(--main-bg);
   padding: env(safe-area-inset-top) env(safe-area-inset-right)
     env(safe-area-inset-bottom) env(safe-area-inset-left);
   color: var(--text-color);
   -webkit-font-smoothing: antialiased;
-  font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
-  line-height: 1.75;
+  font-family: $font-family-base;
 }
 
 /* --- Typography --- */
 
-h1 {
-  @extend %heading;
+@for $i from 1 through 5 {
+  h#{$i} {
+    @extend %heading;
 
-  font-size: 1.9rem;
-}
+    @if $i > 1 {
+      @extend %section;
+      @extend %anchor;
+    }
 
-h2 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
+    @if $i < 5 {
+      $factor: 0.18rem;
 
-  font-size: 1.5rem;
-}
+      @if $i == 1 {
+        $factor: 0.23rem;
+      }
 
-h3 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
-
-  font-size: 1.2rem;
+      font-size: 1rem + (5 - $i) * $factor;
+    } @else {
+      font-size: 1rem;
+    }
+  }
 }
 
-h4 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
-
-  font-size: 1.15rem;
-}
-
-h5 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
-
-  font-size: 1.1rem;
-}
-
 a {
   @extend %link-color;
+
+  text-decoration: none;
 }
 
 img {
   max-width: 100%;
   height: auto;
+  transition: all 0.35s ease-in-out;
 
   &[data-src] {
-    &.lazyloaded {
-      -webkit-animation: fade-in 0.4s ease-in;
-      animation: fade-in 0.4s ease-in;
-    }
-
     &[data-lqip='true'] {
       &.lazyload,
       &.lazyloading {
         -webkit-filter: blur(20px);
         filter: blur(20px);
@@ -103,10 +85,15 @@
     &:not([data-lqip='true']) {
       &.lazyload,
       &.lazyloading {
         background: var(--img-bg);
       }
+
+      &.lazyloaded {
+        -webkit-animation: fade-in 0.35s ease-in;
+        animation: fade-in 0.35s ease-in;
+      }
     }
 
     &.shadow {
       -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
       filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
@@ -192,31 +179,25 @@
   div.d-flex {
     height: $footer-height;
     line-height: 1.2rem;
     padding-bottom: 1rem;
     border-top: 1px solid var(--main-border-color);
-
-    > div {
-      width: 350px;
-    }
+    flex-wrap: wrap;
   }
 
   a {
     @extend %text-color;
 
-    &:link {
-      @include no-text-decoration;
-    }
-
     &:hover {
       @extend %link-hover;
-      @include no-text-decoration;
     }
   }
 
-  .footer-right {
-    text-align: right;
+  p {
+    width: 100%;
+    text-align: center;
+    margin-bottom: 0;
   }
 }
 
 /* fontawesome icons */
 i {
@@ -258,30 +239,21 @@
   .panel-heading {
     @include label(inherit);
   }
 
   .post-tag {
-    display: inline-block;
-    line-height: 1rem;
+    line-height: 1.05rem;
     font-size: 0.85rem;
-    background: none;
     border: 1px solid var(--btn-border-color);
     border-radius: 0.8rem;
     padding: 0.3rem 0.5rem;
     margin: 0 0.35rem 0.5rem 0;
 
     &:hover {
-      background-color: #2a408e;
-      border-color: #2a408e;
-      color: #ffffff;
-      transition: none;
+      transition: all 0.3s ease-in;
     }
   }
-
-  [data-topbar-visible='true'] & > div {
-    top: 6rem;
-  }
 }
 
 #access-lastmod {
   li {
     height: 1.8rem;
@@ -398,13 +370,39 @@
   } /* table */
 }
 
 /* --- post --- */
 
+.post-preview {
+  @extend %rounded;
+
+  border: 0;
+  background: var(--card-bg);
+  box-shadow: var(--card-shadow);
+
+  &::before {
+    @extend %rounded;
+
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: var(--card-hovor-bg);
+    opacity: 0;
+    transition: opacity 0.35s ease-in-out;
+  }
+
+  &:hover {
+    &::before {
+      opacity: 0.3;
+    }
+  }
+}
+
 .post {
   h1 {
-    margin-top: 3rem;
+    margin-top: 2rem;
     margin-bottom: 1.5rem;
   }
 
   p {
     > img[data-src],
@@ -420,11 +418,10 @@
   font-size: 80%;
 }
 
 .post-meta {
   font-size: 0.85rem;
-  word-spacing: 1px;
 
   a {
     &:not([class]):hover {
       @extend %link-hover;
     }
@@ -511,47 +508,41 @@
   } /* ul */
 
   dl > dd {
     margin-left: 1rem;
   }
+
+  ::marker {
+    color: var(--text-muted-color);
+  }
 } /* .post-content */
 
 .tag:hover {
   @extend %tag-hover;
 }
 
 .post-tag {
   display: inline-block;
   min-width: 2rem;
   text-align: center;
-  background: var(--tag-bg);
   border-radius: 0.3rem;
   padding: 0 0.4rem;
   color: inherit;
   line-height: 1.3rem;
 
   &:not(:last-child) {
     margin-right: 0.2rem;
   }
-
-  &:hover {
-    @extend %tag-hover;
-
-    border-bottom: none;
-    text-decoration: none;
-    color: #d2603a;
-  }
 }
 
 .rounded-10 {
   border-radius: 10px !important;
 }
 
 .img-link {
   color: transparent;
   display: inline-flex;
-  overflow: hidden;
 }
 
 .shimmer {
   overflow: hidden;
   position: relative;
@@ -567,26 +558,22 @@
     animation: shimmer 1s infinite;
   }
 
   @-webkit-keyframes shimmer {
     0% {
-      -webkit-transform: translateX(-100%);
       transform: translateX(-100%);
     }
     100% {
-      -webkit-transform: translateX(100%);
       transform: translateX(100%);
     }
   }
 
   @keyframes shimmer {
     0% {
-      -webkit-transform: translateX(-100%);
       transform: translateX(-100%);
     }
     100% {
-      -webkit-transform: translateX(100%);
       transform: translateX(100%);
     }
   }
 }
 
@@ -646,21 +633,29 @@
 
 .btn-box-shadow {
   box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
 }
 
-.no-text-decoration {
-  @include no-text-decoration;
+/* overwrite bootstrap muted */
+.text-muted {
+  color: var(--text-muted-color) !important;
 }
 
-/* Overrided BS4 Tooltip */
+/* Overwrite bootstrap tooltip */
 .tooltip-inner {
   font-size: 0.7rem;
   max-width: 220px;
   text-align: left;
 }
 
+/* Overwrite bootstrap outline button */
+.btn.btn-outline-primary {
+  &:not(.disabled):hover {
+    border-color: #007bff !important;
+  }
+}
+
 .disabled {
   color: rgb(206, 196, 196);
   pointer-events: auto;
   cursor: not-allowed;
 }
@@ -687,16 +682,21 @@
 }
 
 /* --- Overriding --- */
 
 /* magnific-popup */
+
 figure .mfp-title {
   text-align: center;
   padding-right: 0;
   margin-top: 0.5rem;
 }
 
+.mfp-img {
+  transition: none;
+}
+
 /* mermaid */
 .mermaid {
   text-align: center;
 }
 
@@ -707,10 +707,13 @@
 }
 
 /* --- sidebar layout --- */
 
 $sidebar-display: 'sidebar-display';
+$btn-gap: 0.8rem; // for the bottom icons
+$btn-border-width: 3px;
+$btn-mb: 0.5rem;
 
 #sidebar {
   @include pl-pr(0);
 
   position: fixed;
@@ -729,219 +732,193 @@
 
   /* Hide scrollbar for IE, Edge and Firefox */
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 
-  a {
-    @extend %sidebar-links;
-
+  %sidebar-link-hover {
     &:hover {
-      @include no-text-decoration;
-
-      color: var(--sidebar-active-color) !important;
+      color: var(--sidebar-active-color);
     }
   }
 
+  a {
+    @extend %sidebar-links;
+  }
+
   #avatar {
-    > a {
-      display: block;
-      width: 6rem;
-      height: 6rem;
-      border-radius: 50%;
-      border: 2px solid rgba(222, 222, 222, 0.7);
-      overflow: hidden;
-      -webkit-transform: translateZ(0);
-      transform: translateZ(0); /* fixed the zoom in Safari */
-      transition: border-color 0.35s ease-in-out;
+    display: block;
+    width: 7rem;
+    height: 7rem;
+    overflow: hidden;
+    box-shadow: var(--avatar-border-color) 0 0 0 2px;
+    transform: translateZ(0); /* fixed the zoom in Safari */
 
-      &:hover {
-        border-color: white;
-      }
-    }
-
     img {
-      width: 100%;
-      height: 100%;
-      transition: -webkit-transform 0.5s;
       transition: transform 0.5s;
-      transition: transform 0.5s, -webkit-transform 0.5s;
 
       &:hover {
-        -webkit-transform: scale(1.2);
         transform: scale(1.2);
       }
     }
-  } /* #avatar */
+  }
 
+  .profile-wrapper {
+    @include mt-mb(2.5rem);
+    @extend %clickable-transition;
+
+    padding-left: 2.5rem;
+    padding-right: 1.25rem;
+    width: 100%;
+  }
+
   .site-title {
-    margin-top: 0.55rem;
+    font-weight: 900;
+    font-size: 1.75rem;
+    line-height: 1.2;
+    letter-spacing: 0.25px;
+    color: rgba(134, 133, 133, 0.99);
+    margin-top: 1.25rem;
+    margin-bottom: 0.5rem;
 
     a {
       @extend %clickable-transition;
-
-      font-weight: 900;
-      font-size: 1.5rem;
-      letter-spacing: 0.5px;
-      color: rgba(134, 133, 133, 0.99);
+      @extend %sidebar-link-hover;
     }
   }
 
   .site-subtitle {
     font-size: 95%;
     color: var(--sidebar-muted-color);
-    line-height: 1.25rem;
+    margin-top: 0.25rem;
     word-spacing: 1px;
-    margin: 0.2rem 1.5rem 0.5rem 1.5rem;
-    min-height: 3rem; /* avoid vertical shifting in multi-line words */
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }
 
-  .nav-link {
-    border-radius: 0;
-    font-size: 0.95rem;
-    font-weight: 600;
-    letter-spacing: 1px;
-    display: table-cell;
-    vertical-align: middle;
-  }
-
-  .nav-item {
-    text-align: center;
-    display: table;
-    height: $tab-height;
-
-    &.active {
-      .nav-link {
-        color: var(--sidebar-active-color);
-      }
-    }
-
-    &:not(.active) > a {
-      @extend %clickable-transition;
-    }
-  }
-
   ul {
-    height: $tab-height * $tab-count;
     margin-bottom: 2rem;
-    padding-left: 0;
 
-    li {
+    li.nav-item {
+      opacity: 0.9;
       width: 100%;
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
 
-      &:last-child {
-        a {
-          position: relative;
-          left: calc($cursor-width / 2);
-          width: 100%;
+      a.nav-link {
+        @include pt-pb(0.6rem);
+
+        display: flex;
+        align-items: center;
+        border-radius: 0.75rem;
+        font-weight: 600;
+
+        &:hover {
+          background-color: var(--sidebar-hover-bg);
         }
 
-        /* the cursor */
-        &::after {
-          display: table;
-          visibility: hidden;
-          content: '';
-          position: relative;
-          right: 1px;
-          width: $cursor-width;
-          height: $tab-cursor-height;
-          border-radius: 1px;
-          background-color: var(--nav-cursor-color);
-          pointer-events: none;
+        i {
+          font-size: 95%;
+          opacity: 0.8;
+          margin-right: 1.5rem;
         }
+
+        span {
+          font-size: 90%;
+          letter-spacing: 0.2px;
+        }
       }
-    } /* li */
 
-    @mixin fix-cursor($top) {
-      top: $top;
-      visibility: visible;
-    }
+      &.active {
+        .nav-link {
+          color: var(--sidebar-active-color);
+          background-color: var(--sidebar-hover-bg);
 
-    @for $i from 1 through $tab-count {
-      $offset: $tab-count - $i;
-      $top: (-$offset * $tab-height) +
-        (($tab-height - $tab-cursor-height) * 0.5);
-
-      @if $i < $tab-count {
-        > li.active:nth-child(#{$i}),
-        > li.nav-item:nth-child(#{$i}):hover {
-          ~ li:last-child::after {
-            @include fix-cursor($top);
+          span {
+            opacity: 1;
           }
         }
-      } @else {
-        > li.active:nth-child(#{$i}):last-child::after,
-        > li.nav-item:nth-child(#{$i}):last-child:hover::after {
-          @include fix-cursor($top);
-        }
       }
-    } /* @for */
-  } /* ul */
 
+      &:not(:first-child) {
+        margin-top: 0.25rem;
+      }
+    }
+  }
+
   .sidebar-bottom {
-    margin-bottom: 2.1rem;
+    @include pl-pr(2rem);
 
-    @include ml-mr(auto);
-    @include pl-pr(1rem);
+    margin-bottom: 1.5rem;
 
-    %icon {
-      width: 2.4rem;
+    %button {
+      width: 1.75rem;
+      height: 1.75rem;
+      margin-bottom: $btn-mb; // multi line gap
+      border-radius: 50%;
+      color: var(--sidebar-btn-color);
+      background-color: var(--sidebar-btn-bg);
       text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        background-color: var(--sidebar-hover-bg);
+      }
     }
 
     a {
-      @extend %icon;
+      @extend %button;
+      @extend %sidebar-link-hover;
       @extend %clickable-transition;
+
+      &:not(:last-child) {
+        margin-right: $btn-gap;
+      }
     }
 
     i {
-      font-size: 1.2rem;
       line-height: 1.75rem;
     }
 
     .mode-toggle {
       padding: 0;
       border: 0;
-      margin-bottom: 1px;
-      background-color: transparent;
 
-      @extend %icon;
+      @extend %button;
       @extend %sidebar-links;
-
-      > i {
-        @extend %clickable-transition;
-      }
-
-      &:hover > i {
-        color: var(--sidebar-active-color);
-      }
+      @extend %sidebar-link-hover;
     }
 
     .icon-border {
       @extend %no-cursor;
+      @include ml-mr(calc(($btn-gap - $btn-border-width) / 2));
 
       background-color: var(--sidebar-muted-color);
       content: '';
-      width: 3px;
-      height: 3px;
+      width: $btn-border-width;
+      height: $btn-border-width;
       border-radius: 50%;
+      margin-bottom: $btn-mb;
     }
   } /* .sidebar-bottom */
 } /* #sidebar */
 
 @media (hover: hover) {
   #sidebar ul > li:last-child::after {
     transition: top 0.5s ease;
   }
-}
 
-.profile-wrapper {
-  margin-top: 2rem;
-  width: 100%;
+  .nav-link {
+    transition: background-color 0.3s ease-in-out;
+  }
+
+  .post-preview {
+    transition: background-color 0.35s ease-in-out;
+  }
 }
 
 #search-result-wrapper {
   display: none;
   height: 100%;
@@ -955,22 +932,11 @@
 
 /* --- top-bar --- */
 
 #topbar-wrapper {
   height: $topbar-height;
-  position: fixed;
-  top: 0;
-  left: $sidebar-width; /* same as sidebar width */
-  right: 0;
-  transition: top 0.2s ease-in-out;
-  z-index: 50;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-  background-color: var(--topbar-wrapper-bg);
-
-  [data-topbar-visible='false'] & {
-    top: -$topbar-height; /* same as topbar height. */
-  }
+  background-color: var(--topbar-bg);
 }
 
 #topbar {
   /* icons */
   i {
@@ -1005,11 +971,11 @@
 #search-wrapper {
   display: flex;
   width: 100%;
   border-radius: 1rem;
   border: 1px solid var(--search-wrapper-border-color);
-  background: var(--search-wrapper-bg);
+  background: var(--main-bg);
   padding: 0 0.5rem;
 
   i {
     z-index: 2;
     font-size: 0.9rem;
@@ -1034,11 +1000,10 @@
   color: var(--text-color);
   height: auto;
 
   &:focus {
     box-shadow: none;
-    background: center;
 
     &.form-control {
       &::-moz-placeholder {
         @include input-placeholder;
       }
@@ -1137,10 +1102,12 @@
   word-break: keep-all;
   white-space: nowrap;
 }
 
 #core-wrapper {
+  line-height: 1.75;
+
   .categories,
   #tags,
   #archives {
     a:not(:hover) {
       @extend %no-bottom-border;
@@ -1168,59 +1135,54 @@
 /* --- main wrapper --- */
 
 #main-wrapper {
   background-color: var(--main-bg);
   position: relative;
-  min-height: calc(100vh - #{$footer-height});
+  min-height: calc(100vh - $footer-height-mobile);
 
   @include pl-pr(0);
 }
 
-#core-wrapper,
-#panel-wrapper {
-  margin-top: $topbar-height; /* same as the height of topbar */
-}
-
 #topbar-wrapper.row,
 #main > .row,
 #search-result-wrapper > .row {
   @include ml-mr(0);
 }
 
 /* --- button back-to-top --- */
 
 #back-to-top {
-  $size: 2.7em;
+  $size: 3rem;
 
   display: none;
   z-index: 1;
   cursor: pointer;
   position: fixed;
+  right: 1rem;
+  bottom: 2rem;
   background: var(--button-bg);
   color: var(--btn-backtotop-color);
   padding: 0;
   width: $size;
   height: $size;
   border-radius: 50%;
   border: 1px solid var(--btn-backtotop-border-color);
-  transition: -webkit-transform 0.2s ease-out;
   transition: transform 0.2s ease-out;
-  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
   -webkit-transition: transform 0.2s ease-out;
 
+  &:hover {
+    transform: translate3d(0, -5px, 0);
+    -webkit-transform: translate3d(0, -5px, 0);
+  }
+
   i {
     line-height: $size;
     position: relative;
     bottom: 2px;
   }
 }
 
-#back-to-top:hover {
-  transform: translate3d(0, -5px, 0);
-  -webkit-transform: translate3d(0, -5px, 0);
-}
-
 #notification {
   @-webkit-keyframes popup {
     from {
       opacity: 0;
       bottom: 0;
@@ -1249,12 +1211,10 @@
       min-width: 4rem;
     }
   }
 
   &.toast {
-    display: none;
-
     &.show {
       display: block;
       min-width: 20rem;
       border-radius: 0.5rem;
       -webkit-backdrop-filter: blur(10px);
@@ -1262,76 +1222,50 @@
       background-color: rgba(255, 255, 255, 0.5);
       color: #1b1b1eba;
       position: fixed;
       left: 50%;
       bottom: 20%;
-      -webkit-transform: translateX(-50%);
       transform: translateX(-50%);
       -webkit-animation: popup 0.8s;
       animation: popup 0.8s;
     }
   }
 }
 
 /*
   Responsive Design:
 
- {sidebar, content, panel} >= 1120px screen width
+ {sidebar, content, panel} >= 1200px screen width
  {sidebar, content} >= 850px screen width
  {content} <= 849px screen width
 
 */
 
 @media all and (max-width: 576px) {
-  footer {
-    height: $footer-height-mobile;
-
-    div.d-flex {
-      padding: 1.5rem 0;
-      line-height: 1.65;
-      flex-wrap: wrap;
-      justify-content: space-around !important;
-    }
-
-    .footer-left,
-    .footer-right {
-      text-align: center;
-    }
-  }
-
   #main-wrapper {
     min-height: calc(100vh - #{$footer-height-mobile});
   }
 
   #core-wrapper {
     min-height: calc(
       100vh - #{$topbar-height} - #{$footer-height-mobile}
     ) !important;
 
-    h1 {
-      margin-top: 2.2rem;
-      font-size: 1.75rem;
-    }
-
     .post-content {
       > blockquote[class^='prompt-'] {
         @include ml-mr(-1.25rem);
 
         border-radius: 0;
         max-width: none;
       }
     }
   }
 
-  #avatar > a {
+  #avatar {
     width: 5rem;
     height: 5rem;
   }
-
-  .site-subtitle {
-    @include ml-mr(1.8rem);
-  }
 }
 
 @media all and (max-width: 768px) {
   %full-width {
     max-width: 100%;
@@ -1364,41 +1298,44 @@
     overflow-x: hidden;
   }
 
   footer {
     @include slide;
+
+    height: $footer-height-mobile;
+
+    div.d-flex {
+      padding: 1.5rem 0;
+      line-height: 1.65;
+      flex-wrap: wrap;
+    }
   }
 
   [#{$sidebar-display}] {
     #sidebar {
-      -webkit-transform: translateX(0);
       transform: translateX(0);
     }
 
-    #topbar-wrapper,
     #main-wrapper,
     footer {
-      -webkit-transform: translateX(#{$sidebar-width});
       transform: translateX(#{$sidebar-width});
     }
+
+    #back-to-top {
+      visibility: hidden;
+    }
   }
 
   #sidebar {
     @include slide;
 
     transform: translateX(-#{$sidebar-width}); /* hide */
     -webkit-transform: translateX(-#{$sidebar-width});
-
-    .cursor {
-      transition: none;
-    }
   }
 
   #main-wrapper {
     @include slide;
-
-    padding-top: $topbar-height;
   }
 
   #topbar,
   #main,
   footer > .container {
@@ -1441,21 +1378,15 @@
 
   h1.dynamic-title {
     display: none;
 
     ~ .post-content {
-      margin-top: 3rem;
+      margin-top: 2.5rem;
     }
   }
 } /* max-width: 849px */
 
-@media all and (max-width: 849px) and (orientation: portrait) {
-  [data-topbar-visible='false'] #topbar-wrapper {
-    top: 0;
-  }
-}
-
 /* Phone & Pad */
 @media all and (min-width: 577px) and (max-width: 1199px) {
   footer .d-flex > div {
     width: 312px;
   }
@@ -1471,27 +1402,52 @@
   #main-wrapper,
   footer {
     margin-left: $sidebar-width;
   }
 
-  .profile-wrapper {
-    margin-top: 3rem;
+  #main-wrapper {
+    min-height: calc(100vh - $footer-height);
   }
 
+  footer {
+    p {
+      width: auto;
+      &:last-child {
+        &::before {
+          content: '-';
+          margin: 0 0.75rem;
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+
+  #sidebar {
+    .profile-wrapper {
+      margin-top: 3rem;
+    }
+  }
+
   #search-hints {
     display: none;
   }
 
   #search-wrapper {
     max-width: $search-max-width;
   }
 
   #search-result-wrapper {
-    margin-top: 3rem;
     max-width: $main-content-max-width;
+    justify-content: start !important;
   }
 
+  .post {
+    h1 {
+      margin-top: 3rem;
+    }
+  }
+
   div.post-content .table-wrapper > table {
     min-width: 70%;
   }
 
   /* button 'back-to-Top' position */
@@ -1513,54 +1469,14 @@
   }
 }
 
 /* Compact icons in sidebar & panel hidden */
 @media all and (min-width: 850px) and (max-width: 1199px) {
-  #sidebar {
-    width: $sidebar-width-small;
-
-    .site-subtitle {
-      margin-left: 1rem;
-      margin-right: 1rem;
-    }
-
-    .sidebar-bottom {
-      a,
-      span {
-        width: 2rem;
-      }
-
-      .icon-border {
-        left: -3px;
-      }
-    }
-  }
-
-  #topbar-wrapper {
-    left: $sidebar-width-small;
-  }
-
   #search-results > div {
     max-width: 700px;
   }
 
-  .site-title {
-    font-size: 1.3rem;
-    margin-left: 0 !important;
-  }
-
-  .site-subtitle {
-    @include ml-mr(1rem);
-
-    font-size: 90%;
-  }
-
-  #main-wrapper,
-  footer {
-    margin-left: $sidebar-width-small;
-  }
-
   #breadcrumb {
     width: 65%;
     overflow: hidden;
     text-overflow: ellipsis;
     word-break: keep-all;
@@ -1627,10 +1543,12 @@
     right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem);
   }
 }
 
 @media all and (min-width: 1650px) {
+  $icon-gap: 1rem;
+
   #main-wrapper,
   footer {
     margin-left: $sidebar-width-large;
   }
 
@@ -1638,18 +1556,19 @@
     left: $sidebar-width-large;
   }
 
   #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
     );
   }
 
-  #topbar,
   #main,
   footer > .container {
     max-width: $main-content-max-width;
+    padding-left: 1.75rem !important;
+    padding-right: 1.75rem !important;
   }
 
   #core-wrapper,
   #tail-wrapper {
     padding-right: 4.5rem !important;
@@ -1662,117 +1581,33 @@
   }
 
   #sidebar {
     width: $sidebar-width-large;
 
+    $icon-gap: 1rem; // for the bottom icons
+
     .profile-wrapper {
-      margin-top: 4rem;
-      margin-bottom: 1rem;
+      margin-top: 3.5rem;
+      margin-bottom: 2.5rem;
+      padding-left: 3.5rem;
+    }
 
-      &.text-center {
-        text-align: left !important;
-      }
-
-      %profile-ml {
-        margin-left: 4.5rem;
-      }
-
-      #avatar {
-        @extend %profile-ml;
-
-        > a {
-          width: 6.2rem;
-          height: 6.2rem;
-
-          &.mx-auto {
-            margin-left: 0 !important;
-          }
-        }
-      }
-
-      .site-title {
-        @extend %profile-ml;
-
-        margin-top: 0.4rem;
-
-        a {
-          font-size: 1.7rem;
-          letter-spacing: 1px;
-        }
-      }
-
-      .site-subtitle {
-        @extend %profile-ml;
-
-        word-spacing: 0;
-        margin-top: 0;
-      }
-    } /* .profile-wrapper (min-width: 1650px) */
-
     ul {
-      padding-left: 2.5rem;
-
-      > li:last-child {
-        > a {
-          position: static;
-        }
+      li.nav-item {
+        @include pl-pr(2.75rem);
       }
-
-      .nav-item {
-        text-align: left;
-
-        .nav-link {
-          > span {
-            letter-spacing: 2px;
-          }
-
-          > i {
-            &.unloaded {
-              display: inline-block !important;
-            }
-          }
-        }
-      }
     }
 
     .sidebar-bottom {
-      padding-left: 3.5rem;
-      width: 100%;
+      padding-left: 2.75rem;
+      margin-bottom: 1.75rem;
 
-      $icon-block-size: 2rem;
-
-      &.justify-content-center {
-        justify-content: flex-start !important;
+      a:not(:last-child) {
+        margin-right: $icon-gap;
       }
 
-      > span,
-      > button.mode-toggle,
-      > a {
-        @include ml-mr(0.15rem);
-
-        height: $icon-block-size;
-        margin-bottom: 0.5rem; /* wrap line */
-      }
-
-      i {
-        background-color: var(--sidebar-btn-bg);
-        font-size: 1rem;
-        width: $icon-block-size;
-        height: $icon-block-size;
-        border-radius: 50%;
-        position: relative;
-
-        &::before {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-        }
-      }
-
       .icon-border {
-        top: 0.9rem;
+        @include ml-mr(calc(($icon-gap - $btn-border-width) / 2));
       }
-    } /* .sidebar-bottom */
-  } /* #sidebar */
+    }
+  }
 } /* min-width: 1650px */