{{!< default}} {{!-- The tag above means: insert everything in this file into the {body} of the default.hbs template --}} <header class="site-home-header"> {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}} <div class="inner"> {{> "site-nav"}} <div class="site-header-content"> <h1 class="site-title"> {{#if @site.logo}} <img class="site-logo" src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" /> {{else}} {{@site.title}} {{/if}} </h1> <h2 class="site-description">{{@site.description}}</h2> </div> </div> </div> </header> {{!-- The main content area --}} <main id="site-main" class="site-main outer"> <div class="inner posts"> <div class="post-feed"> {{#foreach posts visibility="all"}} {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}} {{> "post-card"}} {{/foreach}} </div> </div> </main> {{> site-header}} {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}} {{#contentFor "scripts"}} <script> // NOTE: Scroll performance is poor in Safari // - this appears to be due to the events firing much more slowly in Safari. // Dropping the scroll event and using only a raf loop results in smoother // scrolling but continuous processing even when not scrolling $(document).ready(function () { var nav = document.querySelector('.site-nav-main .site-nav'); var feed = document.querySelector('.post-feed'); var lastScrollY = window.scrollY; var lastWindowHeight = window.innerHeight; var lastDocumentHeight = $(document).height(); var ticking = false; function onScroll() { lastScrollY = window.scrollY; requestTick(); } function onResize() { lastWindowHeight = window.innerHeight; lastDocumentHeight = $(document).height(); requestTick(); } function requestTick() { if (!ticking) { requestAnimationFrame(update); } ticking = true; } function update() { var trigger = feed.getBoundingClientRect().top + window.scrollY; var progressMax = lastDocumentHeight - lastWindowHeight; // show/hide nav if (lastScrollY >= trigger - 20) { nav.classList.add('fixed-nav-active'); } else { nav.classList.remove('fixed-nav-active'); } ticking = false; } window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onResize, false); update(); }); </script> {{/contentFor}}