Make everything look good with no cover images + crossbrowser fixes

This commit is contained in:
John O'Nolan 2014-07-21 19:07:56 +02:00
parent 6ae074b724
commit 4bd2ce6740
3 changed files with 41 additions and 11 deletions

View File

@ -118,7 +118,7 @@ table { border-collapse: collapse; border-spacing: 0; }
/* Apply these base styles to all icons */ /* Apply these base styles to all icons */
[class^="icon-"], [class*=" icon-"] { [class^="icon-"], [class*=" icon-"] {
font-family: "icons"; font-family: "icons", "Open Sans", sans-serif;
speak: none; speak: none;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -610,6 +610,8 @@ margin on the iframe, cause it breaks stuff. */
} }
.no-cover.main-header { .no-cover.main-header {
min-height: 160px;
max-height: 40%;
background: #f5f8fa; background: #f5f8fa;
} }
@ -621,6 +623,12 @@ margin on the iframe, cause it breaks stuff. */
color: rgba(0,0,0,0.5); 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 */ /* Add subtle load-in animation for content on the home page */
.home-template .page-title { .home-template .page-title {
-webkit-animation: fade-in-down 0.6s; -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 */ 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 { .author-profile {
padding-bottom: 5rem; margin-top: 0 !important;
padding: 0 15px 5rem 15px;
border-bottom: #EBF2F6 1px solid; border-bottom: #EBF2F6 1px solid;
text-align: center; text-align: center;
} }
@ -1172,7 +1187,6 @@ body:not(.post-template) .post-title {
font-size: 1rem; font-size: 1rem;
line-height: 1.7em; line-height: 1.7em;
color: #BBC7CC; color: #BBC7CC;
background: #f5f8fa;
} }
.site-footer a { .site-footer a {
@ -1370,6 +1384,10 @@ body:not(.post-template) .post-title {
height: 30%; height: 30%;
} }
.no-cover.author-head.main-header {
padding: 0;
}
} }
@ -1384,6 +1402,10 @@ body:not(.post-template) .post-title {
height: 40%; height: 40%;
} }
.no-cover.main-header {
height: 30%;
}
.archive-template .main-header { .archive-template .main-header {
max-height: 20%; max-height: 20%;
min-height: 160px; min-height: 160px;
@ -1440,6 +1462,14 @@ body:not(.post-template) .post-title {
background: transparent; 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 .back-button,
.main-nav.overlay .subscribe-button { .main-nav.overlay .subscribe-button {
border-color: transparent; border-color: transparent;
@ -1622,24 +1652,24 @@ body:not(.post-template) .post-title {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: translateY(-10px); -webkit-transform: translateY(-10px);
} transform: translateY(-10px);
60% {
opacity: 1;
} }
100% { 100% {
opacity: 1;
-webkit-transform: translateY(0); -webkit-transform: translateY(0);
transform: translateY(0);
} }
} }
@keyframes fade-in-down { @keyframes fade-in-down {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: translateY(-10px); -webkit-transform: translateY(-10px);
} transform: translateY(-10px);
60% {
opacity: 1;
} }
100% { 100% {
opacity: 1;
-webkit-transform: translateY(0); -webkit-transform: translateY(0);
transform: translateY(0);
} }
} }

View File

@ -2,7 +2,7 @@
{{! The tag above means - insert everything in this file into the {body} of the default.hbs template }} {{! The tag above means - insert everything in this file into the {body} of the default.hbs template }}
{{! The big featured header }} {{! 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"> <nav class="main-nav overlay clearfix">
<a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a> <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> <a class="subscribe-button icon-feed" href="{{@blog.url}}/author/{{author.slug}}/rss/">{{author.name}}</a>

View File

@ -2,7 +2,7 @@
{{! The tag above means - insert everything in this file into the {body} of the default.hbs template }} {{! The tag above means - insert everything in this file into the {body} of the default.hbs template }}
{{! The big featured header }} {{! 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"> <nav class="main-nav overlay clearfix">
<a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a> <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> <a class="subscribe-button icon-feed" href="{{@blog.url}}/tag/{{tag.slug}}/rss/">{{tag.name}}</a>