From 4bd2ce6740fcb475c8f6e11db2721ee505b9b2f6 Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@ghost.org>
Date: Mon, 21 Jul 2014 19:07:56 +0200
Subject: [PATCH] Make everything look good with no cover images + crossbrowser
 fixes

---
 assets/css/screen.css | 48 +++++++++++++++++++++++++++++++++++--------
 author.hbs            |  2 +-
 tag.hbs               |  2 +-
 3 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/assets/css/screen.css b/assets/css/screen.css
index 7769171..b301648 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -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);
     }
 }
 
diff --git a/author.hbs b/author.hbs
index bfe417b..051b6cc 100644
--- a/author.hbs
+++ b/author.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="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>
diff --git a/tag.hbs b/tag.hbs
index 4259221..ff724a6 100644
--- a/tag.hbs
+++ b/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>