source/code/_ui.js

@@ -1,113 +0,0 @@
-// 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

@@ -111,6 +111,49 @@ function zeroFill(number, width) {
 	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;

source/code/hippie/functions.js

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

source/code/hippie/global.js

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

source/code/hippie/variables.js

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

source/code/ui.js

@@ -1,23 +1,8 @@
-class Intro {
+let introDelay = 6;
-	constructor(name) {
+let hintDelay = 1;
-		this.name = name;
+let isAgree = false;
-	}
 
-	init() {
+const steps = {
-		return new Promise((resolve) => {
-			console.log('%s Init', this.name);
-
-			resolve();
-		});
-	}
-}
-
-class UI {
-	constructor() {
-		this.introDelay = 6;
-		this.hintDelay = 1;
-		this.isAgree = false;
-		this.steps = {
 	agreement: {
 		element: document.getElementById('agreement'),
 		msgIn: 'Agreement shown.',
@@ -25,104 +10,39 @@ class UI {
 		msgNo: 'No agreement today.'
 	}
 };
-		this.intro = document.getElementById('intro');
+const intro = document.getElementById('intro');
-		this.agreement = this.steps.agreement.element;
+const agreement = steps.agreement.element;
-		this.hint = {
+const hint = {
 	element: document.getElementById('hint'),
-			delay: this.hintDelay * 1000
+	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);
+	}
 };
-		this.loader = document.getElementById('loader');
+const 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.hint.element.classList.remove('di_none');
-
-		this.hint.timeoutId = setTimeout(
-			() => {
-				this.dismissHint();
-			},
-			this.hint.delay
-		);
-	}
-
-	dismissHint() {
-		this.hint.element.classList.add('di_none');
-		this.hint.timeoutId = undefined;
-	}
-
-	cancelHint() {
-		clearTimeout(this.hint.timeoutId);
-	}
-
-	showIdle() {
-		const el = document.getElementById('idle');
-
-		return new Promise((resolve, reject) => {
-			if (el) {
-				console.info('Idle.');
-
-				el.classList.replace('op_hide', 'op_show');
-				resolve('Idle.');
-			} else {
-				reject();
-			}
-		})
-	}
-
-	init() {
-		return new Promise((resolve) => {
-			console.log('Init');
-
-			resolve();
-		});
-	}
-}
 
 function init() {
 	return new Promise((resolve) => {
 		console.log('Init');
 
-		// Set all steps to not receive pointer events
-		document.querySelectorAll('.step').forEach(element => {
-			console.log(element);
-			
-			element.style.pointerEvents = 'none';
-		});
-
 		resolve();
 	});
 }
@@ -146,16 +66,12 @@ 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.');
 		}
 	})
@@ -172,10 +88,7 @@ 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);
 		}
@@ -191,9 +104,7 @@ function showAgreement() {
 
 				el.removeEventListener('transitionend', endListener);
 				el.removeEventListener('click', agreeHandler);
-				document.removeEventListener('keydown', agreeHandler);
 				el.classList.add('di_none');
-
 				resolve(steps.agreement.msgOut);
 			});
 		}
@@ -203,22 +114,13 @@ 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();
 		}
 	})
@@ -264,7 +166,6 @@ function loadCore() {
 
 					el.removeEventListener('transitionend', endListener);
 					el.classList.add('di_none');
-
 					resolve("Core loaded.");
 				});
 			}
@@ -272,6 +173,60 @@ 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.
@@ -297,14 +252,6 @@ function hintHandler() {
 	hint.show();
 }
 
-function idleStart() {
-	idle.cycle();
-}
-
-function idleStop() {
-	idle.cancel();
-}
-
 /**
  * Blendet einen Schritt aus.
  * 
@@ -321,7 +268,6 @@ function stepHandler(e) {
 			console.info(msg);
 
 			el.removeEventListener('transitionend', endListener);
-			
 			resolve(msg);
 		});
 	})

source/screens/demo/basics.njk

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

source/screens/demo/components.njk

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

source/screens/demo/examples/card.njk

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

source/screens/demo/examples/portal.njk

@@ -9,8 +9,7 @@ tags:
 {% extends "demo/_default.njk" %}
 {% import "hippie/macros/_gate.njk" as gate %}
 
-{% block title %}{{ title }}
+{% block title %}{{ title }}{% endblock %}
-{% endblock %}
 
 {% block head %}
   {{ super() }}

source/screens/demo/examples/songbook.njk

@@ -10,8 +10,7 @@ tags:
 {% import "hippie/macros/_placeholder.njk" as ph %}
 {% import "hippie/macros/_song.njk" as song %}
 
-{% block title %}{{ title }}
+{% block title %}{{ title }}{% endblock %}
-{% endblock %}
 
 {% block head %}
   {{ super() }}

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

@@ -9,8 +9,7 @@ tags:
 
 {% extends "demo/_app.njk" %}
 
-{% block title %}{{ title }}
+{% block title %}{{ title }}{% endblock %}
-{% endblock %}
 
 {% block links %}
   {{ super() }}
@@ -23,18 +22,123 @@ tags:
 
 {% block body %}
   <div id="space"></div>
-  <button data-action="add">Add</button>
+  <button id="addFrame">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 add = document.querySelector('[data-action=add]');
+    const addFrameButton = document.getElementById('addFrame');
 
     // Add event listener to the add space button
-    add.addEventListener('click', () => {
+    addFrameButton.addEventListener('click', () => {
       const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
       newDiv.createDiv();
       newDiv.appendToFrame(space);

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

@@ -1,68 +0,0 @@
----
-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,14 +5,13 @@ tags:
   - index
   - ui
 ---
-
 {% set pageId = "init" %}
 {% set pageClass = "html_ui" %}
 
 {% extends "demo/_app.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
-{% block title %}
+
-	{{ title }}
+{% block title %}{{ title }}
 {% endblock %}
 
 {% block links %}
@@ -26,21 +25,17 @@ tags:
 {% block body %}
 		<div id="loader" class="step op_show">
 			<div id="bar">
-			<div id="spinner">
+				<div id="spinner"><span>I</span></div>
-				<span>I</span>
-			</div>
 				<div id="wrap">
 					<div id="progress"></div>
 				</div>
 				<div id="status">0%</div>
 			</div>
 		</div>
-	<div id="intro" class="step op_hide">
 		<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
-			<p>Hold
+			<p>Hold <kbd>space</kbd> to skip.</p>
-				<kbd>space</kbd>
-				to skip.</p>
 		</div>
+		<div id="intro" class="step op_hide">
 			{{ ph.brand('brand') }}
 			<p>Powered by</p>
 			<ul class="tech-stack">
@@ -54,7 +49,6 @@ tags:
 			<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
 		</div>
 		<div id="idle" class="step op_hide">
-		<div class="mouse_over"></div>
 			<div class="hello">Hello World!</div>
 			<p class="hello">Only left mouse click or any key</p>
 		</div>
@@ -62,90 +56,5 @@ tags:
 
 {%- block script %}
 		{{ super() }}
-	<script src="{{ pageBase }}js/_intro.js"></script>
+		<script src="{{ pageBase }}js/ui.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

@@ -72,11 +72,20 @@ tags:
 
 {% block script %}
   {{ super() }}
+  {# <script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script> #}
+  <!-- build:js js/main.concat.min.js -->
+  <script src="{{ pageBase }}js/variables.js"></script>
+  <script src="{{ pageBase }}js/functions.js"></script>
+  <script src="{{ pageBase }}js/global.js"></script>
   <script>
     assetsLoaded = true;
-		logPerf('BODY        :: Assets loaded, running page specific script...', assetsLoaded);
+    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

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

source/screens/demo/layouts.njk

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

source/style/hippie-style

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

source/style/modules/ui/_drag_module.scss

@@ -1,14 +1,6 @@
 .body_drag {
 	height: 100vh;
 	// padding: $space_basic;
-
-	button {
-		@extend .io_button;
-		position: fixed;
-		top: 8px;
-		right: 8px;
-		margin: 0;
-	}
 }
 
 #space {
@@ -16,3 +8,11 @@
 	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

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

source/templates/demo/_app.njk

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

source/templates/demo/_main.njk

@@ -19,3 +19,8 @@
   <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
   <!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
 {% endblock %}
+
+{% block script %}
+  {{ super() }}
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+{% endblock %}

source/templates/hippie/_default.njk

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

source/templates/hippie/_main.njk

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

source/templates/hippie/_maintenance.njk

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

source/templates/hippie/macros/_footer.njk

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

source/templates/hippie/macros/_header.njk

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

source/templates/hippie/macros/_placeholder.njk

@@ -2,19 +2,15 @@
 <a class="{{ class }}" href="">{{ text }}</a>
 {# {{ 'name@domain.tld' | urlize | safe }} #}
 {% endmacro %}
-
 {% macro link(class='', text='domain.tld', href='http://domain.internal') %}
 <a class="{{ class }}" href="{{ href }}">{{ text }}</a>
 {% endmacro %}
-
 {% 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>
 {% endmacro %}
-
 {% macro brand(class='', name='Marke') %}
 <div class="{{ class }}">
 	{# <img src="" alt="Brand logo"> #}

source/templates/hippie/macros/_state.njk

@@ -1,3 +1,4 @@
+<!-- states.macro -->
 {% macro coord(id, text='X: #, Y: ##') %}
   <span id="{{ id }}">{{ text }}</span>
 {% endmacro %}

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

@@ -0,0 +1,17 @@
+{% 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 @@
-<!-- hover.partial -->
+<!-- body_hover.partial -->
 <div id="js_mob"></div>

source/templates/hippie/partials/_body_nav.njk

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

source/templates/hippie/partials/_footer.njk

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

source/templates/hippie/partials/_head_links.njk

@@ -1,4 +1,4 @@
-<!-- links.partial -->
+<!-- head.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 @@
-<!-- meta.partial -->
+<!-- head.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 @@
-<!-- script.partial -->
+<!-- head.script.partial -->
 <script>
   // Entry script at page init
   let debugOn = {{ hippie.debugMode }};

source/templates/hippie/partials/_header.njk

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