feat: More content for components and layouts

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

source/code/_intro.js

@@ -1,48 +1,128 @@
-let introDelay = 6;
+class Intro {
-let hintDelay = 1;
+	constructor(name) {
-let isAgree = false;
+		this.name = name;
-
-const steps = {
-	agreement: {
-		element: document.getElementById('agreement'),
-		msgIn: 'Agreement shown.',
-		msgOut: 'Agreement accepted.',
-		msgNo: 'No agreement today.'
 	}
-};
+
-const intro = document.getElementById('intro');
+	init() {
-const agreement = steps.agreement.element;
+		return new Promise((resolve) => {
-const hint = {
+			console.log('%s Init', this.name);
-	element: document.getElementById('hint'),
+
-	delay: hintDelay * 1000,
+			resolve();
-	show() {
+		});
-		if (typeof this.timeoutId === 'number') {
+	}
-			this.cancel();
+}
+
+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);
 		});
 	})

source/code/_ui.js

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

source/code/app.js

@@ -1,22 +1,22 @@
 //NEW
 
-function Clock(id){
+function Clock(id) {
 	this.id = id;
-	
+
 	var that = this;
-	setInterval(function(){that.updateClock();}, 1000);
+	setInterval(function () { that.updateClock(); }, 1000);
 	this.updateClock();
 }
 
-Clock.prototype.updateClock = function(){
+Clock.prototype.updateClock = function () {
 	var date = new Date();
 	var clock = document.getElementById(this.id);
 	//console.log(this);
 	clock.innerHTML = this.formatDigits(date.getHours()) + ":" + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds());
 };
-	
+
-Clock.prototype.formatDigits = function(val){
+Clock.prototype.formatDigits = function (val) {
-	if(val<10) val = "0" + val;
+	if (val < 10) val = "0" + val;
 
 	return val;
 }
@@ -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.setUTCFullYear(2000, 0, 1);
-	j2000.setUTCHours(0,0,0,0);
+	j2000.setUTCHours(0, 0, 0, 0);
 
 	var utc = new Date();
-	utc.setUTCFullYear(y,MNumb,DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
+	utc.setUTCFullYear(y, MNumb, DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
-	utc.setUTCHours(h,m,s,ms);
+	utc.setUTCHours(h, m, s, ms);
 
 	var utc0 = new Date();
-	utc0.setUTCFullYear(y,MNumb,DNumb);
+	utc0.setUTCFullYear(y, MNumb, DNumb);
-	utc0.setUTCHours(0,0,0,0);
+	utc0.setUTCHours(0, 0, 0, 0);
+
+	var jd = 2451544.5 + (utc - j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
+	var 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 ){
+	if (width > 0) {
-		return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
+		return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
 	}
 	return number + ""; // always return a string
 }
 
-// create emails
-function composeMail(tag, name, prov, suffix, text, topic) {
-	var trigger = tag.indexOf(".");
-	var mailString = name + '@' + prov + '.' + suffix;
-	var textString = mailString.replace(/@/g, "(at)");
-	var descString = "Nachricht an " + mailString;
-	if (trigger == -1) {
-		if (!text) {
-			text = mailString;
-		} else if (text == "at") {
-			text = textString;
-		} else if (text == "to") {
-			text = descString;
-		}
-		if (!topic) {
-			topic = "";
-		} else {
-			topic = "?subject=" + topic;
-		}
-		var old = $('#'+tag).html();
-		$('#'+tag).html(old + text);
-		$('#'+tag).attr("href", "mailto:" + mailString + topic);
-	} else {
-		$(tag).each(function() {
-			if (!text) {
-				text = mailString;
-			} else if (text == "at") {
-				text = textString;
-			} else if (text == "to") {
-				text = descString;
-			}
-			if (!topic) {
-				topic = "";
-			} else {
-				topic = "?subject=" + topic;
-			}
-			var old = $(this).html();
-			$(this).html(old + text);
-			$(this).attr("href", "mailto:" + mailString + topic);
-		});
-	}
-}
-
 //Länge der Balken im Diagram berechnen
 function barwidth(size, G, W) {
 	var s = size;
 	var g = G;
 	var w = W;
-	var p = ( w / g ) * 100;
+	var p = (w / g) * 100;
-	var newW = s * ( p /100 );
+	var newW = s * (p / 100);
 
 	return newW;
 }
 //String Element erweitern
-String.prototype.transform = function() { 
+String.prototype.transform = function () {
-	return parseFloat(this.replace(',', '.')); 
+	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 totalSpace = total;
-		var singleSpace = gigs;
+	var singleSpace = gigs;
-		var z = round;
+	var z = round;
-		var p = singleSpace / ( totalSpace / 100 );
+	var p = singleSpace / (totalSpace / 100);
-		
+
-		return p;
+	return p;
 }
 //Speicherplatz in GB berechnen
 function gigabytes(percent, total, round) {
-		var occupiedPercent = percent;
+	var occupiedPercent = percent;
-		var singleSpace = total;
+	var singleSpace = total;
-		var z = round;
+	var z = round;
-		var g = (singleSpace / 100 ) * occupiedPercent;
+	var g = (singleSpace / 100) * occupiedPercent;
-		
+
-		return g;
+	return g;
 }

source/code/hippie/functions.js

@@ -1,149 +1,188 @@
 // This is called everytime
 function setup() {
-  'use strict';
+	'use strict';
 
-  console.group('Document information');
+	console.group('Document information');
-  console.info('\n', hippie.brand, '\n\n');
+	console.info('\n', hippie.brand, '\n\n');
-  console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
+	console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
-  console.groupEnd();
+	console.groupEnd();
-  if (debugOn) {
+	if (debugOn) {
-    console.group('Debug information');
+		console.group('Debug information');
-    console.dir(hippie);
+		console.dir(hippie);
-    console.groupEnd();
+		console.groupEnd();
-  }
+	}
 
-  // WANNABE MODULE Mouse over effect
+	// WANNABE MODULE Mouse over effect
-  // With CSS only
+	// With CSS only
-  if ($('#js_mob').length && viewHover) {
+	if ($('#js_mob').length && viewHover) {
-    $('#js_mob').addClass('mouse_over');
+		$('#js_mob').addClass('mouse_over');
-  }
+	}
-  // if (viewHover) {
+	// if (viewHover) {
-  // 	$('body').prepend('<div id="js_mob" class="mouse_over"></div>');
+	// 	$('body').prepend('<div id="js_mob" class="mouse_over"></div>');
-  // }
+	// }
-  // With JS
+	// With JS
 }
 
 // MODULE Scroll navigation
 // Using constructor function
 function HippieScroll($tp, $dn) {
-  'use strict';
+	'use strict';
 
-  // this.$tp = $tp;
+	// this.$tp = $tp;
-  // Define initial situation
+	// Define initial situation
-  let initLeft = false;
+	let initLeft = false;
-  const initY = hippie.screen.vh;
+	const initY = hippie.screen.vh;
 
-  $tp.addClass('di_none');
+	$tp.addClass('di_none');
 
-  // Check scroll position and toggle element
+	// Check scroll position and toggle element
-  this.check = function () {
+	this.check = function () {
-    hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
+		hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
-    if (hippie.screen.y > initY) {
+		if (hippie.screen.y > initY) {
-      if (!initLeft) {
+			if (!initLeft) {
-        $tp.removeClass('di_none');
+				$tp.removeClass('di_none');
-        console.info('Initial viewport left');
+				console.info('Initial viewport left');
-      }
+			}
-      initLeft = true;
+			initLeft = true;
-    } else {
+		} else {
-      if (initLeft) {
+			if (initLeft) {
-        $tp.addClass('di_none');
+				$tp.addClass('di_none');
-        console.info('Initial viewport entered');
+				console.info('Initial viewport entered');
-      }
+			}
-      initLeft = false;
+			initLeft = false;
-    }
+		}
-  };
+	};
 
-  // Add events to navigation elements
+	// Add events to navigation elements
-  $tp.click(function (event) {
+	$tp.click(function (event) {
-    event.preventDefault();
+		event.preventDefault();
-    $('html, body').stop().animate({
+		$('html, body').stop().animate({
-      scrollTop: 0
+			scrollTop: 0
-    }, basicEase);
+		}, basicEase);
-    // console.log('Scrolled to top');
+		// console.log('Scrolled to top');
-  });
+	});
-  $dn.click(function (event) {
+	$dn.click(function (event) {
-    event.preventDefault();
+		event.preventDefault();
-    var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
+		var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
-    $('html').scrollTop(pos);
+		$('html').scrollTop(pos);
-    // document.documentElement.scrollTop = pos;
+		// document.documentElement.scrollTop = pos;
-    console.info('Scrolled down to', 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 () {
+	$ma.click(function () {
-    var $wrap, $pop;
+		var $wrap, $pop;
 
-    // if (metaOn !== true) {
+		// if (metaOn !== true) {
-    if (!metaOn) {
+		if (!metaOn) {
-      metaOn = true;
+			metaOn = true;
 
-      $pp.each(function () {
+			$pp.each(function () {
-        // if ($(this).css('position') === 'static') {
+				// if ($(this).css('position') === 'static') {
-        // 	$(this).addClass('js_changed_pos');
+				// 	$(this).addClass('js_changed_pos');
-        // 	$(this).css('position', 'relative');
+				// 	$(this).css('position', 'relative');
-        // }
+				// }
-        // $pop = $(this).next('.exp_pop').detach();
+				// $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 = $(this).wrap('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_overlay"></span>').prepend('<span class="exp_marker_pop"></span>');
-        // $wrap.after($pop);
+				// $wrap.after($pop);
 
-        $('<div></div>').addClass('exp_overlay').css({
+				$('<div></div>').addClass('exp_overlay').css({
-          position: 'absolute',
+					position: 'absolute',
-          width: '100%',
+					width: '100%',
-          height: '100%',
+					height: '100%',
-          top: 0,
+					top: 0,
-          left: 0
+					left: 0
-        }).appendTo($(this).addClass('exp_wrap'));
+				}).appendTo($(this).addClass('exp_wrap'));
 
-        // Displays explanation popup following the mouse
+				// Displays explanation popup following the mouse
-        $(this).on({
+				$(this).on({
-          mouseenter: function () {
+					mouseenter: function () {
-            // if ($(this).attr('emmet')) {
+						// if ($(this).attr('emmet')) {
-            //
+						//
-            // }
+						// }
-            $(this).next('.exp_pop').show();
+						$(this).next('.exp_pop').show();
-          },
+					},
-          mouseleave: function () {
+					mouseleave: function () {
-            $(this).next('.exp_pop').hide();
+						$(this).next('.exp_pop').hide();
-          },
+					},
-          mousemove: function (event) {
+					mousemove: function (event) {
-            $(this).next('.exp_pop').css({
+						$(this).next('.exp_pop').css({
-              'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
+							'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
-              'left': event.pageX + 8
+							'left': event.pageX + 8
-              // 'left': event.pageX - $(this).offset().left + 8
+							// 'left': event.pageX - $(this).offset().left + 8
-            });
+						});
-          }
+					}
-        });
+				});
-      });
+			});
 
-    } else {
+		} else {
-      $pp.each(function () {
+			$pp.each(function () {
-        $(this).off('mouseenter mouseleave mousemove');
+				$(this).off('mouseenter mouseleave mousemove');
 
-        $(this).removeClass('exp_wrap').find('.exp_overlay').remove();
+				$(this).removeClass('exp_wrap').find('.exp_overlay').remove();
-        // $wrap = $(this).parent('.exp_wrap');
+				// $wrap = $(this).parent('.exp_wrap');
-        // $pop = $wrap.next('.exp_pop').detach();
+				// $pop = $wrap.next('.exp_pop').detach();
-        // $wrap.find('.exp_marker_pop').remove();
+				// $wrap.find('.exp_marker_pop').remove();
-        // $(this).unwrap('.exp_wrap');
+				// $(this).unwrap('.exp_wrap');
-        // $(this).after($pop);
+				// $(this).after($pop);
-        // if ($(this).hasClass('js_changed_pos')) {
+				// if ($(this).hasClass('js_changed_pos')) {
-        // 	$(this).css('position', '');
+				// 	$(this).css('position', '');
-        // 	if ($(this).attr('style') === '') {
+				// 	if ($(this).attr('style') === '') {
-        // 		$(this).removeAttr('style');
+				// 		$(this).removeAttr('style');
-        // 	}
+				// 	}
-        // 	$(this).removeClass('js_changed_pos');
+				// 	$(this).removeClass('js_changed_pos');
-        // }
+				// }
-      });
+			});
 
-      metaOn = false;
+			metaOn = false;
-    }
+		}
-    console.log('Explanation mode', metaOn);
+		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

source/code/hippie/global.js

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

source/code/hippie/variables.js

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

source/screens/demo/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 -->
+	<!-- {{ page.fileSlug }}.page -->
-  <div class="temp_layer">
+	<section class="sec_main_center">
-    <!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
+		<header class="header_txt">
-    {% include "hippie/partials/_body_nav.njk" %}
+			<h1>Medienformat Abfragen</h1>
-  </div>
+		</header>
-  <div id="begin" class="">
+		<article>
-    <section class="sec_main_center">
+			<div class="demo__query_example">Umbruch bei&nbsp;</div>
-      <header class="header_txt">
+			<div class="demo__queries">
-        <h1>Medienformat Abfragen</h1>
+				<p class="query_phoneUp">Telefone und größer</p>
-      </header>
+				<p class="query_phoneOnly">Nur Telefone</p>
-      <article>
+				<p class="query_tabletPortaitOnly">Nur Schreibtafeln hochkant</p>
-        <div class="demo__query_example">Umbruch bei&nbsp;</div>
+				<p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
-        <div class="demo__queries">
+				<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
-          <p class="query_phoneUp">Telefone und größer</p>
+				<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
-          <p class="query_phoneOnly">Nur Telefone</p>
+				<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
-          <p class="query_tabletPortaitOnly">Nur Schreibtafeln hochkant</p>
+				<p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
-          <p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
+				<p class="query_bigDesktopUp">Richtige Monitore und größer</p>
-          <p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
+			</div>
-          <p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
+		</article>
-          <p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
+	</section>
-          <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">
+	<section class="sec_main_center">
-      <header class="header_txt">
+		<header class="header_txt">
-        <h1>Übersicht aller Elemente</h1>
+			<h1>Übersicht aller Elemente</h1>
-        <p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p>
+			<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://html.spec.whatwg.org/multipage/#toc-semantics">html.spec.whatwg.org/multipage/#toc-semantics</a>) verwendet.</p>
-        <p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
+			<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
-      </header>
+		</header>
-      <pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h4{Varianten}</code></pre>
+		<pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h2{&lt;tag&gt;}+h4{Varianten}</code></pre>
-      <article>
+		<article>
-        <h1 id="sections">Bereiche</h1>
+			<h1 id="sections">Bereiche</h1>
-        <p>Elemente:</p>
+			<p>Elemente:</p>
-        <pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
+			<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
-        <h2>&lt;body&gt;</h2>
+			<h2>&lt;body&gt;</h2>
-        <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
+			<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
-        <h2>&lt;article&gt;</h2>
+			<h2>&lt;article&gt;</h2>
-        <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
+			<article>Ein Artikel.</article>
-        <h2>&lt;section&gt;</h2>
+			<h2>&lt;section&gt;</h2>
-        <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
+			<section>Ein Bereich.</section>
-        <h4>Varianten</h4>
+			<h4>Varianten</h4>
-        <pre class="pre_code"><code>section.sec_main_center</code></pre>
+			<pre class="pre_code"><code>section.sec_main_center</code></pre>
-        <pre class="pre_code"><code>section.sec_main_status</code></pre>
+			<section class="sec_main_center">
-        <h2>&lt;h3&gt;</h2>
+				<p class="float_right">Ende.</p>
-        <h2>&lt;h4&gt;</h2>
+				<p>Zentrierter Bereich.</p>
-      </article>
+			</section>
-      <article>
+			<pre class="pre_code"><code>section.sec_main_status</code></pre>
-        <h1 id="grouping">Gruppierung</h1>
+			<section class="sec_main_status">Status-Bereich</section>
-        <p>Elemente:</p>
+			<h2>&lt;nav&gt;</h2>
-        <pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre>
+			<nav>Navigation</nav>
-        <h2>&lt;p&gt;</h2>
+			<h2>&lt;aside&gt;</h2>
-        <h4>Varianten</h4>
+			<p>Fließt um andere Inhalte. Klassen zur Positionierung und Kombination mit <code>.bside</code>.</p>
-        <pre class="pre_code"><code>p.txt_center</code></pre>
+			<pre class="pre_code"><code>aside.right+div.bside</code></pre>
-        <pre class="pre_code"><code>p.txt_right</code></pre>
+			<section>
-        <pre class="pre_code"><code>p.column_2</code></pre>
+				<aside class="right">Seitenbereich, recht ausgerichtet.</aside>
-        <pre class="pre_code"><code>p.column_3.column_line</code></pre>
+				<div class="bside">Hauptbereich</div>
-        <h2>&lt;hr&gt;</h2>
+			</section>
-        <h4>Varianten</h4>
+			<h2>&lt;h*&gt;</h2>
-        <pre class="pre_code"><code>hr.hr_hidden</code></pre>
+			<h1>Überschrift 1</h1>
-        <pre class="pre_code"><code>hr.hr_dotted</code></pre>
+			<h2>Überschrift 2</h2>
-        <pre class="pre_code"><code>hr.space_even_half</code></pre>
+			<h3>Überschrift 3</h3>
-        <pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
+			<h4>Überschrift 4</h4>
-        <h2>&lt;blockquote&gt;</h2>
+			<h5>Überschrift 5</h5>
-        <pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre>
+			<hgroup>
-        <h2>&lt;figure&gt;</h2>
+				<h6>Überschrift 6</h6>
-        <pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
+				<p>Mit Absatz innerhalb von <code>&lt;hgroup&gt;</code>.</p>
-        <h2>&lt;div&gt;</h2>
+			</hgroup>
-        <pre class="pre_code"><code>div.div_info>p</code></pre>
+			<h2>&lt;header&gt;</h2>
-        <h4>Varianten</h4>
+			<header>Kopfbereich</header>
-      </article>
+			<pre class="pre_code"><code>header.header_page</code></pre>
-      <article>
+			<pre class="pre_code"><code>header.header_txt>h1</code></pre>
-        <h1 id="tabularData">Tabellen</h1>
+			<header class="header_txt">
-        <p>Elemente:</p>
+				<h1>Überschrift 1</h1>
-        <pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
+				<p>Innerhalb eines <code>&lt;header&gt;</code>.</p>
-        <h2>&lt;table&gt;</h2>
+			</header>
-        <h4>Varianten</h4>
+			<h2>&lt;footer&gt;</h2>
-        <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>
+			<p>Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
-        <table class="width_full table_fix js_pop">
+			<footer>Fußbereich</footer>
-          <thead>
+			<div style="position:relative;height:256px;background-color:#b7e0f0;">
-            <tr>
+				{{ footer.pinned() }}
-              <th class="cell_pre" scope="col"></th>
+			</div>
-              <th scope="col">Kopfzeile</th>
+		</article>
-              <th scope="col">A</th>
+		<article>
-              <th scope="col">B</th>
+			<h1 id="grouping">Gruppierung</h1>
-            </tr>
+			<p>Elemente:</p>
-          </thead>
+			<pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre>
-          <tbody>
+			<h2>&lt;p&gt;</h2>
-            <tr>
+			<p>Ein Absatz. Ein <code>code</code> Element innerhalb wird besonders behandelt.</p>
-              <td class="cell_pre">Vorspalte</td>
+			<h4>Varianten</h4>
-              <td>Eine</td>
+			<pre class="pre_code"><code>p.column_2</code></pre>
-              <td></td>
+			<p class="column_2">Spalten können angegeben werden.</p>
-              <td></td>
+			<pre class="pre_code"><code>p.column_3.column_line</code></pre>
-            </tr>
+			<p class="column_3 column_line">Spalten können angegeben werden.</p>
-            <tr>
+			<h2>&lt;address&gt;</h2>
-              <td class="cell_pre">1</td>
+			<address>Anschrift, mit bestimmtem, ##### Format.</address>
-              <td></td>
+			<h2>&lt;hr&gt;</h2>
-              <td>erweiterte</td>
+			<hr>
-              <td></td>
+			<h4>Varianten</h4>
-            </tr>
+			<pre class="pre_code"><code>hr.hr_hidden+hr.hr_dotted+hr.hr_double</code></pre>
-            <tr>
+			<hr class="hr_hidden">
-              <td class="cell_pre">2</td>
+			<hr class="hr_dotted">
-              <td></td>
+			<hr class="hr_double">
-              <td></td>
+			<h2>&lt;pre&gt;</h2>
-              <td>Tabelle</td>
+			<pre>Vorformatierter Text.
-            </tr>
+	erhält Umbrüche und Einrückung.
-          </tbody>
+			</pre>
-        </table>
+			<pre class="pre_code"><code>pre.pre_code>code*2</code></pre>
-        <pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre>
+			<pre class="pre_code"><code>let variable = true;</code>
-        <table class="width_full table_stripe table_fix table_free">
+<code>()(){}</code></pre>
-          <tr>
+			<h2>&lt;blockquote&gt;</h2>
-            <td>Tabelle</td>
+			<blockquote>Ein Zitat ist eingerückt.</blockquote>
-            <td></td>
+			<pre class="pre_code"><code>blockquote.quote_mark>p+p.quote_source</code></pre>
-            <td></td>
+			<blockquote class="quote_mark">
-          </tr>
+				<p>Zitat mit automatischen Anführungszeichen</p>
-          <tr>
+				<p class="quote_source">und Quellenangabe.</p>
-            <td>ohne</td>
+			</blockquote>
-            <td>Rahmen</td>
+			<h2>&lt;dl&gt;, &lt;ol&gt;, &lt;ul&gt;</h2>
-            <td></td>
+			<dl>
-          </tr>
+				<dt>Begriff</dt>
-          <tr>
+				<dd>Definition</dd>
-            <td></td>
+			</dl>
-            <td>jedoch</td>
+			<ol>
-            <td>mit</td>
+				<li>Eins</li>
-          </tr>
+				<li>Zwei</li>
-          <tr>
+			</ol>
-            <td></td>
+			<ul class="horizontal">
-            <td></td>
+				<li>Obst</li>
-            <td>Streifen</td>
+				<li>Gemüse</li>
-          </tr>
+			</ul>
-        </table>
+			<h4>Varianten</h4>
-        <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>
+			<pre class="pre_code"><code>ul.list_basic.list_dash>li*2</code></pre>
-        <table>
+			<ul class="list_basic list_dash">
-          <caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
+				<li>Mehr Abstand und</li>
-          <thead>
+				<li>mit Unterstrichen.</li>
-            <tr>
+			</ul>
-              <th scope="col">Bezeichnung</th>
+			<pre class="pre_code"><code>ul.list_link>(li>a)*2</code></pre>
-              <th scope="col">Menge</th>
+			<ul class="list_link">
-              <th scope="col">Wert</th>
+				<li><a href="">Mit</a></li>
-            </tr>
+				<li><a href="">Verweisen</a></li>
-          </thead>
+			</ul>
-          <tbody>
+			<h2>&lt;figure&gt;</h2>
-            <tr>
+			<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
-              <td>Alpha</td>
+			<figure>
-              <td>1</td>
+				<figcaption>Bezeichnung</figcaption>
-              <td class="txt_right">8990</td>
+				Grafisches Element.
-            </tr>
+			</figure>
-            <tr>
+			<h2>&lt;main&gt;</h2>
-              <td>Bravo</td>
+			<main>Hauptbereich</main>
-              <td>10</td>
+			<h2>&lt;div&gt;</h2>
-              <td class="txt_right">1</td>
+			<h4>Varianten</h4>
-            </tr>
+			<pre class="pre_code"><code>div.div_info>p</code></pre>
-            <tr>
+			<div class="div_info">
-              <td>Charlie</td>
+				<p>Absatz in Informationsbox.</p>
-              <td>1</td>
+			</div>
-              <td class="txt_right">1</td>
+			<pre class="pre_code"><code>div.box_space>div.box_cube>span</code></pre>
-            </tr>
+			<div class="box_space">
-          </tbody>
+				<div class="box_cube"><span>Text</span></div>
-          <tfoot>
+			</div>
-            <tr>
+			<pre class="pre_code"><code>div.box_placeholder+hr+div.box_placeholder_bkg</code></pre>
-              <th colspan="2" class="txt_right" scope="row">Summe</th>
+			<div class="box_placeholder"></div>
-              <td class="txt_right" title=">9000">9001</td>
+			<hr>
-            </tr>
+			<div class="box_placeholder_bkg"></div>
-          </tfoot>
+		</article>
-        </table>
+		<article>
-      </article>
+			<h1 id="tabularData">Tabellen</h1>
-    </section>
+			<p>Elemente:</p>
-  </div>
+			<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() }}
+	{{ super() }}
-  <script src="{{ pageBase }}vendor/jq-sticky-anything.min.js"></script>
+	<script>
-  {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
+		function capLock(e) {
-  <!-- build:js js/main.concat.min.js -->
+			console.log('capLock');
-  <script src="{{ pageBase }}js/variables.js"></script>
+			kc = e.keyCode
-  <script src="{{ pageBase }}js/functions.js"></script>
+				? e.keyCode
-  <script src="{{ pageBase }}js/global.js"></script>
+				: e.which;
-  {{ log.asset(true) }}
+			sk = e.shiftKey
-  {{ log.log('Assets loaded.', assetsLoaded) }}
+				? e.shiftKey
-  <script>
+				: (
-    // Page specific
+					(kc == 16)
-    // ------------------------------------------------------------------------------
+					? true
-    $(document).ready(function () {
+					: false);
-      // jq-sticky-anything
+
-      $('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
+			if (((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk)) {
-    });
+				document
-  </script>
+					.getElementById('hint')
+					.style
+					.visibility = 'visible';
+			} else {
+				document
+					.getElementById('hint')
+					.style
+					.visibility = 'hidden';
+			}
+		}
+
+		function capsDetect() {
+			const body = document.getElementsByTagName('body')[0];
+			const capsWarning = document.getElementById('error');
+			let isShiftPressed = false;
+			let isCapsOn = false;
+
+			console.log(body);
+			body.addEventListener('keydown', function (e) {
+				var keyCode = e.keyCode
+					? e.keyCode
+					: e.which;
+				if (keyCode === 16) {
+					isShiftPressed = true;
+				}
+			});
+			body.addEventListener('keyup', function (e) {
+				var keyCode = e.keyCode
+					? e.keyCode
+					: e.which;
+				if (keyCode === 16) {
+					isShiftPressed = false;
+				}
+				if (keyCode === 20) {
+					if (isCapsOn) {
+						isCapsOn = false;
+						capsWarning.style.display = 'none';
+					} else {
+						isCapsOn = true;
+						capsWarning.style.display = 'inline-block';
+					}
+				}
+			});
+			body.addEventListener('keypress', function (e) {
+				var keyCode = e.keyCode
+					? e.keyCode
+					: e.which;
+				if (keyCode <= 40) 
+					return;
+				if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
+					isCapsOn = true;
+					capsWarning.style.display = 'inline-block';
+				} else {
+					capsWarning.style.display = 'none';
+				}
+			});
+		}
+
+		// TODO: Beide Varianten lauffähig machen
+		// capsDetect();
+	</script>
 {% endblock %}

source/screens/demo/examples/card.njk

@@ -9,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">
+	<!-- {{ page.fileSlug }}.page -->
-    <div id="dither"></div>
+	<div class="card_bkg">
-    <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">
+		<div id="dither"></div>
-      {# <defs>
+		<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">
-      <filter id="turb3">
+			{# <defs>
-        <feColorMatrix type="saturate" values="1" />
+			<filter id="turb3">
-        <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
+				<feColorMatrix type="saturate" values="1" />
-      </filter>
+				<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
-      <symbol id="triangle-5">
+			</filter>
-        <rect y="0" fill="#273F8B" width="1920" height="1200"/>
+			<symbol id="triangle-5">
-      </symbol>
+				<rect y="0" fill="#273F8B" width="1920" height="1200"/>
-    </defs>
+			</symbol>
-    <g>
+		</defs>
-      <use xlink:href="#triangle-5" style="filter: url(#turb3);" />
+		<g>
-    </g> #}
+			<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
-      <rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
+		</g> #}
-      <polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
+			<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
-      <polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
+			<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
-      <polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
+			<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
-      <polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
+			<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
-      <polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
+			<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
-      <polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
+			<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
-      <polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
+			<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
-      <polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
+			<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
-    </svg>
+			<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
-    {# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
+		</svg>
-  </div>
+		{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
-  <div class="card_box">
+	</div>
-    <div id="jsCardHover">
+	<div class="card_box">
-      <p>Titel<br/>und Beschreibung</p>
+		<div id="js_content">
-      <h1>{{ ph.name() }}</h1>
+			<p>Titel<br/>und Beschreibung</p>
-      <p>
+			<h1>{{ ph.name() }}</h1>
-        {{ ph.email('card_address') }}<br/>
+			<p>
-        {{ ph.link('decent', 'site.tld') }}
+				{{ ph.email('card_address') }}<br/>
-        &middot;
+				{{ ph.link('decent', 'site.tld') }}
-        {{ ph.address('decent') }}</p>
+				&middot;
-    </div>
+				{{ ph.address('decent') }}</p>
-  </div>
+		</div>
+	</div>
 {% endblock %}
 
 {% block script %}
-  {{ super() }}
+	<script>
-  {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
+		const flag = document.getElementById("flag");
-  <!-- build:js js/main.concat.min.js -->
+		let colors = new Array();
-  <script src="{{ pageBase }}js/variables.js"></script>
+		let iId = undefined;
-  <script src="{{ pageBase }}js/functions.js"></script>
+		let position = 0;
-  <script src="{{ pageBase }}js/global.js"></script>
-  <script>
-    $(document).ready(function () {
-      // composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', '');
 
-      var colors = new Array();
+		for (let i = 1; i <= flag.childElementCount; i++) {
-      var position = 0;
+			colors.push(document.getElementById("triangle-" + i).getAttribute("fill"));
+		}
 
-      for (var i = 1; i <= $("#flag").children().length; i++) {
+		// console.log(colors);
-        colors.push($("#triangle-" + i).attr("fill"));
-      }
 
-      $('#jsCardHover').on({
+		document.getElementById('js_content').addEventListener('mouseenter', () => {
-        mouseenter: function () {
+			iId = setInterval(() => {
-          // $('#flag').addClass('effect');
+				for (let i = 1; i <= colors.length; i++) {
-          // $('#flag').css('opacity', 0);
+					position++;
-          $('#flag')
+
-            .stop()
+					if (position >= colors.length) {
-            .fadeOut(10000);
+						position = 0;
-          this.iid = setInterval(function () {
+					}
-            for (var i = 1; i <= colors.length; i++) {
+
-              position++;
+					document.getElementById("triangle-" + i).setAttribute("fill", colors[position]);
-              if (position >= colors.length) {
+				}
-                position = 0;
+
-              }
+				position++;
-              $("#triangle-" + i).attr("fill", colors[position]);
+
-            }
+				if (position >= colors.length) {
-            position++;
+					position = 0;
-            if (position >= colors.length) {
+				}
-              position = 0;
+			}, 600);
-            }
+		});
-          }, 600);
+
-        },
+		document.getElementById('js_content').addEventListener('mouseleave', () => {
-        mouseleave: function () {
+			iId && clearInterval(iId);
-          // $('#flag').removeClass('effect');
+		});
-          // $('#flag').css('opacity', 1);
+	</script>
-          $('#flag')
-            .stop()
-            .fadeIn(1000);
-          this.iid && clearInterval(this.iid);
-        },
-        click: function () {
-          $("#dither").toggle();
-        }
-      });
-    });
-  </script>
 {% endblock %}

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

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 -->
+	<!-- {{ page.fileSlug }}.page -->
-  <div class="sec_main_center">
+	<div class="sec_main_center">
-    <header class="header_txt">
+		<header class="header_txt">
-      <h1>Titel</h1>
+			<h1>Titel</h1>
-      <p>Jahr</p>
+			<p>Jahr</p>
-    </header>
+		</header>
-    <nav role="doc-toc">
+		<nav role="doc-toc">
-      <h2>Inhaltsverzeichnis</h2>
+			<h2>Inhaltsverzeichnis</h2>
-      <ul>
+			<ul>
-        {%- for song in collections.song -%}
+				{%- for song in collections.song -%}
-          <li>
+					<li>
-            <a href="{{ song.page.url }}">{{ song.data.title }}</a>
+						<a href="{{ song.page.url }}">{{ song.data.title }}</a>
-          </li>
+					</li>
-        {%- endfor -%}
+				{%- endfor -%}
-      </ul>
+			</ul>
-    </nav>
+		</nav>
-    <h2>Vorwort</h2>
+		<h2>Vorwort</h2>
-    <p>Liederbuch für
+		<p>Liederbuch für
-      <em>Name</em>.</p>
+			<em>Name</em>.</p>
-    <p>Gibt es gebunden und hier
+		<p>Gibt es gebunden und hier
-      {{ ph.link() }}.<br/>
+			{{ ph.link() }}.<br/>
-      Bestellungen bitte an
+			Bestellungen bitte an
-      {{ ph.name() }}
+			{{ ph.name() }}
-      richten.</p>
+			richten.</p>
-    <hr class="hr_double hr_dotted">
+		<hr class="hr_double hr_dotted">
-    {%- for piece in collections.song -%}
+		{%- for piece in collections.song -%}
-      {{ song.simple(loop.index0, piece.data, piece.content) }}
+			{{ song.simple(loop.index0, piece.data, piece.content) }}
-    {%- endfor -%}
+		{%- endfor -%}
-    <hr/>
+		<hr/>
-    <address>{{ ph.name() }}</address>
+		<address>{{ ph.name() }}</address>
-  </div>
+	</div>
 {% endblock %}

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

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

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

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

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

@@ -5,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 %}
-{% block title %}{{ 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="loader" class="step op_show">
-			<div id="bar">
+		<div id="bar">
-				<div id="spinner"><span>I</span></div>
+			<div id="spinner">
-				<div id="wrap">
+				<span>I</span>
-					<div id="progress"></div>
-				</div>
-				<div id="status">0%</div>
 			</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>
+			<p>Hold
-		</div>
+				<kbd>space</kbd>
-		<div id="intro" class="step op_hide">
+				to skip.</p>
-			{{ 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>
 		</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() }}
+	{{ super() }}
-		<script src="{{ pageBase }}js/ui.js"></script>
+	<script src="{{ pageBase }}js/_intro.js"></script>
+	<script>
+		//let intro = new Intro('Intro');
+		//intro.init();
+
+		//const ui = new UI();
+		//ui
+		//  .init()
+		//  .then(() => ui.showIntro())
+		//  .then(() => ui.showHint())
+		//  .then(() => ui.showIdle())
+		//  .catch((error) => console.error(error));
+
+		let introDelay = 6;
+		let hintDelay = 1;
+		let cycleDelay = 2;
+		let isAgree = false;
+		const steps = {
+			agreement: {
+				element: document.getElementById('agreement'),
+				msgIn: 'Agreement shown.',
+				msgOut: 'Agreement accepted.',
+				msgNo: 'No agreement today.'
+			}
+		};
+		const intro = document.getElementById('intro');
+		const agreement = steps.agreement.element;
+		const hint = {
+			element: document.getElementById('hint'),
+			delay: hintDelay * 1000,
+			show() {
+				if (typeof this.timeoutId === 'number') {
+					this.cancel();
+				}
+				this
+					.element
+					.classList
+					.remove('di_none');
+				this.timeoutId = setTimeout(() => {
+					this.dismiss();
+				}, this.delay);
+			},
+			dismiss() {
+				this
+					.element
+					.classList
+					.add('di_none');
+				this.timeoutId = undefined;
+			},
+			cancel() {
+				clearTimeout(this.timeoutId);
+			}
+		};
+		const loader = document.getElementById('loader');
+		const idle = {
+			element: document.getElementById('idle'),
+			delay: cycleDelay * 1000,
+			position: 0,
+			cycle() {
+				if (typeof this.intervalId === 'number') {
+					this.cancel();
+				}
+				this.intervalId = setInterval(() => {
+					this.position++;
+					if (this.position >= flagColors.length) {
+						this.position = 0;
+					}
+					this.element.style.backgroundColor = '#' + flagColors[this.position];
+				}, this.delay);
+			},
+			cancel() {
+				this.intervalId && clearInterval(this.intervalId);
+			}
+		}
+		init()
+			.then(loadCore)
+			.then(showIntro)
+			.catch(er => console.error(er))
+			.then(showAgreement)
+			.then(showIdle)
+			.catch(er => console.error(er))
+			. finally(() => {
+				console.debug('Init end.', isAgree);
+				// location = 'demo/examples/ui/new.html';
+			});
+	</script>
 {% endblock %}

source/screens/demo/index.njk

@@ -12,80 +12,71 @@ tags:
 
 {% block title %}Index{% endblock %}
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}
 
 {% block body %}
-<!-- {{ page.fileSlug }}.page -->
+	<!-- {{ page.fileSlug }}.page -->
-  <div class="wrap">
+	<div class="wrap">
-    <div class="hello">
+		<div class="hello">
-      <h2>This is
+			<h2>This is
-        {{ hippie.brand | upper }}</h2>
+				{{ hippie.brand | upper }}</h2>
-      <p>You can start using it by replacing this file with your own index page.</p>
+			<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
+			<p>To do this you need to create a file
-        <code>/index.njk</code>
+				<code>/index.njk</code>
-        inside the
+				inside the
-        <i>source/screens</i>
+				<i>source/screens</i>
-        folder. You can also create a
+				folder. You can also create a
-        <code>data.json</code>
+				<code>data.json</code>
-        file inside the
+				file inside the
-        <i>source/templates</i>
+				<i>source/templates</i>
-        folder as a data source for your nunjucks files.</p>
+				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
+			<p>For a very basic start you can make a copy of the demo page
-        <code>blank.njk</code>. You can find it at
+				<code>blank.njk</code>. You can find it at
-        <i>/source/screens/demo</i>.</p>
+				<i>/source/screens/demo</i>.</p>
-      <p>The
+			<p>The
-        <i>source/demo</i>
+				<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>
+				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">
+			<div class="pos_rel">
-        <pre class="txt_tiny txt_white pos_abs pin_down pin_right">  ()()<br>  (..)<br>c(")(")</pre>
+				<pre class="txt_tiny txt_white pos_abs pin_down pin_right">  ()()<br>  (..)<br>c(")(")</pre>
-        <h3>Overview</h3>
+				<h3>Overview</h3>
-      </div>
+			</div>
-      <nav>
+			<nav>
-        <ul class="list_link">
+				<ul class="list_link">
-          {% for link in collections.demoIndex %}
+					{% for link in collections.demoIndex %}
-            <li>
+						<li>
-              <a href="{{ link.page.url }}">{{ link.data.title }}</a>
+							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
-            </li>
+						</li>
-          {% endfor %}
+					{% endfor %}
-        </ul>
+				</ul>
-      </nav>
+			</nav>
-      <h3>Page</h3>
+			<h3>Page</h3>
-      <ul class="list_link">
+			<ul class="list_link">
-        {% for link in collections.demoPage | sort(false, false, 'data.title') %}
+				{% for link in collections.demoPage | sort(false, false, 'data.title') %}
-          <li>
+					<li>
-            <a href="{{ link.page.url }}">{{ link.data.title }}</a>
+						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
-          </li>
+					</li>
-        {% endfor %}
+				{% endfor %}
-      </ul>
+			</ul>
-      <h3>Example</h3>
+			<h3>Example</h3>
-      <ul class="list_link">
+			<ul class="list_link">
-        {% for link in collections.demoExample %}
+				{% for link in collections.demoExample %}
-          <li>
+					<li>
-            <a href="{{ link.page.url }}">{{ link.data.title }}</a>
+						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
-          </li>
+					</li>
-        {% endfor %}
+				{% endfor %}
-      </ul>
+			</ul>
-    </div>
+		</div>
-  </div>
+	</div>
 {% endblock %}
 
 {% block script %}
-  {{ super() }}
+	{{ super() }}
-  {# <script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script> #}
+	<script>
-  <!-- build:js js/main.concat.min.js -->
+		assetsLoaded = true;
-  <script src="{{ pageBase }}js/variables.js"></script>
+		logPerf('BODY        :: Assets loaded, running page specific script...', assetsLoaded);
-  <script src="{{ pageBase }}js/functions.js"></script>
+		// Page specific
-  <script src="{{ pageBase }}js/global.js"></script>
+		// ------------------------------------------------------------------------------
-  <script>
+		logPerf('Application ready... not.');
-    assetsLoaded = true;
+	</script>
-    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>
 {% endblock %}

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

source/screens/demo/layouts.njk

@@ -10,331 +10,326 @@ tags:
 
 {% block title %}Gestaltungen{% endblock %}
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}
 
 {% block main %}
-<!-- {{ page.fileSlug }}.page -->
+	<!-- {{ page.fileSlug }}.page -->
-  <div class="temp_layer">
+	<section class="sec_main_center">
-    <!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
+		<header class="header_txt">
-    {% include "hippie/partials/_body_nav.njk" %}
+			<h1>Sammlung formatierter Elemente</h1>
-  </div>
+			<p>Die Elemente werden fortlaufend komplexer</p>
-  <div id="begin" class="">
+		</header>
-    <section class="sec_main_center">
+		<article>
-      <header class="header_txt">
+			<h2>Bereiche</h2>
-        <h1>Sammlung formatierter Elemente</h1>
+			<h3>section</h3>
-        <p>Die Elemente werden fortlaufend komplexer</p>
+			<pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre>
-      </header>
+			<section class="overflow">
-      <article>
+				<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>
-        <h2>&lt;h3&gt;</h2>
+				<p>Vorname Name<br>Straße 1, 01234 Stadt</p>
-        <h4>Beispiele</h4>
+				<p>+49 (0)123 1337 0000<br>
-        <pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
+					<a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a>
-        <h3 class="txt_color_dark">Dunkle Überschrift</h3>
+				</p>
-        <p>Mit normalem Textabsatz</p>
+			</section>
-        <h2>&lt;h4&gt;</h2>
+			<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre>
-        <h4>Beispiele</h4>
+			<div class="space_left_fourth">
-        <pre class="pre_code"><code>a>h4</code></pre>
+				<hr/>
-        <a href="">
+				<p>Eingerückter Inhalt</p>
-          <h4>Überschrift als Block-Verweis</h4>
+				<hr/>
-        </a>
+			</div>
-        <h2>&lt;section&gt;</h2>
+			<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>
-        <pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
+			<div class="overflow">
-        <section class="overflow">
+				<nav class="float_space_left">
-          <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>
+					<ul>
-          <p>Vorname Name<br>Straße 1, 01234 Stadt</p>
+						<li>
-          <p>+49 (0)123 1337 0000<br>
+							<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
-            <a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a>
+						</li>
-          </p>
+						<li>
-        </section>
+							<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
-        <pre class="pre_code"><code>div.space_left_fourth</code></pre>
+						</li>
-        <div class="space_left_fourth">
+						<li>
-          <hr/>
+							<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
-          <p>Eingerückter Inhalt</p>
+						</li>
-          <hr/>
+						<li>
-        </div>
+							<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
-        <pre class="pre_code"><code>nav>ul>(li>a.a_button{punkt $})*4nav>ul>(li>a.a_button_border{stufe $})*4</code></pre>
+						</li>
-        <div class="overflow">
+					</ul>
-          <nav class="float_space_left">
+				</nav>
-            <ul>
+				<nav>
-              <li>
+					<ul>
-                <a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
+						<li>
-              </li>
+							<a href="" class="a_button_border">Stufe 1</a>
-              <li>
+						</li>
-                <a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
+						<li>
-              </li>
+							<a href="" class="a_button_border">Stufe 2</a>
-              <li>
+						</li>
-                <a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
+						<li>
-              </li>
+							<a href="" class="a_button_border">Stufe 3</a>
-              <li>
+						</li>
-                <a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
+						<li>
-              </li>
+							<a href="" class="a_button_border">Stufe 4</a>
-            </ul>
+						</li>
-          </nav>
+					</ul>
-          <nav>
+				</nav>
-            <ul>
+			</div>
-              <li>
+			<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4</code></pre>
-                <a href="" class="a_button_border">Stufe 1</a>
+			<nav class="nav_horizontal">
-              </li>
+				<ul>
-              <li>
+					<li>
-                <a href="" class="a_button_border">Stufe 2</a>
+						<a href="" class="a_button">Abschnitt 1</a>
-              </li>
+					</li>
-              <li>
+					<li>
-                <a href="" class="a_button_border">Stufe 3</a>
+						<a href="" class="a_button">Abschnitt 2</a>
-              </li>
+					</li>
-              <li>
+					<li>
-                <a href="" class="a_button_border">Stufe 4</a>
+						<a href="" class="a_button">Abschnitt 3</a>
-              </li>
+					</li>
-            </ul>
+					<li>
-          </nav>
+						<a href="" class="a_button">Abschnitt 4</a>
-        </div>
+					</li>
-        <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>
+				</ul>
-        <nav class="nav_horizontal">
+			</nav>
-          <ul>
+			<pre class="pre_code"><code>div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
-            <li>
+			<div class="overflow">
-              <a href="" class="a_button">Abschnitt 1</a>
+				<nav class="nav_center_old">
-            </li>
+					<ul>
-            <li>
+						<li>
-              <a href="" class="a_button">Abschnitt 2</a>
+							<a href="" class="a_button">Typ 1</a>
-            </li>
+						</li>
-            <li>
+						<li>
-              <a href="" class="a_button">Abschnitt 3</a>
+							<a href="" class="a_button">Typ 2</a>
-            </li>
+						</li>
-            <li>
+						<li>
-              <a href="" class="a_button">Abschnitt 4</a>
+							<a href="" class="a_button">Typ 3</a>
-            </li>
+						</li>
-          </ul>
+						<li>
-        </nav>
+							<a href="" class="a_button">Typ 4</a>
-        <div class="overflow">
+						</li>
-          <nav class="nav_center_old">
+					</ul>
-            <ul>
+				</nav>
-              <li>
+			</div>
-                <a href="" class="a_button">Typ 1</a>
+			<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>
-              </li>
+			<header class="header_page demo__header header_fancy">
-              <li>
+				<h1>Aufmacher</h1>
-                <a href="" class="a_button">Typ 2</a>
+				<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>
-              </li>
+				<nav class="nav_separate_right">
-              <li>
+					<ul>
-                <a href="" class="a_button">Typ 3</a>
+						<li>
-              </li>
+							<a href="" class="a_button">Mensch</a>
-              <li>
+						</li>
-                <a href="" class="a_button">Typ 4</a>
+						<li>
-              </li>
+							<a href="" class="a_button">Pflanze</a>
-            </ul>
+						</li>
-          </nav>
+					</ul>
-        </div>
+				</nav>
-        <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>
+				<nav class="nav_right">
-        <header class="header_page demo__header header_fancy">
+					<ul>
-          <h1>Aufmacher</h1>
+						<li>
-          <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>
+							<a href="" class="a_button">Blau</a>
-          <nav class="nav_separate_right">
+						</li>
-            <ul>
+						<li>
-              <li>
+							<a href="" class="a_button">Gelb</a>
-                <a href="" class="a_button">Mensch</a>
+						</li>
-              </li>
+					</ul>
-              <li>
+				</nav>
-                <a href="" class="a_button">Pflanze</a>
+			</header>
-              </li>
+			<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
-            </ul>
+			<div class="box_space h_basic">
-          </nav>
+				<header id="js_demo_fix" class="header_page demo__header header_fix">
-          <nav class="nav_right">
+					<nav class="nav_right">
-            <ul>
+						<ul>
-              <li>
+							<li>
-                <a href="" class="a_button">Blau</a>
+								<a href="" class="a_button">Eins</a>
-              </li>
+							</li>
-              <li>
+							<li>
-                <a href="" class="a_button">Gelb</a>
+								<a href="" class="a_button">Zwei</a>
-              </li>
+							</li>
-            </ul>
+						</ul>
-          </nav>
+					</nav>
-        </header>
+				</header>
-        <pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
+				<div class="pos_abs pin_bottom width_full">
-        <div class="box_space h_basic">
+					<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
-          <header id="js_demo_fix" class="header_page demo__header header_fix">
+					<footer id="js_demo_stop" class="demo_footer">
-            <nav class="nav_right">
+						<nav class="nav_column nav_separate">
-              <ul>
+							<ul>
-                <li>
+								<li>
-                  <a href="" class="a_button">Eins</a>
+									<a href="" class="a_button_text">Alpha</a>
-                </li>
+								</li>
-                <li>
+								<li>
-                  <a href="" class="a_button">Zwei</a>
+									<a href="" class="a_button_text">Bravo</a>
-                </li>
+								</li>
-              </ul>
+								<li>
-            </nav>
+									<a href="" class="a_button_text">Charlie</a>
-          </header>
+								</li>
-          <div class="pos_abs pin_bottom width_full">
+								<li>
-            <pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
+									<a href="" class="a_button_text">Delta</a>
-            <footer id="js_demo_stop" class="demo_footer">
+								</li>
-              <nav class="nav_column nav_separate">
+							</ul>
-                <ul>
+						</nav>
-                  <li>
+						<p class="txt_center demo__credits">
-                    <a href="" class="a_button_text">Alpha</a>
+							<i class="i_bright">👨‍💻</i>
-                  </li>
+								mit
-                  <li>
+								<i class="i_bright">❤</i>
-                    <a href="" class="a_button_text">Bravo</a>
+								von
-                  </li>
+								<a href="https://interaktionsweise.de">Interaktionsweise</a>
-                  <li>
+						</p>
-                    <a href="" class="a_button_text">Charlie</a>
+					</footer>
-                  </li>
+				</div>
-                  <li>
+			</div>
-                    <a href="" class="a_button_text">Delta</a>
+			<div class="flex">
-                  </li>
+				<div class="flex_child"></div>
-                </ul>
+				<div class="flex_child"></div>
-              </nav>
+				<div class="flex_child"></div>
-              <p class="txt_center demo__credits">
+				<div class="flex_child"></div>
-                <i class="i_bright">👨‍💻</i>
+				<div class="flex_child"></div>
-                mit
+			</div>
-                <i class="i_bright">❤</i>
+			<div class="flex_column_wrap">
-                von
+				<div class="flex_column"><input value="Undefiniert"/></div>
-                <a href="https://interaktionsweise.de">Interaktionsweise</a>
+				<div class="flex_column"><input type="text" size="8" value="Text"/></div>
-              </p>
+				<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
-            </footer>
+				<div class="flex_column"><input type="button" value="Auswählen"></div>
-          </div>
+				<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
-        </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>
 
-        <h2>Gruppierung</h2>
+			<form method="get">
-        <pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
+				<p class="label">
-        <ul class="list_link">
+					Show me a
-          <li>
+					<select name="F">
-            <a href=""><img src="{{ pageBase }}art/letter.gif" alt="">name@domain.tld</a>
+						<option value="0">Plain list</option>
-          </li>
+						<option value="1" selected="selected">Fancy list</option>
-          <li>
+						<option value="2">Table list</option>
-            <a href="">Work</a>
+					</select>
-          </li>
+					Sorted by
-          <li>
+					<select name="C">
-            <a href="">Projects</a>
+						<option value="N" selected="selected">Name</option>
-          </li>
+						<option value="M">Date Modified</option>
-        </ul>
+						<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>
+			<h2>Gruppierung</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>
+			<h3>p</h3>
-        <table class="table_link js_pop">
+			<pre class="pre_code"><code>p.txt_right+p.txt_center+p.txt_left</code></pre>
-          <thead>
+			<p class="txt_right">Rechts</p>
-            <tr>
+			<p class="txt_center">Mittig</p>
-              <th>&nbsp;</th>
+			<p class="txt_left">Links</p>
-              <th>Ab / Zy</th>
+			<h3>h*</h3>
-              <th>Neu / Alt</th>
+			<pre class="pre_code"><code>h3.txt_color_dark+p.txt_tiny</code></pre>
-            </tr>
+			<h3 class="txt_color_dark">Dunkle Überschrift</h3>
-          </thead>
+			<p class="txt_tiny">Mit winzigem Textabsatz</p>
-          <tbody>
+			<pre class="pre_code"><code>a>h4</code></pre>
-            <tr>
+			<a href="">
-              <td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
+				<h4>Überschrift als Block-Verweis</h4>
-              <td class="cell_link">
+			</a>
-                <a href="" target="_blank">Name</a>
+			<h1>Überschrift 1</h1>
-                <a href="" target="_blank">URL</a>
+			<h1>Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.</h1>
-              </td>
+			<h2>Überschrift 2</h2>
-              <td class="cell_date" rowspan="2">YYYY-MM-DD</td>
+			<h2>kann das ebenso.</h2>
-            </tr>
+
-            <tr>
+			<h3>hr</h3>
-              <td class="cell_text">
+			<pre class="pre_code"><code>hr.space_even_half</code></pre>
-                <div class="shorten">Beschreibung</div>
+			<hr class="space_even_half">
-              </td>
+			<pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
-            </tr>
+			<hr class="hr_dotted space_even_fourth">
-          </tbody>
+			<h3>ul</h3>
-          <tbody>
+			<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
-            <tr>
+			<ul class="list_link">
-              <td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
+				<li>
-              <td class="cell_link">
+					<a href=""><img src="{{ pageBase }}art/demo/letter.gif" alt="">name@domain.tld</a>
-                <a href="" target="_blank">Name</a>
+				</li>
-                <a href="" target="_blank">URL</a>
+				<li>
-              </td>
+					<a href="">Work</a>
-              <td class="cell_date" rowspan="2">YYYY-MM-DD</td>
+				</li>
-            </tr>
+				<li>
-            <tr>
+					<a href="">Projects</a>
-              <td class="cell_text">
+				</li>
-                <div class="shorten">Beschreibung</div>
+			</ul>
-              </td>
+
-            </tr>
+			<h2>Tabellen</h2>
-          </tbody>
+			<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>
+			<table class="table_link js_pop">
-        <h2>Eingebettet</h2>
+				<thead>
-        <div class="demo__flag">
+					<tr>
-          <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">
+						<th>&nbsp;</th>
-            <desc>Background flag</desc>
+						<th>Ab / Zy</th>
-            <rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
+						<th>Neu / Alt</th>
-            <polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
+					</tr>
-            <polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
+				</thead>
-            <polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
+				<tbody>
-            <polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
+					<tr>
-            <polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
+						<td class="cell_icon" rowspan="2"><img src="/art/demo/bullet.gif" alt="" width="16" height="16"></td>
-            <polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
+						<td class="cell_link">
-            <polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
+							<a href="" target="_blank">Name</a>
-            <polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
+							<a href="" target="_blank">URL</a>
-          </svg>
+						</td>
-        </div>
+						<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
-      </article>
+					</tr>
-    </section>
+					<tr>
-  </div>
+						<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() }}
+	{{ super() }}
-  <script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
+	<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> #}
+	{{ log.asset(true) }}
-  <!-- build:js js/main.concat.min.js -->
+	{{ log.log('Assets loaded.', assetsLoaded) }}
-  <script src="{{ pageBase }}js/variables.js"></script>
+	<script>
-  <script src="{{ pageBase }}js/functions.js"></script>
+		// Page specific
-  <script src="{{ pageBase }}js/global.js"></script>
+		// ------------------------------------------------------------------------------
-  {{ log.asset(true) }}
+		$(document).ready(function () {
-  {{ log.log('Assets loaded.', assetsLoaded) }}
+			// jq-sticky-anything
-  <script>
+			$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
-    // Page specific
+		});
-    // ------------------------------------------------------------------------------
+	</script>
-    $(document).ready(function () {
-      // jq-sticky-anything
-      $('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
-    });
-  </script>
 {% endblock %}

source/style/hippie-style

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

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;
 }

source/style/modules/ui/_form_module.scss

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

source/style/ui.scss

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

source/templates/demo/_app.njk

@@ -1,29 +1,30 @@
 <!-- demo.app.template -->
 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-  <head>
+	<head>
-    <meta charset="utf-8">
+		<meta charset="utf-8">
 
-    {% block head %}
+		{% block head %}
-      <title>{{ hippie.titlePrefix }}
+			<title>{{ hippie.titlePrefix }}
-        {%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
+				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
 
-      {% block meta %}
+			{% block meta %}
-        {% include "demo/partials/_meta.njk" %}
+				{% include "demo/partials/_meta.njk" %}
-        <base href="/">
+				<base href="/">
-      {% endblock %}
+			{% endblock %}
 
-      {% block links %}
+			{% block links %}{% endblock %}
-      {% endblock %}
 
-    {% endblock %}
+		{% endblock %}
-  </head>
+	</head>
 
-  <body class="{{ bodyClass }}">
+	<body class="{{ bodyClass }}">
-    {% block body %}{% endblock %}
+		{% block body %}{% endblock %}
 
-    {% block script %}
+		{% block script %}
-    {% endblock %}
+			<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>

source/templates/demo/_default.njk

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

source/templates/demo/_main.njk

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

source/templates/demo/_maintenance.njk

@@ -2,11 +2,11 @@
 {% extends "hippie/_maintenance.njk" %}
 
 {% block meta %}
-  {% include "demo/partials/_meta.njk" %}
+	{% include "demo/partials/_meta.njk" %}
-  <base href="/">
+	<base href="/">
 {% endblock %}
 
 {% block links %}
-  {{ super() }}
+	{{ super() }}
-  <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
+	<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
 {% endblock %}

source/templates/hippie/_default.njk

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

source/templates/hippie/_main.njk

@@ -3,46 +3,67 @@
 
 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-  <head>
+	<head>
-    <meta charset="utf-8">
+		<meta charset="utf-8">
 
-    {% block head %}
+		{% block head %}
-      <title>{{ hippie.titlePrefix }}
+			<title>{{ hippie.titlePrefix }}
-        {%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
+				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
 
-      {% block meta %}
+			{% block meta %}
-        {% include "hippie/partials/_head_meta.njk" %}
+				{% include "hippie/partials/_head_meta.njk" %}
-      {% endblock %}
+			{% endblock %}
 
-      {% include "hippie/partials/_head_script.njk" %}
+			{% include "hippie/partials/_head_script.njk" %}
-      {{ log.debug(hippie.debugMode, true) }}
+			{{ log.debug(hippie.debugMode, true) }}
-      {{ log.start() }}
+			{{ log.start() }}
 
-      {% block links %}
+			{% block links %}
-        {% include "hippie/partials/_head_links.njk" %}
+				{% include "hippie/partials/_head_links.njk" %}
-      {% endblock %}
+			{% endblock %}
 
-      {{ log.log('HEAD end    :: Links parsed, starting to load.') }}
+			{{ log.log('HEAD end    :: Links parsed, starting to load.') }}
-    {% endblock %}
+		{% endblock %}
-  </head>
+	</head>
 
-  <body class="{{ bodyClass }}">
+	<body class="{{ bodyClass }}">
-    {{ log.log('BODY start') }}
+		{{ log.log('BODY start') }}
-    {% include "hippie/partials/_body_hover.njk" %}
+		{% include "hippie/partials/_body_hover.njk" %}
-    <div id="root">
+		{% include "hippie/partials/_body_nav.njk" %}
-      {% include "hippie/partials/_header.njk" %}
+		<div id="root">
+			{% include "hippie/partials/_header.njk" %}
 
-      <main class="main_site">
+			<main class="main_site">
-        {% block main %}{% endblock %}
+				{% block main %}{% endblock %}
-      </main>
+			</main>
 
-      {% include "hippie/partials/_footer.njk" %}
+			{% include "hippie/partials/_footer.njk" %}
-    </div>
+		</div>
 
-    {% block script %}
+		{% block script %}
-      {{ log.log('BODY        :: Loading script assets...') }}
+			{{ log.log('BODY        :: Loading script assets...') }}
-    {% endblock %}
+			{# <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.') }}
+				document.addEventListener('scroll', () => {
-  </body>
+					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>

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>
+	<head>
-    <meta charset="utf-8">
+		<meta charset="utf-8">
 
-    {% block head %}
+		{% block head %}
-      <title>{{ hippie.titlePrefix }}
+			<title>{{ hippie.titlePrefix }}
-        {%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
+				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
 
-      {% block meta %}
+			{% block meta %}
-        {% include "hippie/partials/_head_meta.njk" %}
+				{% include "hippie/partials/_head_meta.njk" %}
-      {% endblock %}
+			{% endblock %}
 
-      {% block links %}
+			{% 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=">
+				<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 %}
-    {% endblock %}
+		{% endblock %}
-  </head>
+	</head>
 
-  <body class="{{ bodyClass }}">
+	<body class="{{ bodyClass }}">
-    {% block body %}
+		{% block body %}
-      {{ status.footer() }}
+			{{ footer.status() }}
-    {% endblock %}
+		{% endblock %}
-  </body>
+	</body>
 </html>

source/templates/hippie/macros/_footer.njk

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

source/templates/hippie/macros/_gate.njk

@@ -1,31 +1,30 @@
-<!-- gates.macro -->
 {% macro list(name, url, image, links) %}
-  <article class="portal__entry">
+	<article class="portal__entry">
-    <section>
+		<section>
-      <h2>
+			<h2>
-        <a class="a_discreet" href="{{ url }}">{{ name }}</a>
+				<a class="a_discreet" href="{{ url }}">{{ name }}</a>
-      </h2>
+			</h2>
-      <a class="portal__link portal__link--{{ name | slug }}" href="{{ url }}">
+			<a class="portal__link portal__link--{{ name | slug }}" href="{{ url }}">
-        <img src="{{ image.src }}" alt="{{ image.alt }}"/>
+				<img src="{{ image.src }}" alt="{{ image.alt }}"/>
-      </a>
+			</a>
-      {% if links %}
+			{% if links %}
-        <ul class="portal__list">
+				<ul class="portal__list">
-          {% for link in links %}
+					{% for link in links %}
-            <li>
+						<li>
-              <a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
+							<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
-            </li>
+						</li>
-          {% endfor %}
+					{% endfor %}
-        </ul>
+				</ul>
-      {% endif %}
+			{% endif %}
-    </section>
+		</section>
-  </article>
+	</article>
 {% endmacro %}
 {% macro simple(name, url) %}
-  <article class="portal__entry">
+	<article class="portal__entry">
-    <section>
+		<section>
-      <h2>
+			<h2>
-        <a class="a_discreet" href="{{ url }}">{{ name }}</a>
+				<a class="a_discreet" href="{{ url }}">{{ name }}</a>
-      </h2>
+			</h2>
-    </section>
+		</section>
-  </article>
+	</article>
 {% endmacro %}

source/templates/hippie/macros/_header.njk

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

source/templates/hippie/macros/_log.njk

@@ -1,24 +1,24 @@
 {% macro start() %}
-  <script>
+	<script>
-    logAdd('EVENT       :: Document \'%s\' event fired.', 'DOMContentLoaded');
+		logAdd('EVENT       :: Document \'%s\' event fired.', 'DOMContentLoaded');
-    logPerf('HEAD start  :: Debugging performance...', debugOn);
+		logPerf('HEAD start  :: Debugging performance...', debugOn);
-  </script>
+	</script>
 {% endmacro %}
 {% macro log(msg, arg = '') %}
-  <script>
+	<script>
-    logPerf('{{ msg }}', {{ arg }});
+		logPerf('{{ msg }}', {{ arg }});
-  </script>
+	</script>
 {% endmacro %}
 {% macro debug(state = false, display = false, assets = false) %}
-  {# {{ set hippie.debugMode = state }} #}
+	{# {{ set hippie.debugMode = state }} #}
-  <script>
+	<script>
-    debugOn = {{ state }};
+		debugOn = {{ state }};
-    debugOnScreen = {{ display }};
+		debugOnScreen = {{ display }};
-    assetsLoaded = {{ assets }};
+		assetsLoaded = {{ assets }};
-  </script>
+	</script>
 {% endmacro %}
 {% macro asset(state = false) %}
-  <script>
+	<script>
-    assetsLoaded = {{ state }};
+		assetsLoaded = {{ state }};
-  </script>
+	</script>
 {% endmacro %}

source/templates/hippie/macros/_nav.njk

@@ -1,13 +1,13 @@
 {% macro main(data, active = '') %}
-  <nav>
+	<nav>
-    <ul>
+		<ul>
-      {% for link in data %}
+			{% for link in data %}
-        <li{%if active == link.text %} class="active_txt" {% endif %}>
+				<li{%if active == link.text %} class="active_txt" {% endif %}>
-          {%if active == link.text %}{{ link.text }}{%else%}
+					{%if active == link.text %}{{ link.text }}{%else%}
-            <a href="{{ link.href }}">{{ link.text }}</a>
+						<a href="{{ link.href }}">{{ link.text }}</a>
-          {% endif %}
+					{% endif %}
-        </li>
+				</li>
-      {% endfor %}
+			{% endfor %}
-    </ul>
+		</ul>
-  </nav>
+	</nav>
 {% endmacro %}

source/templates/hippie/macros/_placeholder.njk

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

source/templates/hippie/macros/_song.njk

@@ -1,12 +1,12 @@
 {% macro simple(index, data, content) %}
-  <article class="songbook_song">
+	<article class="songbook_song">
-    <header>
+		<header>
-      <h2>{{ data.title }}</h2>
+			<h2>{{ data.title }}</h2>
-      <h6>{{ data.releaseDate }}</h6>
+			<h6>{{ data.releaseDate }}</h6>
-      <p>{{ data.description }}</p>
+			<p>{{ data.description }}</p>
-    </header>
+		</header>
-    {# <pre class="pre_code"><code>{{ content }}</code></pre> #}
+		{# <pre class="pre_code"><code>{{ content }}</code></pre> #}
-    {{ content | safe }}
+		{{ content | safe }}
-    <footer>{{ index }}</footer>
+		<footer>{{ index }}</footer>
-  </article>
+	</article>
 {% endmacro %}

source/templates/hippie/macros/_state.njk

@@ -1,15 +1,14 @@
-<!-- states.macro -->
+{% macro coord(id, text = 'X: #, Y: ##') %}
-{% macro coord(id, text='X: #, Y: ##') %}
+	<span id="{{ id }}">{{ text }}</span>
-  <span id="{{ id }}">{{ text }}</span>
 {% endmacro %}
-{% macro time(id, text='00:00:00', postfix=' Uhr') %}
+{% macro time(id, text = '00:00:00', postfix = ' Uhr') %}
-  <span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
+	<span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
 {% endmacro %}
 {% macro date() %}
-  <span id="{{ id }}">
+	<span id="{{ id }}">
-    <span id="day">Wochentag</span>,
+		<span id="day">Wochentag</span>,
-    <span id="dayNumb">##</span>.
+		<span id="dayNumb">##</span>.
-    <span id="month">Monat</span>
+		<span id="month">Monat</span>
-    <span id="year">####</span>
+		<span id="year">####</span>
-  </span>
+	</span>
 {% endmacro %}

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

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

source/templates/hippie/partials/_body_hover.njk

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

source/templates/hippie/partials/_body_nav.njk

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

source/templates/hippie/partials/_footer.njk

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

source/templates/hippie/partials/_head_links.njk

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

source/templates/hippie/partials/_head_meta.njk

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

source/templates/hippie/partials/_head_script.njk

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

source/templates/hippie/partials/_header.njk

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