[maintenance]: improve mobile page

sass: remove top paramaters and limited width, hidden overflow-x, button
for toc close improve.

sass/_navs.scss

@@ -13,18 +13,18 @@ aside {
 @media (max-width: 1000px) {
   main nav,
   aside {
-    top: 4.9rem;
     border: none;
-    bottom: 0;
     background: var(--background);
-    width: 50%;
+    max-width: 50%;
     height: 100%;
+    overflow-x: hidden;
     overflow-y: auto;
     position: fixed;
     transition: transform 0.25s ease;
     a.close {
-      display: block;
-      z-index: 6;
+      display: inline-block;
+      margin-right: 1.25rem;
+      padding: inherit;
     }
   }
 }

sass/macros/_sidebar.scss

@@ -83,6 +83,7 @@ main  nav {
   }
   #sidebar {
     display: block;
+    margin-top: 3.9rem;
     transform: translateX(-100%);
     &:target {
       transform: translateX(0);

sass/macros/_toc.scss

@@ -59,13 +59,17 @@ aside {
     }
   }
   #toc {
-    display: block;
+    display: grid;
     right: 0;
-    min-width: 50%;
     transform: translateX(150%);
     &:target {
       transform: translateX(10px);
       z-index: 3;
     }
+    a.close {
+      margin-top: 2.3rem;
+      justify-self: end;
+      margin-bottom: -2rem;
+    }
   }
 }

templates/page.html

@@ -6,7 +6,7 @@
 {% block content %}
 <main>
   <div class="mheader">
-    <a href="#sidebar">
+    <a href="#sidebar" role="button">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="32"
@@ -22,7 +22,7 @@
         <rect x="6" y="4" width="2" height="24" />
       </svg>
     </a>
-    <a href="#toc">
+    <a href="#toc" role="button">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="32"