fix ad in mobile version

Author: carlospolop

theme/css/chrome.css

@@ -90,6 +90,27 @@ body.sidebar-visible #menu-bar {
     column-gap: 0.5rem;
 }
 
+.mobile-toc-toggle {
+    display: none;
+}
+@media only screen and (max-width:799px) {
+#mobile-toc-toggle {
+        display: inline-flex !important;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border: 1px solid var(--table-border-color);
+        border-radius: 6px;
+        background: color-mix(in srgb, var(--bg) 85%, transparent);
+    color: var(--fg);
+}
+    #mobile-toc-toggle .mobile-toc-icon {
+        font-size: 16px;
+        line-height: 1;
+    }
+}
+
 .icon-button {
     border: none;
     background: var(--bg);
@@ -860,14 +881,23 @@ ul#searchresults li a span.teaser em {
 }
 @media only screen and (max-width:549px) {
     #sidebar {
-        display: none !important;
+        display: none;
     }
     #sidebar-toggle {
         display: none !important;
     }
     .sidebar-float-toggle {
         display: none !important;
     }
+    #mobile-toc-toggle {
+        display: inline-flex !important;
+    }
+    #sidebar-toggle-anchor:checked ~ .page-wrapper .page #container #sidebar {
+        display: block !important;
+    }
+    #sidebar-toggle-anchor:checked ~ .page-wrapper .page #container #content {
+        display: none !important;
+    }
 }
 .sidebar-iframe-inner {
     background-color: transparent;

theme/index.hbs

@@ -202,6 +202,10 @@
                                 </button>
                                 {{/if}}
 
+                                <label id="mobile-toc-toggle" class="icon-button mobile-toc-toggle" for="sidebar-toggle-anchor" title="Open Table of Contents" aria-label="Open Table of Contents">
+                                    <span class="mobile-toc-icon" aria-hidden="true">📚</span>
+                                </label>
+
                                 <div id="menubar-languages-toggle" class="icon-button" type="button" title="Translations" aria-label="Toggle Tanslations" aria-expanded="false" aria-controls="translations">
                                     <i class="fa fa-globe"></i>
                                     <span class="menu-bar-link">Translations</span>

theme/pagetoc.css

@@ -1,4 +1,4 @@
-@media only screen and (max-width:1439px) {
+@media only screen and (max-width:799px) {
     .sidetoc {
         display: none !important;
     }
@@ -61,7 +61,7 @@
     }
 }
 
-@media only screen and (min-width:1440px) {
+@media only screen and (min-width:800px) {
     main {
         position: relative;
     }