Clean up sidebar rendering

assets/css/layout.css

@@ -45,7 +45,7 @@ body {
   left: 0;
   transition: all var(--sidebarTransitionDuration) ease-in-out;
   will-change: transform;
-  margin-top: 12px;
+  margin-top: 10px;
 }
 
 .content {
@@ -56,10 +56,22 @@ body {
   z-index: 3;
 }
 
+.content-inner {
+  max-width: var(--content-width);
+  margin: 0 auto;
+  padding: 3px var(--content-gutter);
+}
+
+.content-inner:focus {
+  outline: none;
+}
+
+.content-outer {
+  min-height: 100%;
+}
+
 body:is(.sidebar-opening, .sidebar-opened) .sidebar-button {
-  transform: translateX(
-    calc(var(--sidebarWidth) - 100% - var(--sidebarButtonRightOpen))
-  );
+  transform: translateX(calc(var(--sidebarWidth) - 100% - var(--sidebarButtonRightOpen)));
 }
 
 body.sidebar-opening-start .sidebar {
@@ -107,58 +119,8 @@ body.sidebar-closed .content {
   left: 0;
 }
 
-.content-inner {
-  max-width: var(--content-width);
-  margin: 0 auto;
-  padding: 3px var(--content-gutter);
-}
-
-.content-inner:focus {
-  outline: none;
-}
-
-.content-outer {
-  min-height: 100%;
-}
-
-@media screen and (max-width: 768px) {
-
-  .sidebar-button {
-    position: absolute;
-    top: 4px;
-    left: -1px;
-  }
-
-  .sidebar-button:before {
-    --sidebarButtonHeight: 60px;
-    content: "";
-    display: block;
-    z-index: -1;
-    pointer-events: none;
-    position: fixed;
-    left: -1px;
-    top: 0;
-    height: var(--sidebarButtonHeight);
-    width: calc(100vw + 2px);
-    transition: top var(--sidebarTransitionDuration) ease-in-out;
-  }
-
-  body:is(.sidebar-closed, .sidebar-closing) .sidebar-button:before {
-    top: 0;
-  }
-
-  body:is(.sidebar-opening, .sidebar-opened) .sidebar-button:before {
-    top: calc(-1 * var(--sidebarButtonHeight) - var(--sidebarButtonTopOpen));
-  }
-
-  body.sidebar-opened .sidebar-button:before {
-    opacity: 0;
-  }
-}
-
-body.search-focused .search-bar .search-close-button {
-  transform: scaleY(1);
-  transition: transform 0.15s ease-out 0.15s;
+body.sidebar-closed .sidebar-button {
+  margin: 10px 8px;
 }
 
 @media screen and (max-width: 768px) {
@@ -169,8 +131,8 @@ body.search-focused .search-bar .search-close-button {
   }
 
   .content-inner {
-    padding-top: 10px;
-    padding-bottom: 27px;
+    padding-top: 13px;
+    padding-bottom: 26px;
     overflow-x: auto;
   }
 }

assets/css/search-bar.css

@@ -33,7 +33,7 @@
 }
 
 .top-search .search-bar .search-input:focus {
-  border: 1px solid var(--searchBarFocusColor); 
+  border: 1px solid var(--searchBarFocusColor);
   border-radius: 8px;
   height: 48px;
   position: relative;
@@ -51,7 +51,7 @@
   border: none;
   cursor: pointer;
   left: 11px;
-  opacity: .5;
+  opacity: 0.5;
   padding: 5px 1px 5px 5px;
   position: absolute;
   top: 60%;
@@ -74,17 +74,17 @@
   cursor: pointer;
   right: 11px;
   margin: 0;
-  opacity: .5;
+  opacity: 0.5;
   padding: 5px 1px 5px 0;
   position: absolute;
   transform: scaleY(0);
   top: calc(50% - 11px);
-  transition: .15s transform ease-out;
+  transition: 0.15s transform ease-out;
   z-index: 2;
 }
 
 .top-search .search-bar .search-close-button:hover {
-  opacity: .7;
+  opacity: 0.7;
 }
 
 .top-search .search-settings button.icon-settings {
@@ -99,7 +99,7 @@
   color: var(--iconAction);
   text-decoration: none;
   border: none;
-  transition: color .3s ease-in-out;
+  transition: color 0.3s ease-in-out;
   background-color: transparent;
   cursor: pointer;
   padding: 0;
@@ -123,3 +123,8 @@
     margin-top: 0;
   }
 }
+
+body.search-focused .search-bar .search-close-button {
+  transform: scaleY(1);
+  transition: transform 0.15s ease-out 0.15s;
+}

assets/css/sidebar.css

@@ -411,7 +411,6 @@
 
 .sidebar-closed .sidebar-button {
   color: var(--contrast);
-  margin: 12px 8px 8px 8px;
 }
 
 @media screen and (max-height: 500px) {
@@ -423,9 +422,3 @@
     overflow: visible;
   }
 }
-
-@media screen and (max-width: 768px) {
-  .sidebar-closed .sidebar-button {
-    margin: 8px;
-  }
-}