index.html

---
layout: default
---
<!--DOCTOP-->
<script>
  $.doctop({
    url: 'https://docs.google.com/document/d/1yiePHuLkgI3L1bPpEXlrTNCQnhI9KwyOELKquCn52MI/pub',
    archieml: true,
    cache: false,
    callback: function(d){
        //console.log(d.copy.archie);
        view = d.copy.archie;
        //strips the carriage returns for HTML linebreaks
        view.content = d.copy.archie.content.replace(/(\r\n|\n|\r)/gm, "<br />");
        template = $('#template').html();
        Mustache.parse(template);   // optional, speeds up future uses
        rendered = Mustache.render(template, view);
        $('#home-copy').html(rendered);
    }
  });
</script>

<!--PAGE MARKUP-->
<div class="panels panel-loading container">
    <p>Loading...</p>
</div>
<div class="panels panel-front" style="display:none;">
    <section class="intro-content">
        <article>
            <div class="main">
                <div id="home-copy"></div>
                {% include form.html %}
            </div>
            <div class="sidebar">
                {% include sidebar.html %}
            </div>
        </article>
    </section>

    <section>
        <div class="row">
            <h2 class="heading">Recent letters</h2>
            <div id="recent-letters">
            </div>
        </div>
    </section>

    <div id="vancity-promo">
    </div>
</div>

<div class="panels panel-letters" style="display:none;">
    <div class="container">
            <a class="button" href="/">Write your own card by December 14th &amp; enter to win.</a>
            <section class="business-cards">
                    <article class="cards">
                            <div id="letters-list">
                            </div>
                    </article>
            </section>
    </div>
</div>

<div class="panels panel-letter" style="display:none;">
    <div class="container">
            <section class="business-cards">
                    <article class="cards">
                            <div id="letter"></div>
                    </article>
            </section>
    </div>
</div>

<div class="panels panel-businesses" style="display:none;">
    <section>
            <article id="business-listing">
            </article>
    </section>
</div>

<div class="panels panel-business" style="display:none;">
    <div class="container">
            <section>
                    <article class="business">
                            <div id="business-detail"></div>
                            <div id="business-letters-list">
                                <div class='letters'></div>
                            </div>
                    </article>
            </section>
    </div>
</div>