---
layout: default
---

<div id="index" class="row">
    <div class="col-sm-9">
        <div class="post-area">
            <div class="post-list-header">
                Articles
            </div>
            <div class="post-list-body">
                <div class="all-posts" post-cate="All">
                    {% for post in paginator.posts %}
                        {% include post-list.html %}
                    {% endfor %}

                    <div class="paginator">
                        {% if paginator.total_pages > 1 %}

                        {% if paginator.previous_page %}
                        <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">Prev</a>
                        {% endif %}

                        {% for page in (1..paginator.total_pages) %}
                        {% if page == paginator.page %}
                        <span class="active">{{ page }}</span>
                        {% elsif page == 1 %}
                        <a href="{{ '/index.html' | prepend: site.baseurl | replace: '//', '/' }}">{{ page }}</a>
                        {% else %}
                        <a href="{{ site.paginate_path | prepend: '/' | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
                        {% endif %}
                        {% endfor %}

                        {% if paginator.next_page %}
                        <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next</a>
                        {% endif %}

                        {% endif %}
                    </div>
                </div>
                {% for category in site.categories %}
                <div post-cate="{{ category | first }}">
                    {% for posts in category %}
                    {% for post in posts %}
                    {% if post.url %}
                        {% include post-list.html %}
                    {% endif %}
                    {% endfor %}
                    {% endfor %}
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="categories-list-header">
            Categories
        </div>

        <a href="javascript:;" class="categories-list-item" cate="All">
            All<span class="my-badge"> {{ site.posts | size }}</span>
        </a>

        <!-- Categories list is sorted alphabetically according to category name. These display in the right-side menu. -->
        {% assign sorted_categories = site.categories | sort %}
        {% for category in sorted_categories %}
        <a href="javascript:;" class="categories-list-item" cate="{{ category | first }}">
            {% assign cat_name = category | first %}
            {{ cat_name }} <span class="my-badge">{{ category | last | size }}</span>
        </a>
        {% endfor %}

        <hr class="my-hr" />

        <!-- The big site logo (the pixel-art computer - "Projects" page link) -->
        <div id="my-banner-container">
            <a href="{{ "/projects/" | prepend: site.baseurl }}">
                <img src="{{ "/static/images/banner-projects.jpg" | prepend: site.baseurl }}" alt="To Projects page..." title="To Projects page..." class="my-banner">
            </a>
        </div>

    </div>
</div>