photos/theme/templates/base.html
2025-12-13 20:37:01 +01:00

81 lines
2.6 KiB
HTML

<!DOCTYPE html>
<html lang="{{ settings.html_language }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="{{ album.author }}">
<meta property="og:site_name" content="{{ index_title }}">
<meta property="og:title" content="{{ album.title|striptags }}">
<title>{{ album.title|striptags }}</title>
<link rel="stylesheet" href="{{ theme.url }}/css/main.css">
{% block extra_head %}{% endblock extra_head %}
</head>
<body>
<header role="banner">
<nav>
<ol class="breadcrumb">
{% if album.breadcrumb %}
<li><a class="brand" href="{{ album.index_url }}">{{ index_title }}</a></li>
{% for url, title in album.breadcrumb %}
{% if loop.last and media is defined %}
<li><a href="{{ url }}#{{ media.url }}">{{ title }}</a></li>
{% elif loop.last %}
<li><h1>{{ title }}</h1></li>
{% else %}
<li><a href="{{ url }}">{{ title }}</a></li>
{% endif %}
{% endfor -%}
{% if media is defined %}
<li><h1>{{ media.title }}</h1></li>
{% endif %}
{% else %}
<li><h1><a class="brand" href="{{ album.index_url }}">{{ index_title }}</a></h1></li>
{% endif %}
</ol>
{% include "links.html" %}
</nav>
</header>
<main>
{% block content %}{% endblock content %}
</main>
<footer>
<p><a href="#" id="darkModeToggle">Toggle dark mode</a></p>
<p>Generated using <a href="https://github.com/saimn/sigal/">sigal</a>, custom theme <a href="https://git.bksp.space/hannaeko/photos">available here</a>.
</footer>
<script type="text/javascript">
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.body.setAttribute('theme', themeName);
return themeName;
}
function getPreferedTheme() {
let preferedTheme = window.getComputedStyle(document.body, '::after').content;
if (preferedTheme !== undefined) {
return preferedTheme.replace(/"/g, '');
}
return 'light';
}
let darkModeToggleElement = document.getElementById('darkModeToggle');
let theme = localStorage.getItem('theme') || getPreferedTheme();
setTheme(theme);
darkModeToggle.addEventListener('click', (e) => {
e.preventDefault();
if (theme === 'dark') {
theme = setTheme('light');
} else {
theme = setTheme('dark');
}
})
</script>
</body>
</html>