Make everything look good with no cover images + crossbrowser fixes
This commit is contained in:
parent
6ae074b724
commit
4bd2ce6740
|
@ -118,7 +118,7 @@ table { border-collapse: collapse; border-spacing: 0; }
|
|||
|
||||
/* Apply these base styles to all icons */
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
font-family: "icons";
|
||||
font-family: "icons", "Open Sans", sans-serif;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
|
@ -610,6 +610,8 @@ margin on the iframe, cause it breaks stuff. */
|
|||
}
|
||||
|
||||
.no-cover.main-header {
|
||||
min-height: 160px;
|
||||
max-height: 40%;
|
||||
background: #f5f8fa;
|
||||
}
|
||||
|
||||
|
@ -621,6 +623,12 @@ margin on the iframe, cause it breaks stuff. */
|
|||
color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.no-cover .main-nav.overlay .back-button,
|
||||
.no-cover .main-nav.overlay .subscribe-button {
|
||||
color: rgba(0,0,0,0.4);
|
||||
border-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* Add subtle load-in animation for content on the home page */
|
||||
.home-template .page-title {
|
||||
-webkit-animation: fade-in-down 0.6s;
|
||||
|
@ -974,8 +982,15 @@ body:not(.post-template) .post-title {
|
|||
margin-bottom: -60px; /* Pull the author bio up to overlap the cover */
|
||||
}
|
||||
|
||||
.no-cover.author-head.main-header {
|
||||
height: 10%;
|
||||
min-height: 100px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.author-profile {
|
||||
padding-bottom: 5rem;
|
||||
margin-top: 0 !important;
|
||||
padding: 0 15px 5rem 15px;
|
||||
border-bottom: #EBF2F6 1px solid;
|
||||
text-align: center;
|
||||
}
|
||||
|
@ -1172,7 +1187,6 @@ body:not(.post-template) .post-title {
|
|||
font-size: 1rem;
|
||||
line-height: 1.7em;
|
||||
color: #BBC7CC;
|
||||
background: #f5f8fa;
|
||||
}
|
||||
|
||||
.site-footer a {
|
||||
|
@ -1370,6 +1384,10 @@ body:not(.post-template) .post-title {
|
|||
height: 30%;
|
||||
}
|
||||
|
||||
.no-cover.author-head.main-header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
@ -1384,6 +1402,10 @@ body:not(.post-template) .post-title {
|
|||
height: 40%;
|
||||
}
|
||||
|
||||
.no-cover.main-header {
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.archive-template .main-header {
|
||||
max-height: 20%;
|
||||
min-height: 160px;
|
||||
|
@ -1440,6 +1462,14 @@ body:not(.post-template) .post-title {
|
|||
background: transparent;
|
||||
}
|
||||
|
||||
.no-cover .main-nav.overlay {
|
||||
background: none;
|
||||
}
|
||||
.no-cover .main-nav.overlay .back-button,
|
||||
.no-cover .main-nav.overlay .subscribe-button {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.main-nav.overlay .back-button,
|
||||
.main-nav.overlay .subscribe-button {
|
||||
border-color: transparent;
|
||||
|
@ -1622,24 +1652,24 @@ body:not(.post-template) .post-title {
|
|||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-10px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes fade-in-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-10px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
{{! The tag above means - insert everything in this file into the {body} of the default.hbs template }}
|
||||
|
||||
{{! The big featured header }}
|
||||
<header class="main-header author-head" {{#if @blog.cover}}style="background-image: url({{author.cover}})"{{/if}}>
|
||||
<header class="main-header author-head {{#if author.cover}}" style="background-image: url({{author.cover}}){{else}}no-cover{{/if}}">
|
||||
<nav class="main-nav overlay clearfix">
|
||||
<a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
|
||||
<a class="subscribe-button icon-feed" href="{{@blog.url}}/author/{{author.slug}}/rss/">{{author.name}}</a>
|
||||
|
|
2
tag.hbs
2
tag.hbs
|
@ -2,7 +2,7 @@
|
|||
{{! The tag above means - insert everything in this file into the {body} of the default.hbs template }}
|
||||
|
||||
{{! The big featured header }}
|
||||
<header class="tag-head main-header" {{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}>
|
||||
<header class="main-header {{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}">
|
||||
<nav class="main-nav overlay clearfix">
|
||||
<a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
|
||||
<a class="subscribe-button icon-feed" href="{{@blog.url}}/tag/{{tag.slug}}/rss/">{{tag.name}}</a>
|
||||
|
|
Loading…
Reference in New Issue