Custom Ghost theme for my blog, based on Casper https://www.geber.ga
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

73 lines
2.1 KiB

  1. <section class="post-full-authors">
  2. <div class="post-full-authors-content">
  3. <p>This post was a collaboration between</p>
  4. <p>{{authors}}</p>
  5. </div>
  6. <ul class="author-list">
  7. {{#foreach authors}}
  8. <li class="author-list-item">
  9. <div class="author-card">
  10. <div class="basic-info">
  11. {{#if profile_image}}
  12. <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
  13. {{else}}
  14. <div class="author-profile-image">{{> "icons/avatar"}}</div>
  15. {{/if}}
  16. <h2>{{name}}</h2>
  17. </div>
  18. <div class="bio">
  19. {{#if bio}}
  20. <p>{{bio}}</p>
  21. <p><a href="{{url}}">More posts</a> by {{name}}.</p>
  22. {{else}}
  23. <p>Read <a href="{{url}}">more posts</a> by this author.</p>
  24. {{/if}}
  25. </div>
  26. </div>
  27. {{#if profile_image}}
  28. <a href="{{url}}" class="moving-avatar"><img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /></a>
  29. {{else}}
  30. <a href="{{url}}" class="moving-avatar author-profile-image">{{> "icons/avatar"}}</a>
  31. {{/if}}
  32. </li>
  33. {{/foreach}}
  34. </ul>
  35. </section>
  36. {{#contentFor "scripts"}}
  37. <script>
  38. // Adds delay to author card dropups to disappear. This gives enough
  39. // time for the user to interact with the author card while they move
  40. // the mouse from the avatar to the card. Also makes space for the
  41. // interacted avatar.
  42. $(document).ready(function () {
  43. var hoverTimeout;
  44. $('.author-list-item').hover(function(){
  45. var $this = $(this);
  46. clearTimeout(hoverTimeout);
  47. $('.author-card').removeClass('hovered');
  48. $(this).children('.author-card').addClass('hovered');
  49. }, function() {
  50. var $this = $(this);
  51. hoverTimeout = setTimeout(function() {
  52. $this.children('.author-card').removeClass('hovered');
  53. }, 800);
  54. });
  55. });
  56. </script>
  57. {{/contentFor}}