90 lines
2.6 KiB
HTML
90 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="Site with Zola Hook">
|
|
<title>DraigerCMS | intro</title>
|
|
|
|
<link rel="stylesheet" href="/style.css?h=c59bf21e289e8d31d2b7">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="alternate" type="application/atom+xml" title="DraigerCMS - Atom Feed" href="/atom.xml">
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<header class="space">
|
|
<a href="/">← Home</a>
|
|
</header>
|
|
|
|
|
|
<main>
|
|
<h1>Categories - intro </h1>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/blog/blog/markdown/">Markdown example</a>
|
|
<span class="secondary small">(30 Jul, 2021)</span>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/blog/blog/hello-world/">Hello world</a>
|
|
<span class="secondary small">(29 Jul, 2021)</span>
|
|
</li>
|
|
|
|
</ul>
|
|
<p><a href="/categories/">All categories</a></p>
|
|
</main>
|
|
|
|
<div class="dark-mode-buttons">
|
|
<button class="dark-mode-button" id="dark-mode-on"><img src="/dark_mode.svg" width="24" height="24" alt="Dark mode" aria-label="dark mode toggle" title="Dark mode"></button>
|
|
<button class="dark-mode-button" id="dark-mode-off"><img src="/light_mode.svg" width="24" height="24" alt="Light mode" aria-label="light mode toggle" title="Light mode"></button>
|
|
</div>
|
|
<script>
|
|
const cls = document.querySelector("html").classList;
|
|
const sessionTheme = sessionStorage.getItem("theme");
|
|
|
|
function setDark() {
|
|
cls.add("dark-mode");
|
|
cls.remove("light-mode");
|
|
sessionStorage.setItem("theme", "dark");
|
|
}
|
|
function setLight() {
|
|
cls.add("light-mode");
|
|
cls.remove("dark-mode");
|
|
sessionStorage.setItem("theme", "light");
|
|
}
|
|
|
|
if (sessionTheme === "dark") {
|
|
setDark();
|
|
} else if (sessionTheme === "light") {
|
|
setLight();
|
|
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
|
setDark();
|
|
}
|
|
|
|
document.getElementById("dark-mode-on").addEventListener("click", function(e) {
|
|
setDark();
|
|
});
|
|
document.getElementById("dark-mode-off").addEventListener("click", function(e) {
|
|
setLight();
|
|
});
|
|
</script>
|
|
<noscript>
|
|
<style>
|
|
.dark-mode-buttons {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</noscript>
|
|
</body>
|
|
</html>
|