index.html

--- 
layout: default 
activeTab: "blog"
spielTitle: Hi there. 
spiel: I'm Nathan, and this is my blog. Enjoy your stay.
---
<a name="top"></a>
<h1>The latest spicy discourse,<br> hot off the keyboard.</h1>
<p><a href="https://nathanupchurch.com/feed.xml"><span>Subscribe: <i class="fas fa-rss"></i></span></a></p>
<div class="posts">
    {% for post in paginator.posts %}
        {% assign loopindex = forloop.index | modulo: 2 %}
        {% if forloop.first == true %}
            <div class="row">
                <article style="background-image: url({{ site.baseurl }}{{ post.featured-image }})" class="post twelve columns wow fadeIn card featured" data-wow-duration=".5s" data-wow-delay=".2s">
                    <a class="cardCover" href="{{ site.baseurl }}{{ post.url }}">
                        <h1>{{ post.title }}</h1>
                        <p class="entry snippet">{{ post.excerpt }}</p>
                        <div class="cardInfo">
                            <button>Read More</button>
                            <p>{{ post.date | date: '%B %d, %Y' }}</p>
                        </div>
                    </a>
                </article>
            </div>
        {% elsif loopindex == 0 %}
            <div class="row">
                <article style="background-image: url({{ site.baseurl }}{{ post.featured-image }})" class="post six columns wow fadeIn card" data-wow-duration=".5s" data-wow-delay=".4s">
                    <a class="cardCover" href="{{ site.baseurl }}{{ post.url }}">
                        <h1>{{ post.title }}</h1>
                        <p class="entry snippet">{{ post.excerpt }}</p>
                        <div class="cardInfo">
                            <button>Read More</button>
                            <p>{{ post.date | date: '%B %d, %Y' }}</p>
                        </div>
                    </a>
                </article>
        {% else %}
                <article style="background-image: url({{ site.baseurl }}{{ post.featured-image }})" class="post six columns wow fadeIn card" data-wow-duration=".5s" data-wow-delay=".6s">
                    <a class="cardCover" href="{{ site.baseurl }}{{ post.url }}">
                        <h1>{{ post.title }}</h1>
                        <p class="entry snippet">{{ post.excerpt }}</p>
                        <div class="cardInfo">
                            <button>Read More</button>
                            <p>{{ post.date | date: '%B %d, %Y' }}</p>
                        </div>
                    </a>
                </article>
            </div>
        {% endif %}
    {% endfor %}
    <!--######################################################## 
                        PAGINATION NAV        
    ########################################################-->
    <!-- render pagination links if there are more than one pages -->
    {% if paginator.total_pages > 1 %}
        <div class="pagination">    
            {% if paginator.previous_page %}
                <!-- special case the second page to link back to index.html -->
                {% if paginator.page == 2 %}
                    <a href="/"><i class="fas fa-caret-left"></i> Prev</a>
                {% else %}
                    <a href="/page/"><i class="fas fa-caret-left"></i> Prev</a>
                {% endif %}    
            {% else %}
            <!-- if no 'previous' pages exit, render a span rather than an anchor -->
                <span><i class="fas fa-caret-left"></i> Prev</span>
            {% endif %}
        
            {% if paginator.next_page %}    
                <a class='next' href="{{ paginator.next_page_path }}">Next <i class="fas fa-caret-right"></i></a>
            {% else %}
            <!-- if no 'next' pages exit, render a span rather than an anchor -->
                <span class='next'>Next <i class="fas fa-caret-right"></i></span>
            {% endif %}
        </div>
    {% endif %}
    <!--######################################################## 
                        END PAGINATION NAV        
    ########################################################-->
</div>
    <!--######################################################## 
                            JSCROLL 
    ########################################################-->   
    <script type="text/javascript">
        $(function() {    
            $('.posts').jscroll({
                contentSelector: ".posts",
                nextSelector: '.next'
            });
        });
    </script>
    <!--######################################################## 
                            END JSCROLL 
    ########################################################-->