106 lines
3.2 KiB
Plaintext
106 lines
3.2 KiB
Plaintext
<!doctype html>
|
|
<html lang="{{metadata.site.language}}">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
|
|
<title>{{ title | safe }} | {{ metadata.site.name }}</title>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
href="/assets/favicon/light/favicon.ico"
|
|
media="(prefers-color-scheme: light)"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
href="/assets/favicon/dark/favicon.ico"
|
|
media="(prefers-color-scheme: dark)"
|
|
/>
|
|
<link rel="stylesheet" type="text/css" href="/assets/css/fontawesome.min.css" />
|
|
{% if includePrism %}
|
|
<link rel="stylesheet" type="text/css" href="/assets/css/prism.min.css" />
|
|
{% endif %}
|
|
<link rel="stylesheet" type="text/css" href="/assets/css/styles.css" />
|
|
<link rel="alternate" type="application/rss+xml" title="LewisDale.Dev" href="/feed/" />
|
|
<link rel="alternate" type="application/atom+xml" title="LewisDale.Dev Atom Feed" href="/feed/atom" />
|
|
<link rel="alternate" type="application/json" title="LewisDale.Dev JSON Feed" href="/feed/json" />
|
|
<link rel="me" href="proven.lol/f730ca" />
|
|
<link rel="me" href="https://social.lewisdale.dev/@lewis" />
|
|
<link rel="me" href="https://github.com/LewisDaleUK" />
|
|
|
|
<link rel="webmention" href="https://cms.lewisdale.dev/wp-json/webmention/1.0/endpoint" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="generator" content="eleventy" />
|
|
|
|
<meta name="author" content="{{ metadata.author.name }}" />
|
|
<meta name="description" content="{{ description }}" />
|
|
</head>
|
|
<body>
|
|
<header class="wrapper-lg row space-between">
|
|
<a href="/" class="site-title">LD</a>
|
|
|
|
<nav>
|
|
<ul class="row" role='list'>
|
|
<li><a href="/">Home</a></li>
|
|
<li><a href="/now">Now</a></li>
|
|
<li><a href="/blog">Blog</a></li>
|
|
<li><a href="https://cycling.lewisdale.dev">Cycling</a></li>
|
|
<li><a href="/links">Links</a></li>
|
|
</ul>
|
|
</nav>
|
|
<fieldset class="color-scheme">
|
|
<legend>Change your colour scheme</legend>
|
|
<label>
|
|
<input type="radio" name="color-scheme" value="dark" />
|
|
Dark
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="color-scheme" value="light" />
|
|
Light
|
|
</label>
|
|
</fieldset>
|
|
</header>
|
|
{{ content | safe }}
|
|
<footer>
|
|
<div class="wrapper-lg">Copyright © {{ today.year }} {{ metadata.author.name }}</div>
|
|
</footer>
|
|
|
|
|
|
<script type="text/javascript">
|
|
const defaultColourScheme = () => {
|
|
if (localStorage.getItem('color-scheme')) {
|
|
return localStorage.getItem('color-scheme');
|
|
}
|
|
|
|
if (window.matchMedia('(prefers-color-scheme: dark)')?.matches) {
|
|
return "dark";
|
|
}
|
|
|
|
return "light";
|
|
};
|
|
|
|
const data = new Proxy({
|
|
'color-scheme': defaultColourScheme(),
|
|
}, {
|
|
set: (obj, key, value) => {
|
|
obj[key] = value;
|
|
localStorage.setItem(key, value);
|
|
document.body.setAttribute(`data-${key}`, value);
|
|
|
|
return true;
|
|
}
|
|
});
|
|
|
|
const onRadioChange = e => {
|
|
data[e.target.name] = e.target.value;
|
|
}
|
|
|
|
document.querySelectorAll('[name="color-scheme"]').forEach(radio => {
|
|
radio.addEventListener('change', onRadioChange);
|
|
radio.checked = data[radio.name] == radio.value;
|
|
});
|
|
document.body.setAttribute(`data-color-scheme`, localStorage.getItem('color-scheme'));
|
|
</script>
|
|
</body>
|
|
</html>
|