<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Handcrank Site Generator</title>

    <!-- Viewport meta tag to help with those pesky mobile browser, there such a fad -->
    <meta id="viewport" name="viewport" content="initial-scale=0.625, width=512, maximum-scale=0.625, user-scalable=no" />

    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.2/build/cssreset/reset-min.css&3.1.2/build/cssfonts/fonts-min.css">
    <link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
    <link rel="stylesheet/less" href="css/main.less" />
    <link rel="stylesheet/less" href="css/typography.less" />
    <link rel="stylesheet/less" href="css/pygments.less" />

    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>
    <script src="js/less-1.0.35.js"></script>
    <script src="js/folders.js"></script>

    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    </head>
    <body>
        {% set tab_cycler = cycler('left', 'middle', 'right') %}

        <section class="folders">
            <header>handcrank Documentation</header>

            {% if gathering %}
                {% for title in gathering %}
                    <article class="folder">
                        <!-- To expand the folder do the following:
                        <dl class="expand"> -->
                        <dl>
                            <!-- To open the folder do the following:
                            <dt class="open"> -->
                            <dt class="{{ tab_cycler.next() }}">
                                <div class="tab">
                                    <a href="">
                                        <h1 rel="{{ gathering[title]['basename'] }}"><span>{{ title }}</span></h1> 
                                    </a>
                                </div>
                            </dt>
                            <dd>
                                <section class="doc">
                                    {{ gathering[title]['fragment'] }}
                                </section>
                            </dd>
                        </dl>
                    </article>
                {% endfor %}
            {% endif %}
        </section>

        <footer>
            <div class="handle"></div>
            <figure class="tab-hint">
                Clicking the tabs will reveal the content    
            </figure>
            <a href="http://github.com/robmadole/handcrank">
                <div class="label">
                    <img src="img/little-crank.png" width="60" />
                    <span>Created with handcrank</span>
                </div>
            </a>
        </footer>

    </body>
</html>
