{#
SPDX-License-Identifier: CC0-1.0

koszko.org website campaign pages template.

Copyright (C) 2021,2022 Wojtek Kosior <koszko@koszko.org>
#}
{% set section_attrs = {'class': 'layout-item'} %}
{% set header_attrs = {'class': 'content-subhead'} %}

{% extends "__base.html.jinja" %}

{% macro gitlink() -%}
  {%- for project_id in varargs -%}
    {{ numberlink('https://git.koszko.org/' ~ project_id ~ '/') }}
  {%- endfor -%}
{%- endmacro %}

{% block external_css %}
  {{ super() }}

  <link rel="stylesheet" href="/static/pure-main.css">
  <link rel="stylesheet" href="/static/pure-layouts.css">
{% endblock %}

{% block style %}
  {{ super() }}

  .pure-menu-item a {
      display: block;
  }

  #no-fb {
      position: relative;
  }

  #no-fb img {
      width: 150px;
      height: auto;
      position: absolute;
      left: 100px;
      top: -70px;
      -webkit-backface-visibility: hidden;
  }

  @media (max-width: 520px) {
      #no-fb img {
          width: 130px;
          left: 90px;
          top: -60px;
      }
  }
  @media (max-width: 460px) {
      #no-fb img {
          width: 110px;
          top: -50px;
      }
  }
  @media (max-width: 410px) {
      #no-fb img {
          width: 100px;
          left: 80px;
          top: -40px;
      }
  }
  @media (max-width: 380px) {
      #no-fb img {
          width: 70px;
          left: 65px;
          top: -30px;
      }
  }

  #main {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
  }

  .header, .content {
      width: 100%;
  }

  .content {
      flex-grow: 1;
  }

  aside {
      background: #1f8dd6;
      margin: 10px 0;
      padding: 3px 10px;
      border-radius: 3px;
      color: #fff;
  }

  .layout-item:first-child {
      margin-top: 0;
      border-top: 0;
  }

  .content .content-subhead {
      margin-top: 0;
  }

  dt {
      float: left;
      margin-right: .5em;
  }

  dd {
      display: inline;
  }

  dl.indent-dl dt {
      margin-left: -2em;
  }

  dl.indent-dl {
      margin-top: 0;
      margin-left: 2em;
  }

  footer > p {
      max-width: 768px;
      margin: auto;
  }
{% endblock %}

{% macro menu_item(link_url, text, active) %}
  <li class="pure-menu-item">
    {% if active %}
      {% set link_url = "#" %}
    {% endif %}
    {% set attrs = {'href': link_url, 'class': 'active' if active else none} %}
    <a{{ attrs|xmlattr }}>{{ text }}</a>
  </li>
{% endmacro %}

{% block body %}
  <input id="show-menu" type="checkbox"></input>
  <label href="#menu" id="menuLink" class="menu-link" for="show-menu">
    <span></span>
  </label>
  <nav id="menu">
    <div class="pure-menu">
      <span class="pure-menu-heading">
        {{ _('koszko_base.menu.span:languages') }}
      </span>
      <ul class="pure-menu-list">
        {% for current_lang, text in [('en', 'English'), ('pl', 'Polski')] %}
          {% set flask_endpoint = '.show_page_in_' ~ current_lang %}
          {% set link_url = url_for(flask_endpoint, page_path=page_path) %}
          {{ menu_item(link_url, text, lang_short == current_lang) }}
        {% endfor %}
      </ul>
      <span class="pure-menu-heading">
        {{ _('koszko_base.menu.span:places') }}
      </span>
      <ul class="pure-menu-list">
        {%
          for current_page, text in [
              ('koszko.html', _('koszko_base.menu.a:home')),
              ('cv.html',     _('koszko_base.menu.a:curriculum_vitae')),
              ('',            _('koszko_base.menu.a:campaign'))
          ]
        %}
          {% set link_url = same_lang_url(current_page) %}
          {{ menu_item(link_url, text, page_path == current_page) }}
        {% endfor %}
      </ul>
    </div>
  </nav>

  <div id="main">
    <div class="header">
      {% block header %}
        <h1>
          {% if page_path == 'koszko.html' %}
            {% set url = '#' %}
          {% else %}
            {% set url = same_lang_url('koszko.html') %}
          {% endif %}
          <a href="{{ url }}">
            {{ _('koszko_base.h1:wojtek_kosior') }}
          </a>
        </h1>
        <h2>
          <a href="#">
            {% block subheading_text %}
            {% endblock %}
          </a>
        </h2>
        {% if include_not_facebookd|default(false) %}
          <span id="no-fb">
            <a href="https://stallman.org/facebook.html" draggable="false">
              <img src="/static/no-facebook.svg" draggable="false">
            </a>
          </span>
        {% endif %}
      {% endblock %}
    </div>
    <div class="content">
      {% block content %}
      {% endblock %}
    </div>
    <footer class="footer center-text">
      {% include [dedicated_footer_path, lang_short ~ '/__footer.html.jinja'] %}
    </footer>
  </div>
{% endblock %}