snipette/weflock
snipette/weflock
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add author image to post author-box, if available

Browse source
This commit is contained in:
John O'Nolan 2014-07-21 20:19:49 +02:00
parent 91ca337fe6
commit f6ee7d89f9
2 changed files with 31 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
assets/css/screen.css
View file

@ -811,8 +811,8 @@ body:not(.post-template) .post-title {
/* The author credit area after the post */ /* The author credit area after the post */
.post-footer { .post-footer {
position: relative; position: relative;
margin: 4rem 0 0 0; margin: 6rem 0 0 0;
padding: 4rem 0 0 0; padding: 6rem 0 0 0;
border-top: #EBF2F6 1px solid; border-top: #EBF2F6 1px solid;
} }
@ -882,7 +882,7 @@ body:not(.post-template) .post-title {
links remain at a fixed width the whole time */ links remain at a fixed width the whole time */
.post-footer .share { .post-footer .share {
position: absolute; position: absolute;
top: 4rem; top: 6rem;
right: 0; right: 0;
width: 140px; width: 140px;
} }
@ -1025,26 +1025,41 @@ body:not(.post-template) .post-title {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
position: relative; position: absolute;
width: 120px; top: -40px;
height: 120px; left: 50%;
margin: -100px auto 0; margin-left: -40px;
width: 80px;
height: 80px;
border-radius: 100%; border-radius: 100%;
overflow: hidden; overflow: hidden;
padding: 3px; padding: 6px;
background: #fff; background: #fff;
z-index: 2; z-index: 2;
box-shadow: #E7EEF2 0 0 0 1px;
} }
.author-image .img { .author-image .img {
position: relative;
display: block; display: block;
width: 114px; width: 100%;
height: 114px; height: 100%;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
border-radius: 100%; border-radius: 100%;
} }
.author-profile .author-image {
position: relative;
left: auto;
top: auto;
width: 120px;
height: 120px;
padding: 3px;
margin: -100px auto 0 auto;
box-shadow: none;
}
.author-title { .author-title {
margin: 1.5rem 0 1rem; margin: 1.5rem 0 1rem;
} }
@ -1593,7 +1608,7 @@ body:not(.post-template) .post-title {
} }
.post-footer { .post-footer {
padding: 4rem 0; padding: 5rem 0 3rem 0;
text-align: center; text-align: center;
} }

7
post.hbs
View file

@ -21,8 +21,11 @@
</section> </section>
<footer class="post-footer"> <footer class="post-footer">
<a class="subscribe icon-feed" href="{{@blog.url}}/rss/"><span class="tooltip">Subscribe!</span></a> {{#if author.image}}
<figure class="author-image">
<A class="img" href="{{@blog.url}}/author/{{author.slug}}" style="background-image: url({{author.image}})"><span class="hidden">{{author.name}}'s Picture</span></a>
</figure>
{{/if}}
<section class="author"> <section class="author">
<h4><a href="{{@blog.url}}/author/{{author.slug}}">{{author.name}}</a></h4> <h4><a href="{{@blog.url}}/author/{{author.slug}}">{{author.name}}</a></h4>
<p>{{author.bio}}</p> <p>{{author.bio}}</p>