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
This commit is contained in:
fabrixxm 2017-04-26 08:58:45 +02:00
parent ea9d44c20a
commit bd4ce2daee

View file

@ -109,10 +109,22 @@ code {
top: 0!important; top: 0!important;
background-color: #fff; background-color: #fff;
width: 100%; width: 100%;
max-width: 300px;
height: 100%; height: 100%;
padding-top: 100px; padding-top: 100px;
z-index: 10; 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 * standard page elements