Download raw (1.3 KB)

{% extends "base.html" %}
{% block content %}
<div id="colors">
	<div class="patterned"></div>
</div>
<div id="content" class="page">
	<div class="row centered">
		<div class="left-spacer"></div>
		<div id="main" class="item patterned-border page page-{{ page.slug }}">
			<div class="patterned-background">
				<h2>{{ page.title }}</h2>
				{{ page.content }}
			</div>
		</div>
		<div class="right-spacer"></div>
	</div>
</div>
<style>
	{% if page.slug == 'colorlab' %}
	:root {	
  		--background-color: blueviolet;
	}
	{% elif page.slug == 'laboratorium' %}
	:root {	
  		--background-color: rgb(127, 168, 177);
	}
	{% endif %}
</style>
<script src="{{ SITEURL }}/theme/js/movements.js"></script>
<script>
	window.addEventListener('load', function () {
		initBackgrounds();

		// Move
		registerMovement('#colors div', function (el, position) {
			{% if page.slug == 'colorlab' %}
				el.style.setProperty('top', Math.round(position * 60).toString() + 'vh');
				el.style.setProperty('bottom', Math.round(60 - position * 60).toString() + 'vh');
			{% elif page.slug == 'laboratorium' %}
				el.style.setProperty('top', Math.round(60 - position * 60).toString() + 'vh');
				el.style.setProperty('bottom', Math.round(position * 60).toString() + 'vh');
			{% endif %}		
		});
	});
</script>
{% endblock %}