snipette/weflock
snipette/weflock
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fix menu button overflow

Browse source 
References #180

- Adds `overflow-x: hidden` to `.site-wrapper` when navigation is open to prevent the menu button flowing into the navigation & covering the 'Menu' title text in Firefox.
This commit is contained in:
Paul Adam Davis 2015-03-02 14:00:20 +00:00
parent 7af816a48e
commit 0d3bafde1e
1 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
assets/css/screen.css
View file

@ -476,6 +476,7 @@ margin on the iframe, cause it breaks stuff. */
} }
body.nav-opened .site-wrapper { body.nav-opened .site-wrapper {
overflow-x: hidden;
-webkit-transform: translate3D(-240px, 0, 0); -webkit-transform: translate3D(-240px, 0, 0);
-ms-transform: translate3D(-240px, 0, 0); -ms-transform: translate3D(-240px, 0, 0);
transform: translate3D(-240px, 0, 0); transform: translate3D(-240px, 0, 0);
@ -529,7 +530,7 @@ body.nav-opened .nav-cover {
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 50; z-index: 5;
width: 240px; width: 240px;
opacity: 0; opacity: 0;
background: #111; background: #111;
@ -1052,8 +1053,8 @@ body:not(.post-template) .post-title {
border: none; border: none;
} }
/* Stop elements, such as img wider than the post content, from /* Stop elements, such as img wider than the post content, from
creating horizontal scroll - slight hack due to imperfections creating horizontal scroll - slight hack due to imperfections
with browser width % calculations and rounding */ with browser width % calculations and rounding */
.post-template .content { .post-template .content {
overflow: hidden; overflow: hidden;
@ -1071,16 +1072,16 @@ body:not(.post-template) .post-title {
display: none; display: none;
} }
/* Keep images centered, and allow images wider than the main /* Keep images centered, and allow images wider than the main
text column to break out. */ text column to break out. */
.post-content img { .post-content img {
display: block; display: block;
max-width: 126%; max-width: 126%;
height: auto; height: auto;
padding: 0.6em 0; padding: 0.6em 0;
/* Centers an image by (1) pushing its left edge to the /* Centers an image by (1) pushing its left edge to the
center of its container and (2) shifting the entire image center of its container and (2) shifting the entire image
in the opposite direction by half its own width. in the opposite direction by half its own width.
Works for images that are larger than their containers. */ Works for images that are larger than their containers. */
position: relative; position: relative;
left: 50%; left: 50%;