|
|
<!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> |
