Post image support

This commit is contained in:
John O'Nolan 2014-09-25 17:35:06 +03:00
parent 63535cf5ce
commit e07d0d8775
2 changed files with 46 additions and 12 deletions

View File

@ -589,6 +589,7 @@ margin on the iframe, cause it breaks stuff. */
text-transform: uppercase; text-transform: uppercase;
line-height: 35px; line-height: 35px;
border-radius: 3px; border-radius: 3px;
background: rgba(0,0,0,0.1);
transition: all ease 0.3s; transition: all ease 0.3s;
} }
.back-button:before { .back-button:before {
@ -615,6 +616,7 @@ margin on the iframe, cause it breaks stuff. */
line-height: 35px; line-height: 35px;
white-space: nowrap; white-space: nowrap;
border-radius: 3px; border-radius: 3px;
background: rgba(0,0,0,0.1);
transition: all ease 0.3s; transition: all ease 0.3s;
} }
.subscribe-button:before { .subscribe-button:before {
@ -635,7 +637,9 @@ margin on the iframe, cause it breaks stuff. */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
} }
.no-cover .main-nav.overlay { .no-cover .main-nav.overlay,
.no-cover .back-button,
.no-cover .subscribe-button {
background: none; background: none;
} }
@ -645,13 +649,13 @@ margin on the iframe, cause it breaks stuff. */
.main-nav.overlay .back-button, .main-nav.overlay .back-button,
.main-nav.overlay .subscribe-button { .main-nav.overlay .subscribe-button {
border-color: #fff; border-color: rgba(255,255,255,0.6);
} }
.main-nav.overlay a:hover { .main-nav.overlay a:hover {
color: #222; color: #222;
border-color: rgba(255,255,255,0.8); border-color: #fff;
background: rgba(255,255,255,0.8); background: #fff;
transition: all 0.1s ease; transition: all 0.1s ease;
} }
@ -1057,6 +1061,18 @@ body:not(.post-template) .post-title {
6. Author profile 6. Author profile
========================================================================== */ ========================================================================== */
.post-head.main-header {
height: 65%;
min-height: 180px;
}
.no-cover.post-head.main-header {
height: 85px;
min-height: 0;
margin-bottom: 0;
background: transparent;
}
.tag-head.main-header { .tag-head.main-header {
height: 40%; height: 40%;
min-height: 180px; min-height: 180px;
@ -1420,11 +1436,20 @@ body:not(.post-template) .post-title {
font-size: 1.6rem; font-size: 1.6rem;
} }
.post-head.main-header {
height:45%;
}
.tag-head.main-header, .tag-head.main-header,
.author-head.main-header { .author-head.main-header {
height: 30%; height: 30%;
} }
.no-cover.post-head.main-header {
height: 55px;
padding: 0;
}
.no-cover.author-head.main-header { .no-cover.author-head.main-header {
padding: 0; padding: 0;
} }
@ -1439,7 +1464,7 @@ body:not(.post-template) .post-title {
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.main-header { .main-header {
margin-bottom: 0; margin-bottom: 15px;
height: 40%; height: 40%;
} }
@ -1473,6 +1498,7 @@ body:not(.post-template) .post-title {
line-height: 41px; line-height: 41px;
border-radius: 0; border-radius: 0;
color: #2e2e2e; color: #2e2e2e;
background: transparent;
} }
.back-button:hover, .back-button:hover,
.subscribe-button:hover { .subscribe-button:hover {
@ -1670,6 +1696,10 @@ body:not(.post-template) .post-title {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
.post-head.main-header {
height: 30%;
}
.tag-head.main-header, .tag-head.main-header,
.author-head.main-header { .author-head.main-header {
height: 20%; height: 20%;

View File

@ -3,16 +3,19 @@
{{! The comment above "< default" means - insert everything in this file into {{! The comment above "< default" means - insert everything in this file into
the {body} of the default.hbs template, which contains our header/footer. }} the {body} of the default.hbs template, which contains our header/footer. }}
<nav class="main-nav clearfix"> {{! Everything inside the #post tags pulls data from the post }}
{{#post}}
<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
<nav class="main-nav {{#if image}}overlay{{/if}} 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}}/rss/">Subscribe</a> <a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>
</nav> </nav>
</header>
<main class="content" role="main"> <main class="content" role="main">
<article class="{{post_class}}"> <article class="{{post_class}}">
{{! Everything inside the #post tags pulls data from the post }}
{{#post}}
<header class="post-header"> <header class="post-header">
<h1 class="post-title">{{title}}</h1> <h1 class="post-title">{{title}}</h1>
@ -70,7 +73,8 @@
</footer> </footer>
{{/post}}
</article> </article>
</main> </main>
{{/post}}