index.html

{% extends "_base.html" %}

{% block scripts %}
<script type='text/javascript' src='js/vendor.min.js'></script>
<script type='text/javascript' src='js/app.min.js'></script>
{% endblock %}

{% block css %}
<link rel="stylesheet" type="text/css" href="css/styles.css">
{% endblock %}

{% block meta %}
<meta property="fb:app_id" content="306836229411287" />
<meta http-equiv="content-type" content="text/html; charset=utf-8">
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class='advert-wrapper'>
        <div class='advert center' data-ad-type='leaderboard'></div>
    </div>
    <article class='constrained1024'>
        <section id='intro'>
            <div class='advert-wrapper right'>
                <div class='advert' data-ad-type='cube'></div>
            </div>            
            <h1>{{ hede|process_text() }}</h1>
            <h2>{{ subhede }}</h2>

            {{ chatter|markdown }}
        </section>
        <section id='chart-wrapper' class='visible-md-block visible-lg-block'>
            {######  TABLET+ CHARTING #####}
            <a href='javascript:void()' class='zoomer btn btn-default btn-small'>ZOOM IN</a>
            <a href="javascript:resetButtons('true')" class='btn btn-default btn-small'>RESET HIGHLIGHTS</a>
            <em>Click or hover to highlight a genre/band. Zoom in for more information</em>
            <div id='chart-key-wrapper'>
                <div id='chart-key' data-spy='affix' >
                    <!-- <div class='clearfix'></div> -->
                    <ul class='list-inline list-unstyled'>
                    {% for genre in genres %}
                        <li>
                            <a href='javascript:void()' class='genre-btn btn .genre-btn--{{ genre.genre_class }} nobreak' data-genre='{{ genre.genre_class }}'>
                                <span class='box box--{{ genre.genre_class }}'></span>
                                {% if genre.genre|lower == 'other' %}
                                    {{ genre.genre }}&#42;
                                {% else %}
                                    {{ genre.genre }}
                                {% endif %}
                            </a>
                            </li>
                    {% endfor %}
                    </ul>
                    {% set festivals = [1991,1992,1993,1994,1995,1996,1997,2003,2005,2006,2007,2008,2009, 2010, 2011, 2012,2013, 2014, 2015, 2016] %}

                  {% include "_years-header.html" %}
                </div>
            </div>
            {% include '_lolla-chart.html' %}
        </section>
        <section id='chart-wrapper-mobile' class='visible-sm-block visible-xs-block'>
            <div class="alert visible-sm-block visible-xs-block">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                {{ dont_use_phone_alert|process_text }}
            </div>
            {######  PHONE CHARTING #####}
            {% include '_mobile-chart.html' %}


        </section>
        <div id='note' class='credits'>
            <p>{{ other_note }}</p>
            <p>{{ sources }}</p>
            <p>{{ credits }}</p>
        </div>
</article>
    {% include '_facebook_comments.html' %}
</div>
{% endblock content %}