{#
SPDX-License-Identifier: CC0-1.0

koszko.org website campaign pages template.

Copyright (C) 2021,2022 Wojtek Kosior <koszko@koszko.org>
#}
{% extends "__base.html.jinja" %}

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

  <link rel="stylesheet" href="/static/pure-menus-horizontal.css">
  <link rel="icon" type="image/x-icon" href="/static/campaign-favicon.ico">
{% endblock %}

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

  input {
      display: none;
  }

  * {
      color: #777;
  }

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

  #main {
      background-color: white;
      flex-grow: 1;
  }

  /*
   * Wanted to slightly adjust PureCSS menu styling to my needs and ended up
   * with a mess :(
   */

  body, .pure-menu {
      background-color: #eee;
  }

  .pure-menu {
      white-space: normal;
      position: sticky;
      top: 0;
  }

  .pure-menu-horizontal .pure-menu-item,
  .pure-menu-horizontal .pure-menu-heading,
  .pure-menu-horizontal .pure-menu-separator {
      white-space: nowrap;
  }

  .pure-menu-link {
      cursor: pointer;
  }

  .pure-menu-item .pure-menu-link:hover,
  .pure-menu-item .pure-menu-link:focus,
  .pure-menu-heading .pure-menu-link:hover,
  .pure-menu-heading .pure-menu-link:focus {
      background-color: #ddd;
  }

  .pure-menu-disabled .pure-menu-link,
  .pure-menu-disabled .pure-menu-link:hover,
  .pure-menu-disabled .pure-menu-link:focus {
      background-color: transparent;
      cursor: pointer;
  }

  h1, h2 {
      color: #555;
  }

  .content {
      max-width: 850px;
      padding: 0px 20px 20px 20px;
      margin: 0 auto;
  }

  .section-anchor {
      top: -50px;
  }

  .hamburger {
      display: none;
      position: absolute;
      right: 0;
      border-radius: 3px;
      opacity: 0.7;
      background-color: #ccc;
      cursor: pointer;
  }

  .hamburger>div {
      height: 3px;
      width: 16px;
      margin: 6px 5px;
      padding: 0 5px;
      border-radius: 2px;
      background-color: #555;
  }

  .hide-menu {
      display: none;
      text-align: center;
      padding: 0 0 0 0;
      height: 30px;
      border-top: solid 2px #777;
      background-color: #ccc;
      color: #777;
      font-size: 2em;
      user-select: none;
      cursor: pointer;
  }

  @media (max-width: 600px) {
      #show-menu:not(:checked)+.hamburger {
          display: block;
          position: fixed;
      }

      .hide-menu {
          display: block;
      }

      .pure-menu {
          position: fixed;
          transition: top 0.2s;
      }

      #show-menu:not(:checked)+.hamburger+.pure-menu {
          top: -160px;
      }

      #show-menu:checked+.hamburger+.pure-menu {
          top: 0;
      }

      .pure-menu .pure-menu-list,
      .pure-menu .pure-menu-item,
      .pure-menu .pure-menu-heading,
      .pure-menu .pure-menu-separator {
          display: block;
      }

      .pure-menu {
          text-align: center;
      }

      .section-anchor {
          top: 0;
      }
  }

  footer {
      border-top: 1px solid #888;
  }

  footer > p {
      max-width: 850px;
      padding-left: 10px;
      padding-right: 10px;
      margin-left: auto;
      margin-right: auto;
  }

  h1 {
      text-align: center;
  }

  section {
      border-top: 1px solid #ccc;
  }

  section.first-section {
      border-top: none;
  }

  {#
    The style below is not used right now but is left in case it ever becomes
    useful again.
  #}

  aside {
      display: inline-block;
      padding: 10px;
      border-radius: 4px;
      background-color: #acf;
      text-color: #555;
  }
{% endblock %}

{% macro menu_item(link_url, text, active, heading=false) %}
  {% set tag_name = 'span' if heading else 'li' %}
  {% if heading %}
    {% set classes = ['pure-menu-heading'] %}
  {% else %}
    {% set classes = ['pure-menu-item'] %}
  {% endif %}
  {% if active %}
    {% do classes.append('pure-menu-disabled') %}
  {% endif %}
  <{{ tag_name }} class="{{ classes|join(' ') }}">
    {% set href = '#' if active else link_url %}
    <a{{ {'href': href, 'class': 'pure-menu-link'}|xmlattr }}>{{ text }}</a>
  </{{ tag_name }}>
{% endmacro %}

{% block body %}
  <input id="show-menu" type="checkbox"></input>
  <label class="hamburger" for="show-menu">
    <div></div>
    <div></div>
    <div></div>
  </label>
  <nav class="pure-menu pure-menu-horizontal">
    {% set heading_url  = same_lang_url('') %}
    {% set heading_text = _('campaign_base.menu.a:libre_program') %}
    {{ menu_item(heading_url, heading_text, page_path == '', heading=true) }}

    <ul class="pure-menu-list">
      {% if lang_short == 'en' %}
        {% set item_url  = url_for('.show_page_in_pl', page_path=page_path) %}
        {% set item_text = 'Polska wersja' %}
      {% else %}
        {% set item_url  = url_for('.show_page_in_en', page_path=page_path) %}
        {% set item_text = 'English version' %}
      {% endif %}
      {{ menu_item(item_url, item_text, false) }}

      {% set item_url  = same_lang_url('author.html') %}
      {% set item_text = _('campaign_base.menu.a:about_author') %}
      {{ menu_item(item_url, item_text, page_path == 'author.html') }}

      <label class="hide-menu" for="show-menu">^</label>
  </nav>

  <div id="main">
    {% block main %}
      <div class="content">
        {% block content %}
        {% endblock %}
      </div>
    {% endblock %}
  </div>

  <footer class="center-text">
    {% include [dedicated_footer_path, lang_short ~ '/__footer.html.jinja'] %}
  </footer>
{% endblock %}