index.html

---
layout: default
---
<div class="col-sm-12">
    <div class="page">
        {% for post in site.posts %}
            {% if post.archive == false %}
            <div class="page-item">
                <div class="col-sm-8">
                    <ul class="page-item-title">
                        <li><time class="timeago meta" datetime="{{ post.date |  date: "%A %-d %B %Y" }}">{{ post.date }}</time>
                        <a class="meta pull-right comments-meta" href="{{ post.url | prepend: site.url }}#disqus_thread">0 <i class="fa fa-comments-o fa-lg"></i></a></li>
                        <li><a class="title" href="{{ post.url | prepend: site.url }}">{{ post.title }}</a></li>
                    </ul>
                </div>
                <div class="col-sm-4 hide-on-phone">
                    <ul class="page-item-title pull-right meta">
                        <li><a href="{{ post.url | prepend: site.url }}#disqus_thread">0 <i class="fa fa-comments-o fa-lg"></i></a></li>
                        <li><a href="{{ post.url | prepend: site.url }}">more <i class="fa fa-ellipsis-h"></i></a></li>
                        <li><a class="pib-indicator">gist <i class="fa fa-expand"></i></a>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-12 page-item-body">
                    {{post.excerpt}}
                </div>
            </div>
            {% endif %}
        {% endfor %}
    </div>
</div>
<script>
$(document).ready(function() {
    $(".page").children().first().find(".page-item-body").css( "display", "block" );
    $(".page").children().first().find(".pib-indicator")
        .find("i").toggleClass("fa-compress").toggleClass("fa-expand");

    $(".page-item .pib-indicator").click(function() {
        var preview = $(this);
        preview.find("i").toggleClass("fa-expand").toggleClass("fa-compress");
        $(this).closest(".page-item").find(".page-item-body").toggle("slow", function() {});
    });
});
</script>