<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>SI16 - {% block title %} {{ title }} {% endblock %}</title>

		<!-- style -->

        <link rel="icon" href="{{url_for('static', filename='favicon.ico')}}">
        <link rel="stylesheet" href="{{url_for('static', filename='font/font.css')}}"/>
		<link rel="stylesheet" href="{{url_for('static', filename='css/variables.css')}}"/>
		<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />

		<!-- script -->

		<script src="{{url_for('static', filename='js/lodash.js')}}"></script>

		<script
			src="{{url_for('static', filename='js/bgColor.js')}}"
			defer
		></script>

		<script
			src="{{url_for('static', filename='js/spawnSticker.js')}}"
			defer
		></script>
        
        <script
			src="{{url_for('static', filename='js/eventMode.js')}}"
			defer
		></script>

		{% block head %}{% endblock %}
	</head>
	<body>
		<section id="sticker-container"></section>
		<section id="sticker-fix-container"></section>
        <section id="snippets-container"></section>

		<section class="page--header">
			<header>
				<h1 class="title">{{ title }}</h1>
				{% block header %}
				{% endblock %}
			</header>
			<nav>
                {% block nav %}
				{% endblock %}
				<a href="/soupboat/{{base_url}}/" data-sticker-fix="Home"></a>
			</nav>
		</section>

		<main class="page--content">{%block content%} {% endblock %}</main>
        
        <section class="page--footer">
			<footer>Special Issue 16—Learning How to Walk while Catwalking</footer>
		</section>
	</body>
</html>
