website/themes/next.copyleft.org/templates/base.html

141 lines
7.9 KiB
HTML

<!DOCTYPE html>
<html lang="{% block html_lang %}{{ DEFAULT_LANG }}{% endblock html_lang %}">
<head>
{% block head %}
<title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Pelican" />
{% if FEED_ALL_ATOM %}
<link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_ATOM_URL %}{{ FEED_ALL_ATOM_URL }}{% else %}{{ FEED_ALL_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Full Atom Feed" />
{% endif %}
{% if FEED_ALL_RSS %}
<link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_RSS_URL %}{{ FEED_ALL_RSS_URL }}{% else %}{{ FEED_ALL_RSS }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Full RSS Feed" />
{% endif %}
{% if FEED_ATOM %}
<link href="{{ FEED_DOMAIN }}/{%if FEED_ATOM_URL %}{{ FEED_ATOM_URL }}{% else %}{{ FEED_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Atom Feed" />
{% endif %}
{% if FEED_RSS %}
<link href="{{ FEED_DOMAIN }}/{% if FEED_RSS_URL %}{{ FEED_RSS_URL }}{% else %}{{ FEED_RSS }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" />
{% endif %}
{% if CATEGORY_FEED_ATOM and category %}
<link href="{{ FEED_DOMAIN }}/{% if CATEGORY_FEED_ATOM_URL %}{{ CATEGORY_FEED_ATOM_URL.format(slug=category.slug) }}{% else %}{{ CATEGORY_FEED_ATOM.format(slug=category.slug) }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Categories Atom Feed" />
{% endif %}
{% if CATEGORY_FEED_RSS and category %}
<link href="{{ FEED_DOMAIN }}/{% if CATEGORY_FEED_RSS_URL %}{{ CATEGORY_FEED_RSS_URL.format(slug=category.slug) }}{% else %}{{ CATEGORY_FEED_RSS.format(slug=category.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Categories RSS Feed" />
{% endif %}
{% if TAG_FEED_ATOM and tag %}
<link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_ATOM_URL %}{{ TAG_FEED_ATOM_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_ATOM.format(slug=tag.slug) }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Tags Atom Feed" />
{% endif %}
{% if TAG_FEED_RSS and tag %}
<link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_RSS_URL %}{{ TAG_FEED_RSS_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_RSS.format(slug=tag.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" />
{% endif %}
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
:root {
--washed-purple: #fbf7fc;
--purple: #3b1c4a;
}
/* latin */
@font-face {
font-family: 'Jost';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url({{ SITEURL }}/{{ THEME_STATIC_DIR }}/fonts/Jost-Regular.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Jost';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url({{ SITEURL }}/{{ THEME_STATIC_DIR }}/fonts/Jost-SemiBold.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body {
font-family: 'Jost', sans-serif;
font-weight: 400;
}
strong { font-weight: 600; }
.grow {
transition: transform 0.25s ease-out;
}
header {
color: var(--purple);
background-color: var(--washed-purple);
}
header a {
color: var(--purple);
text-decoration: none;
}
header a.active {
text-decoration: underline;
}
</style>
{% endblock head %}
</head>
<body id="index" class="bg-white">
<header id="banner" class="ph3 ph4-ns pt3 pb3" style="overflow: auto;">
<div class="flex flex-wrap">
{% if output_file != 'index.html' %}
<div class="b code f3" style="flex-grow: 1;"><a class="dib pv2" href="/">&gt;&nbsp;copyleft-next</a></div>
{% endif %}
<nav id="menu" class="flex flex-wrap items-center justify-start justify-end-ns" style="flex-grow: 1;">
<ul class="list pa0 ma0 mt2 mt0-ns">
{% for title, link in MENUITEMS %}
<li><a href="{{ link }}">{{ title }}</a></li>
{% endfor %}
{% if DISPLAY_PAGES_ON_MENU %}
{% for p in pages %}
<li class="dib grow"><a class="{% if p == page %}active {% endif %}pr3 ph3-ns dib pv2" href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a></li>
{% endfor %}
{% endif %}
{% if DISPLAY_CATEGORIES_ON_MENU %}
{% for cat, null in categories %}
<li{% if cat == category %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
{% endfor %}
{% endif %}
</ul>
</nav>
</div>
{% if output_file == 'index.html' %}
<h1 id="title" class="f2 f1-m f-subheadline-ns lh-title mb4 mt4 code black-70 tracked-tight" style="color: #3b1c4a; opacity: 0; translate: 0 -10px; position: relative;">&gt;&nbsp;{{ SITENAME }}</h1>
<p class="f4 f3-ns measure lh-copy">{% if SITESUBTITLE %}{{ SITESUBTITLE }}{% endif %}</p>
{% endif %}
</header>
<main class="f5 f4-ns lh-copy ph3 ph4-ns pv3 pv4-ns lh-copy" style="max-width: 40em">
{% block content %}{% endblock %}
</main>
<footer id="contentinfo" class="f6 f6-ns ph3 ph4-ns pv3 pv4-ns mt5">
Brought to you by:<br>
<img src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/conservancy-header.svg" class="mt3" style="width: 150px; filter: saturate(0)" alt="Software Freedom Conservancy">
<p class="f7 mt4">No Rights Reserved — CC0 1.0 Universal</p>
<p class="f7 mt2 black-60">Jost font is copyright 2020 The Jost Project Authors, SIL Open Font License v1.1<br>
Tachyons CSS is copyright 2020 Adam Morse & John Otander, MIT License<br>
Velocity JS is copyright 2014 Julian Shapiro, MIT License<br>
Pelican is copyright 2007 Free Software Foundation, Inc, GNU AGPL v3.0</p>
</footer>
<script src="{{ SITE_URL }}/{{ THEME_STATIC_DIR }}/js/velocity.min.js"></script>
{% if output_file == 'index.html' %}
<script>
'use strict';
document.getElementById('title').velocity(
{
opacity: 1,
translate: '0 0',
},
{
delay: 400,
duration: 400,
easing: 'ease',
}
);
</script>
{% endif %}
</body>
</html>