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 */
[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);
}
}

View file

@ -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>

View file

@ -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>