docs: mobile nav

- got stylings to work on different sized browsers
- mobile nav can now be seen
- mobile nav displays all main links

docs/themes/cypress/layout/partial/mobile_nav.swig

@@ -1,10 +1,8 @@
 <nav id="mobile-nav">
   <div id="mobile-nav-inner">
     <ul id="mobile-nav-list">
-      {{ header_menu('mobile-nav') }}
-      <li class="mobile-nav-item">
-        <a href="https://github.com/{{ config.github }}" class="mobile-nav-link" rel="external" target="_blank">GitHub</a>
-      </li>
+      {{ menu('main') }}
+      <a href="https://github.com/{{ config.github }}" class="main-nav-link" rel="external" target="_blank">GitHub</a>
     </ul>
     {% if page.layout == 'page' %}
       {{ doc_sidebar('mobile-nav') }}

docs/themes/cypress/source/css/_partial/media_queries.scss

@@ -28,6 +28,8 @@
     padding: 0 $gutter-width;
   }
 
+
+
   #sidebar .inner {
     padding-right: 0;
   }
@@ -75,9 +77,7 @@
   #sidebar {
     display: block;
   }
-  #content-inner {
-    margin-left: $sidebar-width;
-  }
+
   .article-container {
     float: right;
     width: 100%;
@@ -110,10 +110,23 @@
   }
 }
 
-@media screen and(max-width: 768px) {
+@media screen and(min-width: 1001px) {
+  #content-inner {
+    margin-left: $sidebar-width + 40px;
+  }
+}
+
+@media screen and(max-width: 1000px) {
+  #content-wrap {
+    padding-top: 0;
+  }
+
+  #content-inner {
+    margin-left: $sidebar-width + 20px;
+  }
 
   .article {
-    padding: 0 20px !important;
+    padding: 0 30px !important;
   }
 
   .article-inner {
@@ -142,3 +155,45 @@
     float: none;
   }
 }
+@media screen and(max-width: 769px) {
+  #content-inner {
+    margin-left: 20px;
+  }
+
+  .article pre, .article code,
+  .faq pre, .faq code {
+    &[class*="language-"] {
+      font-size: 0.87em;
+    }
+  }
+
+  .article-content, .faq .article {
+    table {
+      margin: 1em 0;
+      width: 100%;
+      border: 1px solid #e8e8e8;
+
+      th {
+        font-weight: 500;
+        padding: 2px 5px;
+        text-align: left;
+        border-bottom: 1px solid #e8e8e8;
+        font-size: 0.9em;
+
+        &:empty {
+          padding: 0;
+        }
+      }
+
+      td {
+        padding: 10px 5px;
+        font-size: 0.9em;
+        line-height: 1.5em;
+      }
+
+      tr:nth-child(2n) {
+        background: #fafafb;
+      }
+    }
+  }
+}

docs/themes/cypress/source/css/_partial/mobile_nav.scss

@@ -1,15 +1,16 @@
 #mobile-nav {
   position: fixed;
   top: 0;
-  width: $mobile-nav-width;
+  width: $mobile-nav-width + 20px;
   left: -$mobile-nav-width;
   height: 100%;
   background: white;
   transition: 0.4s;
   font-family: $font-title;
+  border: 1px solid #ddd;
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.30);
 }
 
-
 .mobile-nav-on {
   #mobile-nav {
     transform: translateX(100%);
@@ -47,13 +48,17 @@
   bottom: 40px;
   left: 0;
   right: 0;
+
+  .sidebar-li {
+    list-style: none;
+  }
 }
 
 #mobile-nav-toggle {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 20px;
+  left: 40px;
   width: 25px;
   height: 20px;
   margin: auto;
@@ -84,7 +89,7 @@
     top: 18px;
   }
 }
-.mobile-nav-link {
+#mobile-nav-list .main-nav-link, .mobile-nav-link {
   color: $color-link;
   text-decoration: none;
   display: block;
@@ -105,7 +110,8 @@
 
   &:hover {
     color: $color-link-hover;
-
+    text-decoration: none;
+    background-color: #f1f4f7;
   }
 }
 
@@ -124,6 +130,19 @@
   text-overflow: ellipsis;
 }
 
+#mobile-nav-list {
+  list-style: none;
+  padding-left: 0;
+
+  li.active {
+    a {
+      color: $color-link-hover;
+      text-decoration: none;
+      background-color: #f1f4f7;
+    }
+  }
+}
+
 
 #mobile-nav-list .mobile-nav-link {
   font-weight: 600;

docs/themes/cypress/source/css/_partial/page.scss

@@ -1,7 +1,7 @@
 .article {
   float: left;
   width: 100%;
-  padding: 0px 80px;
+  padding: 0px 50px;
   border-right: 1px solid #eee;
 }
 

docs/themes/cypress/source/css/_variables.scss

@@ -40,8 +40,8 @@ $line-height: 1.7em;
 // Layout
 $max-width: 1300px;
 $gutter-width: 30px;
-$sidebar-width: 240px;
-$mobile-nav-width: 260px;
+$sidebar-width: 230px;
+$mobile-nav-width: 230px;
 
 // Media queries
 $mq-mobile: "screen and (max-width: 768px)";