jekyll-theme-chirpy 4.3.4 → 5.1.0

data/_sass/addon/commons.scss

@@ -1,37 +1,30 @@
 /*
   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;
 }
 
@@ -43,51 +36,12 @@ body {
   font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
 }
 
-/* --- Scrollbar --- */
-
-$scrollbar-size: 7px;
-
-::-webkit-scrollbar {
-  width: $scrollbar-size;
-  height: $scrollbar-size;
-}
-
-::-webkit-scrollbar-track {
-  @at-root body#{&} {
-    -webkit-box-shadow: inset 0 0 6px var(--scrollbar-track-bg);
-  }
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: var(--scrollbar-thumb-bg);
-  border-radius: calc(#{$scrollbar-size} / 2);
-}
-
-.highlight {
-  border-color: transparent;
-  transition: border-color 0.5s ease;
-
-  &:hover {
-    border-color: var(--scrollbar-thumb-bg);
-    transition: border-color 0.2s ease;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    /* add border to act as background-color */
-    border-right-style: inset;
-    border-right-width: calc(100vw + 100vh);
-    border-color: inherit;
-    background-color: var(--highlight-bg-color);
-  }
-
-}
-
 /* --- Typography --- */
 
 h1 {
   @extend %heading;
 
-  font-size: 1.8rem;
+  font-size: 1.9rem;
 }
 
 h2 {
@@ -95,7 +49,7 @@ h2 {
   @extend %section;
   @extend %anchor;
 
-  font-size: 1.4rem;
+  font-size: 1.5rem;
 }
 
 h3 {
@@ -103,7 +57,7 @@ h3 {
   @extend %section;
   @extend %anchor;
 
-  font-size: 1.25rem;
+  font-size: 1.2rem;
 }
 
 h4 {
@@ -143,10 +97,49 @@ blockquote {
   border-left: 5px solid var(--blockquote-border-color);
   padding-left: 1rem;
   color: var(--blockquote-text-color);
+
+  &[class^="prompt-"] {
+    display: flex;
+    border-left: 0;
+    border-radius: 6px;
+    padding: 0.75rem 1.2rem;
+    color: var(--prompt-text-color);
+
+    &::before {
+      margin-right: 1rem;
+      font-family: "Font Awesome 5 Free";
+      text-align: center;
+      width: 1.25rem;
+    }
+
+    p:last-child {
+      margin-bottom: 0rem;
+    }
+  }
+
+  @include prompt("tip", "\f0eb", 400);
+
+  @include prompt("info", "\f06a");
+
+  @include prompt("warning", "\f06a");
+
+  @include prompt("danger", "\f071");
 }
 
 kbd {
+  font-family: inherit;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1.3rem;
+  min-width: 1.75rem;
+  text-align: center;
   margin: 0 0.3rem;
+  padding-top: 0.1rem;
+  color: var(--kbd-text-color);
+  background-color: var(--kbd-bg-color);
+  border-radius: 0.25rem;
+  border: solid 1px var(--kbd-wrap-color);
+  box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
 }
 
 footer {
@@ -155,8 +148,6 @@ footer {
   padding: 0 1rem;
   height: $footer-height;
   font-size: 0.8rem;
-  color: #7a7b7d;
-  background-color: var(--footer-bg-color);
 
   > div.d-flex {
     line-height: 1.2rem;
@@ -171,7 +162,7 @@ footer {
   }
 
   a {
-    color: var(--footer-link);
+    @extend %text-color;
 
     &:link {
       @include no-text-decoration;
@@ -189,6 +180,43 @@ footer {
   }
 }
 
+i { /* fontawesome icons */
+  &.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));
+    box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
+  }
+
+  @extend %img-caption;
+}
+
 /* --- Panels --- */
 
 .access {
@@ -203,10 +231,6 @@ footer {
     position: sticky;
   }
 
-  &.topbar-down {
-    top: 6rem;
-  }
-
   > div {
     padding-left: 1rem;
     border-left: 1px solid var(--main-border-color);
@@ -216,19 +240,16 @@ footer {
     }
   }
 
-  span {
-    @include panel-label;
-  }
-
   .post-content {
     font-size: 0.9rem;
   }
 
 }
 
-#access-tags {
-  > div.post-content > div {
-    max-width: 80%;
+#panel-wrapper {
+  /* the headings */
+  .panel-heading {
+    @include label(inherit);
   }
 
   .post-tag {
@@ -248,6 +269,10 @@ footer {
       transition: none;
     }
   }
+
+  [data-topbar-visible=true] & > div {
+    top: 6rem;
+  }
 }
 
 #access-lastmod {
@@ -288,12 +313,12 @@ footer {
       margin-bottom: 0;
     }
 
-    // [scroll-focus] added by `smooth-scroll.js`
+    /* [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
+      -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
       transition: background-color 1.5s ease-in-out;
     }
   }
@@ -305,11 +330,11 @@ footer {
     @include pl-pr(2px);
 
     border-bottom-style: none !important;
-    -webkit-transition: background-color 1.5s ease-in-out; // Safari prior 6.1
+    -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`
+  /* [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);
@@ -327,26 +352,10 @@ footer {
   }
 }
 
-.post {
-  h1 {
-    margin-top: 3rem;
-    margin-bottom: 1rem;
-  }
-
-  em { /* MarkDown italic */
-    padding-right: 0.2rem;
-  }
-
-  a:hover {
-    code {
-      @extend %link-hover;
-    }
-  }
-}
-
 /* --- Begin of Markdown table style --- */
 
-.table-wrapper { // it will be created by Liquid
+/* it will be created by Liquid */
+.table-wrapper {
   overflow-x: auto;
   margin-bottom: 1.5rem;
 
@@ -379,12 +388,41 @@ footer {
           @extend %table-cell;
         }
       }
-    } // tbody
-  }// table
+    } /* tbody */
+  }/* table */
 }
 
 /* --- post --- */
 
+.post {
+  h1 {
+    margin-top: 3rem;
+    margin-bottom: 1.5rem;
+  }
+
+  a {
+    &.img-link {
+      @extend %no-cursor;
+    }
+
+    /* created by `_includes/img-extra.html` */
+    &.popup {
+      cursor: zoom-in;
+
+      > img[data-src]:not(.normal):not(.left):not(.right) {
+        @include align-center;
+      }
+    }
+
+    &:hover {
+      code {
+        @extend %link-hover;
+      }
+    }
+  } /* a */
+
+}
+
 .pageviews .fa-spinner {
   font-size: 80%;
 }
@@ -394,9 +432,6 @@ footer {
   word-spacing: 1px;
 
   a {
-    @extend %link-color;
-    @extend %link-underline;
-
     &:not(:last-child) {
       margin-right: 2px;
     }
@@ -405,6 +440,10 @@ footer {
       @extend %link-hover;
     }
   }
+
+  em {
+    @extend %normal-font-style;
+  }
 }
 
 .post-content {
@@ -414,54 +453,8 @@ footer {
   overflow-wrap: break-word;
   word-wrap: break-word;
 
-  @mixin caption {
-    + em {
-      display: block;
-      text-align: center;
-      font-style: normal;
-      font-size: 80%;
-      padding: 0;
-      color: #6d6c6c;
-    }
-  }
-
-  @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));
-    }
-
-    @include caption;
-
-  }
-
   a {
-    blockquote & {
-      color: var(--link-color);
-    }
-
     &:not(.img-link) {
-      @extend %link-color;
       @extend %link-underline;
 
       &:hover {
@@ -469,26 +462,18 @@ footer {
       }
     }
 
-    &.popup { // created by `_includes/img-extra.html`
-      cursor: zoom-in;
-
-      > img[data-src]:not(.normal):not(.left):not(.right) {
-        @include align-center;
-      }
-    }
-
     &.img-link {
-      @include caption;
+      @extend %img-caption;
     }
 
-  } // a
+  }
 
   ul {
-    // attribute 'hide-bullet' was added by liquid
+    /* attribute 'hide-bullet' was added by liquid */
     .task-list-item[hide-bullet] {
       list-style-type: none;
 
-      > i { // checkbox icon
+      > i { /* checkbox icon */
         margin: 0 0.4rem 0.2rem -1.4rem;
         vertical-align: middle;
         color: var(--checkbox-color);
@@ -505,7 +490,7 @@ footer {
       vertical-align: middle;
     }
 
-  } // ul
+  } /* ul */
 
   > ol,
   > ul {
@@ -513,7 +498,7 @@ footer {
 
     li {
       ol,
-      ul { // sub list
+      ul { /* sub list */
         padding-left: 2rem;
         margin-top: 0.3rem;
       }
@@ -531,7 +516,7 @@ footer {
     margin-left: 1rem;
   }
 
-} // .post-content
+} /* .post-content */
 
 .tag:hover {
   @extend %tag-hover;
@@ -574,10 +559,6 @@ footer {
 
 /* --- Effects classes --- */
 
-.semi-bold {
-  font-weight: 600 !important;
-}
-
 .loaded {
   display: block !important;
 
@@ -607,10 +588,6 @@ footer {
   box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
 }
 
-.topbar-up {
-  top: -3rem !important; /* same as topbar height. */
-}
-
 .no-text-decoration {
   @include no-text-decoration;
 }
@@ -640,14 +617,14 @@ footer {
 
 /* --- Overriding --- */
 
-// magnific-popup
+/* magnific-popup */
 figure .mfp-title {
   text-align: center;
   padding-right: 0;
   margin-top: 0.5rem;
 }
 
-// mermaid
+/* mermaid */
 .mermaid {
   text-align: center;
 }
@@ -695,7 +672,7 @@ $sidebar-display: "sidebar-display";
       border-radius: 50%;
       border: 2px solid rgba(222, 222, 222, 0.7);
       overflow: hidden;
-      transform: translateZ(0); // fixed the zoom in Safari
+      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;
@@ -719,7 +696,7 @@ $sidebar-display: "sidebar-display";
         transform: scale(1.2);
       }
     }
-  } // #avatar
+  } /* #avatar */
 
   .site-title {
     a {
@@ -738,7 +715,7 @@ $sidebar-display: "sidebar-display";
     line-height: 1.2rem;
     word-spacing: 1px;
     margin: 0.5rem 1.5rem 0.5rem 1.5rem;
-    min-height: 3rem; // avoid vertical shifting in multi-line words
+    min-height: 3rem; /* avoid vertical shifting in multi-line words */
     user-select: none;
   }
 
@@ -782,7 +759,7 @@ $sidebar-display: "sidebar-display";
           width: 100%;
         }
 
-        &::after { // the cursor
+        &::after { /* the cursor */
           display: table;
           visibility: hidden;
           content: "";
@@ -795,7 +772,7 @@ $sidebar-display: "sidebar-display";
           pointer-events: none;
         }
       }
-    } // li
+    } /* li */
 
     @mixin fix-cursor($top) {
       top: $top;
@@ -820,12 +797,11 @@ $sidebar-display: "sidebar-display";
         }
       }
 
-    } // @for
+    } /* @for */
 
-  } // ul
+  } /* ul */
 
   .sidebar-bottom {
-    font-size: 1.2rem;
     margin-bottom: 2.1rem;
 
     @include ml-mr(auto);
@@ -842,22 +818,31 @@ $sidebar-display: "sidebar-display";
     }
 
     i {
-      line-height: 1.75rem; // default line-height in body
-      vertical-align: middle;
+      font-size: 1.2rem;
+      line-height: 1.75rem;
     }
 
-    #mode-toggle-wrapper {
+    .mode-toggle {
+      padding: 0;
+      border: 0;
+      margin-bottom: 1px;
+      background-color: transparent;
+
       @extend %icon;
+      @extend %sidebar-links;
 
-      i {
-        @extend %sidebar-links;
-        @extend %cursor-pointer;
+      > i {
         @extend %clickable-transition;
       }
 
+      &:hover > i {
+        color: var(--sidebar-active-color);
+      }
     }
 
     .icon-border {
+      @extend %no-cursor;
+
       background-color: var(--sidebar-muted-color);
       content: "";
       width: 3px;
@@ -865,13 +850,9 @@ $sidebar-display: "sidebar-display";
       border-radius: 50%;
     }
 
-    #mode-toggle-wrapper:hover > i {
-      color: var(--sidebar-active-color);
-    }
-
-  } // .sidebar-bottom
+  } /* .sidebar-bottom */
 
-} // #sidebar
+} /* #sidebar */
 
 @media (hover: hover) {
   #sidebar ul > li:last-child::after {
@@ -909,10 +890,14 @@ $sidebar-display: "sidebar-display";
   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. */
+  }
 }
 
 #topbar {
-  i { // icons
+  i { /* icons */
     color: #999;
   }
 
@@ -934,7 +919,7 @@ $sidebar-display: "sidebar-display";
       }
     }
   }
-} // #topbar
+} /* #topbar */
 
 #sidebar-trigger,
 #search-trigger {
@@ -954,12 +939,6 @@ $sidebar-display: "sidebar-display";
     font-size: 0.9rem;
     color: var(--search-icon-color);
   }
-
-  .fa-times-circle { /* button 'clean up' */
-    @extend %cursor-pointer;
-
-    visibility: hidden;
-  }
 }
 
 #search-cancel { /* 'Cancel' link */
@@ -976,6 +955,7 @@ $sidebar-display: "sidebar-display";
   border-radius: 0;
   padding: 0.18rem 0.3rem;
   color: var(--text-color);
+  height: auto;
 
   &:focus {
     box-shadow: none;
@@ -991,7 +971,11 @@ $sidebar-display: "sidebar-display";
 }
 
 #search-hints {
-  display: none;
+  padding: 0 1rem;
+
+  h4 {
+    margin-bottom: 1.5rem;
+  }
 
   .post-tag {
     display: inline-block;
@@ -1000,13 +984,15 @@ $sidebar-display: "sidebar-display";
     background: var(--search-tag-bg);
     border: none;
     padding: 0.5rem;
-    margin: 0 1rem 1rem 0;
+    margin: 0 1.25rem 1rem 0;
 
     &::before {
       content: "#";
       color: var(--text-muted-color);
       padding-right: 0.2rem;
     }
+
+    @extend %link-color;
   }
 }
 
@@ -1033,7 +1019,7 @@ $sidebar-display: "sidebar-display";
       margin-bottom: 1rem;
     }
 
-    i { // icons
+    i { /* icons */
       color: #818182;
       margin-right: 0.15rem;
       font-size: 80%;
@@ -1047,7 +1033,7 @@ $sidebar-display: "sidebar-display";
       -webkit-box-orient: vertical;
     }
   }
-} // #search-results
+} /* #search-results */
 
 #topbar-title {
   display: none;
@@ -1063,7 +1049,9 @@ $sidebar-display: "sidebar-display";
   white-space: nowrap;
 }
 
-#page {
+#core-wrapper {
+  min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
+
   .categories,
   #tags,
   #archives {
@@ -1100,20 +1088,24 @@ $sidebar-display: "sidebar-display";
   @include pl-pr(0);
 }
 
-#main > div.row:first-child > div {
-  &:nth-child(1),
-  &:nth-child(2) {
-    margin-top: $topbar-height; /* same as the height of topbar */
-  }
+#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} - #{$post-extend-min-height});
+      &:first-child {
+        /* 3rem for topbar, 6rem for footer */
+        min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height});
+      }
+    }
   }
-}
 
-#post-wrapper {
-  min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
+  div.row:first-of-type:last-of-type { /* alone */
+    margin-bottom: 4rem;
+  }
 }
 
 #topbar-wrapper.row,
@@ -1164,19 +1156,45 @@ $sidebar-display: "sidebar-display";
 
 @media all and (max-width: 576px) {
 
-  $footer-height: $footer-height-mobile; // overwrite
+  $footer-height: $footer-height-mobile; /* overwrite */
+
+  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 > div.row:first-child > div:first-child {
     min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
   }
 
-  #post-wrapper {
-    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
+  #core-wrapper {
+    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
 
     h1 {
       margin-top: 2.2rem;
-      font-size: 1.55rem;
+      font-size: 1.75rem;
+    }
+
+    .post-content {
+      > blockquote[class^=prompt-] {
+        @include ml-mr(-1.25rem);
+        border-radius: 0;
+      }
     }
+
   }
 
   #avatar > a {
@@ -1192,31 +1210,19 @@ $sidebar-display: "sidebar-display";
     padding-bottom: $footer-height;
   }
 
-  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;
-    }
-  }
-
 }
 
 /* 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 {
+      -webkit-transition: $basic, $append;
+      transition: $basic, $append;
+    } @else {
+      -webkit-transition: $basic;
+      transition: $basic;
+    }
   }
 
   html,
@@ -1224,15 +1230,6 @@ $sidebar-display: "sidebar-display";
     overflow-x: hidden;
   }
 
-  .footnotes ol > li {
-    padding-top: 3.5rem;
-    margin-top: -3.2rem;
-
-    &:first-child {
-      margin-top: -3.5rem;
-    }
-  }
-
   [#{$sidebar-display}] {
     #sidebar {
       transform: translateX(0);
@@ -1242,13 +1239,12 @@ $sidebar-display: "sidebar-display";
     #main-wrapper {
       transform: translateX(#{$sidebar-width});
     }
-
   }
 
   #sidebar {
-    @extend %slide;
+    @include slide;
 
-    transform: translateX(-#{$sidebar-width}); // hide
+    transform: translateX(-#{$sidebar-width}); /* hide */
     -webkit-transform: translateX(-#{$sidebar-width});
 
     .cursor {
@@ -1259,7 +1255,7 @@ $sidebar-display: "sidebar-display";
   }
 
   #main-wrapper {
-    @extend %slide;
+    @include slide;
 
     padding-top: $topbar-height;
   }
@@ -1274,15 +1270,11 @@ $sidebar-display: "sidebar-display";
   }
 
   #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) {
     margin-top: 0;
@@ -1298,10 +1290,6 @@ $sidebar-display: "sidebar-display";
     &.loaded ~ a {
       margin-right: 1rem;
     }
-
-    .fa-times-circle {
-      right: 5.2rem;
-    }
   }
 
   #search-input {
@@ -1313,18 +1301,13 @@ $sidebar-display: "sidebar-display";
     letter-spacing: 0;
   }
 
-  #search-hints {
-    display: block;
-    padding: 0 1rem;
-  }
-
   #tags {
     -webkit-box-pack: center !important;
     -ms-flex-pack: center !important;
     justify-content: center !important;
   }
 
-  #page h1.dynamic-title {
+  h1.dynamic-title {
     display: none;
 
     ~ .post-content {
@@ -1332,7 +1315,13 @@ $sidebar-display: "sidebar-display";
     }
   }
 
-} // max-width: 849px
+} /* 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) {
@@ -1361,6 +1350,10 @@ $sidebar-display: "sidebar-display";
     min-width: 150px;
   }
 
+  #search-hints {
+    display: none;
+  }
+
   #search-result-wrapper {
     margin-top: 3rem;
   }
@@ -1375,10 +1368,6 @@ $sidebar-display: "sidebar-display";
     right: 1.2rem;
   }
 
-  .topbar-up {
-    box-shadow: none !important;
-  }
-
   #topbar-title {
     text-align: left;
   }
@@ -1545,10 +1534,6 @@ $sidebar-display: "sidebar-display";
     }
   }
 
-  #search-wrapper .fa-times-circle {
-    right: 2.6rem;
-  }
-
 }
 
 @media all and (min-width: 1400px) and (max-width: 1650px) {
@@ -1635,7 +1620,7 @@ $sidebar-display: "sidebar-display";
         margin-top: 0.3rem;
       }
 
-    } // .profile-wrapper (min-width: 1650px)
+    } /* .profile-wrapper (min-width: 1650px) */
 
     ul {
       padding-left: 2.5rem;
@@ -1677,11 +1662,12 @@ $sidebar-display: "sidebar-display";
       }
 
       > span,
+      > button.mode-toggle,
       > a {
         @include ml-mr(0.15rem);
 
         height: $icon-block-size;
-        margin-bottom: 0.5rem; // wrap line
+        margin-bottom: 0.5rem; /* wrap line */
       }
 
       i {
@@ -1704,9 +1690,9 @@ $sidebar-display: "sidebar-display";
         top: 0.9rem;
       }
 
-    } // .sidebar-bottom
+    } /* .sidebar-bottom */
 
-  } // #sidebar
+  } /* #sidebar */
 
   footer > div.d-flex {
     width: 92%;
@@ -1719,7 +1705,7 @@ $sidebar-display: "sidebar-display";
     }
   }
 
-} // min-width: 1650px
+} /* min-width: 1650px */
 
 @media all and (min-width: 1700px) {
   #topbar-wrapper {