<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width">
		<title>{% block title %}{{ config.title }}{% endblock title %}</title>
		<link rel="stylesheet" href="/style.css" type="text/css">
		<link rel="icon" href="/favicon.ico" type="image/x-icon">
	</head>
	<body{% if section.permalink and section.permalink == config.base_url %} class="index"{% endif %}>
		<nav id="nav">
			<header>
				<div class="menu" onclick="togglevisible('#nav')">
					Menu
					<img src="/menu-close.svg" alt="Close menu">
				</div>
			</header>
			<div class="list">
			{% set section = get_section(path="_index.md") %}
			{% if section.pages %}
				<ul>
				{% for page in section.pages %}
					<li><a href="{{ page.permalink }}">{{ page.title }}</a></li>
				{% endfor %}
				</ul>
			{% endif %}
			</div>
			<div class="background"></div>
		</nav>
		<header>
			<a href="{{ config.base_url }}" id="logo"></a>
			<a href="{{ config.base_url }}"><h1>{{ config.title }}</h1></a>
			<div class="menu" onclick="togglevisible('#nav')">
				Menu
				<img src="/menu-open.svg" alt="Open menu">
			</div>
		</header>
		<main>
		{% block content %}
			<section>
				<h2>{{ config.title }}</h2>
				{{ section.content | safe }}
			</section>
			<aside>
				{% for page in section.pages %}
					{% if page.extra.indexnav %}
						{% if page.extra.linkto %}
							<a href="{{ page.extra.linkto }}">
						{% else %}
							<a href="{{ page.permalink }}">
						{% endif %}
						{{ page.title }}</a>
					{% endif %}
				{% endfor %}
			</aside>
		{% endblock %}
		</main>
	</body>
	<script>
		function togglevisible(id){document.querySelector(id).classList.toggle("visible")}
	</script>
</html>
