<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

    <title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
    {% if meta.description %}
        <meta name="description" content="{{ meta.description|striptags }}" />
    {% endif %}
    {% if meta.robots %}
        <meta name="robots" content="{{ meta.robots }}" />
    {% endif %}

    {% if current_page %}
        <link rel="canonical" href="{{ current_page.url }}" />
    {% endif %}

    <link rel="stylesheet" href="{{ theme_url }}/css/knaccs.css" type="text/css" />
    <link rel="stylesheet" href="{{ theme_url }}/css/style.css" type="text/css" />
</head>
<body{% if config.theme_config.widescreen %} class="widescreen"{% endif %}>

    <div id="header" role="banner">
        <div class="container">
            <a id="nav-toggle" title="Toggle Menu" role="button" aria-controls="nav" aria-expanded="false" tabindex="1">
                <span class="icon-menu" aria-hidden="true"></span>
                <span class="sr-only">Toggle Menu</span>
            </a>
            {% if pages["_meta"].meta.logo %}
                <div id="logo" aria-hidden="true">
                    <a href="{{ "index"|link }}">
                        <img src="{{ pages["_meta"].meta.logo|url }}" alt="" />
                    </a>
                </div>
            {% endif %}
            <div id="title"{{ pages["_meta"].meta.tagline ? ' class="tagline"' }}>
                <a href="{{ "index"|link }}">
                    <h1>{{ site_title }}</h1>
                    {{ pages["_meta"].meta.tagline|markdown }}
                </a>
            </div>
            <div id="nav" role="navigation" tabindex="-1">
                <ul>
                    {% for page in pages(depthOffset=-1) if page.title and not page.hidden %}
                        <li{% if page.id == current_page.id %} class="active"{% endif %}>
                            <a href="{{ page.url }}">{{ page.title }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    <div id="main" role="main">
        <div class="container">
            {{ content }}
        </div>
    </div>

    <div id="footer">
        <div class="container">
            <div class="social">
                {% for social in pages["_meta"].meta.social %}
                    <a href="{{ social.url }}" title="{{ social.title }}" role="button">
                        <span class="icon-{{ social.icon }}" aria-hidden="true"></span>
                        <span class="sr-only">{{ social.title }}</span>
                    </a>
                {% endfor %}
            </div>
            <p>
                <a href="http://picocms.org/">Pico</a> was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a>
                and is maintained by <a href="https://github.com/picocms/Pico/graphs/contributors">The Pico Community</a>.
                Released under the <a href="https://github.com/picocms/Pico/blob/master/LICENSE.md">MIT license</a>.
            </p>
        </div>
    </div>

    <script src="{{ theme_url }}/js/modernizr-3.3.1-custom.min.js" type="text/javascript"></script>
    <script src="{{ theme_url }}/js/utils.js" type="text/javascript"></script>
    <script src="{{ theme_url }}/js/pico.js" type="text/javascript"></script>

</body>
</html>
