Skip to content

Commit

Permalink
Feature post style
Browse files Browse the repository at this point in the history 
reference: https://github.com/TryGhost/Blog/commit/556eb8005d2e43881b727a1d7ea0c04ab68e82bb
  • Loading branch information
@Kikobeats
Kikobeats committed Dec 27, 2015
1 parent 5a00bf3 commit 50ea993
Show file tree
Hide file tree
Showing 2 changed files with 202 additions and 80 deletions.
97 changes: 97 additions & 0 deletions assets/scss/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -805,6 +805,103 @@ pre[class*="language-"] {
cursor: help;
}

.wrap article aside {
display: none;
}

.wrap.featured {
.blog-content {
width: 100%;
}

.blog-sidebar {
display: none;
}

article {
max-width: 700px;
margin: 0 auto 0;
font-size: 1.15em;
}

.post-title {
margin-top: 480px;

@media (max-width: 900px) {
margin-top: 280px;
}

@media (max-width: 500px) {
margin-top: 140px;
}
}

aside {
display: block;
float: right;
width: 300px;
color: #111;
border-top: 3px solid #55acee;
margin-top: 5px;
margin-right: -150px;
margin-left: 30px;
padding: 20px 30px 25px;
font-size: 15px;
line-height: 1.8em;

@media (max-width: 1020px) {
display: none;
}
}

.post-content .full-img {
width: calc(100% + 120px);
max-width: none;
margin-left: -60px;
margin-right: -60px;

@include breakpoint(1100px) {
width: calc(100% + 30px);
margin-left: -15px;
margin-right: -15px;
}
}
}

/* Hero */

.hero {
position: absolute;
top: -50px;
right: -60px;
left: -60px;
overflow: hidden;

@media (max-width: 850px) {
top: -40px;
right: -11%;
left: -11%;
}
}

.hero-image {
height: 500px;
background: #eee no-repeat center center;
background-size: cover;
}

@media (max-width: 900px) {
.hero-image {
height: 300px;
}
}

@media (max-width: 500px) {
.hero-image {
height: 200px;
}
}

/* ==========================================================================
Custom
========================================================================== */
Expand Down
185 changes: 105 additions & 80 deletions post.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,116 @@
{{!< default}}

<div class="wrap">
<section class="blog-content">

<article class="{{post_class}}">
{{#post}}

<a class="post-meta" href="{{@blog.url}}">&larr; Volver a la Portada</a>

<h1 class="post-title">{{{title}}}</h1>
<section class="post-meta">
<img class="author-img" src="{{author.image}}" alt="Author image" nopin="nopin" />
<span class="author-name">{{author}}</span>
on the
<time datetime="{{date format='YYYY-MM-DD'}}">{{date format="Do el MMMM YYYY"}}</time>
<span class="tags">{{tags prefix="• " separator=" "}}</span>
</section>

<section class="post-content">
{{#if image}}<img src="{{image}}" alt="Post image" />{{/if}}
{{content}}
</section>

<footer class="post-footer">

<section class="share">
<div class="fb-like" data-href="{{url absolute="true"}}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

<a href="https://twitter.com/share" class="twitter-share-button" data-url="{{url absolute="true"}}" data-text="{{title}}" data-via="TryGhost" data-related="TryGhost">Tweet</a>

<div class="g-plusone" data-size="medium" data-href="{{url absolute="true"}}"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

<a data-pocket-label="pocket" data-pocket-count="horizontal" data-pocket-align="left" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

<a href="//www.pinterest.com/pin/create/button/?url={{url absolute="true"}}&description={{title}}" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
p.setAttribute('data-pin-hover', true);
f.parentNode.insertBefore(p, f);
}(document));
</script>
<div class="wrap {{post_class}}">
<section class="blog-content">

<article>
{{#post}}

{{! If post is featured and has an image, make a big hero banner }}
{{#if image}}
{{#if featured}}
<div class="hero">
<div class="hero-image" style="background-image: url({{image}});"></div>
</div>
{{/if}}
{{/if}}

<a class="post-meta" href="{{@blog.url}}">&larr; Volver a la Portada</a>

<h1 class="post-title">{{{title}}}</h1>
<section class="post-meta">
<img class="author-img" src="{{author.image}}" alt="Author image" nopin="nopin" />
<span class="author-name">{{author}}</span>
on the
<time datetime="{{date format='YYYY-MM-DD'}}">{{date format="Do el MMMM YYYY"}}</time>
<span class="tags">{{tags prefix="• " separator=" "}}</span>
</section>

<section class="post-content">
{{#if image}}{{#unless featured}}<img src="{{image}}" alt="Post image" />{{/unless}}{{/if}}
{{content}}
</section>

<footer class="post-footer">

<section class="share">
<div class="fb-like" data-href="{{url absolute="true"}}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

<a href="https://twitter.com/share" class="twitter-share-button" data-url="{{url absolute="true"}}" data-text="{{title}}" data-via="TryGhost" data-related="TryGhost">Tweet</a>

<div class="g-plusone" data-size="medium" data-href="{{url absolute="true"}}"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>

<a data-pocket-label="pocket" data-pocket-count="horizontal" data-pocket-align="left" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">
! function(d, i) {
if (!d.getElementById(i)) {
var j = d.createElement("script");
j.id = i;
j.src = "https://widgets.getpocket.com/v1/j/btn.js?v=1";
var w = d.getElementById(i);
d.body.appendChild(j);
}
}(document, "pocket-btn-js");
</script>

<a href="//www.pinterest.com/pin/create/button/?url={{url absolute="true"}}&description={{title}}" data-pin-do="buttonPin" data-pin-config="beside">
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>
<script type="text/javascript">
(function(d) {
var f = d.getElementsByTagName('SCRIPT')[0],
p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
p.setAttribute('data-pin-hover', true);
f.parentNode.insertBefore(p, f);
}(document));
</script>
</section>

<section class="author">
<img class="author-img" src="{{author.image}}" alt="Author image" nopin="nopin" />
<div class="author-meta">
<h4>{{author.name}}</h4>
<p>{{author.bio}} <a href="{{author.website}}">{{author.website}}</a></p>
</div>
</section>

<section class="read-next">
{{#next_post}}
<a class="read-next-story {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}" href="{{url}}">
<section class="post">
<h2>{{title}}</h2>
<p>{{excerpt words="19"}}&hellip;</p>
</section>
</a>
{{/next_post}}
</section>

<section class="author">
<img class="author-img" src="{{author.image}}" alt="Author image" nopin="nopin" />
<div class="author-meta">
<h4>{{author.name}}</h4>
<p>{{author.bio}} <a href="{{author.website}}">{{author.website}}</a></p>
</div>
</section>

<section class="read-next">
{{#next_post}}
<a class="read-next-story {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}" href="{{url}}">
<section class="post">
<h2>{{title}}</h2>
<p>{{excerpt words="19"}}&hellip;</p>
</section>
</a>
{{/next_post}}
</section>

<a class="button-add large wide" data-toggle="modal" data-target="#blogsubscribe">Subscríbete y recíbelo en tu correo</a>
<a class="button-add large wide" data-toggle="modal" data-target="#blogsubscribe">Subscríbete y recíbelo en tu correo</a>

</footer>
</footer>

<section class="comments">
{{> comments}}
</section>
<section class="comments">
{{> comments}}
</section>

{{/post}}
</article>
{{/post}}
</article>

</section>
</section>

{{> sidebar}}
{{> sidebar}}

</div>

0 comments on commit 50ea993

Please sign in to comment.