layout: coverwrapper


<div id=“postgrid” class=“home”>

{{ content }}
<div class="grid">
            <div class="grid-sizer"></div>
            {% for post in site.posts %}
            <div class="grid-item">         
                    {% if post.image %} 
                            <img src="{{ post.image | prepend: site.baseurl }}" /> 
                    {% endif %}
                    <a href="{{ post.url | relative_url }}"> 
                            <h2>{{ post.title | escape }}</h2>
                    </a>
                    {% assign date_format = site.ons.date_format | default: "%-d %b, %Y" %}
                    <p>{{ post.date | date:date_format }}</p>
                    <p>{{ post.excerpt | truncate: 140 }}</p>
            </div>
            {% endfor %}
    </div>

</div>

{% include footer.html %}

<script type=“text/javascript” src=“{{ ”/assets/js/masonry.pkgd.min.js“ | relative_url }}”></script>

<script type="text/javascript" src="{{ "/assets/js/imagesloaded.pkgd.min.js"  | relative_url }}"></script>
<script type="text/javascript">
        function applyMasonryGrid() {
                // init Masonry
                var $grid = $('.grid').masonry({
                  itemSelector: '.grid-item',
                  columnWidth: '.grid-sizer',
                  gutter: 10,
                  fitWidth: true
                });
                // layout Masonry after each image loads
                $grid.imagesLoaded().progress( function() {
                  $grid.masonry();
                });  
        }

        $(function() {
                applyMasonryGrid();
        });

        $(window).resize(function() {
                applyMasonryGrid();
        });

</script>