feat: More content for components and layouts

- Update hippie styles
- Add demo images
- New components content
- New layout structure and content

source/code/_intro.js

@@ -1,55 +1,42 @@
-let introDelay = 6;
+class Intro {
-let hintDelay = 1;
+	constructor(name) {
-let isAgree = false;
+		this.name = name;
+	}
 
-const steps = {
+	init() {
+		return new Promise((resolve) => {
+			console.log('%s Init', this.name);
+
+			resolve();
+		});
+	}
+}
+
+class UI {
+	constructor() {
+		this.introDelay = 6;
+		this.hintDelay = 1;
+		this.isAgree = false;
+		this.steps = {
 			agreement: {
 				element: document.getElementById('agreement'),
 				msgIn: 'Agreement shown.',
 				msgOut: 'Agreement accepted.',
 				msgNo: 'No agreement today.'
 			}
-};
+		};
-const intro = document.getElementById('intro');
+		this.intro = document.getElementById('intro');
-const agreement = steps.agreement.element;
+		this.agreement = this.steps.agreement.element;
-const hint = {
+		this.hint = {
 			element: document.getElementById('hint'),
-	delay: hintDelay * 1000,
+			delay: this.hintDelay * 1000
-	show() {
+		};
-		if (typeof this.timeoutId === 'number') {
+		this.loader = document.getElementById('loader');
-			this.cancel();
 	}
 
-		this.element.classList.remove('di_none');
+	showIntro() {
-
+		const el = this.intro;
-		this.timeoutId = setTimeout(
+		const dy = this.introDelay * 1000;
-			() => {
-				this.dismiss();
-			},
-			this.delay
-		);
-	},
-	dismiss() {
-		this.element.classList.add('di_none');
-		this.timeoutId = undefined;
-	},
-	cancel() {
-		clearTimeout(this.timeoutId);
-	}
-};
-const loader = document.getElementById('loader');
-
-function init() {
-	return new Promise((resolve) => {
-		console.log('Init');
-
-		resolve();
-	});
-}
-
-function showIntro() {
-	const el = intro;
-	const dy = introDelay * 1000;
 
 		document.addEventListener('click', hintHandler, false);
 		document.addEventListener('keydown', hintHandler, false);
@@ -72,6 +59,103 @@ function showIntro() {
 					dy
 				);
 			} else {
+				reject('No intro available.');
+			}
+		})
+	}
+
+	showHint() {
+		if (typeof this.hint.timeoutId === 'number') {
+			this.cancelHint();
+		}
+
+		this.hint.element.classList.remove('di_none');
+
+		this.hint.timeoutId = setTimeout(
+			() => {
+				this.dismissHint();
+			},
+			this.hint.delay
+		);
+	}
+
+	dismissHint() {
+		this.hint.element.classList.add('di_none');
+		this.hint.timeoutId = undefined;
+	}
+
+	cancelHint() {
+		clearTimeout(this.hint.timeoutId);
+	}
+
+	showIdle() {
+		const el = document.getElementById('idle');
+
+		return new Promise((resolve, reject) => {
+			if (el) {
+				console.info('Idle.');
+
+				el.classList.replace('op_hide', 'op_show');
+				resolve('Idle.');
+			} else {
+				reject();
+			}
+		})
+	}
+
+	init() {
+		return new Promise((resolve) => {
+			console.log('Init');
+
+			resolve();
+		});
+	}
+}
+
+function init() {
+	return new Promise((resolve) => {
+		console.log('Init');
+
+		// Set all steps to not receive pointer events
+		document.querySelectorAll('.step').forEach(element => {
+			console.log(element);
+			
+			element.style.pointerEvents = 'none';
+		});
+
+		resolve();
+	});
+}
+
+function showIntro() {
+	const el = intro;
+	const dy = introDelay * 1000;
+
+	document.addEventListener('click', hintHandler, false);
+	document.addEventListener('keydown', hintHandler, false);
+
+	return new Promise((resolve, reject) => {
+		if (el) {
+			console.info("Intro begin.");
+
+			el.classList.replace('op_hide', 'op_show');
+			setTimeout(
+				() => {
+					el.classList.replace('op_show', 'op_hide');
+					el.addEventListener('transitionend', () => {
+						console.info("Intro fin.");
+
+						el.classList.add('di_none');
+
+						resolve("Intro fin.");
+					});
+				},
+				dy
+			);
+		} else {
+			document.removeEventListener('click', hintHandler);
+			document.removeEventListener('keydown', hintHandler);
+
 			reject('No intro available.');
 		}
 	})
@@ -88,7 +172,10 @@ function showAgreement() {
 			console.info(steps.agreement.msgIn);
 
 			el.classList.replace('op_hide', 'op_show');
+			el.style.pointerEvents = '';
+
 			el.addEventListener('click', agreeHandler);
+			document.addEventListener('keydown', agreeHandler);
 		} else {
 			reject(steps.agreement.msgNo);
 		}
@@ -104,7 +191,9 @@ function showAgreement() {
 
 				el.removeEventListener('transitionend', endListener);
 				el.removeEventListener('click', agreeHandler);
+				document.removeEventListener('keydown', agreeHandler);
 				el.classList.add('di_none');
+
 				resolve(steps.agreement.msgOut);
 			});
 		}
@@ -114,13 +203,22 @@ function showAgreement() {
 function showIdle() {
 	const el = document.getElementById('idle');
 
+	document.addEventListener('mouseleave', idleStart, false);
+	document.addEventListener('mouseenter', idleStop, false);
+
 	return new Promise((resolve, reject) => {
 		if (el) {
 			console.info('Idle.');
 
 			el.classList.replace('op_hide', 'op_show');
+			el.style.pointerEvents = '';
+			el.addEventListener('click', idleStart, false);
+
 			resolve('Idle.');
 		} else {
+			document.removeEventListener('mouseleave', idleStart);
+			document.removeEventListener('mouseenter', idleStop);
+
 			reject();
 		}
 	})
@@ -166,6 +264,7 @@ function loadCore() {
 
 					el.removeEventListener('transitionend', endListener);
 					el.classList.add('di_none');
+
 					resolve("Core loaded.");
 				});
 			}
@@ -173,60 +272,6 @@ function loadCore() {
 	});
 }
 
-init()
-	.then(loadCore)
-	.then(showIntro)
-	.catch(er => console.error(er))
-	.then(showAgreement)
-	.then(showIdle)
-	.catch(er => console.error(er))
-	.finally(() => {
-		console.debug('Init end.', isAgree);
-		// location = 'demo/examples/ui/new.html';
-	});
-
-// document.addEventListener('DOMContentLoaded', () => {
-// 	const barEl = document.getElementById('bar');
-// 	const bar = document.getElementById('progress');
-// 	const status = document.getElementById('status');
-// 	const spinnerEl = document.getElementById('spinner');
-// 	const spinner = document.getElementById('spinner').querySelector('span');
-
-// 	let progress = 0;
-
-// 	function updateProgressBar() {
-// 		let increment = randomIntFrom(1, 9);
-// 		progress += increment;
-
-// 		if (progress >= 100) progress = 100;
-// 		console.log(progress);
-
-// 		bar.style.width = progress + '%';
-// 		status.textContent = progress + '%';
-
-// 		if (progress < 100) {
-// 			setTimeout(updateProgressBar, 100);
-// 		} else {
-// 			bar.style.width = '100%';
-// 			spinner.style.animationPlayState = 'paused';
-// 			spinnerEl.style.color = 'white';
-// 			spinnerEl.style.backgroundColor = 'black';
-// 		}
-// 	}
-
-// 	updateProgressBar();
-
-// 	window.addEventListener('load', () => {
-// 		// progressEl.style.width = '100%';
-// 		// setTimeout(() => {
-// 		// 		progressBar.style.opacity = 0;
-// 		// 		setTimeout(() => {
-// 		// 				progressBar.style.display = 'none';
-// 		// 		}, 500);
-// 		// }, 2000);
-// 	});
-// });
-
 /**
  * Gibt eine Zahl zwischen <min> und <max> aus.
  * Die Werte <min> und <max> sind dabei mit eingeschlossen.
@@ -252,6 +297,14 @@ function hintHandler() {
 	hint.show();
 }
 
+function idleStart() {
+	idle.cycle();
+}
+
+function idleStop() {
+	idle.cancel();
+}
+
 /**
  * Blendet einen Schritt aus.
  * 
@@ -268,6 +321,7 @@ function stepHandler(e) {
 			console.info(msg);
 
 			el.removeEventListener('transitionend', endListener);
+			
 			resolve(msg);
 		});
 	})

source/code/_ui.js

@@ -0,0 +1,113 @@
+// Creates a div element which is draggable
+class NewDiv {
+  constructor(x, y, width, height, backgroundColor) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.backgroundColor = backgroundColor;
+    this.element = null;
+  }
+
+  // Create the div element
+  createDiv() {
+    this.element = document.createElement('div');
+    this.element.style.position = 'absolute';
+    this.element.style.left = `${this.x}px`;
+    this.element.style.top = `${this.y}px`;
+    this.element.style.width = `${this.width}px`;
+    this.element.style.height = `${this.height}px`;
+    this.element.style.background = this.backgroundColor;
+    this.element.style.cursor = 'move';
+
+    // Add event listeners for dragging
+    let isDown = false;
+    let offset = [0, 0];
+
+    this
+      .element
+      .addEventListener('mousedown', (event) => {
+        if (event.button === 0) { // Left mouse button
+          isDown = true;
+          offset = [
+            this.element.offsetLeft - event.clientX,
+            this.element.offsetTop - event.clientY
+          ];
+        }
+      });
+
+    document.addEventListener('mouseup', () => {
+      isDown = false;
+    });
+
+    document.addEventListener('mousemove', (event) => {
+      if (isDown) {
+        const maxX = window.innerWidth - this.element.offsetWidth;
+        const maxY = window.innerHeight - this.element.offsetHeight;
+        let x = event.clientX + offset[0];
+        let y = event.clientY + offset[1];
+
+        // Boundary checks
+        if (x < 0)
+          x = 0;
+        if (y < 0)
+          y = 0;
+        if (x > maxX)
+          x = maxX;
+        if (y > maxY)
+          y = maxY;
+
+        this.element.style.left = `${x}px`;
+        this.element.style.top = `${y}px`;
+      }
+    });
+
+    // Save position and size
+    const saveData = () => {
+      const data = {
+        x: this.element.offsetLeft,
+        y: this.element.offsetTop,
+        width: this.element.offsetWidth,
+        height: this.element.offsetHeight
+      };
+      // Save data to local storage or a database
+      localStorage.setItem(`divData${this.element.id}`, JSON.stringify(data));
+    };
+
+    // Load saved data
+    const loadData = () => {
+      const data = localStorage.getItem(`divData${this.element.id}`);
+      if (data) {
+        const parsedData = JSON.parse(data);
+        this.element.style.left = `${parsedData.x}px`;
+        this.element.style.top = `${parsedData.y}px`;
+        this.element.style.width = `${parsedData.width}px`;
+        this.element.style.height = `${parsedData.height}px`;
+      }
+    };
+
+    // Call the save function when the user stops dragging
+    document.addEventListener('mouseup', saveData);
+
+    // Load saved data on page load
+    loadData();
+  }
+
+  // Append the div to the space
+  appendToFrame(space) {
+    this.element.id = `newDiv${space.children.length}`;
+    space.appendChild(this.element);
+  }
+}
+
+// Function to generate a random color
+function getRandomColor() {
+  const letters = '0123456789ABCDEF';
+  let color = '#';
+
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+
+  return color;
+}

source/code/app.js

@@ -1,22 +1,22 @@
 //NEW
 
-function Clock(id){
+function Clock(id) {
 	this.id = id;
 
 	var that = this;
-	setInterval(function(){that.updateClock();}, 1000);
+	setInterval(function () { that.updateClock(); }, 1000);
 	this.updateClock();
 }
 
-Clock.prototype.updateClock = function(){
+Clock.prototype.updateClock = function () {
 	var date = new Date();
 	var clock = document.getElementById(this.id);
 	//console.log(this);
 	clock.innerHTML = this.formatDigits(date.getHours()) + ":" + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds());
 };
 
-Clock.prototype.formatDigits = function(val){
+Clock.prototype.formatDigits = function (val) {
-	if(val<10) val = "0" + val;
+	if (val < 10) val = "0" + val;
 
 	return val;
 }
@@ -43,35 +43,35 @@ function ongoing() {
 	var h = Math.floor(now.getHours() + m / 60);
 
 	var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5)
-	j2000.setUTCFullYear(2000,0,1);
+	j2000.setUTCFullYear(2000, 0, 1);
-	j2000.setUTCHours(0,0,0,0);
+	j2000.setUTCHours(0, 0, 0, 0);
 
 	var utc = new Date();
-	utc.setUTCFullYear(y,MNumb,DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
+	utc.setUTCFullYear(y, MNumb, DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
-	utc.setUTCHours(h,m,s,ms);
+	utc.setUTCHours(h, m, s, ms);
 
 	var utc0 = new Date();
-	utc0.setUTCFullYear(y,MNumb,DNumb);
+	utc0.setUTCFullYear(y, MNumb, DNumb);
-	utc0.setUTCHours(0,0,0,0);
+	utc0.setUTCHours(0, 0, 0, 0);
 
-	var jd = 2451544.5 + (utc-j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
+	var jd = 2451544.5 + (utc - j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
-	var jdUTC0 = 2451544.5 + (utc0-j2000) / 86400000;
+	var jdUTC0 = 2451544.5 + (utc0 - j2000) / 86400000;
 
 	var N = jd - 2451545.0;
 	var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne
 	var g = 357.528 + 0.9856003 * N; // mittlere Anomalie
-	var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2*g);
+	var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2 * g);
 	var e = 23.439 - 0.0000004 * N;
-	var rektaszension = Math.atan((Math.cos(e)*Math.sin(el)) / Math.cos(el));
+	var rektaszension = Math.atan((Math.cos(e) * Math.sin(el)) / Math.cos(el));
 
 	var T = (jdUTC0 - 2451545.0) / 36525;
-	var stGMT = (((6*3600) + (41*60) + 50.54841) + (8640184.812866*T) + (0.093104*Math.pow(T,2)) - (0.0000062*Math.pow(T,3))) / 3600;
+	var stGMT = (((6 * 3600) + (41 * 60) + 50.54841) + (8640184.812866 * T) + (0.093104 * Math.pow(T, 2)) - (0.0000062 * Math.pow(T, 3))) / 3600;
 
 	var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T;
 	var hWGMT = stGMT2 * 15;
 	var hW = hWGMT + 11.9566185772;
 
-	var st = (stGMT + (now.getUTCHours()*1.00273790935)) + (11.9566185772/15); // Sommerzeit muss noch berücksichtigt werden
+	var st = (stGMT + (now.getUTCHours() * 1.00273790935)) + (11.9566185772 / 15); // Sommerzeit muss noch berücksichtigt werden
 	var st24 = Math.abs(st - (Math.round(st / 24) * 24));
 	var stH = Math.floor(st24);
 	var stM = Math.floor((st24 % 1) * 60);
@@ -103,73 +103,30 @@ function ongoing() {
 
 }
 
-function zeroFill( number, width ){
+function zeroFill(number, width) {
 	width -= number.toString().length;
-	if ( width > 0 ){
+	if (width > 0) {
-		return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
+		return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
 	}
 	return number + ""; // always return a string
 }
 
-// create emails
-function composeMail(tag, name, prov, suffix, text, topic) {
-	var trigger = tag.indexOf(".");
-	var mailString = name + '@' + prov + '.' + suffix;
-	var textString = mailString.replace(/@/g, "(at)");
-	var descString = "Nachricht an " + mailString;
-	if (trigger == -1) {
-		if (!text) {
-			text = mailString;
-		} else if (text == "at") {
-			text = textString;
-		} else if (text == "to") {
-			text = descString;
-		}
-		if (!topic) {
-			topic = "";
-		} else {
-			topic = "?subject=" + topic;
-		}
-		var old = $('#'+tag).html();
-		$('#'+tag).html(old + text);
-		$('#'+tag).attr("href", "mailto:" + mailString + topic);
-	} else {
-		$(tag).each(function() {
-			if (!text) {
-				text = mailString;
-			} else if (text == "at") {
-				text = textString;
-			} else if (text == "to") {
-				text = descString;
-			}
-			if (!topic) {
-				topic = "";
-			} else {
-				topic = "?subject=" + topic;
-			}
-			var old = $(this).html();
-			$(this).html(old + text);
-			$(this).attr("href", "mailto:" + mailString + topic);
-		});
-	}
-}
-
 //Länge der Balken im Diagram berechnen
 function barwidth(size, G, W) {
 	var s = size;
 	var g = G;
 	var w = W;
-	var p = ( w / g ) * 100;
+	var p = (w / g) * 100;
-	var newW = s * ( p /100 );
+	var newW = s * (p / 100);
 
 	return newW;
 }
 //String Element erweitern
-String.prototype.transform = function() { 
+String.prototype.transform = function () {
 	return parseFloat(this.replace(',', '.'));
 }
 //Array Element erweitern
-Array.prototype.arrayAdd = function() {
+Array.prototype.arrayAdd = function () {
 	return eval(this.join("+"));
 }
 //Speicherplatz in Prozent berechnen
@@ -177,7 +134,7 @@ function percentage(total, gigs, round) {
 	var totalSpace = total;
 	var singleSpace = gigs;
 	var z = round;
-		var p = singleSpace / ( totalSpace / 100 );
+	var p = singleSpace / (totalSpace / 100);
 
 	return p;
 }
@@ -186,7 +143,7 @@ function gigabytes(percent, total, round) {
 	var occupiedPercent = percent;
 	var singleSpace = total;
 	var z = round;
-		var g = (singleSpace / 100 ) * occupiedPercent;
+	var g = (singleSpace / 100) * occupiedPercent;
 
 	return g;
 }

source/code/hippie/functions.js

@@ -146,6 +146,45 @@ function HippieMeta($ma, $pp) {
 	});
 }
 
+// Sets the href attribute to mailto: with given information
+function composeMail(tag, name, prov, suffix, text, topic) {
+	let trigger = tag.indexOf(".");
+	let mailString = name + '@' + prov + '.' + suffix;
+	let textString = mailString.replace(/@/g, "(at)");
+	let descString = "Nachricht an " + mailString;
+
+	if (!text) {
+		text = mailString;
+	} else if (text === "at") {
+		text = textString;
+	} else if (text === "to") {
+		text = descString;
+	}
+
+	if (topic) {
+		topic = "?subject=" + topic;
+	} else {
+		topic = "";
+	}
+
+	if (trigger === -1) {
+		const el = document.getElementById(tag);
+		const elContent = el.innerHTML;
+
+		el.innerHTML = elContent + text;
+		el.setAttribute("href", "mailto:" + mailString + topic);
+	} else {
+		const els = document.getElementsByClassName(tag.slice(1));
+
+		for (let el of els) {
+			const elContent = el.innerHTML;
+
+			el.innerHTML = elContent + text;
+			el.setAttribute("href", "mailto:" + mailString + topic);
+		};
+	}
+}
+
 // get document coordinates of the element
 // function getCoords (elem) {
 // 	let box = elem.getBoundingClientRect();

source/code/hippie/global.js

@@ -1,3 +1,3 @@
 // Setup
 // -----------------------------------------------------------------------------
-// setup();
+setup();

source/code/hippie/variables.js

@@ -1,4 +1,4 @@
-var hippie = {
+let hippie = {
 	brand: "|-| | |^ |^ | [- ",
 	screen: {
 		w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
@@ -12,9 +12,19 @@ var hippie = {
 		h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0),
 	}
 };
+let viewHover = true;
+let basicEase = 600;
 
-var viewHover = true;
+const onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
-var basicEase = 600;
+const onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";
-
+const flagColors = [
-var onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
+	'fad803',
-var onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";
+	'f2af13',
+	'd30a51',
+	'8e1f68',
+	'273f8b',
+	'3c579a',
+	'b7e0f0',
+	'6bc7d9',
+	'52bed1'
+]

source/screens/demo/basics.njk

@@ -14,10 +14,8 @@ tags:
 {% endblock %}
 
 {% block main %}
-<!-- {{ page.fileSlug }}.page -->
+	<!-- {{ page.fileSlug }}.page -->
-  {% include "hippie/partials/_body_nav.njk" %}
+	<div class="demo__intro">
-
-  <div id="begin" class="demo__intro">
 		Dies ist einfach nur Text.<br>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.<br>Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.<br><br>
 		<article>
 			<p>Es wirken nur die Eigenschaften des
@@ -245,7 +243,7 @@ tags:
 				<p>
 					<a class="a_button_text" href="#textlevel">↥</a>
 					(Zum Anfang des Abschnitts springen)
-          <a class="a_button_text" href="#begin">⇫</a>
+					<a class="a_button_text" href="#">⇫</a>
 					(Zum Anfang der Seite springen)</p>
 			</nav>
 			<nav class="nav_center_old">
@@ -647,6 +645,7 @@ tags:
 				nur lesbar gemacht werden oder mittels
 				<code>disabled</code>
 				gänzlich deaktiviert werden.</p>
+			{# // TODO: Abstände, besonders margin generell überarbeiten #}
 			<p><input type="text" value="Nur lesbare Eingabe" readonly="readonly"><input type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
 				<button disabled="disabled">Deaktivierte Schaltfläche</button>
 			</p>
@@ -867,32 +866,4 @@ tags:
 			</header>
 		</section>
 	</div>
-
-{% endblock %}
-
-{% block script %}
-  {{ super() }}
-  {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
-  <!-- build:js js/main.concat.min.js -->
-  <script src="{{ pageBase }}js/variables.js"></script>
-  <script src="{{ pageBase }}js/functions.js"></script>
-  <script src="{{ pageBase }}js/global.js"></script>
-  <script>
-    assetsLoaded = true;
-    logPerf('Assets loaded.', assetsLoaded);
-    // Page specific
-    // ------------------------------------------------------------------------------
-    // Create instance of object made by contructor function
-    var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
-    var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
-
-    $(document).ready(function () {
-      logPerf('JQ document ready event fired.');
-    });
-
-    $(document).scroll(function () {
-      scrollUi.check();
-    });
-    logPerf('Application ready... not.');
-  </script>
 {% endblock %}

source/screens/demo/components.njk

@@ -7,6 +7,7 @@ tags:
 {% set pageId = page.fileSlug %}
 
 {% extends "demo/_main.njk" %}
+{% import "hippie/macros/_footer.njk" as footer %}
 
 {% block title %}Komponenten{% endblock %}
 {% block head %}
@@ -14,12 +15,7 @@ tags:
 {% endblock %}
 
 {% block main %}
-<!-- {{ page.fileSlug }}.page -->
+	<!-- {{ page.fileSlug }}.page -->
-  <div class="temp_layer">
-    <!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
-    {% include "hippie/partials/_body_nav.njk" %}
-  </div>
-  <div id="begin" class="">
 	<section class="sec_main_center">
 		<header class="header_txt">
 			<h1>Medienformat Abfragen</h1>
@@ -43,10 +39,10 @@ tags:
 	<section class="sec_main_center">
 		<header class="header_txt">
 			<h1>Übersicht aller Elemente</h1>
-        <p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p>
+			<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://html.spec.whatwg.org/multipage/#toc-semantics">html.spec.whatwg.org/multipage/#toc-semantics</a>) verwendet.</p>
 			<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
 		</header>
-      <pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h4{Varianten}</code></pre>
+		<pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h2{&lt;tag&gt;}+h4{Varianten}</code></pre>
 		<article>
 			<h1 id="sections">Bereiche</h1>
 			<p>Elemente:</p>
@@ -54,38 +50,131 @@ tags:
 			<h2>&lt;body&gt;</h2>
 			<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
 			<h2>&lt;article&gt;</h2>
-        <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
+			<article>Ein Artikel.</article>
 			<h2>&lt;section&gt;</h2>
-        <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
+			<section>Ein Bereich.</section>
 			<h4>Varianten</h4>
 			<pre class="pre_code"><code>section.sec_main_center</code></pre>
+			<section class="sec_main_center">
+				<p class="float_right">Ende.</p>
+				<p>Zentrierter Bereich.</p>
+			</section>
 			<pre class="pre_code"><code>section.sec_main_status</code></pre>
-        <h2>&lt;h3&gt;</h2>
+			<section class="sec_main_status">Status-Bereich</section>
-        <h2>&lt;h4&gt;</h2>
+			<h2>&lt;nav&gt;</h2>
+			<nav>Navigation</nav>
+			<h2>&lt;aside&gt;</h2>
+			<p>Fließt um andere Inhalte. Klassen zur Positionierung und Kombination mit <code>.bside</code>.</p>
+			<pre class="pre_code"><code>aside.right+div.bside</code></pre>
+			<section>
+				<aside class="right">Seitenbereich, recht ausgerichtet.</aside>
+				<div class="bside">Hauptbereich</div>
+			</section>
+			<h2>&lt;h*&gt;</h2>
+			<h1>Überschrift 1</h1>
+			<h2>Überschrift 2</h2>
+			<h3>Überschrift 3</h3>
+			<h4>Überschrift 4</h4>
+			<h5>Überschrift 5</h5>
+			<hgroup>
+				<h6>Überschrift 6</h6>
+				<p>Mit Absatz innerhalb von <code>&lt;hgroup&gt;</code>.</p>
+			</hgroup>
+			<h2>&lt;header&gt;</h2>
+			<header>Kopfbereich</header>
+			<pre class="pre_code"><code>header.header_page</code></pre>
+			<pre class="pre_code"><code>header.header_txt>h1</code></pre>
+			<header class="header_txt">
+				<h1>Überschrift 1</h1>
+				<p>Innerhalb eines <code>&lt;header&gt;</code>.</p>
+			</header>
+			<h2>&lt;footer&gt;</h2>
+			<p>Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
+			<footer>Fußbereich</footer>
+			<div style="position:relative;height:256px;background-color:#b7e0f0;">
+				{{ footer.pinned() }}
+			</div>
 		</article>
 		<article>
 			<h1 id="grouping">Gruppierung</h1>
 			<p>Elemente:</p>
 			<pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre>
 			<h2>&lt;p&gt;</h2>
+			<p>Ein Absatz. Ein <code>code</code> Element innerhalb wird besonders behandelt.</p>
 			<h4>Varianten</h4>
-        <pre class="pre_code"><code>p.txt_center</code></pre>
-        <pre class="pre_code"><code>p.txt_right</code></pre>
 			<pre class="pre_code"><code>p.column_2</code></pre>
+			<p class="column_2">Spalten können angegeben werden.</p>
 			<pre class="pre_code"><code>p.column_3.column_line</code></pre>
+			<p class="column_3 column_line">Spalten können angegeben werden.</p>
+			<h2>&lt;address&gt;</h2>
+			<address>Anschrift, mit bestimmtem, ##### Format.</address>
 			<h2>&lt;hr&gt;</h2>
+			<hr>
 			<h4>Varianten</h4>
-        <pre class="pre_code"><code>hr.hr_hidden</code></pre>
+			<pre class="pre_code"><code>hr.hr_hidden+hr.hr_dotted+hr.hr_double</code></pre>
-        <pre class="pre_code"><code>hr.hr_dotted</code></pre>
+			<hr class="hr_hidden">
-        <pre class="pre_code"><code>hr.space_even_half</code></pre>
+			<hr class="hr_dotted">
-        <pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
+			<hr class="hr_double">
+			<h2>&lt;pre&gt;</h2>
+			<pre>Vorformatierter Text.
+	erhält Umbrüche und Einrückung.
+			</pre>
+			<pre class="pre_code"><code>pre.pre_code>code*2</code></pre>
+			<pre class="pre_code"><code>let variable = true;</code>
+<code>()(){}</code></pre>
 			<h2>&lt;blockquote&gt;</h2>
-        <pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre>
+			<blockquote>Ein Zitat ist eingerückt.</blockquote>
+			<pre class="pre_code"><code>blockquote.quote_mark>p+p.quote_source</code></pre>
+			<blockquote class="quote_mark">
+				<p>Zitat mit automatischen Anführungszeichen</p>
+				<p class="quote_source">und Quellenangabe.</p>
+			</blockquote>
+			<h2>&lt;dl&gt;, &lt;ol&gt;, &lt;ul&gt;</h2>
+			<dl>
+				<dt>Begriff</dt>
+				<dd>Definition</dd>
+			</dl>
+			<ol>
+				<li>Eins</li>
+				<li>Zwei</li>
+			</ol>
+			<ul class="horizontal">
+				<li>Obst</li>
+				<li>Gemüse</li>
+			</ul>
+			<h4>Varianten</h4>
+			<pre class="pre_code"><code>ul.list_basic.list_dash>li*2</code></pre>
+			<ul class="list_basic list_dash">
+				<li>Mehr Abstand und</li>
+				<li>mit Unterstrichen.</li>
+			</ul>
+			<pre class="pre_code"><code>ul.list_link>(li>a)*2</code></pre>
+			<ul class="list_link">
+				<li><a href="">Mit</a></li>
+				<li><a href="">Verweisen</a></li>
+			</ul>
 			<h2>&lt;figure&gt;</h2>
 			<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
+			<figure>
+				<figcaption>Bezeichnung</figcaption>
+				Grafisches Element.
+			</figure>
+			<h2>&lt;main&gt;</h2>
+			<main>Hauptbereich</main>
 			<h2>&lt;div&gt;</h2>
-        <pre class="pre_code"><code>div.div_info>p</code></pre>
 			<h4>Varianten</h4>
+			<pre class="pre_code"><code>div.div_info>p</code></pre>
+			<div class="div_info">
+				<p>Absatz in Informationsbox.</p>
+			</div>
+			<pre class="pre_code"><code>div.box_space>div.box_cube>span</code></pre>
+			<div class="box_space">
+				<div class="box_cube"><span>Text</span></div>
+			</div>
+			<pre class="pre_code"><code>div.box_placeholder+hr+div.box_placeholder_bkg</code></pre>
+			<div class="box_placeholder"></div>
+			<hr>
+			<div class="box_placeholder_bkg"></div>
 		</article>
 		<article>
 			<h1 id="tabularData">Tabellen</h1>
@@ -94,7 +183,7 @@ tags:
 			<h2>&lt;table&gt;</h2>
 			<h4>Varianten</h4>
 			<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
-        <table class="width_full table_fix js_pop">
+			<table class="width_full table_fix">
 				<thead>
 					<tr>
 						<th class="cell_pre" scope="col"></th>
@@ -182,26 +271,116 @@ tags:
 				</tfoot>
 			</table>
 		</article>
-    </section>
+		<article>
+			<h1 id="forms">Formulare</h1>
+			<p>Elemente:</p>
+			<pre>// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend</pre>
+			<h2>&lt;input&gt;</h2>
+			<div class="flex_column_wrap">
+				<div class="flex_column"><input value="Undefiniert"/></div>
+				<div class="flex_column"><input type="text" size="8" value="Text"/></div>
+				<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
+				<div class="flex_column"><input type="button" value="Auswählen"></div>
+				<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
 			</div>
+			<h4>Varianten</h4>
+			<div id="capsCheck">
+				<form action="">
+					<input type="password" onkeypress="capLock(event)"/>
+					<div id="hint" style="visibility:hidden">Caps Lock is on.</div>
+					<input type="text"/>
+					<span id="error">Caps Lock is ON.</span>
+				</form>
+			</div>
+			<h2>&lt;select&gt;</h2>
+			<select name="F">
+				<option value="0">
+						Plain list</option>
+				<option value="1" selected="selected">
+						Fancy list</option>
+				<option value="2">
+						Table list</option>
+			</select>
+		</article>
+	</section>
 {% endblock %}
 
 {% block script %}
 	{{ super() }}
-  <script src="{{ pageBase }}vendor/jq-sticky-anything.min.js"></script>
-  {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
-  <!-- build:js js/main.concat.min.js -->
-  <script src="{{ pageBase }}js/variables.js"></script>
-  <script src="{{ pageBase }}js/functions.js"></script>
-  <script src="{{ pageBase }}js/global.js"></script>
-  {{ log.asset(true) }}
-  {{ log.log('Assets loaded.', assetsLoaded) }}
 	<script>
-    // Page specific
+		function capLock(e) {
-    // ------------------------------------------------------------------------------
+			console.log('capLock');
-    $(document).ready(function () {
+			kc = e.keyCode
-      // jq-sticky-anything
+				? e.keyCode
-      $('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
+				: e.which;
+			sk = e.shiftKey
+				? e.shiftKey
+				: (
+					(kc == 16)
+					? true
+					: false);
+
+			if (((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk)) {
+				document
+					.getElementById('hint')
+					.style
+					.visibility = 'visible';
+			} else {
+				document
+					.getElementById('hint')
+					.style
+					.visibility = 'hidden';
+			}
+		}
+
+		function capsDetect() {
+			const body = document.getElementsByTagName('body')[0];
+			const capsWarning = document.getElementById('error');
+			let isShiftPressed = false;
+			let isCapsOn = false;
+
+			console.log(body);
+			body.addEventListener('keydown', function (e) {
+				var keyCode = e.keyCode
+					? e.keyCode
+					: e.which;
+				if (keyCode === 16) {
+					isShiftPressed = true;
+				}
 			});
+			body.addEventListener('keyup', function (e) {
+				var keyCode = e.keyCode
+					? e.keyCode
+					: e.which;
+				if (keyCode === 16) {
+					isShiftPressed = false;
+				}
+				if (keyCode === 20) {
+					if (isCapsOn) {
+						isCapsOn = false;
+						capsWarning.style.display = 'none';
+					} else {
+						isCapsOn = true;
+						capsWarning.style.display = 'inline-block';
+					}
+				}
+			});
+			body.addEventListener('keypress', function (e) {
+				var keyCode = e.keyCode
+					? e.keyCode
+					: e.which;
+				if (keyCode <= 40) 
+					return;
+				if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
+					isCapsOn = true;
+					capsWarning.style.display = 'inline-block';
+				} else {
+					capsWarning.style.display = 'none';
+				}
+			});
+		}
+
+		// TODO: Beide Varianten lauffähig machen
+		// capsDetect();
 	</script>
 {% endblock %}

source/screens/demo/examples/card.njk

@@ -9,14 +9,16 @@ tags:
 {% extends "demo/_default.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
 
-{% block title %}{{ title }}{% endblock %}
+{% block title %}{{ title }}
+{% endblock %}
 
 {% block head %}
 	{{ super() }}
 {% endblock %}
 
 {% block body %}
-<!-- {{ page.fileSlug }}.page -->
+
+	<!-- {{ page.fileSlug }}.page -->
 	<div class="card_bkg">
 		<div id="dither"></div>
 		<svg version="1.1" id="flag" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
@@ -45,7 +47,7 @@ tags:
 		{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
 	</div>
 	<div class="card_box">
-    <div id="jsCardHover">
+		<div id="js_content">
 			<p>Titel<br/>und Beschreibung</p>
 			<h1>{{ ph.name() }}</h1>
 			<p>
@@ -58,56 +60,40 @@ tags:
 {% endblock %}
 
 {% block script %}
-  {{ super() }}
-  {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
-  <!-- build:js js/main.concat.min.js -->
-  <script src="{{ pageBase }}js/variables.js"></script>
-  <script src="{{ pageBase }}js/functions.js"></script>
-  <script src="{{ pageBase }}js/global.js"></script>
 	<script>
-    $(document).ready(function () {
+		const flag = document.getElementById("flag");
-      // composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', '');
+		let colors = new Array();
+		let iId = undefined;
+		let position = 0;
 
-      var colors = new Array();
+		for (let i = 1; i <= flag.childElementCount; i++) {
-      var position = 0;
+			colors.push(document.getElementById("triangle-" + i).getAttribute("fill"));
-
-      for (var i = 1; i <= $("#flag").children().length; i++) {
-        colors.push($("#triangle-" + i).attr("fill"));
 		}
 
-      $('#jsCardHover').on({
+		// console.log(colors);
-        mouseenter: function () {
+
-          // $('#flag').addClass('effect');
+		document.getElementById('js_content').addEventListener('mouseenter', () => {
-          // $('#flag').css('opacity', 0);
+			iId = setInterval(() => {
-          $('#flag')
+				for (let i = 1; i <= colors.length; i++) {
-            .stop()
-            .fadeOut(10000);
-          this.iid = setInterval(function () {
-            for (var i = 1; i <= colors.length; i++) {
 					position++;
+
 					if (position >= colors.length) {
 						position = 0;
 					}
-              $("#triangle-" + i).attr("fill", colors[position]);
+
+					document.getElementById("triangle-" + i).setAttribute("fill", colors[position]);
 				}
+
 				position++;
+
 				if (position >= colors.length) {
 					position = 0;
 				}
 			}, 600);
-        },
-        mouseleave: function () {
-          // $('#flag').removeClass('effect');
-          // $('#flag').css('opacity', 1);
-          $('#flag')
-            .stop()
-            .fadeIn(1000);
-          this.iid && clearInterval(this.iid);
-        },
-        click: function () {
-          $("#dither").toggle();
-        }
 		});
+
+		document.getElementById('js_content').addEventListener('mouseleave', () => {
+			iId && clearInterval(iId);
 		});
 	</script>
 {% endblock %}

source/screens/demo/examples/portal.njk

@@ -9,14 +9,15 @@ tags:
 {% extends "demo/_default.njk" %}
 {% import "hippie/macros/_gate.njk" as gate %}
 
-{% block title %}{{ title }}{% endblock %}
+{% block title %}{{ title }}
+{% endblock %}
 
 {% block head %}
 	{{ super() }}
 {% endblock %}
 
 {% block body %}
-<!-- {{ page.fileSlug }}.page -->
+	<!-- {{ page.fileSlug }}.page -->
 	<div class="portal">
 		{{ gate.list(
 		'Tor mit Symbol und Liste',

source/screens/demo/examples/songbook.njk

@@ -10,14 +10,15 @@ tags:
 {% import "hippie/macros/_placeholder.njk" as ph %}
 {% import "hippie/macros/_song.njk" as song %}
 
-{% block title %}{{ title }}{% endblock %}
+{% block title %}{{ title }}
+{% endblock %}
 
 {% block head %}
 	{{ super() }}
 {% endblock %}
 
 {% block body %}
-<!-- {{ page.fileSlug }}.page -->
+	<!-- {{ page.fileSlug }}.page -->
 	<div class="sec_main_center">
 		<header class="header_txt">
 			<h1>Titel</h1>

source/screens/demo/examples/ui/drag.njk

@@ -9,7 +9,8 @@ tags:
 
 {% extends "demo/_app.njk" %}
 
-{% block title %}{{ title }}{% endblock %}
+{% block title %}{{ title }}
+{% endblock %}
 
 {% block links %}
   {{ super() }}
@@ -22,123 +23,18 @@ tags:
 
 {% block body %}
   <div id="space"></div>
-  <button id="addFrame">Add</button>
+  <button data-action="add">Add</button>
 {% endblock %}
 
 {%- block script %}
+  <script src="{{ pageBase }}js/_ui.js"></script>
   <script>
-    // Define the NewDiv class
-    class NewDiv {
-      constructor(x, y, width, height, backgroundColor) {
-        this.x = x;
-        this.y = y;
-        this.width = width;
-        this.height = height;
-        this.backgroundColor = backgroundColor;
-        this.element = null;
-      }
-
-      // Create the div element
-      createDiv() {
-        this.element = document.createElement('div');
-        this.element.style.position = 'absolute';
-        this.element.style.left = `${this.x}px`;
-        this.element.style.top = `${this.y}px`;
-        this.element.style.width = `${this.width}px`;
-        this.element.style.height = `${this.height}px`;
-        this.element.style.background = this.backgroundColor;
-        this.element.style.cursor = 'move';
-
-        // Add event listeners for dragging
-        let isDown = false;
-        let offset = [0, 0];
-
-        this.element.addEventListener('mousedown', (event) => {
-          if (event.button === 0) { // Left mouse button
-            isDown = true;
-            offset = [
-              this.element.offsetLeft - event.clientX,
-              this.element.offsetTop - event.clientY
-            ];
-          }
-        });
-
-        document.addEventListener('mouseup', () => {
-          isDown = false;
-        });
-
-        document.addEventListener('mousemove', (event) => {
-          if (isDown) {
-            const maxX = window.innerWidth - this.element.offsetWidth;
-            const maxY = window.innerHeight - this.element.offsetHeight;
-            let x = event.clientX + offset[0];
-            let y = event.clientY + offset[1];
-
-            // Boundary checks
-            if (x < 0) x = 0;
-            if (y < 0) y = 0;
-            if (x > maxX) x = maxX;
-            if (y > maxY) y = maxY;
-
-            this.element.style.left = `${x}px`;
-            this.element.style.top = `${y}px`;
-          }
-        });
-
-        // Save position and size
-        const saveData = () => {
-          const data = {
-            x: this.element.offsetLeft,
-            y: this.element.offsetTop,
-            width: this.element.offsetWidth,
-            height: this.element.offsetHeight
-          };
-          // Save data to local storage or a database
-          localStorage.setItem(`divData${this.element.id}`, JSON.stringify(data));
-        };
-
-        // Load saved data
-        const loadData = () => {
-          const data = localStorage.getItem(`divData${this.element.id}`);
-          if (data) {
-            const parsedData = JSON.parse(data);
-            this.element.style.left = `${parsedData.x}px`;
-            this.element.style.top = `${parsedData.y}px`;
-            this.element.style.width = `${parsedData.width}px`;
-            this.element.style.height = `${parsedData.height}px`;
-          }
-        };
-
-        // Call the save function when the user stops dragging
-        document.addEventListener('mouseup', saveData);
-
-        // Load saved data on page load
-        loadData();
-      }
-
-      // Append the div to the space
-      appendToFrame(space) {
-        this.element.id = `newDiv${space.children.length}`;
-        space.appendChild(this.element);
-      }
-    }
-
-    // Function to generate a random color
-    function getRandomColor() {
-      const letters = '0123456789ABCDEF';
-      let color = '#';
-      for (let i = 0; i < 6; i++) {
-        color += letters[Math.floor(Math.random() * 16)];
-      }
-      return color;
-    }
-
     // Get the space element
     const space = document.getElementById('space');
-    const addFrameButton = document.getElementById('addFrame');
+    const add = document.querySelector('[data-action=add]');
 
     // Add event listener to the add space button
-    addFrameButton.addEventListener('click', () => {
+    add.addEventListener('click', () => {
       const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
       newDiv.createDiv();
       newDiv.appendToFrame(space);

source/screens/demo/examples/ui/form.njk

@@ -0,0 +1,68 @@
+---
+title: Form
+tags: 
+  - demoExample
+  - ui
+---
+{% set bodyClass = "body_form" %}
+
+{% extends "demo/_app.njk" %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block links %}
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+	{{ super() }}
+{% endblock %}
+
+{% block body %}
+	<div id="head">
+		<h1>Formulare</h1>
+		<button data-action="add">Hinzufügen</button>
+		<button data-action="change">Ändern</button>
+		<hr>
+	</div>
+	<form id="form" action="">
+		<div id="grid">
+			<div>a</div>
+			<div>b</div>
+			<div>c</div>
+		</div>
+	</form>
+{% endblock %}
+
+{%- block script %}
+	{{ super() }}
+	<script>
+		const add = document.querySelector('[data-action=add]');
+		const change = document.querySelector('[data-action=change]');
+		const grid = document.getElementById('grid');
+
+		add.addEventListener('click', (e) => {
+				const item = document.createElement('div');
+
+				item.style.backgroundColor = '#f0f';
+				item.textContent = 'c'
+				
+				grid.appendChild(item);
+		});
+
+		change.addEventListener('click', (e) => {
+				changeLayout(grid);
+		});
+
+		function changeLayout(grid) {
+			const currentTemplate = grid.style.gridTemplateColumns;
+
+			if (currentTemplate === 'repeat(4, 1fr)') {
+				grid.style.gridTemplateColumns = 'repeat(2, 1fr)';
+			} else {
+				grid.style.gridTemplateColumns = 'repeat(4, 1fr)';
+			}
+		}
+	</script>
+{% endblock %}

source/screens/demo/examples/ui/index.njk

@@ -5,13 +5,14 @@ tags:
   - index
   - ui
 ---
+
 {% set pageId = "init" %}
 {% set pageClass = "html_ui" %}
 
 {% extends "demo/_app.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
-
+{% block title %}
-{% block title %}{{ title }}
+	{{ title }}
 {% endblock %}
 
 {% block links %}
@@ -25,17 +26,21 @@ tags:
 {% block body %}
 	<div id="loader" class="step op_show">
 		<div id="bar">
-				<div id="spinner"><span>I</span></div>
+			<div id="spinner">
+				<span>I</span>
+			</div>
 			<div id="wrap">
 				<div id="progress"></div>
 			</div>
 			<div id="status">0%</div>
 		</div>
 	</div>
-		<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
-			<p>Hold <kbd>space</kbd> to skip.</p>
-		</div>
 	<div id="intro" class="step op_hide">
+		<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
+			<p>Hold
+				<kbd>space</kbd>
+				to skip.</p>
+		</div>
 		{{ ph.brand('brand') }}
 		<p>Powered by</p>
 		<ul class="tech-stack">
@@ -49,6 +54,7 @@ tags:
 		<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
 	</div>
 	<div id="idle" class="step op_hide">
+		<div class="mouse_over"></div>
 		<div class="hello">Hello World!</div>
 		<p class="hello">Only left mouse click or any key</p>
 	</div>
@@ -56,5 +62,90 @@ tags:
 
 {%- block script %}
 	{{ super() }}
-		<script src="{{ pageBase }}js/ui.js"></script>
+	<script src="{{ pageBase }}js/_intro.js"></script>
+	<script>
+		//let intro = new Intro('Intro');
+		//intro.init();
+
+		//const ui = new UI();
+		//ui
+		//  .init()
+		//  .then(() => ui.showIntro())
+		//  .then(() => ui.showHint())
+		//  .then(() => ui.showIdle())
+		//  .catch((error) => console.error(error));
+
+		let introDelay = 6;
+		let hintDelay = 1;
+		let cycleDelay = 2;
+		let isAgree = false;
+		const steps = {
+			agreement: {
+				element: document.getElementById('agreement'),
+				msgIn: 'Agreement shown.',
+				msgOut: 'Agreement accepted.',
+				msgNo: 'No agreement today.'
+			}
+		};
+		const intro = document.getElementById('intro');
+		const agreement = steps.agreement.element;
+		const hint = {
+			element: document.getElementById('hint'),
+			delay: hintDelay * 1000,
+			show() {
+				if (typeof this.timeoutId === 'number') {
+					this.cancel();
+				}
+				this
+					.element
+					.classList
+					.remove('di_none');
+				this.timeoutId = setTimeout(() => {
+					this.dismiss();
+				}, this.delay);
+			},
+			dismiss() {
+				this
+					.element
+					.classList
+					.add('di_none');
+				this.timeoutId = undefined;
+			},
+			cancel() {
+				clearTimeout(this.timeoutId);
+			}
+		};
+		const loader = document.getElementById('loader');
+		const idle = {
+			element: document.getElementById('idle'),
+			delay: cycleDelay * 1000,
+			position: 0,
+			cycle() {
+				if (typeof this.intervalId === 'number') {
+					this.cancel();
+				}
+				this.intervalId = setInterval(() => {
+					this.position++;
+					if (this.position >= flagColors.length) {
+						this.position = 0;
+					}
+					this.element.style.backgroundColor = '#' + flagColors[this.position];
+				}, this.delay);
+			},
+			cancel() {
+				this.intervalId && clearInterval(this.intervalId);
+			}
+		}
+		init()
+			.then(loadCore)
+			.then(showIntro)
+			.catch(er => console.error(er))
+			.then(showAgreement)
+			.then(showIdle)
+			.catch(er => console.error(er))
+			. finally(() => {
+				console.debug('Init end.', isAgree);
+				// location = 'demo/examples/ui/new.html';
+			});
+	</script>
 {% endblock %}

source/screens/demo/index.njk

@@ -16,7 +16,7 @@ tags:
 {% endblock %}
 
 {% block body %}
-<!-- {{ page.fileSlug }}.page -->
+	<!-- {{ page.fileSlug }}.page -->
 	<div class="wrap">
 		<div class="hello">
 			<h2>This is
@@ -72,20 +72,11 @@ tags:
 
 {% block script %}
 	{{ super() }}
-  {# <script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script> #}
-  <!-- build:js js/main.concat.min.js -->
-  <script src="{{ pageBase }}js/variables.js"></script>
-  <script src="{{ pageBase }}js/functions.js"></script>
-  <script src="{{ pageBase }}js/global.js"></script>
 	<script>
 		assetsLoaded = true;
-    logPerf('BODY        :: Assets loaded, running page specific script...');
+		logPerf('BODY        :: Assets loaded, running page specific script...', assetsLoaded);
 		// Page specific
 		// ------------------------------------------------------------------------------
-    $(document).ready(function () {
-      logPerf('EVENT       :: jQuery \'ready\' event fired.');
-      setup();
-    });
 		logPerf('Application ready... not.');
 	</script>
 {% endblock %}

source/screens/demo/introduction.njk

@@ -14,9 +14,7 @@ tags:
 {% endblock %}
 
 {% block main %}
-<!-- {{ page.fileSlug }}.page -->
+	<!-- {{ page.fileSlug }}.page -->
-  {% include "hippie/partials/_body_nav.njk" %}
-
 	<section class="sec_main_center">
 		<header>
 			<hgroup>
@@ -26,33 +24,24 @@ tags:
 		</header>
 		<article>
 			<p>&hellip;</p>
+			<p>Contact: <a id="special" href=""></a>
+			</p>
+			<p>More: <a class="general" href=""></a>, <a class="general" href=""></a>
+			</p>
 		</article>
 	</section>
 {% endblock %}
 
 {% block script %}
 	{{ super() }}
-  {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
-  <!-- build:js js/main.concat.min.js -->
-  <script src="{{ pageBase }}js/variables.js"></script>
-  <script src="{{ pageBase }}js/functions.js"></script>
-  <script src="{{ pageBase }}js/global.js"></script>
 	<script>
 		assetsLoaded = true;
 		logPerf('Assets loaded.', assetsLoaded);
 		// Page specific
 		// ------------------------------------------------------------------------------
-    // Create instance of object made by contructor function
+		composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
-    var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
+		composeMail('.general', 'name', 'domain', 'tld', '', '')
-    var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
 
-    $(document).ready(function () {
-      logPerf('JQ document ready event fired.');
-    });
-
-    $(document).scroll(function () {
-      scrollUi.check();
-    });
 		logPerf('Application ready... not.');
 	</script>
 {% endblock %}

source/screens/demo/layouts.njk

@@ -14,31 +14,16 @@ tags:
 {% endblock %}
 
 {% block main %}
-<!-- {{ page.fileSlug }}.page -->
+	<!-- {{ page.fileSlug }}.page -->
-  <div class="temp_layer">
-    <!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
-    {% include "hippie/partials/_body_nav.njk" %}
-  </div>
-  <div id="begin" class="">
 	<section class="sec_main_center">
 		<header class="header_txt">
 			<h1>Sammlung formatierter Elemente</h1>
 			<p>Die Elemente werden fortlaufend komplexer</p>
 		</header>
 		<article>
-        <h2>&lt;h3&gt;</h2>
+			<h2>Bereiche</h2>
-        <h4>Beispiele</h4>
+			<h3>section</h3>
-        <pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
+			<pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre>
-        <h3 class="txt_color_dark">Dunkle Überschrift</h3>
-        <p>Mit normalem Textabsatz</p>
-        <h2>&lt;h4&gt;</h2>
-        <h4>Beispiele</h4>
-        <pre class="pre_code"><code>a>h4</code></pre>
-        <a href="">
-          <h4>Überschrift als Block-Verweis</h4>
-        </a>
-        <h2>&lt;section&gt;</h2>
-        <pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
 			<section class="overflow">
 				<div class="float_space_left demo__avatar"><img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div>
 				<p>Vorname Name<br>Straße 1, 01234 Stadt</p>
@@ -46,13 +31,13 @@ tags:
 					<a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a>
 				</p>
 			</section>
-        <pre class="pre_code"><code>div.space_left_fourth</code></pre>
+			<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre>
 			<div class="space_left_fourth">
 				<hr/>
 				<p>Eingerückter Inhalt</p>
 				<hr/>
 			</div>
-        <pre class="pre_code"><code>nav>ul>(li>a.a_button{punkt $})*4nav>ul>(li>a.a_button_border{stufe $})*4</code></pre>
+			<pre class="pre_code"><code>div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)</code></pre>
 			<div class="overflow">
 				<nav class="float_space_left">
 					<ul>
@@ -87,7 +72,7 @@ tags:
 					</ul>
 				</nav>
 			</div>
-        <pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
+			<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4</code></pre>
 			<nav class="nav_horizontal">
 				<ul>
 					<li>
@@ -104,6 +89,7 @@ tags:
 					</li>
 				</ul>
 			</nav>
+			<pre class="pre_code"><code>div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
 			<div class="overflow">
 				<nav class="nav_center_old">
 					<ul>
@@ -204,39 +190,29 @@ tags:
 				<div class="flex_column"><input type="button" value="Auswählen"></div>
 				<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
 			</div>
+
 			<form method="get">
 				<p class="label">
 					Show me a
 					<select name="F">
-              <option value="0">
+						<option value="0">Plain list</option>
-                Plain list</option>
+						<option value="1" selected="selected">Fancy list</option>
-              <option value="1" selected="selected">
+						<option value="2">Table list</option>
-                Fancy list</option>
-              <option value="2">
-                Table list</option>
 					</select>
 					Sorted by
 					<select name="C">
-              <option value="N" selected="selected">
+						<option value="N" selected="selected">Name</option>
-                Name</option>
+						<option value="M">Date Modified</option>
-              <option value="M">
+						<option value="S">Size</option>
-                Date Modified</option>
+						<option value="D">Description</option>
-              <option value="S">
-                Size</option>
-              <option value="D">
-                Description</option>
 					</select>
 					<select name="O">
-              <option value="A" selected="selected">
+						<option value="A" selected="selected">Ascending</option>
-                Ascending</option>
+						<option value="D">Descending</option>
-              <option value="D">
-                Descending</option>
 					</select>
 					<select name="V">
-              <option value="0" selected="selected">
+						<option value="0" selected="selected">in Normal order</option>
-                in Normal order</option>
+						<option value="1">in Version order</option>
-              <option value="1">
-                in Version order</option>
 					</select>
 					Matching
 					<input type="text" name="P" value="*"/>
@@ -245,10 +221,34 @@ tags:
 			</form>
 
 			<h2>Gruppierung</h2>
+			<h3>p</h3>
+			<pre class="pre_code"><code>p.txt_right+p.txt_center+p.txt_left</code></pre>
+			<p class="txt_right">Rechts</p>
+			<p class="txt_center">Mittig</p>
+			<p class="txt_left">Links</p>
+			<h3>h*</h3>
+			<pre class="pre_code"><code>h3.txt_color_dark+p.txt_tiny</code></pre>
+			<h3 class="txt_color_dark">Dunkle Überschrift</h3>
+			<p class="txt_tiny">Mit winzigem Textabsatz</p>
+			<pre class="pre_code"><code>a>h4</code></pre>
+			<a href="">
+				<h4>Überschrift als Block-Verweis</h4>
+			</a>
+			<h1>Überschrift 1</h1>
+			<h1>Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.</h1>
+			<h2>Überschrift 2</h2>
+			<h2>kann das ebenso.</h2>
+
+			<h3>hr</h3>
+			<pre class="pre_code"><code>hr.space_even_half</code></pre>
+			<hr class="space_even_half">
+			<pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
+			<hr class="hr_dotted space_even_fourth">
+			<h3>ul</h3>
 			<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
 			<ul class="list_link">
 				<li>
-            <a href=""><img src="{{ pageBase }}art/letter.gif" alt="">name@domain.tld</a>
+					<a href=""><img src="{{ pageBase }}art/demo/letter.gif" alt="">name@domain.tld</a>
 				</li>
 				<li>
 					<a href="">Work</a>
@@ -270,7 +270,7 @@ tags:
 				</thead>
 				<tbody>
 					<tr>
-              <td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
+						<td class="cell_icon" rowspan="2"><img src="/art/demo/bullet.gif" alt="" width="16" height="16"></td>
 						<td class="cell_link">
 							<a href="" target="_blank">Name</a>
 							<a href="" target="_blank">URL</a>
@@ -285,7 +285,7 @@ tags:
 				</tbody>
 				<tbody>
 					<tr>
-              <td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
+						<td class="cell_icon" rowspan="2"><img src="/art/demo/bullet.gif" alt="" width="16" height="16"></td>
 						<td class="cell_link">
 							<a href="" target="_blank">Name</a>
 							<a href="" target="_blank">URL</a>
@@ -299,6 +299,7 @@ tags:
 					</tr>
 				</tbody>
 			</table>
+
 			<h2>Eingebettet</h2>
 			<div class="demo__flag">
 				<svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
@@ -316,17 +317,11 @@ tags:
 			</div>
 		</article>
 	</section>
-  </div>
 {% endblock %}
 
 {% block script %}
 	{{ super() }}
 	<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
-  {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
-  <!-- build:js js/main.concat.min.js -->
-  <script src="{{ pageBase }}js/variables.js"></script>
-  <script src="{{ pageBase }}js/functions.js"></script>
-  <script src="{{ pageBase }}js/global.js"></script>
 	{{ log.asset(true) }}
 	{{ log.log('Assets loaded.', assetsLoaded) }}
 	<script>

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit 9f3797f6516a63101fb8ebd23ab8229053ec57b6
+Subproject commit a1a4bd408bedaa11f5e1aacca630d0b1bbbe7aa2

source/style/modules/ui/_drag_module.scss

@@ -1,6 +1,14 @@
 .body_drag {
 	height: 100vh;
 	// padding: $space_basic;
+
+	button {
+		@extend .io_button;
+		position: fixed;
+		top: 8px;
+		right: 8px;
+		margin: 0;
+	}
 }
 
 #space {
@@ -8,11 +16,3 @@
 	height: 100%;
 	background-color: $color-dark;
 }
-
-#addFrame {
-	@extend .io_button;
-	position: fixed;
-	top: 8px;
-	right: 8px;
-	margin: 0;
-}

source/style/modules/ui/_form_module.scss

@@ -0,0 +1,38 @@
+.body_form {
+	margin: 0;
+	background-color: $color-dark;
+}
+
+#head {
+	// display: flex;
+
+	button {
+			@extend .io_button;
+	}
+
+	h1 {
+		margin: 0;
+	}
+}
+
+#grid {
+	display: grid;
+	gap: 8px;
+	grid-template-columns: repeat(4, 1fr);
+	grid-auto-rows: minmax(64px, auto);
+	margin-inline: $space_small;
+}
+
+#grid>div {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	background-color: aquamarine;
+}
+
+#grid>div:first-child {
+	grid-column: 1 / 3;
+	background-color: violet;
+}

source/style/ui.scss

@@ -44,7 +44,6 @@ $z-indexes: (
 	align-items: center;
 	justify-content: center;
 	background-color: white;
-	pointer-events: none;
 }
 
 #bar {
@@ -113,7 +112,6 @@ $z-indexes: (
 	align-items: center;
 	justify-content: center;
 	background-color: black;
-	pointer-events: none;
 
 	h1,
 	p,
@@ -154,19 +152,27 @@ $z-indexes: (
 	align-items: center;
 	justify-content: center;
 	height: 100vh;
-	background-color: $color_back_basic;
 }
 
 #agreement {
 	flex-direction: column;
+	background-color: $bravo_color;
+	user-select: none;
 
 	h1 {
 		margin-top: 0;
+		color: $color_brightest;
 	}
 }
 
 #idle {
-	pointer-events: none;
+	background-color: $color_back_basic;
+	transition: background-color 4s;
+
+	&:hover>.mouse_over {
+		background-color: transparent !important;
+		transition: background-color $duration_basic $timing_basic 0s !important;
+	}
 }
 
 .toast {
@@ -188,10 +194,11 @@ $z-indexes: (
 .hello {
 	flex: 0 1 auto;
 	padding: 1em 2em;
-	// background-color: rgba(black, .25);
+	background-color: rgba($color_bright, .5);
-	background-color: $color_darker;
+	font-family: $family_text_mono;
 }
 
 @import "modules/ui/new_module";
 @import "modules/ui/settings_module";
 @import "modules/ui/drag_module";
+@import "modules/ui/form_module";

source/templates/demo/_app.njk

@@ -13,8 +13,7 @@
 				<base href="/">
 			{% endblock %}
 
-      {% block links %}
+			{% block links %}{% endblock %}
-      {% endblock %}
 
 		{% endblock %}
 	</head>
@@ -23,6 +22,8 @@
 		{% block body %}{% endblock %}
 
 		{% block script %}
+			<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+			<script src="{{ pageBase }}js/variables.js"></script>
 		{% endblock %}
 
 	</body>

source/templates/demo/_main.njk

@@ -8,19 +8,14 @@
 
 {% block links %}
 	{{ super() }}
-{% if hippie.legacyMode %}
+	{% if hippie.legacyMode %}
 		<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
 		<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]-->
 		<!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
 		<!--Only use one of the above!-->
-{% endif %}
+	{% endif %}
 
 	<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
 	<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
 	<!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
 {% endblock %}
-
-{% block script %}
-  {{ super() }}
-  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-{% endblock %}

source/templates/hippie/_default.njk

@@ -1,5 +1,7 @@
 <!-- default.template -->
-{% import "hippie/macros/_log.njk" as log %}
+{# {% if hippie.debugMode %} #}
+  {% import "hippie/macros/_log.njk" as log %}
+{# {% endif %} #}
 
 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">

source/templates/hippie/_main.njk

@@ -29,6 +29,7 @@
 	<body class="{{ bodyClass }}">
 		{{ log.log('BODY start') }}
 		{% include "hippie/partials/_body_hover.njk" %}
+		{% include "hippie/partials/_body_nav.njk" %}
 		<div id="root">
 			{% include "hippie/partials/_header.njk" %}
 
@@ -41,6 +42,26 @@
 
 		{% block script %}
 			{{ log.log('BODY        :: Loading script assets...') }}
+			{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
+			<!-- build:js js/main.concat.min.js -->
+			{# // TODO: Remove dependecy to jQuery; at least maek it optional #}
+			<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+			<script src="{{ pageBase }}js/variables.js"></script>
+			<script src="{{ pageBase }}js/functions.js"></script>
+			<script src="{{ pageBase }}js/global.js"></script>
+			<script>
+				// Create instances of objects made by contructor functions
+				let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
+				let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
+
+				document.addEventListener('scroll', () => {
+					scrollUi.check();
+				});
+
+				$(document).ready(function () {
+					logPerf('EVENT       :: jQuery \'ready\' event fired.');
+				});
+			</script>
 		{% endblock %}
 
 		{{ log.log('BODY end    :: Page script might still be loading.') }}

source/templates/hippie/_maintenance.njk

@@ -1,5 +1,5 @@
 <!-- maintenance.template -->
-{% import "hippie/macros/footer-status.njk" as status %}
+{% import "hippie/macros/_footer.njk" as footer %}
 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
 	<head>
@@ -21,7 +21,7 @@
 
 	<body class="{{ bodyClass }}">
 		{% block body %}
-      {{ status.footer() }}
+			{{ footer.status() }}
 		{% endblock %}
 	</body>
 </html>

source/templates/hippie/macros/_footer.njk

@@ -0,0 +1,23 @@
+{% macro status(email = 'admin@domain.tld', app = 'Application', version = 'ver.s.ion', system = 'System Name', domain = 'domain.tld:port') %}
+	<footer class="pos_abs pin_bottom width_full">
+		<address class="txt_center">Kontakt:
+			<a class="lineLink" href="mailto:{{ email }}">{{ email }}</a>
+			* Server:
+			{{ app }}/{{ version }}
+			({{ system }}) * Domain:
+			{{ domain }}
+		</address>
+	</footer>
+{% endmacro %}
+
+{% macro pinned(pos = 'bottom') %}
+	<footer class="pos_abs pin_{{ pos }} pin_right pin_left">
+		<p class="txt_center">Unten fixiert</p>
+	</footer>
+{% endmacro %}
+
+{% macro main() %}
+	<footer class="footer_site">
+		<div id="end"></div>
+	</footer>
+{% endmacro %}

source/templates/hippie/macros/_gate.njk

@@ -1,4 +1,3 @@
-<!-- gates.macro -->
 {% macro list(name, url, image, links) %}
 	<article class="portal__entry">
 		<section>

source/templates/hippie/macros/_header.njk

@@ -0,0 +1,5 @@
+{% macro main() %}
+	<header class="header_site">
+		<div id="begin"></div>
+	</header>
+{% endmacro %}

source/templates/hippie/macros/_placeholder.njk

@@ -1,18 +1,22 @@
-{% macro email(class='', text='name@domain.tld') %}
+{% macro email(class = '', text = 'name@domain.tld') %}
-<a class="{{ class }}" href="">{{ text }}</a>
+	<a class="{{ class }}" href="">{{ text }}</a>
-{# {{ 'name@domain.tld' | urlize | safe }} #}
+	{# {{ 'name@domain.tld' | urlize | safe }} #}
 {% endmacro %}
-{% macro link(class='', text='domain.tld', href='http://domain.internal') %}
+
-<a class="{{ class }}" href="{{ href }}">{{ text }}</a>
+{% macro link(class = '', text = 'domain.tld', href = 'http://domain.internal') %}
+	<a class="{{ class }}" href="{{ href }}">{{ text }}</a>
 {% endmacro %}
-{% macro name(class='', text='Vorname Nachname') %}
+
-<span class="{{ class }}">{{ text }}</span>
+{% macro name(class = '', text = 'Vorname Nachname') %}
+	<span class="{{ class }}">{{ text }}</span>
 {% endmacro %}
-{% macro address(class='', text='Straße Nr., PLZ Ort') %}
+
-<span class="{{ class }}">{{ text }}</span>
+{% macro address(class = '', text = 'Straße Nr., PLZ Ort') %}
+	<span class="{{ class }}">{{ text }}</span>
 {% endmacro %}
-{% macro brand(class='', name='Marke') %}
+
-<div class="{{ class }}">
+{% macro brand(class = '', name = 'Marke') %}
+	<div class="{{ class }}">
 		{# <img src="" alt="Brand logo"> #}
 		<svg
 		width="128"
@@ -27,17 +31,17 @@
 				width="126"
 				height="126"
 				x="1"
-				y="1" />
+				y="1"/>
 				<circle
 				style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
 				cx="64"
 				cy="64"
-				r="63" />
+				r="63"/>
 				<path
 				style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
-				d="m 9.3926879,32.472455 109.2146221,-2e-6 -54.607309,94.582637 z" />
+				d="m 9.3926879,32.472455 109.2146221,-2e-6 -54.607309,94.582637 z"/>
 			</g>
 		</svg>
 		<h1>{{ name }}</h1>
-</div>
+	</div>
 {% endmacro %}

source/templates/hippie/macros/_state.njk

@@ -1,8 +1,7 @@
-<!-- states.macro -->
+{% macro coord(id, text = 'X: #, Y: ##') %}
-{% macro coord(id, text='X: #, Y: ##') %}
 	<span id="{{ id }}">{{ text }}</span>
 {% endmacro %}
-{% macro time(id, text='00:00:00', postfix=' Uhr') %}
+{% macro time(id, text = '00:00:00', postfix = ' Uhr') %}
 	<span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
 {% endmacro %}
 {% macro date() %}

source/templates/hippie/macros/footer-status.njk

@@ -1,17 +0,0 @@
-{% macro footer(email = 'admin@domain.tld', app = 'Application', version = 'ver.s.ion', system = 'System Name', domain = 'domain.tld:port', type) %}
-
-  {% if not type or type == 'status' %}
-    <footer class="pos_abs pin_bottom width_full">
-      <address class="txt_center">Kontakt:
-        <a class="lineLink" href="mailto:{{ email }}">{{ email }}</a>
-        * Server:
-        {{ app }}/{{ version }}
-        ({{ system }}) * Domain:
-        {{ domain }}</address>
-    </footer>
-  {% else %}
-    <footer class="pos_abs pin_bottom width_full">
-      <p>Platzhalter unten fixiert</p>
-    </footer>
-  {% endif %}
-{% endmacro %}

source/templates/hippie/partials/_body_hover.njk

@@ -1,2 +1,2 @@
-<!-- body_hover.partial -->
+<!-- hover.partial -->
 <div id="js_mob"></div>

source/templates/hippie/partials/_body_nav.njk

@@ -1,4 +1,4 @@
-<!-- body_nav.partial -->
+<!-- nav.partial -->
 <div class="pos_rel">
   <nav class="nav_page_meta">
     <ul>

source/templates/hippie/partials/_footer.njk

@@ -1,4 +1,3 @@
 <!-- footer.partial -->
-<footer class="footer_site">
+{% import "hippie/macros/_footer.njk" as footer %}
-  <div id="end"></div>
+{{ footer.main() }}
-</footer>

source/templates/hippie/partials/_head_links.njk

@@ -1,4 +1,4 @@
-<!-- head.links.partial -->
+<!-- links.partial -->
 {# <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon"> #}
 <link rel="shortcut icon" type="image/x-icon" href="{{ pageBase }}favicon.ico">
 <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEAAAIBAQCbjUIABQQCAGdfKgDcxYUAiXpGABkWCgDXxnEApmxRAMGZawAIBwMArZ5PAKFydQBmIZIAoGJFAIx+QwBSSyIA1biBADlx0gBNn+0AgztQAMimcQAMCwQADAsFANS/dAB7P3EAeuH7ANb4/gBQPLwAp2pNAI6CQwCilEwAr3hdADyH5ADw/f8A////AHTU+AB6M2YA0LN4ABMRBwA/OhsAyKR2AGYvjQCf7PwA7fz/AENy2gCrclkAk4ZDAAYFAgDNtXEAjkhHAEul7QD8//8AlOn8AGk1hwDWvXsAGBYJAJaHSgCnbE4AVy6rAML0/gD7/v8AQ6vuAKx1YwCZjEQALCgTALyOZwB+NVoAZ8D0AL30/QBLULMA2sV+AB4bCwDFpm0Ak087AFArvgBv4PoAjOf7AIzm+wCN4/sAjuH7AI7h+gCP3fkAOI/sAKVvcwCfkUQAfnM6ANO2hAC3iGkAk150AI9OcACKRmkAhj9kAH84YQB9NWEAfTRgAH0zYAB6MWYAei9lAItFUADdy3wAKCQPAFtTJQB2bDIAhXk5AJKGPwCbjkQAq5xOALepWwDEtGcAzLlwAMyzcgDKrXIAx6NwALyNZgDWu4IApJZHAAcGAwANDAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB3eGhpamtsbW5vcHFycwt0dXZYWVpbXF1eX2BhYmNkZWZnAktMTU5PUFFRUlNUVVZXAABDREVGJSUlJSUlR0hJSgAAADs8PT4lJSUlP0BBQgAAAAAyMzQ1NiUlJTc4OToAAAAAACorLC0lJS4vMDEAAAAAAAAAISIjJCUmJygpAAAAAAAAABkaGxwdHh8gAAAAAAAAAAAAEhMUFRYXGAAAAAAAAAAAAAANDg8QEQAAAAAAAAAAAAAACAkKCwwAAAAAAAAAAAAAAAAFBgcAAAAAAAAAAAAAAAAAAgMEAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=">

source/templates/hippie/partials/_head_meta.njk

@@ -1,4 +1,4 @@
-<!-- head.meta.partial -->
+<!-- meta.partial -->
 <meta name="robots" content="noindex">
 <meta name="generator" content="{{ eleventy.generator }}">
 <meta name="author" content="">

source/templates/hippie/partials/_head_script.njk

@@ -1,4 +1,4 @@
-<!-- head.script.partial -->
+<!-- script.partial -->
 <script>
   // Entry script at page init
   let debugOn = {{ hippie.debugMode }};

source/templates/hippie/partials/_header.njk

@@ -1,2 +1,3 @@
 <!-- header.partial -->
-<header class="header_site"></header>
+{% import "hippie/macros/_header.njk" as header %}
+{{ header.main() }}