diff options
Diffstat (limited to 'src/koszko_org_website/templates/__campaign_base.html.jinja')
| -rw-r--r-- | src/koszko_org_website/templates/__campaign_base.html.jinja | 258 |
1 files changed, 258 insertions, 0 deletions
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 %} |