From 08f4d63f450ccd96f5077bc60774d8f1fecec92c Mon Sep 17 00:00:00 2001
From: Wojtek Kosior <koszko@koszko.org>
Date: Wed, 16 Nov 2022 18:52:53 +0100
Subject: initial commit

---
 .../templates/__campaign_base.html.jinja           | 258 +++++++++++++++++++++
 1 file changed, 258 insertions(+)
 create mode 100644 src/koszko_org_website/templates/__campaign_base.html.jinja

(limited to 'src/koszko_org_website/templates/__campaign_base.html.jinja')

diff --git a/src/koszko_org_website/templates/__campaign_base.html.jinja b/src/koszko_org_website/templates/__campaign_base.html.jinja
new file mode 100644
index 0000000..0cb6ad2
--- /dev/null
+++ b/src/koszko_org_website/templates/__campaign_base.html.jinja
@@ -0,0 +1,258 @@
+{#
+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 %}
-- 
cgit v1.2.3