refactor: simplify basic layout (#1039)

A dynamically expanding/collapsing topbar is difficult to maintain and not very useful.

_sass/addon/commons.scss

@@ -252,10 +252,6 @@ i {
       transition: all 0.3s ease-in;
     }
   }
-
-  [data-topbar-visible='true'] & > div {
-    top: 5.5rem;
-  }
 }
 
 #access-lastmod {
@@ -938,29 +934,7 @@ $btn-mb: 0.5rem;
 
 #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;
   background-color: var(--topbar-bg);
-
-  [data-topbar-visible='false'] & {
-    top: -$topbar-height; /* same as topbar height. */
-  }
-
-  &::before {
-    $blur: 12px;
-
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: $topbar-height;
-    z-index: -1;
-    -webkit-backdrop-filter: blur($blur);
-    backdrop-filter: blur($blur);
-  }
 }
 
 #topbar {
@@ -1168,11 +1142,6 @@ $btn-mb: 0.5rem;
   @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 {
@@ -1182,12 +1151,14 @@ $btn-mb: 0.5rem;
 /* --- 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;
@@ -1198,6 +1169,11 @@ $btn-mb: 0.5rem;
   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;
     position: relative;
@@ -1205,11 +1181,6 @@ $btn-mb: 0.5rem;
   }
 }
 
-#back-to-top:hover {
-  transform: translate3d(0, -5px, 0);
-  -webkit-transform: translate3d(0, -5px, 0);
-}
-
 #notification {
   @-webkit-keyframes popup {
     from {
@@ -1344,11 +1315,14 @@ $btn-mb: 0.5rem;
       transform: translateX(0);
     }
 
-    #topbar-wrapper,
     #main-wrapper,
     footer {
       transform: translateX(#{$sidebar-width});
     }
+
+    #back-to-top {
+      visibility: hidden;
+    }
   }
 
   #sidebar {
@@ -1360,8 +1334,6 @@ $btn-mb: 0.5rem;
 
   #main-wrapper {
     @include slide;
-
-    padding-top: $topbar-height;
   }
 
   #topbar,
@@ -1413,12 +1385,6 @@ $btn-mb: 0.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 {
@@ -1470,8 +1436,8 @@ $btn-mb: 0.5rem;
   }
 
   #search-result-wrapper {
-    margin-top: 3rem;
     max-width: $main-content-max-width;
+    justify-content: start !important;
   }
 
   .post {
@@ -1596,7 +1562,6 @@ $btn-mb: 0.5rem;
     );
   }
 
-  #topbar,
   #main,
   footer > .container {
     max-width: $main-content-max-width;