feat: More content for components and layouts

- Update hippie styles - Add demo images - New components content - New layout structure and content
feat: Add content for components page
2025-06-19 14:20:56 +02:00 · 2025-06-19 12:36:56 +02:00 · 2025-06-19 12:02:32 +02:00 · 2025-06-19 12:02:06 +02:00 · 2025-06-19 11:07:54 +02:00 · 2025-06-19 10:08:00 +02:00
46 changed files with 2758 additions and 2340 deletions
--- a/source/art/images/demo/bullet.gif
+++ b/source/art/images/demo/bullet.gif
--- a/source/art/images/demo/letter.gif
+++ b/source/art/images/demo/letter.gif
--- a/source/code/_intro.js
+++ b/source/code/_intro.js
@ -1,48 +1,128 @@
-let introDelay = 6;
-let hintDelay = 1;
-let isAgree = false;
-
-const steps = {
-	agreement: {
-		element: document.getElementById('agreement'),
-		msgIn: 'Agreement shown.',
-		msgOut: 'Agreement accepted.',
-		msgNo: 'No agreement today.'
+class Intro {
+	constructor(name) {
+		this.name = name;
 	}
-};
-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();
+
+	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.'
+			}
+		};
+		this.intro = document.getElementById('intro');
+		this.agreement = this.steps.agreement.element;
+		this.hint = {
+			element: document.getElementById('hint'),
+			delay: this.hintDelay * 1000
+		};
+		this.loader = document.getElementById('loader');
+	}
+
+	showIntro() {
+		const el = this.intro;
+		const dy = this.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 {
+				reject('No intro available.');
+			}
+		})
+	}
+
+	showHint() {
+		if (typeof this.hint.timeoutId === 'number') {
+			this.cancelHint();
 		}

-		this.element.classList.remove('di_none');
+		this.hint.element.classList.remove('di_none');

-		this.timeoutId = setTimeout(
+		this.hint.timeoutId = setTimeout(
 			() => {
-				this.dismiss();
+				this.dismissHint();
 			},
-			this.delay
+			this.hint.delay
 		);
-	},
-	dismiss() {
-		this.element.classList.add('di_none');
-		this.timeoutId = undefined;
-	},
-	cancel() {
-		clearTimeout(this.timeoutId);
 	}
-};
-const loader = document.getElementById('loader');
+
+	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();
 	});
 }
@ -66,12 +146,16 @@ function showIntro() {
 						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);
 		});
 	})
--- a/source/code/_ui.js
+++ b/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;
+}
--- a/source/code/app.js
+++ b/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){
-	if(val<10) val = "0" + val;
+
+Clock.prototype.formatDigits = function (val) {
+	if (val < 10) val = "0" + val;

 	return val;
 }
@ -28,7 +28,7 @@ var floor = Math.floor;
 function ongoing() {

 	var now = new Date();
-	
+
 	var w = Math.floor(now.getDay());
 	var D = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
 	var DNumb = Math.floor(now.getDate());
@ -36,157 +36,114 @@ function ongoing() {
 	var M = new Array("Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
 	var y = Math.floor(now.getYear());
 	if (y < 999) y += 1900;
-	
+
 	var ms = Math.floor(now.getMilliseconds());
 	var s = Math.floor(now.getSeconds());
 	var m = Math.floor(now.getMinutes() + s / 60);
 	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.setUTCHours(0,0,0,0);
+	j2000.setUTCFullYear(2000, 0, 1);
+	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.setUTCHours(h,m,s,ms);
+	utc.setUTCFullYear(y, MNumb, DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
+	utc.setUTCHours(h, m, s, ms);

 	var utc0 = new Date();
-	utc0.setUTCFullYear(y,MNumb,DNumb);
-	utc0.setUTCHours(0,0,0,0);
+	utc0.setUTCFullYear(y, MNumb, DNumb);
+	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 jdUTC0 = 2451544.5 + (utc0 - j2000) / 86400000;

-	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 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);
 	var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2);
-	
+
 	var travelWidth = document.body.clientWidth;
 	var travelHeight = document.body.clientHeight;
 	var sunPosX = 0;
 	var sunPosY = 0;
 	var moonPosX = 0;
 	var moonPosY = 0;
-	
+
 	var sun = $("#sun").css({
 		"left": (s / 60) * travelWidth,
 		"top": (m / 60) * travelHeight
 	});
-	
+
 	$("#day").text(D[w]);
 	$("#dayNumb").text(DNumb);
 	$("#month").text(M[MNumb]);
 	$("#year").text(y);
 	$("#time").text('' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2));
-	
+
 	$("#julian").text(jd.toFixed(6));
 	//$("#star").text(stH + ':' + stM + ':' + stS);
 	$("#star").text(stH + ':' + stM);
 	$("#star1").text(stGMT);
 	$("#star2").text(stGMT2);
-	
+
 }

-function zeroFill( number, width ){
+function zeroFill(number, width) {
 	width -= number.toString().length;
-	if ( width > 0 ){
-		return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
+	if (width > 0) {
+		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 newW = s * ( p /100 );
+	var p = (w / g) * 100;
+	var newW = s * (p / 100);

 	return newW;
 }
 //String Element erweitern
-String.prototype.transform = function() { 
-	return parseFloat(this.replace(',', '.')); 
+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
 function percentage(total, gigs, round) {
-		var totalSpace = total;
-		var singleSpace = gigs;
-		var z = round;
-		var p = singleSpace / ( totalSpace / 100 );
-		
-		return p;
+	var totalSpace = total;
+	var singleSpace = gigs;
+	var z = round;
+	var p = singleSpace / (totalSpace / 100);
+
+	return p;
 }
 //Speicherplatz in GB berechnen
 function gigabytes(percent, total, round) {
-		var occupiedPercent = percent;
-		var singleSpace = total;
-		var z = round;
-		var g = (singleSpace / 100 ) * occupiedPercent;
-		
-		return g;
+	var occupiedPercent = percent;
+	var singleSpace = total;
+	var z = round;
+	var g = (singleSpace / 100) * occupiedPercent;
+
+	return g;
 }
--- a/source/code/hippie/functions.js
+++ b/source/code/hippie/functions.js
@ -1,149 +1,188 @@
 // This is called everytime
 function setup() {
-  'use strict';
+	'use strict';

-  console.group('Document information');
-  console.info('\n', hippie.brand, '\n\n');
-  console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
-  console.groupEnd();
-  if (debugOn) {
-    console.group('Debug information');
-    console.dir(hippie);
-    console.groupEnd();
-  }
+	console.group('Document information');
+	console.info('\n', hippie.brand, '\n\n');
+	console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
+	console.groupEnd();
+	if (debugOn) {
+		console.group('Debug information');
+		console.dir(hippie);
+		console.groupEnd();
+	}

-  // WANNABE MODULE Mouse over effect
-  // With CSS only
-  if ($('#js_mob').length && viewHover) {
-    $('#js_mob').addClass('mouse_over');
-  }
-  // if (viewHover) {
-  // 	$('body').prepend('<div id="js_mob" class="mouse_over"></div>');
-  // }
-  // With JS
+	// WANNABE MODULE Mouse over effect
+	// With CSS only
+	if ($('#js_mob').length && viewHover) {
+		$('#js_mob').addClass('mouse_over');
+	}
+	// if (viewHover) {
+	// 	$('body').prepend('<div id="js_mob" class="mouse_over"></div>');
+	// }
+	// With JS
 }

 // MODULE Scroll navigation
 // Using constructor function
 function HippieScroll($tp, $dn) {
-  'use strict';
+	'use strict';

-  // this.$tp = $tp;
-  // Define initial situation
-  let initLeft = false;
-  const initY = hippie.screen.vh;
+	// this.$tp = $tp;
+	// Define initial situation
+	let initLeft = false;
+	const initY = hippie.screen.vh;

-  $tp.addClass('di_none');
+	$tp.addClass('di_none');

-  // Check scroll position and toggle element
-  this.check = function () {
-    hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
-    if (hippie.screen.y > initY) {
-      if (!initLeft) {
-        $tp.removeClass('di_none');
-        console.info('Initial viewport left');
-      }
-      initLeft = true;
-    } else {
-      if (initLeft) {
-        $tp.addClass('di_none');
-        console.info('Initial viewport entered');
-      }
-      initLeft = false;
-    }
-  };
+	// Check scroll position and toggle element
+	this.check = function () {
+		hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
+		if (hippie.screen.y > initY) {
+			if (!initLeft) {
+				$tp.removeClass('di_none');
+				console.info('Initial viewport left');
+			}
+			initLeft = true;
+		} else {
+			if (initLeft) {
+				$tp.addClass('di_none');
+				console.info('Initial viewport entered');
+			}
+			initLeft = false;
+		}
+	};

-  // Add events to navigation elements
-  $tp.click(function (event) {
-    event.preventDefault();
-    $('html, body').stop().animate({
-      scrollTop: 0
-    }, basicEase);
-    // console.log('Scrolled to top');
-  });
-  $dn.click(function (event) {
-    event.preventDefault();
-    var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
-    $('html').scrollTop(pos);
-    // document.documentElement.scrollTop = pos;
-    console.info('Scrolled down to', pos);
-  });
+	// Add events to navigation elements
+	$tp.click(function (event) {
+		event.preventDefault();
+		$('html, body').stop().animate({
+			scrollTop: 0
+		}, basicEase);
+		// console.log('Scrolled to top');
+	});
+	$dn.click(function (event) {
+		event.preventDefault();
+		var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
+		$('html').scrollTop(pos);
+		// document.documentElement.scrollTop = pos;
+		console.info('Scrolled down to', pos);
+	});
 }

 // MODULE Meta elements
 function HippieMeta($ma, $pp) {
-  'use strict';
+	'use strict';

-  let metaOn = false;
+	let metaOn = false;

-  $ma.click(function () {
-    var $wrap, $pop;
+	$ma.click(function () {
+		var $wrap, $pop;

-    // if (metaOn !== true) {
-    if (!metaOn) {
-      metaOn = true;
+		// if (metaOn !== true) {
+		if (!metaOn) {
+			metaOn = true;

-      $pp.each(function () {
-        // if ($(this).css('position') === 'static') {
-        // 	$(this).addClass('js_changed_pos');
-        // 	$(this).css('position', 'relative');
-        // }
-        // $pop = $(this).next('.exp_pop').detach();
-        // $wrap = $(this).wrap('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_overlay"></span>').prepend('<span class="exp_marker_pop"></span>');
-        // $wrap.after($pop);
+			$pp.each(function () {
+				// if ($(this).css('position') === 'static') {
+				// 	$(this).addClass('js_changed_pos');
+				// 	$(this).css('position', 'relative');
+				// }
+				// $pop = $(this).next('.exp_pop').detach();
+				// $wrap = $(this).wrap('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_overlay"></span>').prepend('<span class="exp_marker_pop"></span>');
+				// $wrap.after($pop);

-        $('<div></div>').addClass('exp_overlay').css({
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          top: 0,
-          left: 0
-        }).appendTo($(this).addClass('exp_wrap'));
+				$('<div></div>').addClass('exp_overlay').css({
+					position: 'absolute',
+					width: '100%',
+					height: '100%',
+					top: 0,
+					left: 0
+				}).appendTo($(this).addClass('exp_wrap'));

-        // Displays explanation popup following the mouse
-        $(this).on({
-          mouseenter: function () {
-            // if ($(this).attr('emmet')) {
-            //
-            // }
-            $(this).next('.exp_pop').show();
-          },
-          mouseleave: function () {
-            $(this).next('.exp_pop').hide();
-          },
-          mousemove: function (event) {
-            $(this).next('.exp_pop').css({
-              'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
-              'left': event.pageX + 8
-              // 'left': event.pageX - $(this).offset().left + 8
-            });
-          }
-        });
-      });
+				// Displays explanation popup following the mouse
+				$(this).on({
+					mouseenter: function () {
+						// if ($(this).attr('emmet')) {
+						//
+						// }
+						$(this).next('.exp_pop').show();
+					},
+					mouseleave: function () {
+						$(this).next('.exp_pop').hide();
+					},
+					mousemove: function (event) {
+						$(this).next('.exp_pop').css({
+							'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
+							'left': event.pageX + 8
+							// 'left': event.pageX - $(this).offset().left + 8
+						});
+					}
+				});
+			});

-    } else {
-      $pp.each(function () {
-        $(this).off('mouseenter mouseleave mousemove');
+		} else {
+			$pp.each(function () {
+				$(this).off('mouseenter mouseleave mousemove');

-        $(this).removeClass('exp_wrap').find('.exp_overlay').remove();
-        // $wrap = $(this).parent('.exp_wrap');
-        // $pop = $wrap.next('.exp_pop').detach();
-        // $wrap.find('.exp_marker_pop').remove();
-        // $(this).unwrap('.exp_wrap');
-        // $(this).after($pop);
-        // if ($(this).hasClass('js_changed_pos')) {
-        // 	$(this).css('position', '');
-        // 	if ($(this).attr('style') === '') {
-        // 		$(this).removeAttr('style');
-        // 	}
-        // 	$(this).removeClass('js_changed_pos');
-        // }
-      });
+				$(this).removeClass('exp_wrap').find('.exp_overlay').remove();
+				// $wrap = $(this).parent('.exp_wrap');
+				// $pop = $wrap.next('.exp_pop').detach();
+				// $wrap.find('.exp_marker_pop').remove();
+				// $(this).unwrap('.exp_wrap');
+				// $(this).after($pop);
+				// if ($(this).hasClass('js_changed_pos')) {
+				// 	$(this).css('position', '');
+				// 	if ($(this).attr('style') === '') {
+				// 		$(this).removeAttr('style');
+				// 	}
+				// 	$(this).removeClass('js_changed_pos');
+				// }
+			});

-      metaOn = false;
-    }
-    console.log('Explanation mode', metaOn);
-  });
+			metaOn = false;
+		}
+		console.log('Explanation mode', metaOn);
+	});
+}
+
+// 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
--- a/source/code/hippie/global.js
+++ b/source/code/hippie/global.js
@ -1,3 +1,3 @@
 // Setup
 // -----------------------------------------------------------------------------
-// setup();
+setup();
--- a/source/code/hippie/variables.js
+++ b/source/code/hippie/variables.js
@ -1,20 +1,30 @@
-var hippie = {
-  brand: "|-| | |^ |^ | [- ",
-  screen: {
-    w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
-    vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
-    dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0),
-    y: Math.min($(document).scrollTop(), document.documentElement.scrollTop)
-    // hippie.screen.y: document.documentElement.scrollTop
-  },
-  body: {
-    w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0),
-    h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0),
-  }
+let hippie = {
+	brand: "|-| | |^ |^ | [- ",
+	screen: {
+		w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
+		vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
+		dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0),
+		y: Math.min($(document).scrollTop(), document.documentElement.scrollTop)
+		// hippie.screen.y: document.documentElement.scrollTop
+	},
+	body: {
+		w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0),
+		h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0),
+	}
 };
+let viewHover = true;
+let basicEase = 600;

-var viewHover = true;
-var basicEase = 600;
-
-var onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
-var onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";
+const onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
+const onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";
+const flagColors = [
+	'fad803',
+	'f2af13',
+	'd30a51',
+	'8e1f68',
+	'273f8b',
+	'3c579a',
+	'b7e0f0',
+	'6bc7d9',
+	'52bed1'
+]
--- a/source/screens/demo/basics.njk
+++ b/source/screens/demo/basics.njk
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@ -7,201 +7,380 @@ tags:
 {% set pageId = page.fileSlug %}

 {% extends "demo/_main.njk" %}
+{% import "hippie/macros/_footer.njk" as footer %}

 {% block title %}Komponenten{% endblock %}
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}

 {% block main %}
-<!-- {{ 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>
-      </header>
-      <article>
-        <div class="demo__query_example">Umbruch bei&nbsp;</div>
-        <div class="demo__queries">
-          <p class="query_phoneUp">Telefone und größer</p>
-          <p class="query_phoneOnly">Nur Telefone</p>
-          <p class="query_tabletPortaitOnly">Nur Schreibtafeln hochkant</p>
-          <p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
-          <p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
-          <p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
-          <p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
-          <p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
-          <p class="query_bigDesktopUp">Richtige Monitore und größer</p>
-        </div>
-      </article>
-    </section>
+	<!-- {{ page.fileSlug }}.page -->
+	<section class="sec_main_center">
+		<header class="header_txt">
+			<h1>Medienformat Abfragen</h1>
+		</header>
+		<article>
+			<div class="demo__query_example">Umbruch bei&nbsp;</div>
+			<div class="demo__queries">
+				<p class="query_phoneUp">Telefone und größer</p>
+				<p class="query_phoneOnly">Nur Telefone</p>
+				<p class="query_tabletPortaitOnly">Nur Schreibtafeln hochkant</p>
+				<p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
+				<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
+				<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
+				<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
+				<p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
+				<p class="query_bigDesktopUp">Richtige Monitore und größer</p>
+			</div>
+		</article>
+	</section>

-    <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>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>
-      <article>
-        <h1 id="sections">Bereiche</h1>
-        <p>Elemente:</p>
-        <pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
-        <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>
-        <h2>&lt;section&gt;</h2>
-        <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
-        <h4>Varianten</h4>
-        <pre class="pre_code"><code>section.sec_main_center</code></pre>
-        <pre class="pre_code"><code>section.sec_main_status</code></pre>
-        <h2>&lt;h3&gt;</h2>
-        <h2>&lt;h4&gt;</h2>
-      </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>
-        <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>
-        <pre class="pre_code"><code>p.column_3.column_line</code></pre>
-        <h2>&lt;hr&gt;</h2>
-        <h4>Varianten</h4>
-        <pre class="pre_code"><code>hr.hr_hidden</code></pre>
-        <pre class="pre_code"><code>hr.hr_dotted</code></pre>
-        <pre class="pre_code"><code>hr.space_even_half</code></pre>
-        <pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
-        <h2>&lt;blockquote&gt;</h2>
-        <pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre>
-        <h2>&lt;figure&gt;</h2>
-        <pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
-        <h2>&lt;div&gt;</h2>
-        <pre class="pre_code"><code>div.div_info>p</code></pre>
-        <h4>Varianten</h4>
-      </article>
-      <article>
-        <h1 id="tabularData">Tabellen</h1>
-        <p>Elemente:</p>
-        <pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
-        <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">
-          <thead>
-            <tr>
-              <th class="cell_pre" scope="col"></th>
-              <th scope="col">Kopfzeile</th>
-              <th scope="col">A</th>
-              <th scope="col">B</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td class="cell_pre">Vorspalte</td>
-              <td>Eine</td>
-              <td></td>
-              <td></td>
-            </tr>
-            <tr>
-              <td class="cell_pre">1</td>
-              <td></td>
-              <td>erweiterte</td>
-              <td></td>
-            </tr>
-            <tr>
-              <td class="cell_pre">2</td>
-              <td></td>
-              <td></td>
-              <td>Tabelle</td>
-            </tr>
-          </tbody>
-        </table>
-        <pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre>
-        <table class="width_full table_stripe table_fix table_free">
-          <tr>
-            <td>Tabelle</td>
-            <td></td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>ohne</td>
-            <td>Rahmen</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td></td>
-            <td>jedoch</td>
-            <td>mit</td>
-          </tr>
-          <tr>
-            <td></td>
-            <td></td>
-            <td>Streifen</td>
-          </tr>
-        </table>
-        <pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
-        <table>
-          <caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
-          <thead>
-            <tr>
-              <th scope="col">Bezeichnung</th>
-              <th scope="col">Menge</th>
-              <th scope="col">Wert</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Alpha</td>
-              <td>1</td>
-              <td class="txt_right">8990</td>
-            </tr>
-            <tr>
-              <td>Bravo</td>
-              <td>10</td>
-              <td class="txt_right">1</td>
-            </tr>
-            <tr>
-              <td>Charlie</td>
-              <td>1</td>
-              <td class="txt_right">1</td>
-            </tr>
-          </tbody>
-          <tfoot>
-            <tr>
-              <th colspan="2" class="txt_right" scope="row">Summe</th>
-              <td class="txt_right" title=">9000">9001</td>
-            </tr>
-          </tfoot>
-        </table>
-      </article>
-    </section>
-  </div>
+	<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://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+h2{&lt;tag&gt;}+h4{Varianten}</code></pre>
+		<article>
+			<h1 id="sections">Bereiche</h1>
+			<p>Elemente:</p>
+			<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
+			<h2>&lt;body&gt;</h2>
+			<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
+			<h2>&lt;article&gt;</h2>
+			<article>Ein Artikel.</article>
+			<h2>&lt;section&gt;</h2>
+			<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>
+			<section class="sec_main_status">Status-Bereich</section>
+			<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.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+hr.hr_dotted+hr.hr_double</code></pre>
+			<hr class="hr_hidden">
+			<hr class="hr_dotted">
+			<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>
+			<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>
+			<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>
+			<p>Elemente:</p>
+			<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
+			<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">
+				<thead>
+					<tr>
+						<th class="cell_pre" scope="col"></th>
+						<th scope="col">Kopfzeile</th>
+						<th scope="col">A</th>
+						<th scope="col">B</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td class="cell_pre">Vorspalte</td>
+						<td>Eine</td>
+						<td></td>
+						<td></td>
+					</tr>
+					<tr>
+						<td class="cell_pre">1</td>
+						<td></td>
+						<td>erweiterte</td>
+						<td></td>
+					</tr>
+					<tr>
+						<td class="cell_pre">2</td>
+						<td></td>
+						<td></td>
+						<td>Tabelle</td>
+					</tr>
+				</tbody>
+			</table>
+			<pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre>
+			<table class="width_full table_stripe table_fix table_free">
+				<tr>
+					<td>Tabelle</td>
+					<td></td>
+					<td></td>
+				</tr>
+				<tr>
+					<td>ohne</td>
+					<td>Rahmen</td>
+					<td></td>
+				</tr>
+				<tr>
+					<td></td>
+					<td>jedoch</td>
+					<td>mit</td>
+				</tr>
+				<tr>
+					<td></td>
+					<td></td>
+					<td>Streifen</td>
+				</tr>
+			</table>
+			<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
+			<table>
+				<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
+				<thead>
+					<tr>
+						<th scope="col">Bezeichnung</th>
+						<th scope="col">Menge</th>
+						<th scope="col">Wert</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>Alpha</td>
+						<td>1</td>
+						<td class="txt_right">8990</td>
+					</tr>
+					<tr>
+						<td>Bravo</td>
+						<td>10</td>
+						<td class="txt_right">1</td>
+					</tr>
+					<tr>
+						<td>Charlie</td>
+						<td>1</td>
+						<td class="txt_right">1</td>
+					</tr>
+				</tbody>
+				<tfoot>
+					<tr>
+						<th colspan="2" class="txt_right" scope="row">Summe</th>
+						<td class="txt_right" title=">9000">9001</td>
+					</tr>
+				</tfoot>
+			</table>
+		</article>
+		<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
-    // ------------------------------------------------------------------------------
-    $(document).ready(function () {
-      // jq-sticky-anything
-      $('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
-    });
-  </script>
+	{{ super() }}
+	<script>
+		function capLock(e) {
+			console.log('capLock');
+			kc = e.keyCode
+				? e.keyCode
+				: 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 %}
--- a/source/screens/demo/examples/card.njk
+++ b/source/screens/demo/examples/card.njk
@ -9,105 +9,91 @@ tags:
 {% extends "demo/_default.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}

-{% block title %}{{ title }}{% endblock %}
+{% block title %}{{ title }}
+{% endblock %}

 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}

 {% block body %}
-<!-- {{ 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">
-      {# <defs>
-      <filter id="turb3">
-        <feColorMatrix type="saturate" values="1" />
-        <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
-      </filter>
-      <symbol id="triangle-5">
-        <rect y="0" fill="#273F8B" width="1920" height="1200"/>
-      </symbol>
-    </defs>
-    <g>
-      <use xlink:href="#triangle-5" style="filter: url(#turb3);" />
-    </g> #}
-      <rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
-      <polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
-      <polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
-      <polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
-      <polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
-      <polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
-      <polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
-      <polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
-      <polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
-    </svg>
-    {# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
-  </div>
-  <div class="card_box">
-    <div id="jsCardHover">
-      <p>Titel<br/>und Beschreibung</p>
-      <h1>{{ ph.name() }}</h1>
-      <p>
-        {{ ph.email('card_address') }}<br/>
-        {{ ph.link('decent', 'site.tld') }}
-        &middot;
-        {{ ph.address('decent') }}</p>
-    </div>
-  </div>
+
+	<!-- {{ 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">
+			{# <defs>
+			<filter id="turb3">
+				<feColorMatrix type="saturate" values="1" />
+				<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
+			</filter>
+			<symbol id="triangle-5">
+				<rect y="0" fill="#273F8B" width="1920" height="1200"/>
+			</symbol>
+		</defs>
+		<g>
+			<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
+		</g> #}
+			<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
+			<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
+			<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
+			<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
+			<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
+			<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
+			<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
+			<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
+			<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
+		</svg>
+		{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
+	</div>
+	<div class="card_box">
+		<div id="js_content">
+			<p>Titel<br/>und Beschreibung</p>
+			<h1>{{ ph.name() }}</h1>
+			<p>
+				{{ ph.email('card_address') }}<br/>
+				{{ ph.link('decent', 'site.tld') }}
+				&middot;
+				{{ ph.address('decent') }}</p>
+		</div>
+	</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>
-    $(document).ready(function () {
-      // composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', '');
+	<script>
+		const flag = document.getElementById("flag");
+		let colors = new Array();
+		let iId = undefined;
+		let position = 0;

-      var colors = new Array();
-      var position = 0;
+		for (let i = 1; i <= flag.childElementCount; i++) {
+			colors.push(document.getElementById("triangle-" + i).getAttribute("fill"));
+		}

-      for (var i = 1; i <= $("#flag").children().length; i++) {
-        colors.push($("#triangle-" + i).attr("fill"));
-      }
+		// console.log(colors);

-      $('#jsCardHover').on({
-        mouseenter: function () {
-          // $('#flag').addClass('effect');
-          // $('#flag').css('opacity', 0);
-          $('#flag')
-            .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]);
-            }
-            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();
-        }
-      });
-    });
-  </script>
+		document.getElementById('js_content').addEventListener('mouseenter', () => {
+			iId = setInterval(() => {
+				for (let i = 1; i <= colors.length; i++) {
+					position++;
+
+					if (position >= colors.length) {
+						position = 0;
+					}
+
+					document.getElementById("triangle-" + i).setAttribute("fill", colors[position]);
+				}
+
+				position++;
+
+				if (position >= colors.length) {
+					position = 0;
+				}
+			}, 600);
+		});
+
+		document.getElementById('js_content').addEventListener('mouseleave', () => {
+			iId && clearInterval(iId);
+		});
+	</script>
 {% endblock %}
--- a/source/screens/demo/examples/portal.njk
+++ b/source/screens/demo/examples/portal.njk
@ -9,32 +9,33 @@ tags:
 {% extends "demo/_default.njk" %}
 {% import "hippie/macros/_gate.njk" as gate %}

-{% block title %}{{ title }}{% endblock %}
+{% block title %}{{ title }}
+{% endblock %}

 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}

 {% block body %}
-<!-- {{ page.fileSlug }}.page -->
-  <div class="portal">
-    {{ gate.list(
-    'Tor mit Symbol und Liste',
-    '../demo', {
-      src: '/art/demo/flag_websafe_128x80.gif',
-      alt: 'Flag of Interaktionsweise'
-    }, [
-      {
-        name: '1',
-        href: 'http://domain.tld',
-        img: '../art/bullet.gif'
-      }, {
-        name: 'Zwei',
-        href: 'http://domain.tld',
-        img: '../art/bullet.gif'
-      }
-    ]
-    ) }}
-    {{ gate.simple('Tor', '../demo') }}
-  </div>
+	<!-- {{ page.fileSlug }}.page -->
+	<div class="portal">
+		{{ gate.list(
+		'Tor mit Symbol und Liste',
+		'../demo', {
+			src: '/art/demo/flag_websafe_128x80.gif',
+			alt: 'Flag of Interaktionsweise'
+		}, [
+			{
+				name: '1',
+				href: 'http://domain.tld',
+				img: '../art/bullet.gif'
+			}, {
+				name: 'Zwei',
+				href: 'http://domain.tld',
+				img: '../art/bullet.gif'
+			}
+		]
+		) }}
+		{{ gate.simple('Tor', '../demo') }}
+	</div>
 {% endblock %}
--- a/source/screens/demo/examples/songbook.njk
+++ b/source/screens/demo/examples/songbook.njk
@ -10,42 +10,43 @@ 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() }}
+	{{ super() }}
 {% endblock %}

 {% block body %}
-<!-- {{ page.fileSlug }}.page -->
-  <div class="sec_main_center">
-    <header class="header_txt">
-      <h1>Titel</h1>
-      <p>Jahr</p>
-    </header>
-    <nav role="doc-toc">
-      <h2>Inhaltsverzeichnis</h2>
-      <ul>
-        {%- for song in collections.song -%}
-          <li>
-            <a href="{{ song.page.url }}">{{ song.data.title }}</a>
-          </li>
-        {%- endfor -%}
-      </ul>
-    </nav>
-    <h2>Vorwort</h2>
-    <p>Liederbuch für
-      <em>Name</em>.</p>
-    <p>Gibt es gebunden und hier
-      {{ ph.link() }}.<br/>
-      Bestellungen bitte an
-      {{ ph.name() }}
-      richten.</p>
-    <hr class="hr_double hr_dotted">
-    {%- for piece in collections.song -%}
-      {{ song.simple(loop.index0, piece.data, piece.content) }}
-    {%- endfor -%}
-    <hr/>
-    <address>{{ ph.name() }}</address>
-  </div>
+	<!-- {{ page.fileSlug }}.page -->
+	<div class="sec_main_center">
+		<header class="header_txt">
+			<h1>Titel</h1>
+			<p>Jahr</p>
+		</header>
+		<nav role="doc-toc">
+			<h2>Inhaltsverzeichnis</h2>
+			<ul>
+				{%- for song in collections.song -%}
+					<li>
+						<a href="{{ song.page.url }}">{{ song.data.title }}</a>
+					</li>
+				{%- endfor -%}
+			</ul>
+		</nav>
+		<h2>Vorwort</h2>
+		<p>Liederbuch für
+			<em>Name</em>.</p>
+		<p>Gibt es gebunden und hier
+			{{ ph.link() }}.<br/>
+			Bestellungen bitte an
+			{{ ph.name() }}
+			richten.</p>
+		<hr class="hr_double hr_dotted">
+		{%- for piece in collections.song -%}
+			{{ song.simple(loop.index0, piece.data, piece.content) }}
+		{%- endfor -%}
+		<hr/>
+		<address>{{ ph.name() }}</address>
+	</div>
 {% endblock %}
--- a/source/screens/demo/examples/ui/drag.njk
+++ b/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);
--- a/source/screens/demo/examples/ui/form.njk
+++ b/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 %}
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@ -5,56 +5,147 @@ tags:
  - index
  - ui
 ---
+
 {% set pageId = "init" %}
 {% set pageClass = "html_ui" %}

 {% extends "demo/_app.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
-
-{% block title %}{{ title }}
+{% block title %}
+	{{ title }}
 {% endblock %}

 {% block links %}
-		<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
 {% endblock %}

 {% block head %}
-		{{ super() }}
+	{{ super() }}
 {% endblock %}

 {% block body %}
-		<div id="loader" class="step op_show">
-			<div id="bar">
-				<div id="spinner"><span>I</span></div>
-				<div id="wrap">
-					<div id="progress"></div>
-				</div>
-				<div id="status">0%</div>
+	<div id="loader" class="step op_show">
+		<div id="bar">
+			<div id="spinner">
+				<span>I</span>
 			</div>
+			<div id="wrap">
+				<div id="progress"></div>
+			</div>
+			<div id="status">0%</div>
 		</div>
+	</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>
-		<div id="intro" class="step op_hide">
-			{{ ph.brand('brand') }}
-			<p>Powered by</p>
-			<ul class="tech-stack">
-				<li>Vendor</li>
-				<li>IDE</li>
-				<li>Engine</li>
-			</ul>
-		</div>
-		<div id="agreement" class="step op_hide">
-			<h1>Agreement</h1>
-			<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="hello">Hello World!</div>
-			<p class="hello">Only left mouse click or any key</p>
+			<p>Hold
+				<kbd>space</kbd>
+				to skip.</p>
 		</div>
+		{{ ph.brand('brand') }}
+		<p>Powered by</p>
+		<ul class="tech-stack">
+			<li>Vendor</li>
+			<li>IDE</li>
+			<li>Engine</li>
+		</ul>
+	</div>
+	<div id="agreement" class="step op_hide">
+		<h1>Agreement</h1>
+		<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>
 {% endblock %}

 {%- block script %}
-		{{ super() }}
-		<script src="{{ pageBase }}js/ui.js"></script>
+	{{ super() }}
+	<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 %}
--- a/source/screens/demo/index.njk
+++ b/source/screens/demo/index.njk
@ -12,80 +12,71 @@ tags:

 {% block title %}Index{% endblock %}
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}

 {% block body %}
-<!-- {{ page.fileSlug }}.page -->
-  <div class="wrap">
-    <div class="hello">
-      <h2>This is
-        {{ hippie.brand | upper }}</h2>
-      <p>You can start using it by replacing this file with your own index page.</p>
-      <p>To do this you need to create a file
-        <code>/index.njk</code>
-        inside the
-        <i>source/screens</i>
-        folder. You can also create a
-        <code>data.json</code>
-        file inside the
-        <i>source/templates</i>
-        folder as a data source for your nunjucks files.</p>
-      <p>For a very basic start you can make a copy of the demo page
-        <code>blank.njk</code>. You can find it at
-        <i>/source/screens/demo</i>.</p>
-      <p>The
-        <i>source/demo</i>
-        folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
-      <div class="pos_rel">
-        <pre class="txt_tiny txt_white pos_abs pin_down pin_right">  ()()<br>  (..)<br>c(")(")</pre>
-        <h3>Overview</h3>
-      </div>
-      <nav>
-        <ul class="list_link">
-          {% for link in collections.demoIndex %}
-            <li>
-              <a href="{{ link.page.url }}">{{ link.data.title }}</a>
-            </li>
-          {% endfor %}
-        </ul>
-      </nav>
-      <h3>Page</h3>
-      <ul class="list_link">
-        {% for link in collections.demoPage | sort(false, false, 'data.title') %}
-          <li>
-            <a href="{{ link.page.url }}">{{ link.data.title }}</a>
-          </li>
-        {% endfor %}
-      </ul>
-      <h3>Example</h3>
-      <ul class="list_link">
-        {% for link in collections.demoExample %}
-          <li>
-            <a href="{{ link.page.url }}">{{ link.data.title }}</a>
-          </li>
-        {% endfor %}
-      </ul>
-    </div>
-  </div>
+	<!-- {{ page.fileSlug }}.page -->
+	<div class="wrap">
+		<div class="hello">
+			<h2>This is
+				{{ hippie.brand | upper }}</h2>
+			<p>You can start using it by replacing this file with your own index page.</p>
+			<p>To do this you need to create a file
+				<code>/index.njk</code>
+				inside the
+				<i>source/screens</i>
+				folder. You can also create a
+				<code>data.json</code>
+				file inside the
+				<i>source/templates</i>
+				folder as a data source for your nunjucks files.</p>
+			<p>For a very basic start you can make a copy of the demo page
+				<code>blank.njk</code>. You can find it at
+				<i>/source/screens/demo</i>.</p>
+			<p>The
+				<i>source/demo</i>
+				folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
+			<div class="pos_rel">
+				<pre class="txt_tiny txt_white pos_abs pin_down pin_right">  ()()<br>  (..)<br>c(")(")</pre>
+				<h3>Overview</h3>
+			</div>
+			<nav>
+				<ul class="list_link">
+					{% for link in collections.demoIndex %}
+						<li>
+							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
+						</li>
+					{% endfor %}
+				</ul>
+			</nav>
+			<h3>Page</h3>
+			<ul class="list_link">
+				{% for link in collections.demoPage | sort(false, false, 'data.title') %}
+					<li>
+						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
+					</li>
+				{% endfor %}
+			</ul>
+			<h3>Example</h3>
+			<ul class="list_link">
+				{% for link in collections.demoExample %}
+					<li>
+						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
+					</li>
+				{% endfor %}
+			</ul>
+		</div>
+	</div>
 {% endblock %}

 {% 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...');
-    // Page specific
-    // ------------------------------------------------------------------------------
-    $(document).ready(function () {
-      logPerf('EVENT       :: jQuery \'ready\' event fired.');
-      setup();
-    });
-    logPerf('Application ready... not.');
-  </script>
+	{{ super() }}
+	<script>
+		assetsLoaded = true;
+		logPerf('BODY        :: Assets loaded, running page specific script...', assetsLoaded);
+		// Page specific
+		// ------------------------------------------------------------------------------
+		logPerf('Application ready... not.');
+	</script>
 {% endblock %}
--- a/source/screens/demo/introduction.njk
+++ b/source/screens/demo/introduction.njk
@ -10,49 +10,38 @@ tags:

 {% block title %}Einführung{% endblock %}
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}

 {% block main %}
-<!-- {{ page.fileSlug }}.page -->
-  {% include "hippie/partials/_body_nav.njk" %}
-
-  <section class="sec_main_center">
-    <header>
-      <hgroup>
-        <h1>Introduction to HIPPIE</h1>
-        <p>Hippie interweaves preeminent personal interface elements.</p>
-      </hgroup>
-    </header>
-    <article>
-      <p>&hellip;</p>
-    </article>
-  </section>
+	<!-- {{ page.fileSlug }}.page -->
+	<section class="sec_main_center">
+		<header>
+			<hgroup>
+				<h1>Introduction to HIPPIE</h1>
+				<p>Hippie interweaves preeminent personal interface elements.</p>
+			</hgroup>
+		</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
-    var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
-    var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
+	{{ super() }}
+	<script>
+		assetsLoaded = true;
+		logPerf('Assets loaded.', assetsLoaded);
+		// Page specific
+		// ------------------------------------------------------------------------------
+		composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
+		composeMail('.general', 'name', 'domain', 'tld', '', '')

-    $(document).ready(function () {
-      logPerf('JQ document ready event fired.');
-    });
-
-    $(document).scroll(function () {
-      scrollUi.check();
-    });
-    logPerf('Application ready... not.');
-  </script>
+		logPerf('Application ready... not.');
+	</script>
 {% endblock %}
--- a/source/screens/demo/layouts.njk
+++ b/source/screens/demo/layouts.njk
@ -10,331 +10,326 @@ tags:

 {% block title %}Gestaltungen{% endblock %}
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}

 {% block main %}
-<!-- {{ 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>
-        <h4>Beispiele</h4>
-        <pre class="pre_code"><code>h3.txt_color_dark+p</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>
-          <p>+49 (0)123 1337 0000<br>
-            <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>
-        <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>
-        <div class="overflow">
-          <nav class="float_space_left">
-            <ul>
-              <li>
-                <a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
-              </li>
-              <li>
-                <a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
-              </li>
-              <li>
-                <a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
-              </li>
-              <li>
-                <a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
-              </li>
-            </ul>
-          </nav>
-          <nav>
-            <ul>
-              <li>
-                <a href="" class="a_button_border">Stufe 1</a>
-              </li>
-              <li>
-                <a href="" class="a_button_border">Stufe 2</a>
-              </li>
-              <li>
-                <a href="" class="a_button_border">Stufe 3</a>
-              </li>
-              <li>
-                <a href="" class="a_button_border">Stufe 4</a>
-              </li>
-            </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>
-        <nav class="nav_horizontal">
-          <ul>
-            <li>
-              <a href="" class="a_button">Abschnitt 1</a>
-            </li>
-            <li>
-              <a href="" class="a_button">Abschnitt 2</a>
-            </li>
-            <li>
-              <a href="" class="a_button">Abschnitt 3</a>
-            </li>
-            <li>
-              <a href="" class="a_button">Abschnitt 4</a>
-            </li>
-          </ul>
-        </nav>
-        <div class="overflow">
-          <nav class="nav_center_old">
-            <ul>
-              <li>
-                <a href="" class="a_button">Typ 1</a>
-              </li>
-              <li>
-                <a href="" class="a_button">Typ 2</a>
-              </li>
-              <li>
-                <a href="" class="a_button">Typ 3</a>
-              </li>
-              <li>
-                <a href="" class="a_button">Typ 4</a>
-              </li>
-            </ul>
-          </nav>
-        </div>
-        <pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
-        <header class="header_page demo__header header_fancy">
-          <h1>Aufmacher</h1>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
-          <nav class="nav_separate_right">
-            <ul>
-              <li>
-                <a href="" class="a_button">Mensch</a>
-              </li>
-              <li>
-                <a href="" class="a_button">Pflanze</a>
-              </li>
-            </ul>
-          </nav>
-          <nav class="nav_right">
-            <ul>
-              <li>
-                <a href="" class="a_button">Blau</a>
-              </li>
-              <li>
-                <a href="" class="a_button">Gelb</a>
-              </li>
-            </ul>
-          </nav>
-        </header>
-        <pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
-        <div class="box_space h_basic">
-          <header id="js_demo_fix" class="header_page demo__header header_fix">
-            <nav class="nav_right">
-              <ul>
-                <li>
-                  <a href="" class="a_button">Eins</a>
-                </li>
-                <li>
-                  <a href="" class="a_button">Zwei</a>
-                </li>
-              </ul>
-            </nav>
-          </header>
-          <div class="pos_abs pin_bottom width_full">
-            <pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
-            <footer id="js_demo_stop" class="demo_footer">
-              <nav class="nav_column nav_separate">
-                <ul>
-                  <li>
-                    <a href="" class="a_button_text">Alpha</a>
-                  </li>
-                  <li>
-                    <a href="" class="a_button_text">Bravo</a>
-                  </li>
-                  <li>
-                    <a href="" class="a_button_text">Charlie</a>
-                  </li>
-                  <li>
-                    <a href="" class="a_button_text">Delta</a>
-                  </li>
-                </ul>
-              </nav>
-              <p class="txt_center demo__credits">
-                <i class="i_bright">👨‍💻</i>
-                mit
-                <i class="i_bright">❤</i>
-                von
-                <a href="https://interaktionsweise.de">Interaktionsweise</a>
-              </p>
-            </footer>
-          </div>
-        </div>
-        <div class="flex">
-          <div class="flex_child"></div>
-          <div class="flex_child"></div>
-          <div class="flex_child"></div>
-          <div class="flex_child"></div>
-          <div class="flex_child"></div>
-        </div>
-        <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>
-        <form method="get">
-          <p class="label">
-            Show me a
-            <select name="F">
-              <option value="0">
-                Plain list</option>
-              <option value="1" selected="selected">
-                Fancy list</option>
-              <option value="2">
-                Table list</option>
-            </select>
-            Sorted by
-            <select name="C">
-              <option value="N" selected="selected">
-                Name</option>
-              <option value="M">
-                Date Modified</option>
-              <option value="S">
-                Size</option>
-              <option value="D">
-                Description</option>
-            </select>
-            <select name="O">
-              <option value="A" selected="selected">
-                Ascending</option>
-              <option value="D">
-                Descending</option>
-            </select>
-            <select name="V">
-              <option value="0" selected="selected">
-                in Normal order</option>
-              <option value="1">
-                in Version order</option>
-            </select>
-            Matching
-            <input type="text" name="P" value="*"/>
-            <input type="submit" name="X" value="Go"/>
-          </p>
-        </form>
+	<!-- {{ page.fileSlug }}.page -->
+	<section class="sec_main_center">
+		<header class="header_txt">
+			<h1>Sammlung formatierter Elemente</h1>
+			<p>Die Elemente werden fortlaufend komplexer</p>
+		</header>
+		<article>
+			<h2>Bereiche</h2>
+			<h3>section</h3>
+			<pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</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>
+				<p>+49 (0)123 1337 0000<br>
+					<a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a>
+				</p>
+			</section>
+			<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>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>
+						<li>
+							<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
+						</li>
+						<li>
+							<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
+						</li>
+						<li>
+							<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
+						</li>
+						<li>
+							<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
+						</li>
+					</ul>
+				</nav>
+				<nav>
+					<ul>
+						<li>
+							<a href="" class="a_button_border">Stufe 1</a>
+						</li>
+						<li>
+							<a href="" class="a_button_border">Stufe 2</a>
+						</li>
+						<li>
+							<a href="" class="a_button_border">Stufe 3</a>
+						</li>
+						<li>
+							<a href="" class="a_button_border">Stufe 4</a>
+						</li>
+					</ul>
+				</nav>
+			</div>
+			<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4</code></pre>
+			<nav class="nav_horizontal">
+				<ul>
+					<li>
+						<a href="" class="a_button">Abschnitt 1</a>
+					</li>
+					<li>
+						<a href="" class="a_button">Abschnitt 2</a>
+					</li>
+					<li>
+						<a href="" class="a_button">Abschnitt 3</a>
+					</li>
+					<li>
+						<a href="" class="a_button">Abschnitt 4</a>
+					</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>
+						<li>
+							<a href="" class="a_button">Typ 1</a>
+						</li>
+						<li>
+							<a href="" class="a_button">Typ 2</a>
+						</li>
+						<li>
+							<a href="" class="a_button">Typ 3</a>
+						</li>
+						<li>
+							<a href="" class="a_button">Typ 4</a>
+						</li>
+					</ul>
+				</nav>
+			</div>
+			<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
+			<header class="header_page demo__header header_fancy">
+				<h1>Aufmacher</h1>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
+				<nav class="nav_separate_right">
+					<ul>
+						<li>
+							<a href="" class="a_button">Mensch</a>
+						</li>
+						<li>
+							<a href="" class="a_button">Pflanze</a>
+						</li>
+					</ul>
+				</nav>
+				<nav class="nav_right">
+					<ul>
+						<li>
+							<a href="" class="a_button">Blau</a>
+						</li>
+						<li>
+							<a href="" class="a_button">Gelb</a>
+						</li>
+					</ul>
+				</nav>
+			</header>
+			<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
+			<div class="box_space h_basic">
+				<header id="js_demo_fix" class="header_page demo__header header_fix">
+					<nav class="nav_right">
+						<ul>
+							<li>
+								<a href="" class="a_button">Eins</a>
+							</li>
+							<li>
+								<a href="" class="a_button">Zwei</a>
+							</li>
+						</ul>
+					</nav>
+				</header>
+				<div class="pos_abs pin_bottom width_full">
+					<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
+					<footer id="js_demo_stop" class="demo_footer">
+						<nav class="nav_column nav_separate">
+							<ul>
+								<li>
+									<a href="" class="a_button_text">Alpha</a>
+								</li>
+								<li>
+									<a href="" class="a_button_text">Bravo</a>
+								</li>
+								<li>
+									<a href="" class="a_button_text">Charlie</a>
+								</li>
+								<li>
+									<a href="" class="a_button_text">Delta</a>
+								</li>
+							</ul>
+						</nav>
+						<p class="txt_center demo__credits">
+							<i class="i_bright">👨‍💻</i>
+								mit
+								<i class="i_bright">❤</i>
+								von
+								<a href="https://interaktionsweise.de">Interaktionsweise</a>
+						</p>
+					</footer>
+				</div>
+			</div>
+			<div class="flex">
+				<div class="flex_child"></div>
+				<div class="flex_child"></div>
+				<div class="flex_child"></div>
+				<div class="flex_child"></div>
+				<div class="flex_child"></div>
+			</div>
+			<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>

-        <h2>Gruppierung</h2>
-        <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>
-          </li>
-          <li>
-            <a href="">Work</a>
-          </li>
-          <li>
-            <a href="">Projects</a>
-          </li>
-        </ul>
+			<form method="get">
+				<p class="label">
+					Show me a
+					<select name="F">
+						<option value="0">Plain list</option>
+						<option value="1" selected="selected">Fancy list</option>
+						<option value="2">Table list</option>
+					</select>
+					Sorted by
+					<select name="C">
+						<option value="N" selected="selected">Name</option>
+						<option value="M">Date Modified</option>
+						<option value="S">Size</option>
+						<option value="D">Description</option>
+					</select>
+					<select name="O">
+						<option value="A" selected="selected">Ascending</option>
+						<option value="D">Descending</option>
+					</select>
+					<select name="V">
+						<option value="0" selected="selected">in Normal order</option>
+						<option value="1">in Version order</option>
+					</select>
+					Matching
+					<input type="text" name="P" value="*"/>
+					<input type="submit" name="X" value="Go"/>
+				</p>
+			</form>

-        <h2>Tabellen</h2>
-        <pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16  height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2</code></pre>
-        <table class="table_link js_pop">
-          <thead>
-            <tr>
-              <th>&nbsp;</th>
-              <th>Ab / Zy</th>
-              <th>Neu / Alt</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
-              <td class="cell_link">
-                <a href="" target="_blank">Name</a>
-                <a href="" target="_blank">URL</a>
-              </td>
-              <td class="cell_date" rowspan="2">YYYY-MM-DD</td>
-            </tr>
-            <tr>
-              <td class="cell_text">
-                <div class="shorten">Beschreibung</div>
-              </td>
-            </tr>
-          </tbody>
-          <tbody>
-            <tr>
-              <td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
-              <td class="cell_link">
-                <a href="" target="_blank">Name</a>
-                <a href="" target="_blank">URL</a>
-              </td>
-              <td class="cell_date" rowspan="2">YYYY-MM-DD</td>
-            </tr>
-            <tr>
-              <td class="cell_text">
-                <div class="shorten">Beschreibung</div>
-              </td>
-            </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">
-            <desc>Background flag</desc>
-            <rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
-            <polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
-            <polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
-            <polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
-            <polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
-            <polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
-            <polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
-            <polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
-            <polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
-          </svg>
-        </div>
-      </article>
-    </section>
-  </div>
+			<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/demo/letter.gif" alt="">name@domain.tld</a>
+				</li>
+				<li>
+					<a href="">Work</a>
+				</li>
+				<li>
+					<a href="">Projects</a>
+				</li>
+			</ul>
+
+			<h2>Tabellen</h2>
+			<pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16  height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2</code></pre>
+			<table class="table_link js_pop">
+				<thead>
+					<tr>
+						<th>&nbsp;</th>
+						<th>Ab / Zy</th>
+						<th>Neu / Alt</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<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>
+						</td>
+						<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
+					</tr>
+					<tr>
+						<td class="cell_text">
+							<div class="shorten">Beschreibung</div>
+						</td>
+					</tr>
+				</tbody>
+				<tbody>
+					<tr>
+						<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>
+						</td>
+						<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
+					</tr>
+					<tr>
+						<td class="cell_text">
+							<div class="shorten">Beschreibung</div>
+						</td>
+					</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">
+					<desc>Background flag</desc>
+					<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
+					<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
+					<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
+					<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
+					<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
+					<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
+					<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
+					<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
+					<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
+				</svg>
+			</div>
+		</article>
+	</section>
 {% 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>
-    // Page specific
-    // ------------------------------------------------------------------------------
-    $(document).ready(function () {
-      // jq-sticky-anything
-      $('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
-    });
-  </script>
+	{{ super() }}
+	<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
+	{{ log.asset(true) }}
+	{{ log.log('Assets loaded.', assetsLoaded) }}
+	<script>
+		// Page specific
+		// ------------------------------------------------------------------------------
+		$(document).ready(function () {
+			// jq-sticky-anything
+			$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
+		});
+	</script>
 {% endblock %}
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@ -1 +1 @@
-Subproject commit 9f3797f6516a63101fb8ebd23ab8229053ec57b6
+Subproject commit a1a4bd408bedaa11f5e1aacca630d0b1bbbe7aa2
--- a/source/style/modules/ui/_drag_module.scss
+++ b/source/style/modules/ui/_drag_module.scss
@ -1,18 +1,18 @@
 .body_drag {
 	height: 100vh;
 	// padding: $space_basic;
+
+	button {
+		@extend .io_button;
+		position: fixed;
+		top: 8px;
+		right: 8px;
+		margin: 0;
+	}
 }

 #space {
 	position: relative;
 	height: 100%;
 	background-color: $color-dark;
-}
-
-#addFrame {
-	@extend .io_button;
-	position: fixed;
-	top: 8px;
-	right: 8px;
-	margin: 0;
 }
--- a/source/style/modules/ui/_form_module.scss
+++ b/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;
+}
--- a/source/style/ui.scss
+++ b/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: $color_darker;
+	background-color: rgba($color_bright, .5);
+	font-family: $family_text_mono;
 }

@import "modules/ui/new_module";
@import "modules/ui/settings_module";
-@import "modules/ui/drag_module";
+@import "modules/ui/drag_module";
+@import "modules/ui/form_module";
--- a/source/templates/demo/_app.njk
+++ b/source/templates/demo/_app.njk
@ -1,29 +1,30 @@
 <!-- demo.app.template -->
 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-  <head>
-    <meta charset="utf-8">
+	<head>
+		<meta charset="utf-8">

-    {% block head %}
-      <title>{{ hippie.titlePrefix }}
-        {%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
+		{% block head %}
+			<title>{{ hippie.titlePrefix }}
+				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>

-      {% block meta %}
-        {% include "demo/partials/_meta.njk" %}
-        <base href="/">
-      {% endblock %}
+			{% block meta %}
+				{% include "demo/partials/_meta.njk" %}
+				<base href="/">
+			{% endblock %}

-      {% block links %}
-      {% endblock %}
+			{% block links %}{% endblock %}

-    {% endblock %}
-  </head>
+		{% endblock %}
+	</head>

-  <body class="{{ bodyClass }}">
-    {% block body %}{% endblock %}
+	<body class="{{ bodyClass }}">
+		{% block body %}{% endblock %}

-    {% block script %}
-    {% 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>
+	</body>
 </html>
--- a/source/templates/demo/_default.njk
+++ b/source/templates/demo/_default.njk
@ -2,18 +2,18 @@
 {% extends "hippie/_default.njk" %}

 {% block meta %}
-  {% include "demo/partials/_meta.njk" %}
-  <base href="/">
+	{% include "demo/partials/_meta.njk" %}
+	<base href="/">
 {% endblock %}

 {% block links %}
-  {{ super() }}
-  <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
-  {# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
-  {# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/> #}
+	{{ super() }}
+	<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
+	{# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
+	{# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.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>
+	{{ super() }}
+	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
 {% endblock %}
--- a/source/templates/demo/_main.njk
+++ b/source/templates/demo/_main.njk
@ -2,25 +2,20 @@
 {% extends "hippie/_main.njk" %}

 {% block meta %}
-  {% include "demo/partials/_meta.njk" %}
-  <base href="/">
+	{% include "demo/partials/_meta.njk" %}
+	<base href="/">
 {% endblock %}

 {% block links %}
-  {{ super() }}
-{% 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 %}
+	{{ super() }}
+	{% 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 %}

-  <!-- <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 %}
+	<!-- <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 %}
--- a/source/templates/demo/_maintenance.njk
+++ b/source/templates/demo/_maintenance.njk
@ -2,11 +2,11 @@
 {% extends "hippie/_maintenance.njk" %}

 {% block meta %}
-  {% include "demo/partials/_meta.njk" %}
-  <base href="/">
+	{% include "demo/partials/_meta.njk" %}
+	<base href="/">
 {% endblock %}

 {% block links %}
-  {{ super() }}
-  <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
+	{{ super() }}
+	<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
 {% endblock %}
--- a/source/templates/hippie/_default.njk
+++ b/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 }}">
--- a/source/templates/hippie/_main.njk
+++ b/source/templates/hippie/_main.njk
@ -3,46 +3,67 @@

 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-  <head>
-    <meta charset="utf-8">
+	<head>
+		<meta charset="utf-8">

-    {% block head %}
-      <title>{{ hippie.titlePrefix }}
-        {%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
+		{% block head %}
+			<title>{{ hippie.titlePrefix }}
+				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>

-      {% block meta %}
-        {% include "hippie/partials/_head_meta.njk" %}
-      {% endblock %}
+			{% block meta %}
+				{% include "hippie/partials/_head_meta.njk" %}
+			{% endblock %}

-      {% include "hippie/partials/_head_script.njk" %}
-      {{ log.debug(hippie.debugMode, true) }}
-      {{ log.start() }}
+			{% include "hippie/partials/_head_script.njk" %}
+			{{ log.debug(hippie.debugMode, true) }}
+			{{ log.start() }}

-      {% block links %}
-        {% include "hippie/partials/_head_links.njk" %}
-      {% endblock %}
+			{% block links %}
+				{% include "hippie/partials/_head_links.njk" %}
+			{% endblock %}

-      {{ log.log('HEAD end    :: Links parsed, starting to load.') }}
-    {% endblock %}
-  </head>
+			{{ log.log('HEAD end    :: Links parsed, starting to load.') }}
+		{% endblock %}
+	</head>

-  <body class="{{ bodyClass }}">
-    {{ log.log('BODY start') }}
-    {% include "hippie/partials/_body_hover.njk" %}
-    <div id="root">
-      {% include "hippie/partials/_header.njk" %}
+	<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" %}

-      <main class="main_site">
-        {% block main %}{% endblock %}
-      </main>
+			<main class="main_site">
+				{% block main %}{% endblock %}
+			</main>

-      {% include "hippie/partials/_footer.njk" %}
-    </div>
+			{% include "hippie/partials/_footer.njk" %}
+		</div>

-    {% block script %}
-      {{ log.log('BODY        :: Loading script assets...') }}
-    {% endblock %}
+		{% 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'));

-    {{ log.log('BODY end    :: Page script might still be loading.') }}
-  </body>
+				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.') }}
+	</body>
 </html>
--- a/source/templates/hippie/_maintenance.njk
+++ b/source/templates/hippie/_maintenance.njk
@ -1,27 +1,27 @@
 <!-- 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>
-    <meta charset="utf-8">
+	<head>
+		<meta charset="utf-8">

-    {% block head %}
-      <title>{{ hippie.titlePrefix }}
-        {%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
+		{% block head %}
+			<title>{{ hippie.titlePrefix }}
+				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>

-      {% block meta %}
-        {% include "hippie/partials/_head_meta.njk" %}
-      {% endblock %}
+			{% block meta %}
+				{% include "hippie/partials/_head_meta.njk" %}
+			{% endblock %}

-      {% block links %}
-        <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH7SURBVDiNldM/aJNBGMfx71viH7TqIoLiIOoiSJRu0qE4uIiDm5OI4ODk4uYioqBuUkR0kKJNFC1mqUltlbZSqE3RYt+2SUyTppCmeU2bkiZ907z3vnfnUEU0NrXPeMd97p6H+xlaa02D0oDRYL+p4WEN9yZm8dT6dzQEQtkCuiIJxHKbBxZrLiNWmc8vRxn7lMGRanPAw0QW49Uwp8ODJEZmCCSt/wcGrCWavte44LRz7FyYnd+yxMZz2J7cGKh6kvczRUp3X9BnmFyLzHNVRpkeShNM1b+iDngUn2Oue4qLLV3cf+YST2tiLf3sj04wmypSEt76wFixwoJpcbKnh/ZMmuXK2vqdYJXLxyPMDiTpTOX/DbhK88bMMh4Y5sSZt3R2/+53aRkCzgT+oX4Kls2i49YDT+M5JkMmV+aj3BrII/+a15MuSevZEPl3UzxP5/8EMiurfO1L0hyNU27tZehL/c/zJNzsLXB+uoNySZBfFQD4tIbHHxJMfoxxu2pi7rK5fsm3FgL5MwXKQAPaMzh8JMbg61E6mn3c8B/CF5yx2L1tC/5TR4nsAS/RhlNzcR0P6TggFVoDGrYqyYMkLOybZ4fQZFZqGOHsgi4KF1tIakrhKIXj/WrBQAuJV3EQtsBbEQjbQVQEB/0HUHu3Y2wU5/XKVRqhFD8AgpYX2M9TNGcAAAAASUVORK5CYII=">
-      {% endblock %}
-    {% endblock %}
-  </head>
+			{% block links %}
+				<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH7SURBVDiNldM/aJNBGMfx71viH7TqIoLiIOoiSJRu0qE4uIiDm5OI4ODk4uYioqBuUkR0kKJNFC1mqUltlbZSqE3RYt+2SUyTppCmeU2bkiZ907z3vnfnUEU0NrXPeMd97p6H+xlaa02D0oDRYL+p4WEN9yZm8dT6dzQEQtkCuiIJxHKbBxZrLiNWmc8vRxn7lMGRanPAw0QW49Uwp8ODJEZmCCSt/wcGrCWavte44LRz7FyYnd+yxMZz2J7cGKh6kvczRUp3X9BnmFyLzHNVRpkeShNM1b+iDngUn2Oue4qLLV3cf+YST2tiLf3sj04wmypSEt76wFixwoJpcbKnh/ZMmuXK2vqdYJXLxyPMDiTpTOX/DbhK88bMMh4Y5sSZt3R2/+53aRkCzgT+oX4Kls2i49YDT+M5JkMmV+aj3BrII/+a15MuSevZEPl3UzxP5/8EMiurfO1L0hyNU27tZehL/c/zJNzsLXB+uoNySZBfFQD4tIbHHxJMfoxxu2pi7rK5fsm3FgL5MwXKQAPaMzh8JMbg61E6mn3c8B/CF5yx2L1tC/5TR4nsAS/RhlNzcR0P6TggFVoDGrYqyYMkLOybZ4fQZFZqGOHsgi4KF1tIakrhKIXj/WrBQAuJV3EQtsBbEQjbQVQEB/0HUHu3Y2wU5/XKVRqhFD8AgpYX2M9TNGcAAAAASUVORK5CYII=">
+			{% endblock %}
+		{% endblock %}
+	</head>

-  <body class="{{ bodyClass }}">
-    {% block body %}
-      {{ status.footer() }}
-    {% endblock %}
-  </body>
+	<body class="{{ bodyClass }}">
+		{% block body %}
+			{{ footer.status() }}
+		{% endblock %}
+	</body>
 </html>
--- a/source/templates/hippie/macros/_footer.njk
+++ b/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 %}
--- a/source/templates/hippie/macros/_gate.njk
+++ b/source/templates/hippie/macros/_gate.njk
@ -1,31 +1,30 @@
-<!-- gates.macro -->
 {% macro list(name, url, image, links) %}
-  <article class="portal__entry">
-    <section>
-      <h2>
-        <a class="a_discreet" href="{{ url }}">{{ name }}</a>
-      </h2>
-      <a class="portal__link portal__link--{{ name | slug }}" href="{{ url }}">
-        <img src="{{ image.src }}" alt="{{ image.alt }}"/>
-      </a>
-      {% if links %}
-        <ul class="portal__list">
-          {% for link in links %}
-            <li>
-              <a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
-            </li>
-          {% endfor %}
-        </ul>
-      {% endif %}
-    </section>
-  </article>
+	<article class="portal__entry">
+		<section>
+			<h2>
+				<a class="a_discreet" href="{{ url }}">{{ name }}</a>
+			</h2>
+			<a class="portal__link portal__link--{{ name | slug }}" href="{{ url }}">
+				<img src="{{ image.src }}" alt="{{ image.alt }}"/>
+			</a>
+			{% if links %}
+				<ul class="portal__list">
+					{% for link in links %}
+						<li>
+							<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
+						</li>
+					{% endfor %}
+				</ul>
+			{% endif %}
+		</section>
+	</article>
 {% endmacro %}
 {% macro simple(name, url) %}
-  <article class="portal__entry">
-    <section>
-      <h2>
-        <a class="a_discreet" href="{{ url }}">{{ name }}</a>
-      </h2>
-    </section>
-  </article>
+	<article class="portal__entry">
+		<section>
+			<h2>
+				<a class="a_discreet" href="{{ url }}">{{ name }}</a>
+			</h2>
+		</section>
+	</article>
 {% endmacro %}
--- a/source/templates/hippie/macros/_header.njk
+++ b/source/templates/hippie/macros/_header.njk
@ -0,0 +1,5 @@
+{% macro main() %}
+	<header class="header_site">
+		<div id="begin"></div>
+	</header>
+{% endmacro %}
--- a/source/templates/hippie/macros/_log.njk
+++ b/source/templates/hippie/macros/_log.njk
@ -1,24 +1,24 @@
 {% macro start() %}
-  <script>
-    logAdd('EVENT       :: Document \'%s\' event fired.', 'DOMContentLoaded');
-    logPerf('HEAD start  :: Debugging performance...', debugOn);
-  </script>
+	<script>
+		logAdd('EVENT       :: Document \'%s\' event fired.', 'DOMContentLoaded');
+		logPerf('HEAD start  :: Debugging performance...', debugOn);
+	</script>
 {% endmacro %}
 {% macro log(msg, arg = '') %}
-  <script>
-    logPerf('{{ msg }}', {{ arg }});
-  </script>
+	<script>
+		logPerf('{{ msg }}', {{ arg }});
+	</script>
 {% endmacro %}
 {% macro debug(state = false, display = false, assets = false) %}
-  {# {{ set hippie.debugMode = state }} #}
-  <script>
-    debugOn = {{ state }};
-    debugOnScreen = {{ display }};
-    assetsLoaded = {{ assets }};
-  </script>
+	{# {{ set hippie.debugMode = state }} #}
+	<script>
+		debugOn = {{ state }};
+		debugOnScreen = {{ display }};
+		assetsLoaded = {{ assets }};
+	</script>
 {% endmacro %}
 {% macro asset(state = false) %}
-  <script>
-    assetsLoaded = {{ state }};
-  </script>
+	<script>
+		assetsLoaded = {{ state }};
+	</script>
 {% endmacro %}
--- a/source/templates/hippie/macros/_nav.njk
+++ b/source/templates/hippie/macros/_nav.njk
@ -1,13 +1,13 @@
 {% macro main(data, active = '') %}
-  <nav>
-    <ul>
-      {% for link in data %}
-        <li{%if active == link.text %} class="active_txt" {% endif %}>
-          {%if active == link.text %}{{ link.text }}{%else%}
-            <a href="{{ link.href }}">{{ link.text }}</a>
-          {% endif %}
-        </li>
-      {% endfor %}
-    </ul>
-  </nav>
+	<nav>
+		<ul>
+			{% for link in data %}
+				<li{%if active == link.text %} class="active_txt" {% endif %}>
+					{%if active == link.text %}{{ link.text }}{%else%}
+						<a href="{{ link.href }}">{{ link.text }}</a>
+					{% endif %}
+				</li>
+			{% endfor %}
+		</ul>
+	</nav>
 {% endmacro %}
--- a/source/templates/hippie/macros/_placeholder.njk
+++ b/source/templates/hippie/macros/_placeholder.njk
@ -1,43 +1,47 @@
-{% macro email(class='', text='name@domain.tld') %}
-<a class="{{ class }}" href="">{{ text }}</a>
-{# {{ 'name@domain.tld' | urlize | safe }} #}
+{% macro email(class = '', text = 'name@domain.tld') %}
+	<a class="{{ class }}" href="">{{ text }}</a>
+	{# {{ '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 }}">
-	{# <img src="" alt="Brand logo"> #}
-	<svg
+
+{% macro brand(class = '', name = 'Marke') %}
+	<div class="{{ class }}">
+		{# <img src="" alt="Brand logo"> #}
+		<svg
 		width="128"
 		height="128"
 		viewBox="0 0 128 128"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"
 		xmlns:svg="http://www.w3.org/2000/svg">
-		<g>
-			<rect
+			<g>
+				<rect
 				style="display:inline;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-dasharray:none"
 				width="126"
 				height="126"
 				x="1"
-				y="1" />
-			<circle
+				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" />
-			<path
+				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" />
-		</g>
-	</svg>
-	<h1>{{ name }}</h1>
-</div>
+				d="m 9.3926879,32.472455 109.2146221,-2e-6 -54.607309,94.582637 z"/>
+			</g>
+		</svg>
+		<h1>{{ name }}</h1>
+	</div>
 {% endmacro %}
--- a/source/templates/hippie/macros/_song.njk
+++ b/source/templates/hippie/macros/_song.njk
@ -1,12 +1,12 @@
 {% macro simple(index, data, content) %}
-  <article class="songbook_song">
-    <header>
-      <h2>{{ data.title }}</h2>
-      <h6>{{ data.releaseDate }}</h6>
-      <p>{{ data.description }}</p>
-    </header>
-    {# <pre class="pre_code"><code>{{ content }}</code></pre> #}
-    {{ content | safe }}
-    <footer>{{ index }}</footer>
-  </article>
+	<article class="songbook_song">
+		<header>
+			<h2>{{ data.title }}</h2>
+			<h6>{{ data.releaseDate }}</h6>
+			<p>{{ data.description }}</p>
+		</header>
+		{# <pre class="pre_code"><code>{{ content }}</code></pre> #}
+		{{ content | safe }}
+		<footer>{{ index }}</footer>
+	</article>
 {% endmacro %}
--- a/source/templates/hippie/macros/_state.njk
+++ b/source/templates/hippie/macros/_state.njk
@ -1,15 +1,14 @@
-<!-- states.macro -->
-{% macro coord(id, text='X: #, Y: ##') %}
-  <span id="{{ id }}">{{ text }}</span>
+{% macro coord(id, text = 'X: #, Y: ##') %}
+	<span id="{{ id }}">{{ text }}</span>
 {% endmacro %}
-{% macro time(id, text='00:00:00', postfix=' Uhr') %}
-  <span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
+{% macro time(id, text = '00:00:00', postfix = ' Uhr') %}
+	<span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
 {% endmacro %}
 {% macro date() %}
-  <span id="{{ id }}">
-    <span id="day">Wochentag</span>,
-    <span id="dayNumb">##</span>.
-    <span id="month">Monat</span>
-    <span id="year">####</span>
-  </span>
+	<span id="{{ id }}">
+		<span id="day">Wochentag</span>,
+		<span id="dayNumb">##</span>.
+		<span id="month">Monat</span>
+		<span id="year">####</span>
+	</span>
 {% endmacro %}
--- a/source/templates/hippie/macros/footer-status.njk
+++ b/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 %}
--- a/source/templates/hippie/partials/_body_hover.njk
+++ b/source/templates/hippie/partials/_body_hover.njk
@ -1,2 +1,2 @@
-<!-- body_hover.partial -->
+<!-- hover.partial -->
 <div id="js_mob"></div>
--- a/source/templates/hippie/partials/_body_nav.njk
+++ b/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>
--- a/source/templates/hippie/partials/_footer.njk
+++ b/source/templates/hippie/partials/_footer.njk
@ -1,4 +1,3 @@
 <!-- footer.partial -->
-<footer class="footer_site">
-  <div id="end"></div>
-</footer>
+{% import "hippie/macros/_footer.njk" as footer %}
+{{ footer.main() }}
--- a/source/templates/hippie/partials/_head_links.njk
+++ b/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=">
--- a/source/templates/hippie/partials/_head_meta.njk
+++ b/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="">
--- a/source/templates/hippie/partials/_head_script.njk
+++ b/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 }};
--- a/source/templates/hippie/partials/_header.njk
+++ b/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() }}
Author	SHA1	Message	Date
sthag	7950d23b14	feat: More content for components and layouts - Update hippie styles - Add demo images - New components content - New layout structure and content	2025-06-19 14:20:56 +02:00
sthag	4d00d34d63	feat: Add content for components page - New elements in sections part - Reindent	2025-06-19 12:36:56 +02:00
sthag	c98ebb44ca	style: Reindent and reformat	2025-06-19 12:02:32 +02:00
sthag	07f51e80a2	feat: Add macros - New footer macros - New header macro - Use macros in partials	2025-06-19 12:02:06 +02:00
sthag	7f84235f08	fix: Clean up small things - Rename footer macro - Remove unnecessary div in components page - Rename file comments	2025-06-19 11:07:54 +02:00
sthag	4fcd7742a8	feat: Consolidate body navigation - Update html spec in components page - Add form components - Add JS for components which is not globally available - Move body navigation to main template - Reformat main template	2025-06-19 10:08:00 +02:00
sthag	8f15664d57	style: Spaces to tabs	2025-05-18 13:08:58 +02:00
sthag	875041bacf	feat: Update composeMail function - Move function to hippie functions - Use vanilla instead of jQuery - Add examples to introduction page - Reindent	2025-05-18 13:02:30 +02:00
sthag	9fbc19388f	feat: Update card script - Use vanilla instead of jQuery - Remove super script - Remove event for dither variant - Reindent	2025-05-18 12:44:47 +02:00
sthag	9ff731395a	feat: Improve details - Prevent text selection for agreement step - Extend mouse out time - Hint toast is now part of intro step - Agreement step can now be solved with keyboard - Remove more event listeners when step is solved	2025-05-18 12:07:10 +02:00
sthag	ba063b0760	fix: Indentation for frontmatter	2025-05-18 11:45:26 +02:00
sthag	13b9318f56	feat: Changes to event handling and steps - New idle object - New handlers for idle state - Idle uses global colors - Add mouse over style to idle - Set pointer events style from js - Reindent ui index	2025-05-18 11:20:48 +02:00
sthag	fe2261fda5	feat: Change app template - Add global variables to app template - Add flag colors to global variables - Change var declaration	2025-05-18 11:17:48 +02:00
sthag	8942dc3632	refactor: Move script parts around - Run setup function in global script - Move common script assets to hippie main template - Remove unused scrcipt from components page	2025-05-17 13:04:31 +02:00
sthag	6cfe5b21e1	feat: Consolidate intro scripts - Change script source from ui to intro - Test variants with classes - Move active scripts parts to index - Remove old ui script	2025-05-17 11:06:45 +02:00
sthag	8937b36a1e	feat: Changes to ui form and drag - Use common styles - Move NewDiv class to external script - Align script for form and drag pages	2025-05-15 20:00:51 +02:00
sthag	ad150fadf2	feat: Add form ui example Test css grid system for form fields.	2025-05-14 19:00:13 +02:00