path: root/uikit/templates/uikit.html

{% extends "base.html" %}
{% from 'cc_license.html' import license %}
{#  this template contains uikit specific settings  #}
{% block head %}
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <base href="{{ SITEURL }}">

    <!--
    favicons generated with:
    <http://realfavicongenerator.net>

    if you want to generate your own favicon, use this custom path:
    /theme/ico/favicon/
    -->
    <link rel="apple-touch-icon" sizes="57x57" href="/theme/ico/favicon/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/theme/ico/favicon/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/theme/ico/favicon/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/theme/ico/favicon/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/theme/ico/favicon/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/theme/ico/favicon/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/theme/ico/favicon/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/theme/ico/favicon/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/theme/ico/favicon/apple-touch-icon-180x180.png">
    <link rel="icon" type="image/png" href="/theme/ico/favicon/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/theme/ico/favicon/android-chrome-192x192.png" sizes="192x192">
    <link rel="icon" type="image/png" href="/theme/ico/favicon/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="/theme/ico/favicon/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="/theme/ico/favicon/manifest.json">
    <link rel="mask-icon" href="/theme/ico/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="/theme/ico/favicon/favicon.ico">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-TileImage" content="/theme/ico/favicon/mstile-144x144.png">
    <meta name="msapplication-config" content="/theme/ico/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    {{ super() }}
    {#  todo: change to minified version for production  #}
    {#  todo: rename jquery ?  #}
    <script src="/theme/js/lib/jquery-1.11.3.js"></script>
    {% if STYLE == "almost-flat" %}
    <link rel="stylesheet" type="text/css" href="/theme/css/uikit.almost-flat{% if not DEVELOP %}.min{% endif %}.css" />
    {% elif STYLE == "gradient" %}
    <link rel="stylesheet" type="text/css" href="/theme/css/uikit.gradient{% if not DEVELOP %}.min{% endif %}.css" />
    {% else  %}
    <link rel="stylesheet" type="text/css" href="/theme/css/uikit{% if not DEVELOP %}.min{% endif %}.css" />
    {% endif %}
    <!-- custom css -->
    <link rel="stylesheet" type="text/css" href="/theme/css/custom{% if not DEVELOP %}.min{% endif %}.css" />
    <!-- default pygment style is the 'default' style -->
    <link rel="stylesheet" type="text/css" href="/theme/css/pygment{% if not DEVELOP %}.min{% endif %}.css" />
    <script src="/theme/js/uikit{% if not DEVELOP %}.min{% endif %}.js"></script>
    <title>{% block titlename %}{% endblock titlename %} | {{SITENAME}}</title>
{% endblock head %}

{% block body %}
{% if DEVELOP %}
    <div class="uk-alert uk-alert-warning uk-center uk-text-center uk-margin">
        DEVELOP is True. This means that non-minified css/js/… is used and you'll see warnings. Set DEVELOP=False for production.
    </div>
{% endif %}
<div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">
    <nav class="uk-navbar uk-margin-large-bottom">
        <a class="uk-navbar-brand uk-hidden-small" href="">{{ SITENAME }}</a>
        <ul class="uk-navbar-nav uk-hidden-small">
            {#  todo: use jinja 2.8 here and use set menu_macros  #}
            {#  http://jinja.pocoo.org/docs/dev/templates/#block-assignments  #}
            {% include 'menu_macros.html' %}
        </ul>
        <a href="#offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas=""></a>
        <div class="uk-navbar-brand uk-navbar-center uk-visible-small">{{ SITENAME }}</div>
    </nav>
    <div class="uk-grid" data-uk-grid-margin="">
        <main class="uk-width-medium-3-4">
        {% block content %}
        {% endblock content %}
        </main>
        <aside class="uk-width-medium-1-4">
        {% include '_sidebar.html' %}
        </aside>
    </div>
    <footer class="uk-margin-bottom uk-panel uk-panel-box uk-text-center uk-margin-large-top">
    {% block footer %}
        Generated by <a href="https://github.com/getpelican/pelican" class="uk-icon-external-link">pelican</a>
        and styled with <a href="http://getuikit.com" class="uk-icon-external-link">uikit</a>
        and themed by <a href="http://inktrap.org" class="uk-icon-external-link">inktrap</a>
        and made with <a class="uk-icon-heart"></a>
        {#  TODO add link to theme site  #}
        <br/>
        {{ license(SITEURL, LICENSE) }}
        {% if page_name %}
            <br/>
            <a class="uk-icon-rss-square"></a><a href="/{{page_name}}.xml">Feed</a> for this page
        {% endif %}
    {% endblock %}
    </footer>
</div>

<div id="offcanvas" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
        <ul class="uk-nav uk-nav-offcanvas">
            {% include 'menu_macros.html' %}
        </ul>
    </div>
</div>
{% endblock %}