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

When cover images are used, add subtle gradient top overlay for more contrast behind nav buttons

Browse source
This commit is contained in:
John O'Nolan 2014-07-21 21:40:31 +02:00
parent a2e43b155b
commit 5dc787d572
1 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
assets/css/screen.css
View file

@ -483,7 +483,7 @@ margin on the iframe, cause it breaks stuff. */
.main-nav { .main-nav {
position: relative; position: relative;
padding: 15px; padding: 35px 40px;
margin: 0 0 30px 0; margin: 0 0 30px 0;
} }
@ -559,7 +559,15 @@ margin on the iframe, cause it breaks stuff. */
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 60px;
border: none; border: none;
background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
.no-cover .main-nav.overlay {
background: none;
} }
.main-nav.overlay a { .main-nav.overlay a {
@ -1325,7 +1333,7 @@ body:not(.post-template) .post-title {
@media only screen and (max-width: 900px) { @media only screen and (max-width: 900px) {
.main-nav { .main-nav {
padding: 10px; padding: 15px;
} }
blockquote { blockquote {
@ -1487,14 +1495,6 @@ body:not(.post-template) .post-title {
padding: 0 12px; padding: 0 12px;
} }
.main-nav.overlay {
color: #fff;
background: rgba(0,0,0,0.4);
background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
.main-nav.overlay a:hover { .main-nav.overlay a:hover {
color: #fff; color: #fff;
border-color: transparent; border-color: transparent;