jekyll-theme-chirpy 5.0.2 → 6.2.2

data/_sass/addon/commons.scss

@@ -1,109 +1,159 @@
 /*
   The common styles
 */
-@import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap');
 
-@mixin mode-toggle($dark-mode: false) {
-  @if $dark-mode {
-    @include dark-scheme;
-  } @else {
-    @include light-scheme;
-  }
-}
-
-html:not([mode]),
-html[mode=light] {
-  @include mode-toggle();
-}
-
-html[mode=dark] {
-  @include mode-toggle(true);
-}
+html {
+  @media (prefers-color-scheme: light) {
+    &:not([data-mode]),
+    &[data-mode='light'] {
+      @include light-scheme;
+    }
 
-@media (prefers-color-scheme: dark) {
-  html:not([mode]),
-  html[mode=dark] {
-    @include mode-toggle(true);
+    &[data-mode='dark'] {
+      @include dark-scheme;
+    }
   }
 
-  html[mode=light] {
-    @include mode-toggle();
+  @media (prefers-color-scheme: dark) {
+    &:not([data-mode]),
+    &[data-mode='dark'] {
+      @include dark-scheme;
+    }
+
+    &[data-mode='light'] {
+      @include light-scheme;
+    }
   }
-}
 
-:root {
   font-size: 16px;
 }
 
 body {
-  line-height: 1.75rem;
-  background: var(--body-bg);
+  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;
+  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;
+    }
+
+    @if $i < 5 {
+      $factor: 0.18rem;
 
-h2 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor-relative;
+      @if $i == 1 {
+        $factor: 0.23rem;
+      }
 
-  font-size: 1.5rem;
+      font-size: 1rem + (5 - $i) * $factor;
+    } @else {
+      font-size: 1rem;
+    }
+  }
 }
 
-h3 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
+a {
+  @extend %link-color;
 
-  font-size: 1.2rem;
+  text-decoration: none;
 }
 
-h4 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
+img {
+  max-width: 100%;
+  height: auto;
+  transition: all 0.35s ease-in-out;
+
+  &[data-src] {
+    &[data-lqip='true'] {
+      &.lazyload,
+      &.lazyloading {
+        -webkit-filter: blur(20px);
+        filter: blur(20px);
+      }
+    }
 
-  font-size: 1.15rem;
-}
+    &:not([data-lqip='true']) {
+      &.lazyload,
+      &.lazyloading {
+        background: var(--img-bg);
+      }
 
-h5 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
+      &.lazyloaded {
+        -webkit-animation: fade-in 0.35s ease-in;
+        animation: fade-in 0.35s ease-in;
+      }
+    }
 
-  font-size: 1.1rem;
-}
+    &.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));
+      box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
+    }
 
-ol,
-ul {
-  ol,
-  ul {
-    margin-bottom: 1rem;
+    @extend %img-caption;
   }
-}
 
-a {
-  @extend %link-color;
-}
+  @-webkit-keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
 
-img {
-  max-width: 100%;
-  height: auto;
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
 }
 
 blockquote {
   border-left: 5px solid var(--blockquote-border-color);
   padding-left: 1rem;
   color: var(--blockquote-text-color);
+
+  &[class^='prompt-'] {
+    border-left: 0;
+    position: relative;
+    padding: 1rem 1rem 1rem 3rem;
+    color: var(--prompt-text-color);
+
+    @extend %rounded;
+
+    &::before {
+      text-align: center;
+      width: 3rem;
+      position: absolute;
+      left: 0.25rem;
+      margin-top: 0.4rem;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    > p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  @include prompt('tip', '\f0eb', 'regular');
+  @include prompt('info', '\f06a');
+  @include prompt('warning', '\f06a');
+  @include prompt('danger', '\f071');
 }
 
 kbd {
@@ -123,92 +173,50 @@ kbd {
 }
 
 footer {
-  position: absolute;
-  bottom: 0;
-  padding: 0 1rem;
-  height: $footer-height;
   font-size: 0.8rem;
+  background-color: var(--main-bg);
+  height: $footer-height;
+  border-top: 1px solid var(--main-border-color);
 
-  > div.d-flex {
-    line-height: 1.2rem;
-    width: 95%;
-    max-width: 1045px;
-    border-top: 1px solid var(--main-border-color);
-    margin-bottom: 1rem;
-
-    > div {
-      width: 350px;
-    }
-  }
+  @extend %text-color;
 
   a {
-    @extend %text-color;
-
-    &:link {
-      @include no-text-decoration;
-    }
+    @extend %text-highlight;
 
     &:hover {
       @extend %link-hover;
-
-      @include no-text-decoration;
     }
   }
 
-  .footer-right {
-    text-align: right;
+  p {
+    line-height: 1.75;
+    text-align: center;
+    margin-bottom: 0;
   }
 }
 
-i { // fontawesome icons
+/* fontawesome icons */
+i {
   &.far,
   &.fas {
     @extend %no-cursor;
   }
 }
 
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-img[data-src] {
-  margin: 0.5rem 0;
-
-  &[data-loaded=true] {
-    animation: fade-in linear 0.5s;
-  }
-
-  &.left {
-    float: left;
-    margin: 0.75rem 1rem 1rem 0;
-  }
-
-  &.right {
-    float: right;
-    margin: 0.75rem 0 1rem 1rem;
-  }
-
-  &.shadow {
-    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
-  }
-}
-
 /* --- Panels --- */
 
 .access {
   top: 2rem;
   transition: top 0.2s ease-in-out;
-  margin-right: 1.5rem;
   margin-top: 3rem;
   margin-bottom: 4rem;
 
   &:only-child {
-    position: -webkit-sticky; /* Safari */
+    position: -webkit-sticky;
     position: sticky;
   }
 
-  > div {
+  > section {
     padding-left: 1rem;
     border-left: 1px solid var(--main-border-color);
 
@@ -217,52 +225,34 @@ img[data-src] {
     }
   }
 
-  .post-content {
+  .content {
     font-size: 0.9rem;
   }
-
 }
 
 #panel-wrapper {
-  // the headings
+  /* the headings */
   .panel-heading {
+    font-family: inherit;
+    line-height: inherit;
+
     @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: #fff;
-      transition: none;
+      transition: all 0.3s ease-in;
     }
   }
-
-  &.topbar-down > div {
-    top: 6rem;
-  }
 }
 
 #access-lastmod {
-  li {
-    height: 1.8rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    list-style: none;
-  }
-
   a {
     &:hover {
       @extend %link-hover;
@@ -272,7 +262,6 @@ img[data-src] {
 
     color: inherit;
   }
-
 }
 
 .footnotes > ol {
@@ -289,15 +278,6 @@ img[data-src] {
       margin-top: 0;
       margin-bottom: 0;
     }
-
-    // [scroll-focus] added by `smooth-scroll.js`
-    &:target:not([scroll-focus]),
-    &[scroll-focus=true] > p {
-      background-color: var(--footnote-target-bg);
-      width: fit-content;
-      -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
-      transition: background-color 1.5s ease-in-out;
-    }
   }
 }
 
@@ -307,15 +287,8 @@ img[data-src] {
     @include pl-pr(2px);
 
     border-bottom-style: none !important;
-    -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
     transition: background-color 1.5s ease-in-out;
   }
-
-  // [scroll-focus] added by `smooth-scroll.js`
-  @at-root sup:target:not([scroll-focus]),
-  sup[scroll-focus=true] > a#{&} {
-    background-color: var(--footnote-target-bg);
-  }
 }
 
 .reversefootnote {
@@ -331,7 +304,7 @@ img[data-src] {
 
 /* --- Begin of Markdown table style --- */
 
-// it will be created by Liquid
+/* it will be created by Liquid */
 .table-wrapper {
   overflow-x: auto;
   margin-bottom: 1.5rem;
@@ -365,55 +338,70 @@ img[data-src] {
           @extend %table-cell;
         }
       }
-    } // tbody
-  }// table
+    } /* tbody */
+  } /* table */
 }
 
 /* --- post --- */
 
-.post {
-  h1 {
-    margin-top: 3rem;
-    margin-bottom: 1.5rem;
+.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;
   }
 
-  a {
-    &.img-link {
-      @extend %no-cursor;
+  &:hover {
+    &::before {
+      opacity: 0.3;
     }
+  }
+}
 
-    // created by `_includes/img-extra.html`
-    &.popup {
-      cursor: zoom-in;
+main {
+  line-height: 1.75;
+  min-height: calc(100vh - $topbar-height - $footer-height);
+
+  h1 {
+    margin-top: 2rem;
+    margin-bottom: 1.5rem;
+  }
 
-      > img[data-src]:not(.normal):not(.left):not(.right) {
+  p {
+    > img[data-src],
+    > a.popup {
+      &:not(.normal):not(.left):not(.right) {
         @include align-center;
       }
     }
+  }
 
-    &:hover {
-      code {
-        @extend %link-hover;
-      }
+  .categories,
+  #tags,
+  #archives {
+    a:not(:hover) {
+      @extend %no-bottom-border;
     }
-  } // a
-
-}
-
-.pageviews .fa-spinner {
-  font-size: 80%;
+  }
 }
 
 .post-meta {
   font-size: 0.85rem;
-  word-spacing: 1px;
 
   a {
-    &:not(:last-child) {
-      margin-right: 2px;
-    }
-
-    &:hover {
+    &:not([class]):hover {
       @extend %link-hover;
     }
   }
@@ -423,14 +411,20 @@ img[data-src] {
   }
 }
 
-.post-content {
+.content {
   font-size: 1.08rem;
-  line-height: 1.8;
   margin-top: 2rem;
   overflow-wrap: break-word;
-  word-wrap: break-word;
 
   a {
+    &.popup {
+      @extend %no-cursor;
+      @extend %img-caption;
+      @include mt-mb(0.5rem);
+
+      cursor: zoom-in;
+    }
+
     &:not(.img-link) {
       @extend %link-underline;
 
@@ -438,26 +432,41 @@ img[data-src] {
         @extend %link-hover;
       }
     }
+  }
 
-    &.img-link + em {
-      display: block;
-      text-align: center;
-      font-style: normal;
-      font-size: 80%;
-      padding: 0;
-      color: #6d6c6c;
-    }
+  ol,
+  ul {
+    &:not([class]),
+    &.task-list {
+      -webkit-padding-start: 1.75rem;
+      padding-inline-start: 1.75rem;
+
+      li {
+        margin: 0.25rem 0;
+        padding-left: 0.25rem;
+      }
 
+      ol,
+      ul {
+        -webkit-padding-start: 1.25rem;
+        padding-inline-start: 1.25rem;
+        margin: 0.5rem 0;
+      }
+    }
   }
 
-  ul {
-    // attribute 'hide-bullet' was added by liquid
-    .task-list-item[hide-bullet] {
+  ul.task-list {
+    -webkit-padding-start: 1.25rem;
+    padding-inline-start: 1.25rem;
+
+    li {
       list-style-type: none;
+      padding-left: 0;
 
-      > i { // checkbox icon
-        margin: 0 0.4rem 0.2rem -1.4rem;
-        vertical-align: middle;
+      /* checkbox icon */
+      > i {
+        width: 2rem;
+        margin-left: -1.25rem;
         color: var(--checkbox-color);
 
         &.checked {
@@ -465,40 +474,26 @@ img[data-src] {
         }
       }
 
+      ul {
+        -webkit-padding-start: 1.75rem;
+        padding-inline-start: 1.75rem;
+      }
     }
 
-    input[type=checkbox] {
+    input[type='checkbox'] {
       margin: 0 0.5rem 0.2rem -1.3rem;
       vertical-align: middle;
     }
-
-  } // ul
-
-  > ol,
-  > ul {
-    padding-left: 2rem;
-
-    li {
-      ol,
-      ul { // sub list
-        padding-left: 2rem;
-        margin-top: 0.3rem;
-      }
-    }
-
-  }
-
-  > ol {
-    li {
-      padding-left: 0.25em;
-    }
-  }
+  } /* ul */
 
   dl > dd {
     margin-left: 1rem;
   }
 
-} // .post-content
+  ::marker {
+    color: var(--text-muted-color);
+  }
+} /* .content */
 
 .tag:hover {
   @extend %tag-hover;
@@ -508,22 +503,73 @@ img[data-src] {
   display: inline-block;
   min-width: 2rem;
   text-align: center;
-  background: var(--tag-bg);
-  border-radius: 0.3rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--btn-border-color);
   padding: 0 0.4rem;
-  color: inherit;
+  color: var(--text-muted-color);
   line-height: 1.3rem;
 
   &:not(:last-child) {
     margin-right: 0.2rem;
   }
+}
 
-  &:hover {
-    @extend %tag-hover;
+.rounded-10 {
+  border-radius: 10px !important;
+}
 
-    border-bottom: none;
-    text-decoration: none;
-    color: #d2603a;
+.img-link {
+  color: transparent;
+  display: inline-flex;
+}
+
+.shimmer {
+  overflow: hidden;
+  position: relative;
+  background: var(--img-bg);
+
+  &::before {
+    content: '';
+    position: absolute;
+    background: var(--shimmer-bg);
+    height: 100%;
+    width: 100%;
+    -webkit-animation: shimmer 1s infinite;
+    animation: shimmer 1s infinite;
+  }
+
+  @-webkit-keyframes shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}
+
+.embed-video {
+  width: 100%;
+  height: 100%;
+  margin-bottom: 1rem;
+
+  @extend %rounded;
+
+  &.youtube {
+    aspect-ratio: 16 / 9;
+  }
+
+  &.twitch {
+    aspect-ratio: 310 / 189;
   }
 }
 
@@ -562,28 +608,32 @@ img[data-src] {
 }
 
 .flex-grow-1 {
-  -ms-flex-positive: 1 !important;
   flex-grow: 1 !important;
 }
 
 .btn-box-shadow {
-  box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
-}
-
-.topbar-up {
-  top: -3rem !important; /* same as topbar height. */
+  box-shadow: var(--card-shadow);
 }
 
-.no-text-decoration {
-  @include no-text-decoration;
+/* overwrite bootstrap muted */
+.text-muted {
+  color: var(--text-muted-color) !important;
 }
 
-.tooltip-inner { /* 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;
@@ -601,23 +651,47 @@ img[data-src] {
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
 
+.left {
+  float: left;
+  margin: 0.75rem 1rem 1rem 0 !important;
+}
+
+.right {
+  float: right;
+  margin: 0.75rem 0 1rem 1rem !important;
+}
+
 /* --- Overriding --- */
 
-// magnific-popup
+/* magnific-popup */
+
 figure .mfp-title {
   text-align: center;
   padding-right: 0;
   margin-top: 0.5rem;
 }
 
-// mermaid
+.mfp-img {
+  transition: none;
+}
+
+/* mermaid */
 .mermaid {
   text-align: center;
 }
 
+/* MathJax */
+mjx-container {
+  overflow-y: hidden;
+  min-width: auto !important;
+}
+
 /* --- sidebar layout --- */
 
-$sidebar-display: "sidebar-display";
+$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);
@@ -630,6 +704,7 @@ $sidebar-display: "sidebar-display";
   width: $sidebar-width;
   z-index: 99;
   background: var(--sidebar-bg);
+  border-right: 1px solid var(--sidebar-border-color);
 
   /* Hide scrollbar for Chrome, Safari and Opera */
   &::-webkit-scrollbar {
@@ -637,229 +712,204 @@ $sidebar-display: "sidebar-display";
   }
 
   /* Hide scrollbar for IE, Edge and Firefox */
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-
-  a {
-    @extend %sidebar-links;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 
+  %sidebar-link-hover {
     &:hover {
-      @include no-text-decoration;
-
-      color: var(--sidebar-active-color) !important;
+      color: var(--sidebar-active-color);
     }
   }
 
-  #avatar {
-    > a {
-      display: block;
-      width: 6rem;
-      height: 6rem;
-      border-radius: 50%;
-      border: 2px solid rgba(222, 222, 222, 0.7);
-      overflow: hidden;
-      transform: translateZ(0); // fixed the zoom in Safari
-      -webkit-transition: border-color 0.35s ease-in-out;
-      -moz-transition: border-color 0.35s ease-in-out;
-      transition: border-color 0.35s ease-in-out;
+  a {
+    @extend %sidebar-links;
+  }
 
-      &:hover {
-        border-color: white;
-      }
-    }
+  #avatar {
+    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 */
 
     img {
-      width: 100%;
-      height: 100%;
-      -webkit-transition: transform 0.5s;
-      -moz-transition: transform 0.5s;
       transition: transform 0.5s;
 
       &:hover {
-        -ms-transform: scale(1.2);
-        -moz-transform: scale(1.2);
-        -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 {
+    font-family: inherit;
+    font-weight: 900;
+    font-size: 1.75rem;
+    line-height: 1.2;
+    letter-spacing: 0.25px;
+    margin-top: 1.25rem;
+    margin-bottom: 0.5rem;
+
     a {
       @extend %clickable-transition;
+      @extend %sidebar-link-hover;
 
-      font-weight: 900;
-      font-size: 1.5rem;
-      letter-spacing: 0.5px;
-      color: rgba(134, 133, 133, 99%);
+      color: var(--site-title-color);
     }
   }
 
   .site-subtitle {
     font-size: 95%;
-    color: var(--sidebar-muted-color);
-    line-height: 1.2rem;
+    color: var(--site-subtitle-color);
+    margin-top: 0.25rem;
     word-spacing: 1px;
-    margin: 0.5rem 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;
+
+      a.nav-link {
+        @include pt-pb(0.6rem);
 
-      &:last-child {
-        a {
-          position: relative;
-          left: $cursor-width / 2;
-          width: 100%;
+        display: flex;
+        align-items: center;
+        border-radius: 0.75rem;
+        font-weight: 600;
+
+        &:hover {
+          background-color: var(--sidebar-hover-bg);
         }
 
-        &::after { // the cursor
-          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;
         }
-      }
-    } // li
 
-    @mixin fix-cursor($top) {
-      top: $top;
-      visibility: visible;
-    }
+        span {
+          font-size: 90%;
+          letter-spacing: 0.2px;
+        }
+      }
 
-    @for $i from 1 through $tab-count {
-      $offset: $tab-count - $i;
-      $top: -$offset * $tab-height + ($tab-height - $tab-cursor-height) / 2;
+      &.active {
+        .nav-link {
+          color: var(--sidebar-active-color);
+          background-color: var(--sidebar-hover-bg);
 
-      @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 ml-mr(auto);
-    @include pl-pr(1rem);
+    padding-left: 2rem;
+    padding-right: 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;
+      box-shadow: var(--sidebar-border-color) 0 0 0 1px;
+
+      &: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;
+      background-color: var(--sidebar-btn-color);
+      content: '';
+      width: $btn-border-width;
+      height: $btn-border-width;
       border-radius: 50%;
+      margin-bottom: $btn-mb;
     }
-
-  } // .sidebar-bottom
-
-} // #sidebar
+  } /* .sidebar-bottom */
+} /* #sidebar */
 
 @media (hover: hover) {
   #sidebar ul > li:last-child::after {
-    -webkit-transition: top 0.5s ease;
-    -moz-transition: top 0.5s ease;
-    -o-transition: top 0.5s ease;
     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%;
+  width: 100%;
   overflow: auto;
 
-  .post-content {
+  .content {
     margin-top: 2rem;
   }
 }
@@ -868,24 +918,17 @@ $sidebar-display: "sidebar-display";
 
 #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);
+  background-color: var(--topbar-bg);
 }
 
 #topbar {
-  i { // icons
-    color: #999;
+  button i {
+    color: #999999;
   }
 
   #breadcrumb {
     font-size: 1rem;
-    color: gray;
+    color: var(--text-muted-color);
     padding-left: 0.5rem;
 
     a:hover {
@@ -895,25 +938,60 @@ $sidebar-display: "sidebar-display";
     span {
       &:not(:last-child) {
         &::after {
-          content: "›";
+          content: '›';
           padding: 0 0.3rem;
         }
       }
     }
   }
-} // #topbar
+} /* #topbar */
 
-#sidebar-trigger,
-#search-trigger {
-  display: none;
+::-webkit-input-placeholder {
+  @include placeholder;
+}
+
+::-moz-placeholder {
+  @include placeholder;
+}
+
+:-ms-input-placeholder {
+  @include placeholder;
+}
+
+::-ms-input-placeholder {
+  @include placeholder;
+}
+
+::placeholder {
+  @include placeholder;
+}
+
+:focus::-webkit-input-placeholder {
+  @include placeholder-focus;
+}
+
+:focus::-moz-placeholder {
+  @include placeholder-focus;
 }
 
-#search-wrapper {
+:focus:-ms-input-placeholder {
+  @include placeholder-focus;
+}
+
+:focus::-ms-input-placeholder {
+  @include placeholder-focus;
+}
+
+:focus::placeholder {
+  @include placeholder-focus;
+}
+
+search {
   display: flex;
-  width: 85%;
+  width: 100%;
   border-radius: 1rem;
-  border: 1px solid var(--search-wrapper-border-color);
-  background: var(--search-wrapper-bg);
+  border: 1px solid var(--search-border-color);
+  background: var(--main-bg);
   padding: 0 0.5rem;
 
   i {
@@ -921,18 +999,18 @@ $sidebar-display: "sidebar-display";
     font-size: 0.9rem;
     color: var(--search-icon-color);
   }
+}
 
-  .fa-times-circle { /* button 'clean up' */
-    @extend %cursor-pointer;
-
-    visibility: hidden;
-  }
+#sidebar-trigger,
+#search-trigger {
+  display: none;
 }
 
-#search-cancel { /* 'Cancel' link */
+/* 'Cancel' link */
+#search-cancel {
   color: var(--link-color);
-  margin-left: 1rem;
   display: none;
+  white-space: nowrap;
 
   @extend %cursor-pointer;
 }
@@ -943,17 +1021,10 @@ $sidebar-display: "sidebar-display";
   border-radius: 0;
   padding: 0.18rem 0.3rem;
   color: var(--text-color);
+  height: auto;
 
   &:focus {
     box-shadow: none;
-    background: center;
-
-    &.form-control {
-      &::-webkit-input-placeholder { @include input-placeholder; }
-      &::-moz-placeholder { @include input-placeholder; }
-      &:-ms-input-placeholder { @include input-placeholder; }
-      &::placeholder { @include input-placeholder; }
-    }
   }
 }
 
@@ -974,7 +1045,7 @@ $sidebar-display: "sidebar-display";
     margin: 0 1.25rem 1rem 0;
 
     &::before {
-      content: "#";
+      content: '#';
       color: var(--text-muted-color);
       padding-right: 0.2rem;
     }
@@ -984,7 +1055,7 @@ $sidebar-display: "sidebar-display";
 }
 
 #search-results {
-  padding-bottom: 6rem;
+  padding-bottom: 3rem;
 
   a {
     &:hover {
@@ -999,14 +1070,15 @@ $sidebar-display: "sidebar-display";
     line-height: 2.5rem;
   }
 
-  > div {
+  > article {
     width: 100%;
 
     &:not(:last-child) {
       margin-bottom: 1rem;
     }
 
-    i { // icons
+    /* icons */
+    i {
       color: #818182;
       margin-right: 0.15rem;
       font-size: 80%;
@@ -1020,7 +1092,7 @@ $sidebar-display: "sidebar-display";
       -webkit-box-orient: vertical;
     }
   }
-} // #search-results
+} /* #search-results */
 
 #topbar-title {
   display: none;
@@ -1036,25 +1108,10 @@ $sidebar-display: "sidebar-display";
   white-space: nowrap;
 }
 
-#core-wrapper {
-  min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
-
-  .categories,
-  #tags,
-  #archives {
-    a:not(:hover) {
-      @extend %no-bottom-border;
-    }
-  }
-}
-
 #mask {
   display: none;
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0 0 0 0;
   height: 100%;
   width: 100%;
   z-index: 1;
@@ -1067,36 +1124,13 @@ $sidebar-display: "sidebar-display";
 /* --- main wrapper --- */
 
 #main-wrapper {
-  background-color: var(--main-wrapper-bg);
   position: relative;
-  min-height: 100vh;
-  padding-bottom: $footer-height;
 
   @include pl-pr(0);
 }
 
-#main {
-  .row:first-child {
-    > div {
-      &:nth-child(1),
-      &:nth-child(2) {
-        margin-top: $topbar-height; /* same as the height of topbar */
-      }
-
-      &:first-child {
-        /* 3rem for topbar, 6rem for footer */
-        min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height});
-      }
-    }
-  }
-
-  div.row:first-of-type:last-of-type { // alone
-    margin-bottom: 4rem;
-  }
-}
-
 #topbar-wrapper.row,
-#main > .row,
+#main-wrapper > .container > .row,
 #search-result-wrapper > .row {
   @include ml-mr(0);
 }
@@ -1104,112 +1138,147 @@ $sidebar-display: "sidebar-display";
 /* --- button back-to-top --- */
 
 #back-to-top {
-  $size: 2.7em;
-
   display: none;
   z-index: 1;
   cursor: pointer;
   position: fixed;
+  right: 1rem;
+  bottom: calc($footer-height-large - $back2top-size / 2);
   background: var(--button-bg);
   color: var(--btn-backtotop-color);
   padding: 0;
-  width: $size;
-  height: $size;
+  width: $back2top-size;
+  height: $back2top-size;
   border-radius: 50%;
   border: 1px solid var(--btn-backtotop-border-color);
   transition: 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;
+    line-height: $back2top-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;
+    }
+  }
+
+  @keyframes popup {
+    from {
+      opacity: 0;
+      bottom: 0;
+    }
+  }
+
+  .toast-header {
+    background: none;
+    border-bottom: none;
+    color: inherit;
+  }
+
+  .toast-body {
+    font-family: Lato, sans-serif;
+    line-height: 1.25rem;
+
+    button {
+      font-size: 90%;
+      min-width: 4rem;
+    }
+  }
+
+  &.toast {
+    &.show {
+      display: block;
+      min-width: 20rem;
+      border-radius: 0.5rem;
+      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(10px);
+      background-color: rgba(255, 255, 255, 0.5);
+      color: #1b1b1eba;
+      position: fixed;
+      left: 50%;
+      bottom: 20%;
+      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) {
+  main {
+    .content {
+      > blockquote[class^='prompt-'] {
+        @include ml-mr(-1rem);
 
-  $footer-height: $footer-height-mobile; // overwrite
-
-  #main > div.row:first-child > div:first-child {
-    min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
-  }
-
-  #core-wrapper {
-    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
-
-    h1 {
-      margin-top: 2.2rem;
-      font-size: 1.75rem;
+        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%;
   }
 
-  #main-wrapper {
-    padding-bottom: $footer-height;
+  #topbar {
+    @extend %full-width;
   }
 
-  footer {
-    height: $footer-height;
-
-    > div.d-flex {
-      width: 100%;
-      padding: 1.5rem 0;
-      margin-bottom: 0.3rem;
-      flex-wrap: wrap;
-      -ms-flex-pack: distribute !important;
-      justify-content: space-around !important;
-    }
-
-    .footer-left,
-    .footer-right {
-      text-align: center;
-    }
+  #main-wrapper > .container {
+    @extend %full-width;
+    @include pl-pr(0);
   }
-
 }
 
 /* hide sidebar and panel */
 @media all and (max-width: 849px) {
-  %slide {
-    -webkit-transition: transform 0.4s ease;
-    transition: transform 0.4s ease;
+  @mixin slide($append: null) {
+    $basic: transform 0.4s ease;
+
+    @if $append {
+      transition: $basic, $append;
+    } @else {
+      transition: $basic;
+    }
   }
 
-  html,
-  body {
-    overflow-x: hidden;
+  main {
+    min-height: calc(100vh - $topbar-height - $footer-height-large);
   }
 
-  .footnotes ol > li {
-    padding-top: 3.5rem;
-    margin-top: -3.2rem;
+  footer {
+    @include slide;
 
-    &:first-child {
-      margin-top: -3.5rem;
-    }
+    height: $footer-height-large;
+    padding: 1.5rem 0;
   }
 
   [#{$sidebar-display}] {
@@ -1217,30 +1286,29 @@ $sidebar-display: "sidebar-display";
       transform: translateX(0);
     }
 
-    #topbar-wrapper,
     #main-wrapper {
       transform: translateX(#{$sidebar-width});
     }
 
+    #back-to-top {
+      visibility: hidden;
+    }
   }
 
   #sidebar {
-    @extend %slide;
+    @include slide;
 
-    transform: translateX(-#{$sidebar-width}); // hide
+    transform: translateX(-#{$sidebar-width}); /* hide */
     -webkit-transform: translateX(-#{$sidebar-width});
-
-    .cursor {
-      -webkit-transition: none;
-      -moz-transition: none;
-      transition: none;
-    }
   }
 
   #main-wrapper {
-    @extend %slide;
+    @include slide;
+  }
 
-    padding-top: $topbar-height;
+  #topbar,
+  #main-wrapper > .container {
+    max-width: 100%;
   }
 
   #search-result-wrapper {
@@ -1248,22 +1316,18 @@ $sidebar-display: "sidebar-display";
   }
 
   #breadcrumb,
-  #search-wrapper {
+  search {
     display: none;
   }
 
   #topbar-wrapper {
-    @extend %slide;
+    @include slide(top 0.2s ease);
 
     left: 0;
   }
 
-  .topbar-up {
-    top: 0 !important;
-  }
-
-  #main > div.row:first-child > div:nth-child(1),
-  #main > div.row:first-child > div:nth-child(2) {
+  main,
+  #panel-wrapper {
     margin-top: 0;
   }
 
@@ -1273,47 +1337,22 @@ $sidebar-display: "sidebar-display";
     display: block;
   }
 
-  #search-wrapper {
-    &.loaded ~ a {
-      margin-right: 1rem;
-    }
-
-    .fa-times-circle {
-      right: 5.2rem;
-    }
-  }
-
-  #search-input {
-    margin-left: 0;
-    width: 95%;
-  }
-
-  #search-result-wrapper .post-content {
+  #search-result-wrapper .content {
     letter-spacing: 0;
   }
 
   #tags {
-    -webkit-box-pack: center !important;
-    -ms-flex-pack: center !important;
     justify-content: center !important;
   }
 
   h1.dynamic-title {
     display: none;
 
-    ~ .post-content {
-      margin-top: 3rem;
+    ~ .content {
+      margin-top: 2.5rem;
     }
   }
-
-} // max-width: 849px
-
-/* Phone & Pad */
-@media all and (min-width: 577px) and (max-width: 1199px) {
-  footer > .d-flex > div {
-    width: 312px;
-  }
-}
+} /* max-width: 849px */
 
 /* Sidebar is visible */
 @media all and (min-width: 850px) {
@@ -1326,52 +1365,49 @@ $sidebar-display: "sidebar-display";
     margin-left: $sidebar-width;
   }
 
-  .profile-wrapper {
-    margin-top: 3rem;
-  }
-
-  #search-wrapper {
-    width: 22%;
-    min-width: 150px;
+  #sidebar {
+    .profile-wrapper {
+      margin-top: 3rem;
+    }
   }
 
   #search-hints {
     display: none;
   }
 
+  search {
+    max-width: $search-max-width;
+  }
+
   #search-result-wrapper {
-    margin-top: 3rem;
+    max-width: $main-content-max-width;
+    justify-content: start !important;
   }
 
-  div.post-content .table-wrapper > table {
+  main {
+    h1 {
+      margin-top: 3rem;
+    }
+  }
+
+  div.content .table-wrapper > table {
     min-width: 70%;
   }
 
   /* button 'back-to-Top' position */
   #back-to-top {
-    bottom: 5.5rem;
-    right: 1.2rem;
-  }
-
-  .topbar-up {
-    box-shadow: none !important;
+    right: 5%;
+    bottom: calc($footer-height - $back2top-size / 2);
   }
 
   #topbar-title {
     text-align: left;
   }
-
-  footer > div.d-flex {
-    width: 92%;
-  }
-
 }
 
 /* Pad horizontal */
 @media all and (min-width: 992px) and (max-width: 1199px) {
-  #main .col-lg-11 {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 96%;
+  #main-wrapper > .container .col-lg-11 {
     flex: 0 0 96%;
     max-width: 96%;
   }
@@ -1379,49 +1415,10 @@ $sidebar-display: "sidebar-display";
 
 /* 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: 210px;
-  }
-
   #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 {
-    margin-left: 210px;
-  }
-
   #breadcrumb {
     width: 65%;
     overflow: hidden;
@@ -1429,7 +1426,6 @@ $sidebar-display: "sidebar-display";
     word-break: keep-all;
     white-space: nowrap;
   }
-
 }
 
 /* panel hidden */
@@ -1438,13 +1434,7 @@ $sidebar-display: "sidebar-display";
     display: none;
   }
 
-  #topbar {
-    padding: 0;
-  }
-
-  #main > div.row {
-    -webkit-box-pack: center !important;
-    -ms-flex-pack: center !important;
+  #main-wrapper > .container > div.row {
     justify-content: center !important;
   }
 }
@@ -1452,35 +1442,16 @@ $sidebar-display: "sidebar-display";
 /* --- desktop mode, both sidebar and panel are visible --- */
 
 @media all and (min-width: 1200px) {
-  #main > div.row > div.col-xl-8 {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 75%;
-    flex: 0 0 75%;
-    max-width: 75%;
-    padding-left: 3%;
-  }
-
-  #topbar {
-    padding: 0;
-    max-width: 1070px;
-  }
-
-  #panel-wrapper {
-    max-width: $panel-max-width;
-  }
-
-  #back-to-top {
-    bottom: 6.5rem;
-    right: 4.3rem;
+  search {
+    margin-right: 4rem;
   }
 
   #search-input {
-    -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
   }
 
-  #search-results > div {
-    width: 46%;
+  #search-results > article {
+    width: 45%;
 
     &:nth-child(odd) {
       margin-right: 1.5rem;
@@ -1496,249 +1467,79 @@ $sidebar-display: "sidebar-display";
     }
   }
 
-  .post-content {
+  .content {
     font-size: 1.03rem;
   }
-
-  footer > div.d-felx {
-    width: 85%;
-  }
-
 }
 
 @media all and (min-width: 1400px) {
-  #main > div.row {
-    padding-left: calc((100% - #{$main-content-max-width}) / 2);
-
-    > div.col-xl-8 {
-      max-width: 850px;
-    }
-  }
-
-  #search-result-wrapper {
-    padding-right: 2rem;
-
-    > div {
-      max-width: 1110px;
-    }
-  }
-
-  #search-wrapper .fa-times-circle {
-    right: 2.6rem;
-  }
-
-}
-
-@media all and (min-width: 1400px) and (max-width: 1650px) {
-  #topbar {
-    padding-right: 2rem;
+  #back-to-top {
+    right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem);
   }
 }
 
 @media all and (min-width: 1650px) {
-  #breadcrumb {
-    padding-left: 0;
-  }
-
-  #main > div.row > div.col-xl-8 {
-    padding-left: 0;
-
-    > div:first-child {
-      padding-left: 0.55rem !important;
-      padding-right: 1.9rem !important;
-    }
-  }
+  $icon-gap: 1rem;
 
   #main-wrapper {
     margin-left: $sidebar-width-large;
   }
 
-  #panel-wrapper {
-    margin-left: calc((100% - #{$main-content-max-width}) / 10);
-  }
-
   #topbar-wrapper {
     left: $sidebar-width-large;
   }
 
-  #topbar {
-    max-width: #{$main-content-max-width};
+  search {
+    margin-right: calc(
+      #{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
+    );
   }
 
-  #search-wrapper {
-    margin-right: 3%;
+  #main-wrapper > .container {
+    max-width: $main-content-max-width;
+    padding-left: 1.75rem !important;
+    padding-right: 1.75rem !important;
   }
 
-  #sidebar {
-    width: $sidebar-width-large;
-
-    .profile-wrapper {
-      margin-top: 4rem;
-      margin-bottom: 1rem;
-
-      &.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;
+  main.col-12,
+  #tail-wrapper {
+    padding-right: 4.5rem !important;
+  }
 
-        a {
-          font-size: 1.7rem;
-          letter-spacing: 1px;
-        }
-      }
+  #back-to-top {
+    right: calc(
+      (100vw - #{$sidebar-width-large} - #{$main-content-max-width}) / 2 + 2rem
+    );
+  }
 
-      .site-subtitle {
-        @extend %profile-ml;
+  #sidebar {
+    width: $sidebar-width-large;
 
-        word-spacing: 0;
-        margin-top: 0.3rem;
-      }
+    $icon-gap: 1rem; // for the bottom icons
 
-    } // .profile-wrapper (min-width: 1650px)
+    .profile-wrapper {
+      margin-top: 3.5rem;
+      margin-bottom: 2.5rem;
+      padding-left: 3.5rem;
+    }
 
     ul {
-      padding-left: 2.5rem;
-
-      > li:last-child {
-        > a {
-          position: static;
-        }
-      }
-
-      .nav-item {
-        text-align: left;
-
-        .nav-link {
-          > span {
-            letter-spacing: 2px;
-          }
-
-          > i {
-            &.unloaded {
-              display: inline-block !important;
-            }
-          }
-        }
-
+      li.nav-item {
+        @include pl-pr(2.75rem);
       }
     }
 
     .sidebar-bottom {
-      padding-left: 3.5rem;
-      width: 100%;
+      padding-left: 2.75rem;
+      margin-bottom: 1.75rem;
 
-      $icon-block-size: 2rem;
-
-      &.justify-content-center {
-        -webkit-box-pack: start !important;
-        -ms-flex-pack: start !important;
-        justify-content: flex-start !important;
-      }
-
-      > 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%;
-          transform: translate(-50%, -50%);
-        }
+      a:not(:last-child) {
+        margin-right: $icon-gap;
       }
 
       .icon-border {
-        top: 0.9rem;
+        @include ml-mr(calc(($icon-gap - $btn-border-width) / 2));
       }
-
-    } // .sidebar-bottom
-
-  } // #sidebar
-
-  footer > div.d-flex {
-    width: 92%;
-    max-width: 1140px;
-  }
-
-  #search-result-wrapper {
-    > div {
-      max-width: #{$main-content-max-width};
     }
   }
-
-} // min-width: 1650px
-
-@media all and (min-width: 1700px) {
-  #topbar-wrapper {
-    /* 100% - 350px - (1920px - 350px); */
-    padding-right: calc(100% - #{$sidebar-width-large} - (1920px - #{$sidebar-width-large}));
-  }
-
-  #topbar {
-    max-width: calc(#{$main-content-max-width} + 20px);
-  }
-
-  #main > div.row {
-    padding-left: calc((100% - #{$main-content-max-width} - 2%) / 2);
-  }
-
-  #panel-wrapper {
-    margin-left: 3%;
-  }
-
-  footer {
-    padding-left: 0;
-    padding-right: calc(100% - #{$sidebar-width-large} - 1180px);
-  }
-
-  #back-to-top {
-    right: calc(100% - 1920px + 15rem);
-  }
-
-}
-
-@media (min-width: 1920px) {
-  #main > div.row {
-    padding-left: 190px;
-  }
-
-  #search-result-wrapper {
-    padding-right: calc(100% - #{$sidebar-width-large} - 1180px);
-  }
-
-  #panel-wrapper {
-    margin-left: 41px;
-  }
-}
+} /* min-width: 1650px */