<!DOCTYPE html>
<html class="sg-styleguide">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex">
    <title>Styleguide</title>

    <link rel="shortcut icon" href="/favicon.ico" />

    <link rel="stylesheet" href="{{ version '/frontend/styleguide/css/styleguide.css'}}">
    <link rel="stylesheet" href="{{ version '/frontend/styleguide/css/prism-okaidia.css'}}">
    <link rel="stylesheet" href="{{ version '/frontend/css/style.css'}}">

    {{~> webfonts}}
</head>
<body>
    <header class="sg-header">
        <div class="sg-header__brand">
            <a href="/">
                <svg class="sg-header__brand__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1691 212">
                    <path fill="#373737" fill-rule="evenodd" d="M122.75 34.9c-.86 1.44-1.77 2.52-2.73 3.24-.96.72-2.2 1.08-3.75 1.08-1.63 0-3.53-.8-5.7-2.44-2.15-1.64-4.88-3.44-8.2-5.4-3.3-1.97-7.3-3.77-11.95-5.4-4.65-1.64-10.3-2.45-16.92-2.45-6.24 0-11.76.84-16.56 2.52-4.8 1.68-8.8 3.96-12.02 6.84-3.22 2.8-5.64 6.2-7.27 10.1-1.63 3.9-2.45 8.1-2.45 12.6 0 5.7 1.42 10.5 4.25 14.3 2.83 3.8 6.57 7 11.23 9.7 4.66 2.7 9.94 5 15.84 6.9 5.9 1.9 11.95 4 18.14 6.1 6.2 2.1 12.24 4.4 18.15 7.1 5.9 2.6 11.2 6 15.9 10 4.7 4 8.4 9 11.3 14.8 2.9 5.8 4.3 13 4.3 21.6 0 9-1.5 17.5-4.6 25.4-3.1 7.9-7.5 14.8-13.4 20.6-5.9 5.8-13.1 10.4-21.7 13.8-8.6 3.32-18.3 5-29.3 5-13.3 0-25.5-2.4-36.5-7.26S8.2 192.64.4 184.4l8.04-13.26c.8-1.06 1.7-1.95 2.8-2.67 1.1-.72 2.37-1.08 3.7-1.08 2 0 4.3 1 6.9 3.2 2.6 2.2 5.86 4.6 9.75 7.2 3.9 2.6 8.6 4.9 14.1 7.1 5.5 2.1 12.23 3.2 20.2 3.2 6.63 0 12.53-.9 17.7-2.8 5.2-1.8 9.6-4.4 13.2-7.7 3.6-3.3 6.35-7.3 8.27-11.9 1.9-4.6 2.87-9.8 2.87-15.4 0-6.3-1.4-11.4-4.24-15.4-2.9-4-6.6-7.3-11.2-10s-9.8-4.97-15.7-6.84l-18.1-5.7c-6.2-1.98-12.3-4.26-18.2-6.85-5.9-2.57-11.1-5.93-15.7-10.06-4.6-4.16-8.3-9.3-11.12-15.5-2.83-6.2-4.3-13.88-4.3-23 0-7.3 1.47-14.3 4.3-21.16C16.5 29 20.6 22.95 26 17.7c5.4-5.2 12-9.46 19.96-12.6S62.9.5 73.2.5c11.5 0 22 1.8 31.5 5.5 9.5 3.6 17.86 8.9 24.96 15.8l-6.8 13.2zm187.5-32.25v23.47h-66.68V209h-27.94V26.12h-66.96V2.65h161.57zM419.1 126.92V209h-27.8v-82.08L315.7 2.65h24.5c2.5 0 4.46.62 5.9 1.87 1.44 1.25 2.68 2.78 3.74 4.6l47.23 80.22c1.92 3.36 3.53 6.52 4.83 9.5 1.3 2.98 2.47 5.9 3.52 8.78 1.06-2.97 2.2-5.95 3.46-8.92 1.25-2.98 2.83-6.1 4.75-9.36l47.1-80.2c.85-1.55 2.03-3 3.52-4.4 1.5-1.4 3.43-2.1 5.83-2.1h24.77l-75.75 124.3zm129.6 58.6h89.28V209h-117.2V2.65h27.92v182.88zM795.95 2.66V25.4h-99.07v68.54h80.2v21.9h-80.2v70.4h99.07V209H668.8V2.65h127.15zm132.2 186.05c5.56 0 10.67-.2 15.33-.8 4.66-.5 9.05-1.3 13.18-2.3 4.12-1 8-2.3 11.66-3.8 3.65-1.5 7.3-3.2 10.94-5.1v-45.5H947.3c-1.83 0-3.3-.5-4.4-1.6-1.1-1-1.65-2.3-1.65-3.9v-15.9h63.36V189c-5.1 3.75-10.5 7-16.2 9.8-5.6 2.78-11.6 5.1-18 6.98-6.3 1.87-13.2 3.26-20.5 4.18-7.3.9-15.2 1.36-23.7 1.36-15 0-28.7-2.56-41.2-7.7-12.4-5.14-23.2-12.34-32.2-21.6-9-9.26-16-20.38-21.1-33.34-5-12.96-7.5-27.2-7.5-42.76 0-15.75 2.5-30.1 7.4-43.06s12-24.07 21.2-33.34C861.9 20.26 873 13.08 886 8 899 2.9 913.56.36 929.7.36c8.15 0 15.74.6 22.75 1.8 7 1.2 13.5 2.93 19.5 5.2 6 2.24 11.54 4.98 16.63 8.2 5.1 3.2 9.8 6.84 14.2 10.87l-7.9 12.67c-1.64 2.6-3.75 3.9-6.34 3.9-1.56 0-3.24-.5-5.06-1.6-2.4-1.3-5.1-2.93-8.04-4.9-3-1.9-6.6-3.72-10.9-5.5-4.27-1.77-9.3-3.3-15.1-4.53-5.8-1.24-12.7-1.86-20.68-1.86-11.66 0-22.17 1.9-31.58 5.7-9.4 3.8-17.42 9.2-24.04 16.3-6.62 7.1-11.7 15.6-15.26 25.7-3.54 10.1-5.32 21.3-5.32 33.8 0 13.1 1.87 24.7 5.57 34.9 3.65 10.2 8.9 18.9 15.6 26 6.7 7.1 14.7 12.5 23.9 16.3 9.2 3.8 19.4 5.6 30.5 5.6zm199.58-1.8c8.54 0 16.17-1.4 22.9-4.3 6.7-2.8 12.4-6.9 17.06-12.1 4.6-5.1 8.2-11.3 10.6-18.5 2.4-7.2 3.7-15.1 3.7-23.7V2.7h27.8v125.4c0 11.9-1.9 22.95-5.7 33.12-3.8 10.1-9.2 18.92-16.3 26.4-7.1 7.4-15.7 13.23-25.9 17.5-10.2 4.2-21.6 6.3-34.3 6.3-12.7 0-24.1-2.1-34.3-6.35-10.2-4.2-18.8-10.05-25.9-17.5-7.1-7.43-12.6-16.24-16.4-26.42-3.8-10.2-5.7-21.23-5.7-33.14V2.7h27.8v125.27c0 8.64 1.2 16.56 3.6 23.76 2.4 7.2 6 13.3 10.6 18.5 4.64 5.2 10.35 9.2 17.12 12.1 6.8 2.93 14.4 4.4 23 4.4zm163.15 22.1h-27.94V2.7h27.94V209zm234.14-103.1c0 15.5-2.44 29.6-7.34 42.2-4.9 12.7-11.8 23.5-20.74 32.6-8.92 9.1-19.63 16-32.1 21-12.5 5-26.3 7.4-41.48 7.4h-77.18V2.7h77.18c15.17 0 29 2.46 41.47 7.4 12.48 4.95 23.2 11.96 32.1 21.03 8.94 9 15.85 19.9 20.75 32.6 4.9 12.6 7.34 26.7 7.34 42.2zm-28.65 0c0-12.6-1.73-24-5.2-34-3.44-9.9-8.34-18.4-14.67-25.3-6.34-6.9-14.02-12.2-23.04-15.8-9.03-3.6-19.06-5.4-30.1-5.4h-49.1v161.1h49.1c11.04 0 21.07-1.8 30.1-5.4 9.02-3.6 16.7-8.9 23.04-15.72 6.33-6.86 11.23-15.3 14.68-25.27 3.46-10 5.2-21.3 5.2-34zM1690.2 2.7v22.7h-99.08v68.54h80.2v21.9h-80.2v70.4h99.07V209H1563V2.65h127.15z"/>
                </svg>
            </a>
        </div>

        <button class="sg-header__nav__btn js-mobile-nav-btn">
            <div class="sg-header__nav__btn__icon">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </button>

        <div class="sg-header__nav js-mobile-nav" id="navbar">
            <ul class="sg-header__nav__list" id="subnav">
                {{#each sections}}
                    <li class="sg-header__nav__list__item">
                        <a href="#{{id}}">{{name}}</a>
                        {{#if children}}
                            <ul>
                                {{#each children}}
                                    <li {{#if children}}class="children"{{/if}}>
                                        <a href="#{{ clean id }}" tabindex="-1">{{ clean name }}</a>
                                        {{#if children}}
                                            <ul>
                                                {{#each children}}
                                                    <li>
                                                        <a href="#{{ clean id }}" tabindex="-1">{{ clean name }}</a>
                                                    </li>
                                                {{/each}}
                                            </ul>
                                        {{/if}}
                                    </li>
                                {{/each}}
                            </ul>
                        {{/if}}
                    </li>
                {{/each}}
            </ul>
        </div>
    </header>

    <div class="sg-content" id="spy-content">
        {{#each sections}}
            <section class="section" id="{{ clean id }}">
                <h2 class="section__title">{{ clean name }}</h2>
                {{~> section}}

                {{#children}}
                    {{~> childSection}}
                {{/children}}
            </section>
        {{/each}}
    </div>

    <script src="{{ version '/frontend/styleguide/js/styleguide.js'}}"></script>
    <script src="{{ version '/frontend/js/bundle.js'}}"></script>
</body>
</html>
