{% include html-head.html %}

  <p id="demo-nav"><a href="../">{{ site.name }}</a> Demo</p>

  <h1>{{ page.title }}</h1>
  
  <div id="container" class="variable-sizes">
    {% assign page_position = page.page_position %}
    {% for element in site.elements_ordered limit:20 offset:page_position %}
      {% include element-partial.html %}
    {% endfor %}
  </div>
  
  <script src="../js/jquery-1.4.4.min.js"></script>
  <script src="../src/mini-modernizr.js"></script>
  <script src="../src/jquery.opto-transform.js"></script>
  <script src="../src/jquery.smartresize.js"></script>
  <script src="../src/jquery.isotope.js"></script>
  <script src="../src/jquery.ui.widget.js"></script>
  <script>
    $(function(){
      
      var $container = $('#container');
      
      $container.isotope({
        itemSelector : '.element',
        layoutMode : 'fitRows'
      });
      
    });
  </script>
  
</body>
</html>