{% assign to_show = 2 %}

<div id=“blog” class=“blog”>

<h1 style="text-align: center;">Blog</h1>

{% assign sorted_posts = site.blog | sort: 'date' | reverse %}
{% for post in sorted_posts %}
    {% if forloop.index <= to_show %}
        <div class="col-md-6 col-lg-6" style="padding: 0px;">
    {% else %}
        <div class="col-md-6 col-lg-6 hidePost" style="padding: 0px;">
    {% endif %}
            <div class="post">
                <div class="postimg" style="background-image: url('{{ post.thumbnail  | relative_url }}');">
                    <div class="info">
                        <p class="title">{{ post.title }}</p>
                        <p class="date">{{ post.date | date: "%B %-d, %Y"}}</p>
                        <p class="desc">{{ post.desc }}</p>
                        <div class="cat">
                            {% for skill in post.skills %}
                                <div class="background">
                                    <p class="skill">{{ skill }}</p>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    <a href="{{ post.link | relative_url }}" class="overlay">
                        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 6em; color: #FFFFFF;">
                            <i class="fas fa-book-open" title="Website"></i>
                        </div>
                    </a>
                </div>
            </div>
        </div>
{% endfor %}

{% assign value = site.blog.size | modulo:2 %}
{% if value != 0 %}
    {% if site.blog.size > 2 %}
        <div id="placeholderPost" class="col-md-6 col-lg-6 hidePost" style="padding: 0px;">
    {% else %}
        <div id="placeholderPost" class="col-md-6 col-lg-6" style="padding: 0px;">
    {% endif %}
            <div class="post">
                <div class="postimg" style="cursor: initial;"></div>
            </div>
        </div>
{% endif %}

<div style="width: 100%; text-align: center;">
    {% if site.blog.size > to_show %}
        <a style="font-size: 2em;" id="PostArrow" href="javascript:void(0);" onclick="postArrow()">
            <i class="fas fa-chevron-down arrow" id="arrowPost"></i>
        </a>
    {% else %}
        <a style="font-size: 2em;">
            <i class="fas fa-chevron-down arrow" style="color: #ffffff;"></i>
        </a>
    {% endif %}
</div>

</div>