base.html 4.22 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
<!doctype html>
<html lang="{% block html_lang %}{{ DEFAULT_LANG }}{% endblock html_lang %}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{{ SITE_SUBHEADING }}">
    <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>

    <link rel="stylesheet" href="{{ SITEURL }}/theme/css/pure-min.css">

    <!--[if lte IE 8]>
        <link rel="stylesheet" href="css/grids-responsive-old-ie-min.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="{{ SITEURL }}/theme/css/grids-responsive-min.css">
    <!--<![endif]-->

    <!--[if lte IE 8]>
            <link rel="stylesheet" href="css/layouts/marketing-old-ie.css">
        <![endif]-->
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="{{ SITEURL }}/theme/css/layouts/marketing.css">
    <!--<![endif]-->


    <link rel="stylesheet" href="{{ SITEURL }}/theme/css/responsive-style.css">
    <link rel="stylesheet" href="{{ SITEURL }}/theme/css/style.css">

    <link rel="icon" type="image/x-icon" href="{{ SITEURL }}/theme/images/luppp.svg" sizes="32x32">
</head>

<body>

    <div class="header">
Georg Krause's avatar
Georg Krause committed
36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
        <div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed pure-g custom-wrapper" id="menu">
            <div class="pure-u-1 pure-u-md-1-6">
                <a class="pure-menu-heading" href="/">{{ SITENAME }}</a>
                <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
            </div>

            <div class="pure-u-1 pure-u-md-5-6">
                <ul class="pure-menu-list">
                    {% if pages and pages|length > 0 %}
                        {% for p in pages %}
                            {% if p.url %}
                                <li class="pure-menu-item"><a href="/{{ p.url }}" class="pure-menu-link">{{ p.title }}</a></li>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                    {% if LINKS|length > 0 %}
                        {% for title, link in LINKS %}
                            <li class="pure-menu-item"><a href="{{ link }}" class="pure-menu-link">{{ title }}</a></li>
                        {% endfor %}
                    {% endif %}
Georg Krause's avatar
Georg Krause committed
56
                    <li class="pure-menu-item">
Georg Krause's avatar
Georg Krause committed
57 58
                        <a href="https://liberapay.com/gcrkrause/donate">
                            <img alt="Donate using Liberapay" src="{{ SITEURL }}/theme/images/donate.svg" id="liberapay-button">
Georg Krause's avatar
Georg Krause committed
59 60
                        </a>
                    </li>
Georg Krause's avatar
Georg Krause committed
61 62
                </ul>
            </div>
63 64 65 66 67 68 69 70 71
        </div>
    </div>

    {% block content %}{% endblock %}

    <div class="footer l-box is-center">
        {{ FOOTER }}
    </div>

Georg Krause's avatar
Georg Krause committed
72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
    <script>
        (function (window, document) {
            var menu = document.getElementById('menu'),
                WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange' : 'resize';

            function toggleHorizontal() {
                [].forEach.call(
                    document.getElementById('menu').querySelectorAll('.custom-can-transform'),
                    function (el) {
                        el.classList.toggle('pure-menu-horizontal');
                    }
                );
            };

            function toggleMenu() {
                // set timeout so that the panel has a chance to roll up
                // before the menu switches states
                if (menu.classList.contains('open')) {
                    setTimeout(toggleHorizontal, 500);
                }
                else {
                    toggleHorizontal();
                }
                menu.classList.toggle('open');
                document.getElementById('toggle').classList.toggle('x');
            };

            function closeMenu() {
                if (menu.classList.contains('open')) {
                    toggleMenu();
                }
            }

            document.getElementById('toggle').addEventListener('click', function (e) {
                toggleMenu();
                e.preventDefault();
            });

            window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
        })(this, this.document);

    </script>

115 116 117
</body>

</html>