[maintenance]: improve mobile page part 1

sass: shifted object, adn fixing header, div mheader rename from show-bar

sass/_article.scss

@@ -222,6 +222,6 @@ nav.navigation {
 
 @media (max-width: 1000px) {
     article {
-        padding-top: 2.5rem;
+        padding-top: 5rem;
     }
 }

sass/_navs.scss

@@ -11,9 +11,9 @@ aside {
 }
 
 @media (max-width: 1000px) {
-  main > nav,
+  main nav,
   aside {
-    top: -0.25rem;
+    top: 4.9rem;
     border: none;
     bottom: 0;
     background: var(--background);

sass/macros/_header.scss

@@ -150,4 +150,8 @@ header {
   #suggestions {
     display: none;
   }
+  header {
+    position: fixed;
+    z-index: 5;
+  }
 }

sass/macros/_sidebar.scss

-main > nav {
+main  nav {
   padding-left: 0;
   max-height: 100vh;
   background: var(--background);
@@ -83,7 +83,6 @@ main > nav {
   }
   #sidebar {
     display: block;
-    left: 0;
     transform: translateX(-100%);
     &:target {
       transform: translateX(0);

sass/macros/_toc.scss

@@ -51,6 +51,9 @@ aside {
 @media (max-width: 1000px) {
   aside {
     display: none;
+    span {
+     margin-left: 1rem;
+    }
     ul {
       border: none;
     }
@@ -58,10 +61,11 @@ aside {
   #toc {
     display: block;
     right: 0;
+    min-width: 50%;
     transform: translateX(150%);
     &:target {
-      transform: translateX(25px);
-      z-index: 6;
+      transform: translateX(10px);
+      z-index: 3;
     }
   }
 }

sass/page.scss

@@ -7,7 +7,7 @@
 @import 'macros/toc';
 
 
-.show-bar {
+.mheader {
   display: none;
 }
 
@@ -17,13 +17,17 @@
     grid-template-columns: 1fr;
     overflow-x: hidden;
   }
-  .show-bar {
-    display: inline-grid;
+  div.mheader {
+    display: grid;
+    position: fixed;
+    top: 2.6rem;
     grid-template-rows: 1fr;
     grid-template-columns: repeat(2,1fr);
     justify-content: space-around;
-    background: var(--backgorund);
+    background: var(--background);
+    color: var(--foreground);
     width: 100%;
+    z-index: 5;
     border-bottom: 1px solid $dark1;
     a {
       padding-left: 0.5rem;

templates/macros/common.html

 {% import 'macros/folio.html' as page -%}
 {% import 'macros/header.html' as top_nav -%}
 
-<!-- footer in the page -->
+{# footer in the page #}
 {% macro footer() %}
 <footer>
         <ul>

templates/macros/folio.html

 {# table of content #}
 {% macro toc(page) %}
-<aside id="toc" class="nav">
+<aside id="toc">
     <a aria-label="close button" href="#close" class="close" role="button">
         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z" fill="currentColor"></path></svg>
     </a>

templates/page.html

@@ -5,8 +5,8 @@
 {% block htmltitle %} {{ page.title }} {% endblock htmltitle %}
 {% block content %}
 <main>
-  <div class="show-bar">
-    <a href="#sidebar" role="button">
+  <div class="mheader">
+    <a href="#sidebar">
       <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" role="button">
+    <a href="#toc">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="32"