index.hbs

{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}

<header class="site-header outer border-primary-top">
    <div class="inner-header">
        <nav class="site-nav">
            <div class="site-nav-left">
                <a class="site-nav-logo" href="{{@site.url}}" aria-label="{{@site.title}}">
                    <img src="{{@site.logo}}">
                </a>
            </div>
            <div class="inner-header">
                <div class="category-holder">
                    <ul class="nav category-nav pull-left">
                        <li class="nav-tag"><a href="/tag/exclusives/" title="Exclusive">Exclusive</a></li>
                        <li class="nav-tag"><a href="/tag/news/" title="News">News</a></li>
                        <li class="nav-tag"><a href="/tag/devices/" title="Devices">Devices</a></li>
                        <li class="nav-tag"><a href="/tag/how-to/" title="How-To">How-To</a></li>
                        <li class="nav-tag"><a href="/tag/technology/" title="Technology">Technology</a></li>
                        <li class="nav-tag"><a href="/tag/apps/" title="Apps & Software">Apps & Software</a></li>
                        <li>
                            <a href="/categories">
                                <span style="margin-left:0.5rem;">More...</span>
                            </a>
                        </li>
                    </ul>
                    <a class="search-btn no-decoration pull-right" href="#searchinghost-easy">
                        <span style="color: white;">
                            <i class="fas fa-search fa-lg"></i>
                        </span>
                    </a>
                    <a class="category-search no-decoration category-xs" href="/categories">
                        <span style="margin-right:1.5rem;"><i class="fas fa-bars fa-2x"></i></span>
                    </a>
                </div>
            </div>
        </nav>
    </div>
</header>




{{!-- The main content area 
<!-- Embla -->

{{> slider}}
--}}

{{!--
<div class="outer-search category-container">
    <div class="inner-header">
        <div class="category-holder">
            <ul class="nav category-nav pull-left">
                <li class="nav-tag"><a href="/tag/exlusive/" title="Exclusive">Exclusive</a></li>
                <li class="nav-tag"><a href="/tag/news/" title="News">News</a></li>
                <li class="nav-tag"><a href="/tag/devices/" title="Devices">Devices</a></li>
                <li class="nav-tag"><a href="/tag/how-to/" title="How-To">How-To</a></li>
                <li class="nav-tag"><a href="/tag/technology/" title="Technology">Technology</a></li>
                <li class="nav-tag"><a href="/tag/apps/" title="Apps & Software">Apps & Software</a></li>
                <li>
                    <a href="/categories">
                        <span style="margin-left:0.5rem;">More...</span>
                    </a>
                </li>
            </ul>
            <a class="search-btn no-decoration pull-right" href="#ghosteasybar">
                <span style="color: white;">
                    <i class="fas fa-search"></i>
                </span>
            </a>
            <a class="category-search no-decoration category-xs" href="/categories">
                <span style="margin-left:0.5rem;"><i class="fas fa-bars"></i> Categories</span>
            </a>
        </div>
    </div>
</div>
--}}


<div class="inner posts">

    <div class="post-feed">
        {{#foreach posts}}

        {{!-- 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}}