---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<link rel="stylesheet" href="/css/design.css">
<script src="javascript/chaffle.min.js"></script>
</head>
<body>
<header>
<span data-chaffle-onload="", data-chaffle="en", style="width: 170px; display: block;">{{ username }}</span>
</header>
{{ content | safe }}
<footer>
© {% year %} {{ username }}
</footer>
<script>
var elements = document.querySelectorAll('[data-chaffle]');
var elm = document.querySelectorAll('[data-chaffle-onLoad]');
Array.prototype.forEach.call(elements, function (el) {
var chaffle = new Chaffle(el)
el.addEventListener('mouseover', function () {
chaffle.init();
});
Array.prototype.forEach.call(elm, function (el) {
var chaffle = new Chaffle(el, {
delay: 200
})
</script>
</body>
</html>
