|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title>{% block title %}{{ config.title }}{% endblock %}</title>
|
|
|
|
|
|
|
|
|
|
|
|
{%- block page_meta %}
|
|
|
|
|
|
{% if config.description %}
|
|
|
|
|
|
<meta name="description" content="{{ config.description | truncate(length=150) }}"/>
|
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
{% if config.extra.author%}
|
|
|
|
|
|
<meta name="author" content="{{ config.extra.author }}" />
|
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
{% endblock -%}
|
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
|
|
|
|
|
|
|
|
{%- block css %}
|
|
|
|
|
|
<link href="{{ get_url(path='style.css', trailing_slash=false) | safe }}" rel="stylesheet"/>
|
|
|
|
|
|
{% endblock css -%}
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body {% if config.extra.default_dark %}class="dark"{% endif %}>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
function get_theme_pref() {
|
|
|
|
|
|
let pref_dark = false
|
|
|
|
|
|
if(localStorage.getItem('prefers-color') === 'dark') {
|
|
|
|
|
|
pref_dark = true;
|
|
|
|
|
|
} else if(localStorage.getItem('prefers-color') === 'light') {
|
|
|
|
|
|
pref_dark = false;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
pref_dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
|
|
}
|
|
|
|
|
|
return pref_dark;
|
|
|
|
|
|
}
|
|
|
|
|
|
function set_theme_pref(dark = false) {
|
|
|
|
|
|
localStorage.setItem('prefers-color', dark ? "dark" : "light");
|
|
|
|
|
|
}
|
|
|
|
|
|
function toggle_theme_pref() {
|
|
|
|
|
|
set_theme_pref(!get_theme_pref());
|
|
|
|
|
|
}
|
|
|
|
|
|
function update_theme() {
|
|
|
|
|
|
if (get_theme_pref()) {
|
|
|
|
|
|
document.body.classList.add("dark");
|
|
|
|
|
|
} else {
|
|
|
|
|
|
document.body.classList.remove("dark");
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function update_theme_toggle() {
|
|
|
|
|
|
let toggle = document.getElementById('theme-toggle');
|
|
|
|
|
|
if (toggle) {
|
|
|
|
|
|
toggle.innerHTML = get_theme_pref() ? '☀️' : '🌙';
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
update_theme();
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<nav>{% block nav %}{% endblock %}</nav>
|
|
|
|
|
|
<aside>{% block aside %}{% endblock %}</aside>
|
|
|
|
|
|
<article>
|
|
|
|
|
|
{%- block content %}<h1>override the content block in a template</h1>{% endblock -%}
|
|
|
|
|
|
</article>
|
|
|
|
|
|
<footer>{% block footer %}{% endblock %}</footer>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
{% block js %}
|
|
|
|
|
|
<script src="{{ get_url(path='script.js', trailing_slash=false) | safe }}"></script>
|
|
|
|
|
|
{% endblock %}
|
|
|
|
|
|
</html>
|
