mobile aside: max-width and transparent overlay

fix maximum aside with in mobile screen at 300px.
This way the aside will not cover all the screen.
The area not covered by aside element are dimmed by a semi-transparent overlay

view/theme/frio/css/style.css

@@ -109,10 +109,22 @@ code {
         top: 0!important;
         background-color: #fff;
         width: 100%;
+        max-width: 300px;
         height: 100%;
         padding-top: 100px;
         z-index: 10;
     }
+    aside::before {
+        content: " ";
+        position: fixed;
+        display: block;
+        top: 0; left: 300px; right: 0; bottom: 0;
+        background-color: rgba(0,0,0,0.4);
+    }
+    aside + div {
+        display:none!important;
+    }
+
 }
 /*
 * standard page elements