When cover images are used, add subtle gradient top overlay for more contrast behind nav buttons
This commit is contained in:
parent
a2e43b155b
commit
5dc787d572
|
@ -483,7 +483,7 @@ margin on the iframe, cause it breaks stuff. */
|
|||
|
||||
.main-nav {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
padding: 35px 40px;
|
||||
margin: 0 0 30px 0;
|
||||
}
|
||||
|
||||
|
@ -559,7 +559,15 @@ margin on the iframe, cause it breaks stuff. */
|
|||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60px;
|
||||
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 {
|
||||
|
@ -1325,7 +1333,7 @@ body:not(.post-template) .post-title {
|
|||
@media only screen and (max-width: 900px) {
|
||||
|
||||
.main-nav {
|
||||
padding: 10px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
@ -1487,14 +1495,6 @@ body:not(.post-template) .post-title {
|
|||
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 {
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
|
|
Loading…
Reference in New Issue