themes
/
casper
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

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;