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 */
|
/* 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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
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 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>
|
||||||
|
|
Loading…
Reference in New Issue