Files
blog_os/blog/templates/edition-2/base.html
Philipp Oppermann 69917e234c Remember chosen theme in localStorage
This way, the selected theme is kept when changing pages, and for subsequent visits. To prevent flickering, we set the selected theme in a blocking script directly on load. To speed things up further, we now use a `data-theme` attribute instead of classes on the body tag, this way we don't need to wait until the body element is loaded.
2021-10-17 15:05:11 +02:00

66 lines
2.3 KiB
HTML

<!doctype html>
<html lang="{% if lang %}{{ lang }}{% else %}{{ config.default_language }}{% endif %}">
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}">
<meta name="author" content="{{ config.extra.author.name }}">
{% if current_url %}
<link rel="canonical" href="{{ current_url | safe }}" />
{% endif %}
<link href="/css/edition-2/main.css" rel="stylesheet">
<link rel="alternate" type="application/rss+xml" title="RSS feed for os.phil-opp.com" href="{{ config.base_url | safe }}/rss.xml" />
<script>
let theme = localStorage.getItem("theme");
if (theme != null) {
document.documentElement.setAttribute("data-theme", theme);
}
</script>
<script async src="/js/edition-2/main.js"></script>
<title>{% block title %}{% endblock title %}</title>
</head>
<body>
<div class="container content">
<header class="masthead">
<div style="position:relative">
<h2 class="masthead-title">
<a href="{{ config.base_url | safe }}" title="Home">{{ config.title | safe }}</a>
</h2>
<p><small>{{ config.extra.subtitle | replace(from=" ", to="&nbsp;") | safe }}</small></p>
{% block header %}{% endblock header %}
</div>
</header>
<div>
{% block toc_aside %}{% endblock toc_aside %}
<main>{% block main %}{% endblock main %}</main>
</div>
<div>{% block after_main %}{% endblock after_main %}</div>
<footer class="footer">
<hr>
<small>
&copy; <time datetime="2021">2021</time>. All rights reserved.
<a href="{{ get_url(path="@/pages/contact.md") | safe }}">Contact</a>
</small>
</footer>
</div>
<div class="light-switch" onclick="toggle_lights()" title="Switch between light and dark theme"></div>
<script data-goatcounter="https://phil-opp.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
</body>
</html>