125 lines
4.1 KiB
Plaintext
125 lines
4.1 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.rss if feed.rss else "/rss.xml" }}">
|
|
<link rel="alternate" type="application/atom+xml" title="LewisDale.Dev Atom Feed" href="{{ feed.atom if feed.atom else "/atom.xml" }}">
|
|
<link rel="alternate" type="application/json" title="LewisDale.Dev JSON Feed" href="{{ feed.json if feed.json else "/feed.json" }}">
|
|
|
|
<link rel="me" href="https://proven.lol/f730ca">
|
|
<link rel="me" href="https://social.lol/@lewis">
|
|
<link rel="me" href="https://github.com/LewisDaleUK">
|
|
|
|
<link rel="webmention" href="https://webmention.io/lewisdale.dev/webmention" />
|
|
<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 }}">
|
|
{% ogImage "./src/_includes/components/ogImage.njk", { title: pageTitle or title, subTitle: 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="/blog">Blog</a></li>
|
|
<li><a href="/blogroll">Blogroll</a></li>
|
|
<li><a href="/events/2024">Events</a></li>
|
|
<li><a href="/links">Links</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<a href="/feed/" class="rss">
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-label="RSS" role="img" viewBox="0 0 512 512">
|
|
<path d="m0 0H512V512H0" fill="none"/>
|
|
<path fill="currentColor" d="m109 271A132 133 0 01241 403h60A192 193 0 00109 211v-54A246 247 0 01355 403h60A306 307 0 00109 97m35 235a35 35 0 102 0"/>
|
|
</svg>
|
|
</a>
|
|
|
|
<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>
|
|
<label>
|
|
<input type="radio" name="color-scheme" value="system">
|
|
System
|
|
</label>
|
|
</fieldset>
|
|
</header>
|
|
{{ content | safe }}
|
|
<footer>
|
|
<div class="wrapper-lg">Copyright © {{ today.year }} {{ metadata.author.name }}</div>
|
|
|
|
<div class="wrapper-xs my-size-xs">
|
|
<p class="text-center">Part of the CSS JOY webring</p>
|
|
<div class="row" data-spacing="between">
|
|
<a href="https://webri.ng/webring/cssjoy/previous?via=https://lewisdale.dev">Previous</a>
|
|
<a href="https://webri.ng/webring/cssjoy/random?via=https://lewisdale.dev">Random</a>
|
|
<a href="https://webri.ng/webring/cssjoy/next?via=https://lewisdale.dev">Next</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<script>
|
|
const defaultColourScheme = () => {
|
|
if (localStorage.getItem('color-scheme')) {
|
|
return localStorage.getItem('color-scheme');
|
|
}
|
|
|
|
return "system";
|
|
};
|
|
|
|
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>
|