<!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=1">
  <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 }}{{ sm_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">
  <link rel="canonical" href="{{ SITEURL }}/{{ href }}">
  <link rel="shortcut icon" type="image/x-icon" href="/theme/images/favicon.ico">
  <link rel="stylesheet" href="/theme/css/tachyons.min.css">
  <link rel="stylesheet" href="/theme/css/fix.css">
  <!--
  {% assets filters="libsass,postcss,cssmin", output="css/style.min.css", "css/normalize.css", "css/fonts.css", "css/style.scss" %}
    <link rel="stylesheet" href="/{{ ASSET_URL }}">
  {% endassets %}
-->
  {% if OFFEN_ACCOUNT_ID and not no_stats %}
    <script async src="/script.js" data-account-id="{{ OFFEN_ACCOUNT_ID }}"></script>
  {% endif %}
</head>
{% endblock %}
<body class="{{ template }} f5 sans-serif fnt-cclr-mid-black">
<!-- Menu ######################################################### -->
  <div class="menu w100 cclr-mid-yellow"> <!--menu-->
    <section class="nav-bar">
      <div class="nav-container">
        <div class="icon">
          <a href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="42" height="46" class="logo"></a>
        </div>
        <nav>
          <div class="nav-mobile"><span id="nav-toggle"><span></span></span></div>
          <ul class="nav-list">
            <li>
              <a href="/">Summary</a>
            </li>
            <li>
              <a href="/deep-dive/">Deep dive</a>
            </li>
            <li>
              <a href="/blog/">Status</a>
            </li>
            <li>
              <a href="/about/">About</a>
            </li>
            <li>
              <a href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
            </li>
            <li>
              <a href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
            </li>
          </ul>
        </nav>
      </div>
    </section>
  </div>
<!-- Content ######################################################### -->
    {% block content %}
      <div class="w100 bg-white mid-grey">
        <div class="mw6 center">
          {{ content }}
        </div>
      </div>
    {% endblock %}

    {% block outro %}
      <div class="w100 cclr-mid-yellow"> <!--cta-bottom-->
        <div class="w100" id="bg-cta-bottom">
          <div class="mw8 center">
            <div class="card-deck">
              <div class="card">
                <h2 class="pa0 ma0">
                  Participate
                </h2>
                <p class="pa0 ma0">
                  Development of Offen has just started. Do not hesitate to make a contribution and help us handle data with respect.
                </p>
                <div class="pa0 ma0">
                  <a class="btn btn-color-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
                </div>
              </div>
              <div class="card">
                <h2 class="pa0 ma0">
                  In the making
                </h2>
                <p class="pa0 ma0">
                  Offen is still in alpha. Discover what is already up and running and where we want to go in the coming months.
                </p>
                <div class="pa0 ma0">
                  <a class="btn btn-color-black" href="/blog/">Project status</a>
                </div>
              </div>
              <div class="card">
                <h2 class="pa0 ma0">
                  Ethical internet
                </h2>
                <p class="pa0 ma0">
                  We're working hard to ensure that Offen is independent, cutting-edge and can be sustained for years to come.
                </p>
                <div class="pa0 ma0">
                  <a class="btn btn-color-black" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Support us</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    {% endblock %}
<!-- Footer ######################################################### -->
    <div class="w100 cclr-mid-black gray"> <!--footer-->
      <div class="footer-card-deck">
        <div class="footer-card">
          <h3 class="pa0 ma0">Offen</h3>
          <h4 class="pa0 ma0">Transparent web analytics</h4>
          <h4 class="pa0 ma0">for everyone</h4>
        </div>
        <div class="footer-card">
          <p class="pa0 ma0">
            <a href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
            <a target="_blank" href="/theme/{{ GPG_KEY_FILE }}">[GPG Key]</a>
          </p>
          <p class="pa0 ma0">
            <a href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
          </p>
          <p class="pa0 ma0">
            <a href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
          </p>
        </div>
        <div class="footer-card">
          <p class="pa0 ma0">
            <a href="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a>
          </p>
          <p class="pa0 ma0">
            <a href="{{ TWITTER_URL }}" rel="noopener" target="_blank">Twitter</a>
          </p>
          <p class="pa0 ma0">
            <a href="/legal-notice/">Legal Notice</a>
          </p>
        </div>
        <div class="footer-card">
          {{ BUILD_DATE }}
        </div>
      </div>
    </div>

    {% block scripts %}
      {% assets filters="rjsmin", output="scripts/packed.js", "scripts/jquery-3.4.1.min.js", "scripts/menu.js", "scripts/fade.js" %}
        <script src="/{{ ASSET_URL }}"></script>
      {% endassets %}
    {% endblock %}
  </body>
</html>