<!DOCTYPE html>
<html lang="en">
{% block head %}
  <head>
    <title>
      {% block title %}{{ title }}{% endblock %}
    </title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
    <meta name="description" content="{{ description }}">
    <meta property="og:site_name" content="{{ SITENAME }}">
    <meta property="og:locale" content="{{ DEFAULT_LANG }}">
    <meta property="og:title" content="{{ title }}">
    <meta property="og:description" content="{{ description }}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ SITEURL }}/{{ href }}">
    <meta property="og:image" content="{{ SITEURL }}{{ image_url or '/theme/images/offen-logo-social-media.jpg' }}">
    <meta name="twitter:image:alt" content="Offen logo">
    <meta name="twitter:card" content="summary_large_image">
    {% if template != 'archives' %}
      <link rel="canonical" href="{{ SITEURL }}/{{ href }}">
    {% endif %}
    <link rel="shortcut icon" type="image/x-icon" href="/theme/images/favicon.ico">
    {% assets filters="postcss", output="css/style.min.css", "css/tachyons.min.css", "css/fix.css", "css/fonts.css" %}
      <link rel="stylesheet" href="/{{ ASSET_URL }}">
    {% endassets %}
    <link rel="preload" href="/theme/fonts/rubik-v9-latin-regular.woff2" as="font" crossorigin>
    <link rel="preload" href="/theme/fonts/rubik-v9-latin-500.woff2" as="font" crossorigin>
    {% if OFFEN_ACCOUNT_ID and not no_stats %}
      <script async src="https://offen.offen.dev/script.js" data-account-id="{{ OFFEN_ACCOUNT_ID }}"></script>
    {% endif %}
  </head>
{% endblock %}
<body class="{{ template }} f5 rubik lh-copy cclr-fnt-black-mid cclr-bg-black-mid">
  <div class="cclr-bg-white-dark">
    <div class="menu w-100 cclr-bg-yellow-mid">
      <section class="nav-bar">
        <div class="nav-container">
          <div class="icon flex">
            <a class="link dim" href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
            <a class="link dim" href="/"><p class="f25 normal ma0 ml2 white">Offen</p></a>
          </div>
          {% if not funnel %}
            <nav>
              <div class="nav-mobile"><span id="nav-toggle"><span></span></span></div>
              <ul class="nav-list">
                <li>
                  <a class="b link dim cclr-fnt-black-mid" href="/">Summary</a>
                </li>
                <li>
                  <a class="b link dim cclr-fnt-black-mid" href="/blog/">Blog</a>
                </li>
                <li>
                  <a class="b link dim cclr-fnt-black-mid" href="/deep-dive/">Deep dive</a>
                </li>
                <li>
                  <a class="b link dim cclr-fnt-black-mid" href="{{ ROADMAP }}" rel="noopener" target="_blank">Roadmap</a>
                </li>
                <li>
                  <a class="b link dim cclr-fnt-black-mid" href="/about/">About</a>
                </li>
                <li>
                  <a class="b link dim cclr-fnt-black-mid" href="{{ GITHUB_REPO }}" rel="noopener" target="_blank">GitHub</a>
                </li>
                <li>
                  <a class="b link dim cclr-fnt-black-mid" href="{{ DOCS_URL }}" rel="noopener" target="_blank">Docs</a>
                </li>
                <li>
                  <a class="b link dim" href="/get-started/">Get started</a>
                </li>
              </ul>
            </nav>
          {% endif %}
        </div>
      </section>
    </div>

    {% block content %}{% endblock %}

    <footer>
      {% if funnel %}
        <footer class="w-100 cclr-bg-mint-mid ph4 pb4">
          <div id="bg-pattern">
            <div class="flex flex-row-l flex-column w-100-l mw6-m center-m pt4 pb6">
              <div class="w-25-l mt3 mr3 cclr-fnt-black-mid">
                <p class="ma0">
                  <a class="b link dim cclr-fnt-black-mid" href="/">Offen</a>
                </p>
                <p class="ma0">Fair web analytics</p>
              </div>
              <div class="w-25-l mt3 mr3">
              </div>
              <div class="w-25-l mt3 mr3">
              </div>
              <div class="w-25-l mt3 tr-l">
                {{ BUILD_DATE | strftime('%B %Y') }}
              </div>
            </div>
          </div>
        </div>
      {% else %}
        {% block outro %}
          <div class="w-100 cclr-bg-yellow-mid">
            <div class="pt3 pb4 bg-pattern">
              <div class="mw8 center">

                  {% if bottom_cta == 'index' %}
                  <div class="flex flex-wrap justify-center tc ph3 pv5">
                    <div class="ph4-ns cclr-bg-yellow-mid">
                      <h2 class="f26 ma0 mb3 lh-title">
                        <a class="b link dim cclr-fnt-black-mid" href="/">How do fair web analytics work?</a>
                      </h2>
                      <a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/" rel="noopener">Open summary</a>
                    </div>
                  </div>
                  {% endif %}

                  {% if bottom_cta == 'blog' %}
                  <div class="flex flex-wrap justify-center tc ph3 pv5">
                    <div class="ph4-ns cclr-bg-yellow-mid">
                      <h2 class="f26 ma0 mb3 lh-title">
                        <a class="b link dim cclr-fnt-black-mid" href="/blog/">Continue reading?</a>
                      </h2>
                      <a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/blog/" rel="noopener">See all blog posts</a>
                    </div>
                  </div>
                  {% endif %}

                  {% if bottom_cta == 'fair' %}
                  <div class="ph3 ph0-m pv5">
                    <h2 class="f26 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
                      Also on our blog
                    </h2>
                    <div class="mw7 center flex flex-wrap ph5-ns">
                      <div class="w-100 w-50-l">
                        <figure class="ma0 pr3-l mb3 mb0-l">
                          <a href="/blog/privacy-friendly-and-fair-web/">
                            <img alt="Let's build a web that is privacy friendly and fair" src="/theme/images/offen-blog-0080-beta.jpg">
                          </a>
                        </figure>
                      </div>
                      <div class="w-100 w-50-l cclr-bg-yellow-mid">
                        <div class="pl3-l">
                          <h3 class="f3 normal lh-title ma0 mb2">
                            <a href="/blog/privacy-friendly-and-fair-web/" class="link b dim cclr-fnt-black-mid">Let's build a web that is privacy friendly and fair</a>
                          </h3>
                          <p class="ma0">
                            What does the term 'privacy friendly' actually stand for? Mostly it's just about technical issues that don't tackle the underlying problem. <a href="/blog/privacy-friendly-and-fair-web" class="link b dim cclr-fnt-black-mid">Read more</a>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                  {% endif %}

                  {% if bottom_cta == 'budget' %}
                  <div class="ph3 ph0-m pv5">
                    <h2 class="f26 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
                      Also on our blog
                    </h2>
                    <div class="mw7 center flex flex-wrap ph5-ns">
                      <div class="w-100 w-50-l">
                        <figure class="ma0 pr3-l mb3 mb0-l">
                          <a href="/blog/hosting-offen-on-budget/">
                            <img alt="Hosting Offen on a budget" src="/theme/images/offen-blog-0070-budget.jpg">
                          </a>
                        </figure>
                      </div>
                      <div class="w-100 w-50-l cclr-bg-yellow-mid">
                        <div class="pl3-l">
                          <h3 class="f3 normal lh-title ma0 mb2">
                            <a href="/blog/hosting-offen-on-budget/" class="link b dim cclr-fnt-black-mid">Hosting Offen on a budget</a>
                          </h3>
                          <p class="ma0">
                            Here are some real world options for hosting Offen on a budget. Let's compare how they relate in terms of ease of deployment, performance and pricing. <a href="/blog/hosting-offen-on-budget" class="link b dim cclr-fnt-black-mid">Read more</a>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                  {% endif %}


              </div>
            </div>
          </div>
        {% endblock %}
        <div class="w-100 cclr-bg-black-mid gray ph4 pb4">
          <div class="flex flex-row-l flex-column w-100-l mw6-m center-m pt4 pb6">
            <div class="w-25-l mt3 mr3 cclr-fnt-yellow-mid">
              <p class="ma0">
                <a class="b link dim cclr-fnt-yellow-mid" href="/">Offen</a>
              </p>
              <p class="ma0">Fair web analytics</p>
            </div>
            <div class="w-25-l mt3 mr3">
              <p class="ma0">
                <a class="link b dim gray" href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
              </p>
              <p class="ma0">
                <a class="link b dim gray" target="_blank" href="/theme/{{ PGP_KEY_FILE }}">PGP Key</a>
              </p>
              <p class="ma0 mt2">
                <a class="link b dim gray" href="/blog/">Blog</a>
              </p>
              <p class="ma0">
                <a class="link b dim gray" href="{{ DOCS_URL }}" rel="noopener" target="_blank">Docs</a>
              </p>
              <p class="ma0">
                <a class="link b dim gray" href="{{ GITHUB_REPO }}" rel="noopener" target="_blank">GitHub</a>
              </p>
            </div>
            <div class="w-25-l mt3 mr3">
              <p class="ma0">
                <a class="link b dim gray" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
              </p>
              <p class="ma0">
                <a class="link b dim gray" href="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a>
              </p>
              <p class="ma0">
                <a class="link b dim gray" href="{{ TWITTER_URL }}" rel="noopener" target="_blank">Twitter</a>
              </p>
              <p class="ma0">
                <a class="link b dim gray" href="{{ MASTODON_URL }}" rel="noopener" target="_blank">Mastodon</a>
              </p>
              <p class="ma0 mt2">
                <a class="link b dim gray" href="/legal-notice/">Legal Notice</a>
              </p>
            </div>
            <div class="w-25-l mt3 tr-l">
              {{ BUILD_DATE | strftime('%B %Y') }}
            </div>
          </div>
        </div>
      {% endif %}
    </footer>
  </div>
  {% block scripts %}
    {% assets filters="rjsmin", output="scripts/packed.js", "scripts/jquery-3.4.1.min.js", "scripts/menu.js", "scripts/fade.js", "scripts/clipboard.min.js", "scripts/click-to-copy.js" %}
      <script src="/{{ ASSET_URL }}"></script>
    {% endassets %}
  {% endblock %}
</body>
</html>
