{% extends "/themes/default/core.html" %}

{% use "/themes/default/header.html" with css as header_css, body as header, js as header_js %}
{% use "/themes/default/aside.html" with css as aside_css, body as aside, js as aside_js %}
{% use "/themes/default/footer.html" with css as footer_css, body as footer, js as footer_js %}

{% block css %}
	{{ block('header_css') }}
	{{ block('aside_css') }}
	{{ block('footer_css') }}
{% endblock %}

{% block body %}
	{{ block('header') }}
	{{ block('aside') }}

	<main id="main">
		{% block main %}
			{{ main|raw }}
		{% endblock %}
	</main>

	{{ block('footer') }}
{% endblock %}

{% block js %}
	<script>
		let main = document.getElementById('main');

		setInterval(() => {
			main.style.setProperty('--scroll-px', window.pageYOffset + 'px');
			main.style.setProperty('--scroll-deg', window.pageYOffset / 100 + 'deg')
		}, 60);
	</script>

	{{ block('header_js') }}
	{{ block('aside_js') }}
	{{ block('footer_js') }}
{% endblock %}
