shadowfacts.net/site/layouts/default.html.ejs

83 lines
2.5 KiB
Plaintext

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= metadata.title %></title>
<script>
(() => {
let theme = localStorage.getItem("theme");
if (theme !== "light" && theme !== "dark") {
theme = "light";
localStorage.setItem("theme", theme);
}
document.write(`<link rel="stylesheet" href="/css/${theme}.css">`);
})();
</script>
<noscript>
<link rel="stylesheet" href="/css/light.css">
</noscript>
</head>
<body>
<header class="site-header">
<div class="container">
<h1 class="site-title"><a href="/" class="fancy-link">Shadowfacts</a></h1>
<p class="site-description">The outper part of a shadow is called the penumbra.</p>
<nav class="site-nav">
<ul>
<li><a href="https://mememachine.shadowfacts.net" class="fancy-link">Meme Machine</a></li>
<li><a href="https://rtfm.shadowfacts.net" class="fancy-link">RTFM</a></li>
<li><a href="https://type.shadowfacts.net" class="fancy-link">Type</a></li>
<li><a href="/tutorials/" class="fancy-link">Tutorials</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<%- content %>
</div>
<footer class="site-footer">
<div class="container">
<div>
<h2 class="site-title">Shadowfacts</h2>
<p class="ui-controls">
<label for="dark-theme">Dark Theme: </label>
<input type="checkbox" name="" id="dark-theme">
</p>
</div>
<nav class="social-links">
<ul>
<li><a href="mailto:me@shadowfacts.net" class="fancy-link">Email</a></li>
<li><a href="/feed.xml" class="fancy-link">RSS</a></li>
<li><a href="https://github.com/shadowfacts" class="fancy-link">GitHub</a></li>
<li><a href="https://twitter.com/ShadowfactsDev" class="fancy-link">Twitter</a></li>
<li><a href="https://social.shadowfacts.net/users/shadowfacts" class="fancy-link">Mastodon</a></li>
</ul>
</nav>
</div>
<script>
(() => {
const el = document.getElementById("dark-theme");
el.checked = localStorage.getItem("theme") === "dark";
el.onclick = function() {
const theme = this.checked ? "dark" : "light";
localStorage.setItem("theme", theme);
window.location.reload();
};
})();
</script>
<noscript>
<style>
.ui-controls {
display: none;
}
</style>
</noscript>
</footer>
</body>
</html>