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.

98 lines
3.0KB

  1. {{!< default}}
  2. {{!-- The tag above means: insert everything in this file
  3. into the {body} of the default.hbs template --}}
  4. <header class="site-home-header">
  5. {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
  6. <div class="inner">
  7. {{> "site-nav"}}
  8. <div class="site-header-content">
  9. <h1 class="site-title">
  10. {{#if @site.logo}}
  11. <img class="site-logo" src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" />
  12. {{else}}
  13. {{@site.title}}
  14. {{/if}}
  15. </h1>
  16. <h2 class="site-description">{{@site.description}}</h2>
  17. </div>
  18. </div>
  19. </div>
  20. </header>
  21. {{!-- The main content area --}}
  22. <main id="site-main" class="site-main outer">
  23. <div class="inner posts">
  24. <div class="post-feed">
  25. {{#foreach posts}}
  26. {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
  27. {{> "post-card"}}
  28. {{/foreach}}
  29. </div>
  30. </div>
  31. </main>
  32. {{> site-header}}
  33. {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
  34. {{#contentFor "scripts"}}
  35. <script>
  36. // NOTE: Scroll performance is poor in Safari
  37. // - this appears to be due to the events firing much more slowly in Safari.
  38. // Dropping the scroll event and using only a raf loop results in smoother
  39. // scrolling but continuous processing even when not scrolling
  40. $(document).ready(function () {
  41. var nav = document.querySelector('.site-nav-main .site-nav');
  42. var feed = document.querySelector('.post-feed');
  43. var lastScrollY = window.scrollY;
  44. var lastWindowHeight = window.innerHeight;
  45. var lastDocumentHeight = $(document).height();
  46. var ticking = false;
  47. function onScroll() {
  48. lastScrollY = window.scrollY;
  49. requestTick();
  50. }
  51. function onResize() {
  52. lastWindowHeight = window.innerHeight;
  53. lastDocumentHeight = $(document).height();
  54. requestTick();
  55. }
  56. function requestTick() {
  57. if (!ticking) {
  58. requestAnimationFrame(update);
  59. }
  60. ticking = true;
  61. }
  62. function update() {
  63. var trigger = feed.getBoundingClientRect().top + window.scrollY;
  64. var progressMax = lastDocumentHeight - lastWindowHeight;
  65. // show/hide nav
  66. if (lastScrollY >= trigger - 20) {
  67. nav.classList.add('fixed-nav-active');
  68. } else {
  69. nav.classList.remove('fixed-nav-active');
  70. }
  71. ticking = false;
  72. }
  73. window.addEventListener('scroll', onScroll, { passive: true });
  74. window.addEventListener('resize', onResize, false);
  75. update();
  76. });
  77. </script>
  78. {{/contentFor}}