feat: Changes to template inheritance

Changes to what goes where.

source/screens/demo/basics.liquid

@@ -495,7 +495,7 @@ tags:
 			oder das Element H<sub>2</sub>O</p>
 		<p>Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden.
 			Dies stellt sich wie folgt dar:</p>
-		<p class="txt_center">Bei <mark class="mark_cursor">spiel zum mark</mark>ieren 😉.</p>
+		<p class="txt_center">Bei<mark class="mark_cursor">spiel zum mark</mark>ieren 😉.</p>
 		<p>Eine Markierung kann, mittels
 			<code>&lt;mark&gt;</code>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar:
 			<mark>Diese Worte sind markiert.</mark>
@@ -881,6 +881,7 @@ tags:
 			<p>Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen
 				Information oder lockern das Erscheinungsbild auf.</p>
 			<p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
+			<form action="">
 				<div class="grid grid_column_2">
 					<label class="">Farbauswahl<br>
 						<code>&lt;input[type="color"]&gt;</code>
@@ -913,19 +914,19 @@ tags:
 					<label class="">@dresse<br>
 						<code>&lt;input[type="email"]&gt;</code>
 					</label>
-				<div><input class="input_io" type="email" placeholder="@"></div>
+					<div><input class="input_io" placeholder="@" type="email"></div>
 					<label class="">Passwort<br>
 						<code>&lt;input[type="password"]&gt;</code>
 					</label>
-				<div><input class="input_io" type="password" value="admin"></div>
+					<div><input class="input_io" value="admin" autocomplete="off" type="password"></div>
 					<label class="">Telefonnummer<br>
 						<code>&lt;input[type="tel"]&gt;</code>
 					</label>
-				<div><input class="input_io" type="tel" value="0190123456"></div>
+					<div><input class="input_io" value="0190123456" type="tel"></div>
 					<label class="">URL<br>
 						<code>&lt;input[type="url"]&gt;</code>
 					</label>
-				<div><input class="input_io" type="url" placeholder="url://"></div>
+					<div><input class="input_io" placeholder="url://" type="url"></div>
 					<label class="">Suche<br>
 						<code>&lt;input[type="search"]&gt;</code>
 					</label>
@@ -936,6 +937,7 @@ tags:
 					<div><input class="" type="file"></div>
 					<label class="">Bild</label><input class="" type="image" alt="Alternativer Text"/>
 				</div>
+			</form>
 		</fieldset>
 
 		<h2>Interaktive Elemente</h2>

source/screens/demo/examples/clock.liquid

@@ -15,10 +15,12 @@ tags:
 {% endblock %}
 
 {% block script %}
-{{ block.super -}}
+<script src="/vendor/hippie-script.js"></script>
+<script src="/js/globals.js"></script>
+<script src="/js/app.js"></script>
 
 <script>
-	// TODO: Mondphase ergänzen
+	// TODO: DateDisplay und TimeDisplay benutzen
 	class HippieClock {
 		constructor(element, date, options) {
 			this.element = element;
@@ -129,6 +131,7 @@ tags:
 				});
 		}
 
+		// TODO: Erfassung für geänderte Formen ergänzen
 		update() {
 			const second = this.getTime().second;
 			const minute = this.getTime().minute;
@@ -336,6 +339,7 @@ tags:
 	clock.addCircle('base', .5, 1);
 	clock.draw();
 
+	// TODO: Alternative mit requestAnimationFrame()
 	setInterval(() => {
 		clock.update();
 	}, 1000);

source/screens/demo/examples/ui/windows.liquid

@@ -50,9 +50,8 @@ tags:
 {% endblock %}
 
 {%- block script %}
-{% comment %}<script src="/js/globals.js"></script>{% endcomment %}
-<script src="/vendor/hippie-script.js"></script>
-<script src="/js/app.js"></script>
+{{ block.super -}}
+
 <script src="/js/windows.js"></script>
 <script>
 	console.log(HIPPIE.brand);
@@ -61,6 +60,7 @@ tags:
 	const start = document.querySelector('[data-action=start]');
 	const draggableElement = document.getElementById('task-bar');
 	const placeholderElement = document.getElementById('placeholder');
+	// TODO: TimeDisplay in HippieTaskbar aufnehmen
 	const timeElement = document.getElementById('time');
 
 	const taskBar = new HippieTaskBar(draggableElement, placeholderElement);

source/screens/demo/index.liquid

@@ -63,13 +63,3 @@ tags:
 	</div>
 </div>
 {% endblock %}
-
-{% block script %}
-{{ block.super -}}
-{% render 'hippie/partials/log-assets', state: true -%}
-{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
-<script>
-	// Page script
-</script>
-{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
-{% endblock %}

source/templates/hippie/default.liquid

@@ -29,7 +29,7 @@
 <body{{ bodyClassAttr }}>
 {%- block body %}{% endblock -%}
 <script>
-	// {{ title }} script
+	// {{ title }} script using default template
 </script>
 {%- block script %}{% endblock -%}
 </body>

source/templates/hippie/full.liquid

@@ -37,9 +37,12 @@
 {%- block body %}{% endblock -%}
 {% render 'hippie/partials/log-log' with 'BODY        :: Loading script assets...' as msg -%}
 <script>
-	// Full script
+	// {{ title }} script using full template
 </script>
 {%- block script %}{% endblock -%}
+{% render 'hippie/partials/log-assets', state: true -%}
+{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
 {% render 'hippie/partials/log-log' with 'BODY end    :: Page script might still be loading.' as msg -%}
+{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
 </body>
 </html>

source/templates/hippie/simple.liquid

@@ -7,9 +7,3 @@
 {{ block.super -}}
 <link href="/css/demo.css" media="all" rel="stylesheet"/>
 {% endblock %}
-
-{% block script %}
-<script src="/vendor/hippie-script.js"></script>
-<script src="/js/globals.js"></script>
-<script src="/js/app.js"></script>
-{% endblock %}