Merge pull request 'Replace Nunjucks with Liquid' (#2 ) from development into main

Reviewed-on: #2
docs: Update README
2026-03-15 09:40:21 +01:00 · 2026-03-15 09:27:33 +01:00 · 2026-03-15 08:52:09 +01:00 · 2026-03-14 17:00:18 +01:00 · 2026-03-12 21:38:48 +01:00 · 2026-03-12 20:23:17 +01:00
71 changed files with 3147 additions and 3515 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@ -1,10 +1,23 @@
 /* jshint strict: false */

+import fs from 'fs/promises';
 import {HtmlBasePlugin} from "@11ty/eleventy";
+import pluginWebc from "@11ty/eleventy-plugin-webc";
+
+async function hasFiles(dirPath) {
+	try {
+		const entries = await fs.readdir(dirPath, {withFileTypes: true});
+		return entries.some(entry => entry.isFile());
+	} catch (err) {
+		console.error('Error reading directory:', err);
+		return false;
+	}
+}

 // noinspection JSUnusedGlobalSymbols
 export default async function (eleventyConfig) {
 	eleventyConfig.addPlugin(HtmlBasePlugin);
+	eleventyConfig.addPlugin(pluginWebc);

 	eleventyConfig.setLiquidOptions({
 		// greedy: false,
@ -14,20 +27,13 @@ export default async function (eleventyConfig) {
 		// trimTagRight : true,
 	});

-	eleventyConfig.setNunjucksEnvironmentOptions({
-		// throwOnUndefined: true,
-		trimBlocks: true
-	});
-
 	eleventyConfig.addGlobalData('permalink', () => {
 		return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
 	});

-	let demoMode = false;
-	let pageBase = demoMode ? './demo/' : './';
+	const demoPath = await hasFiles('source/screens') ? '/demo/' : '/';

 	eleventyConfig.addGlobalData('hippie', {
-		pageBase: pageBase,
 		brand: 'hippie',
 		titlePrefix: '',
 		titlePostfix: ' - HIPPIE',
@ -35,8 +41,10 @@ export default async function (eleventyConfig) {
 			name: 'Vorname Nachname',
 			address: 'Straße Nr., PLZ Ort',
 			phone: '+49 (0)101 1337 48',
-			mail: 'name@domain.tld'
+			mail: 'name@domain.tld',
+			domain: 'https://domain.tld'
 		},
+		demoPath: demoPath,
 		debugMode: true,
 		legacyMode: false
 	});
@ -46,7 +54,7 @@ export default async function (eleventyConfig) {
 	});

 	eleventyConfig.addShortcode('link', function (target, text, attrId, attrClass) {
-		if (text === '') {
+		if (!text || text === '') {
 			text = target;
 		}

@ -57,12 +65,59 @@ export default async function (eleventyConfig) {
 		return `<a id="${attrId}" class="${attrClass}" href="${target}">${text}</a>`;
 	});

+	eleventyConfig.addPairedShortcode('brand', function (content, attrClass = 'brand', direction = 'first') {
+		const logo = `
+<svg
+   width="100%"
+   height="100%"
+   viewBox="0 0 512 512"
+   preserveAspectRatio="xMidYMid meet">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <g
+       id="g2"
+       transform="matrix(0.984375,0,0,0.984375,4,4)"
+       style="stroke-width:1.01587">
+      <rect
+         style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:square;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect1"
+         width="512"
+         height="512"
+         x="0"
+         y="0" />
+      <circle
+         style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:square;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path1"
+         cx="256"
+         cy="256"
+         r="256" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:butt;stroke-linejoin:bevel;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path2"
+         d="M 477.7025,128 256,512 34.297496,128 Z"
+    </g>
+  </g>
+</svg>
+`;
+		let output = '';
+
+		switch (direction) {
+			case 'first':
+				output = logo + `${content}`;
+				break;
+			case 'last':
+				output = `${content}` + logo;
+				break;
+		}
+
+		return `<div class="${attrClass}">` + output + `</div>`;
+	});
+
 	eleventyConfig.addPassthroughCopy({'source/art/images': 'art'});
-
 	eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'});
-
 	eleventyConfig.addPassthroughCopy({'source/code/**/*.js': 'js'});
-
 	eleventyConfig.addPassthroughCopy({'source/data/**/*.json': 'json'});

 	eleventyConfig.addPassthroughCopy('vendor');
@ -82,7 +137,6 @@ export default async function (eleventyConfig) {
 			includes: '../templates',
 			data: '../data'
 		},
-		templateFormats: ['html', 'liquid', 'njk', 'md']
-		// pathPrefix: './demo/'
+		templateFormats: ['html', 'liquid', 'md', 'njk']
 	};
 }
--- a/README.md
+++ b/README.md
@ -4,15 +4,20 @@ Hippie interweaves preeminent personal interface elements

 > WORK IN PROGRESS (it is not ready to be used)

-This is a [Node.js](https://nodejs.org/) based generator for static HTML documents.
+This is a [Node.js](https://nodejs.org/) based generator for static HTML documents.  
+It uses the [Eleventy](https://www.11ty.dev/) project to fiddle everything together.

-It uses the [gulp](https://gulpjs.com/) module to fiddle everything together. Styling is powered by the CSS extension language [SASS](https://sass-lang.com/). The HTML pages itself are made with the templating engine [Nunjucks](https://mozilla.github.io/nunjucks/).
+Styling is powered by the CSS extension language [SASS](https://sass-lang.com/). The HTML pages are written with
+templating engines or directly as HTML files. Mainly [Liquid](https://liquidjs.com/) is used,
+but [Markdown](https://daringfireball.net/projects/markdown/) and [Nunjucks](https://mozilla.github.io/nunjucks/) are
+also options.

 ## Installing

-Clone the repository `https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git` to a folder to create your build environment.
+Clone the repository `https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git` to a folder to create your
+build environment.

-Change to the newly created folder. By default this would be *hippie*.
+Change to the newly created folder. By default, this would be *hippie*.

 Run the command `git submodule update --init`.
 This will load the submodules.
@ -22,21 +27,26 @@ This will install all dependencies into the folder *node_modules*.

 ## Usage

-The command `gulp --tasks` will give you an overview of possible actions.
+Different *scripts* are provided through `package.json`:

-Run the command `gulp` for a live development environment.
-This will create a folder *build* with the resulting files.
-Also the source files will be watched for changes which are reflected live at [localhost:3000](http://localhost:3000) and the *build* directory.
+Run the command `npm run serve` for a live development environment.
+This will create a folder `/build` with the resulting files.
+Also, the source files will be watched for changes which are reflected live at [localhost:8080](http://localhost:8080)
+and the `/build` directory.

-`gulp build` will create the resulting *build* directory ready for deployment.
+`npm run build` will just create the resulting `/build` directory and `npm run deploy` will use a path prefix (*hippie*
+by default) and create the results in `/deploy` ready for deployment.

-HIPPIE is intended to be used as a basis when creating HTML sites. It can be used without changes. It can be modified to have a different look and feel. It also can be used to build a new basis on top of it.
+HIPPIE is intended to be used as a basis when creating HTML sites. It can be used without changes. It can be modified to
+have a different look and feel. It also can be used to build a new basis on top of it.

 ## Content

 ### Intro

-There is an *intro* page which explains the main elements and their intended usage. It uses the default styling methods and also shows variations. The page is written in german language. However it has a semantic structure and the text itself can also just be seen as example content.
+There is an *intro* page which explains the main elements and their intended usage. It uses the default styling methods
+and also shows variations. The page is written in german language. However, it has a semantic structure and the text
+itself can also just be seen as example content.

 ### Sass (CSS)

@ -44,15 +54,16 @@ Everything has its default style.

 CSS classes follow a naming scheme of `<object>_<description>`.

- *Object* usually is the name of the HTML element. If it is not a element directly it is the thing which receives the styling
+- *Object* usually is the name of the HTML element. If it is not an element directly it is the thing which receives the
+  styling
 - *Description* is a name of the style e.g. what it does, how it looks

 ### JavaScript (JS)

 The codebase uses ECMAScript 2023 Language Specification (14th edition).  
-However, currently the JSHint configuration only allows 11 as highest version. 
+However, currently the JSHint configuration only allows 11 as highest version.

-ID values are written in *camelCase*. The scheme further uses parts for specific contexts. 
+ID values are written in *camelCase*. The scheme further uses parts for specific contexts.

 If the ID is for an interactive element the first part is an abbreviation of the action.

@ -65,19 +76,23 @@ If the ID is for an interactive element the first part is an abbreviation of the

 ## Versioning

-This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://quelltext.interaktionsweise.de/interaktionsweise/hippie/tags).
+This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see
+the [tags on this repository](https://quelltext.interaktionsweise.de/interaktionsweise/hippie/tags).

 ## Contribution

-For contribution please use the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) specification.  
+For contribution please use the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary)
+specification.  
 The commit *type* can include the following:

 - feat – A new feature is introduced with the changes
 - fix – A bug fix has occurred
- chore – Changes that do not relate to a fix or feature and don't modify src or test files (for example updating dependencies)
+- chore – Changes that do not relate to a fix or feature and don't modify src or test files (for example updating
+  dependencies)
 - refactor – Refactored code that neither fixes a bug nor adds a feature
- docs – Updates to documentation such as a the README or other markdown files
- style – Changes that do not affect the meaning of the code, likely related to code formatting such as white-space, missing semi-colons, and so on.
+- docs – Updates to documentation such as the README or other Markdown files
+- style – Changes that do not affect the meaning of the code, likely related to code formatting such as white-space,
+  missing semicolons, and so on.
 - test – Including new or correcting previous tests
 - perf – Performance improvements
 - ci – Continuous integration related
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -38,7 +38,7 @@
 	},
 	"dependencies": {
 		"@11ty/eleventy": "^3.1.2",
-		"@11ty/eleventy-upgrade-help": "^3.0.2",
+		"@11ty/eleventy-plugin-webc": "^0.11.2",
 		"bootstrap-icons": "^1.13.1",
 		"hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
 		"jquery": "^3.7.1",
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@ -341,6 +341,7 @@ class DateDisplay {
 	}
 }

+// TODO: Kompatibilität für Zeiger
 function checkButtonAndTarget(event, element, button = 0) {
 	return (
 		event.button === button &&
@ -539,6 +540,11 @@ function mapRange(value, inMin, inMax, outMin, outMax, reverse = false, clamp =
 	return mapped;
 }

+// Source - https://stackoverflow.com/a/47480429
+// Posted by Etienne Martin, modified by community. See post 'Timeline' for change history
+// Retrieved 2026-03-08, License - CC BY-SA 4.0
+const delay = ms => new Promise(res => setTimeout(res, ms));
+
 // CONCEPTS

 // NOTE: Benutzt private Zuweisungen
--- a/source/code/intro.js
+++ b/source/code/intro.js
@ -25,7 +25,7 @@ class UI {
 				msgNo: 'No agreement today.'
 			}
 		};
-		this.intro = document.getElementById('intro');
+		this.intro = document.getElementById('init');
 		this.agreement = this.steps.agreement.element;
 		this.hint = {
 			element: document.getElementById('hint'),
@ -61,7 +61,7 @@ class UI {
 			} else {
 				reject('No intro available.');
 			}
-		})
+		});
 	}

 	showHint() {
@ -100,7 +100,7 @@ class UI {
 			} else {
 				reject();
 			}
-		})
+		});
 	}

 	init() {
@ -119,7 +119,7 @@ function init() {
 		// Set all steps to not receive pointer events
 		document.querySelectorAll('.step').forEach(element => {
 			console.log(element);
-			
+
 			element.style.pointerEvents = 'none';
 		});

@ -158,7 +158,7 @@ function showIntro() {

 			reject('No intro available.');
 		}
-	})
+	});
 }

 function showAgreement() {
@ -197,7 +197,7 @@ function showAgreement() {
 				resolve(steps.agreement.msgOut);
 			});
 		}
-	})
+	});
 }

 function showIdle() {
@ -212,16 +212,24 @@ function showIdle() {

 			el.classList.replace('op_hide', 'op_show');
 			el.style.pointerEvents = '';
-			el.addEventListener('click', idleStart, false);
-
-			resolve('Idle.');
+			el.addEventListener('contextmenu', (event) => {
+				event.preventDefault();
+			});
+			el.addEventListener('click', (event) => {
+				if (checkButtonAndTarget(event, event.target)) {
+					console.log('OK go', event.target);
+					resolve('Idle fin.');
+				} else {
+					event.preventDefault();
+				}
+			}, false);
 		} else {
 			document.removeEventListener('mouseleave', idleStart);
 			document.removeEventListener('mouseenter', idleStop);

 			reject();
 		}
-	})
+	});
 }

 function loadCore() {
@ -289,9 +297,9 @@ function idleStop() {

 /**
 * Blendet einen Schritt aus.
- * 
- * @param {*} e 
- * @returns 
+ *
+ * @param {*} e
+ * @returns
 */
 function stepHandler(e) {
 	const el = e.target;
@ -303,8 +311,8 @@ function stepHandler(e) {
 			console.info(msg);

 			el.removeEventListener('transitionend', endListener);
-			
+
 			resolve(msg);
 		});
-	})
+	});
 }
--- a/source/code/windows.js
+++ b/source/code/windows.js
@ -21,9 +21,9 @@ class HippieTaskBar {

 	// TODO: Ereignisse besser delegieren
 	init() {
-		this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
-		document.addEventListener('mousemove', this.onMouseMove.bind(this));
-		document.addEventListener('mouseup', this.onMouseUp.bind(this));
+		this.element.addEventListener('pointerdown', this.onDown.bind(this));
+		document.addEventListener('pointermove', this.onMove.bind(this));
+		document.addEventListener('pointerup', this.onUp.bind(this));

 		const dateElement = document.createElement('span');

@ -34,7 +34,7 @@ class HippieTaskBar {
 		this.setOptions(this.options.position);
 	}

-	onMouseDown(event) {
+	onDown(event) {
 		if (checkButtonAndTarget(event, this.element, 0)) {
 			console.debug('Drag mode enabled');

@ -48,7 +48,7 @@ class HippieTaskBar {
 		event.preventDefault();
 	}

-	onMouseMove(event) {
+	onMove(event) {
 		if (this.isDragging) {
 			this.options.position = getClosestEdgeToMouse(event);
 			const borderRadius = '4px';
@ -116,7 +116,7 @@ class HippieTaskBar {
 		}
 	}

-	onMouseUp() {
+	onUp() {
 		if (event.target === this.placeholder) {
 			console.debug('Drag mode disabled');

--- a/source/screens/demo/basics.liquid
+++ b/source/screens/demo/basics.liquid
@ -2,6 +2,7 @@
 title: Basics
 tags:
 - demoIndex
+order: 2
 ---
 {% layout 'hippie/page.liquid' %}

--- a/source/screens/demo/components.liquid
+++ b/source/screens/demo/components.liquid
@ -2,6 +2,7 @@
 title: Components
 tags:
 - demoIndex
+order: 3
 ---
 {% layout 'hippie/page.liquid' %}

@ -151,8 +152,8 @@ tags:
 			<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">
+		<pre class="pre_code"><code>ul.link>(li>a)*2</code></pre>
+		<ul class="link">
 			<li>
 				<a href="">Mit</a>
 			</li>
@ -306,7 +307,7 @@ tags:
 				<input id="inpPass" type="password"/>
 				<span id="hintPass" style="visibility:hidden"><kbd>Shift</kbd> is pressed.</span>
 				<br>
-				<input id ="inpText" type="text"/>
+				<input id="inpText" type="text"/>
 				<span id="hintText"><kbd>CapsLock</kbd> is on.</span>
 			</form>
 		</div>
--- a/source/screens/demo/examples/blog.liquid
+++ b/source/screens/demo/examples/blog.liquid
@ -0,0 +1,32 @@
+---
+title: Blog
+tags:
+- demoExample
+---
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<div class="sec_main_center">
+	<header class="header_txt">
+		<h1>Blog</h1>
+	</header>
+	<nav role="doc-toc">
+		<h2>Inhaltsverzeichnis</h2>
+		<ul>
+			{%- for blog in collections.blog -%}
+				<li>
+					<a href="{{ blog.page.url }}">{{ blog.data.title }}</a>
+				</li>
+			{%- endfor -%}
+		</ul>
+	</nav>
+	<hr class="double dotted">
+	{%- for post in collections.article -%}
+		<article>
+			{{ post.content }}
+		</article>
+	{%- endfor -%}
+	<hr/>
+	<address>{% text hippie.placeholders.name %}</address>
+</div>
+{% endblock %}
--- a/source/screens/demo/examples/blog.njk
+++ b/source/screens/demo/examples/blog.njk
@ -1,51 +0,0 @@
---
-title: Blog
-tags:
-  - demoExample
---
-{% set pageBase = "../" %}
-{% set pageId = page.fileSlug %}
-
-{% extends "demo/_default.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
-{% import "hippie/macros/_song.njk" as song %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block body %}
-	<!-- {{ page.fileSlug }}.page -->
-	<div class="sec_main_center">
-		<header class="header_txt">
-			<h1>Blog</h1>
-		</header>
-		<nav role="doc-toc">
-			<h2>Inhaltsverzeichnis</h2>
-			<ul>
-				{%- for song in collections.song -%}
-					<li>
-						<a href="{{ song.page.url }}">{{ song.data.title }}</a>
-					</li>
-				{%- endfor -%}
-			</ul>
-		</nav>
-		<h2>Vorwort</h2>
-		<p>Liederbuch für
-			<em>Name</em>.</p>
-		<p>Gibt es gebunden und hier
-			{{ ph.link() }}.<br/>
-			Bestellungen bitte an
-			{{ ph.name() }}
-			richten.</p>
-		<hr class="double dotted">
-		{%- for post in collections.article -%}
-			{{ post.content }}
-		{%- endfor -%}
-		<hr/>
-		<address>{{ ph.name() }}</address>
-	</div>
-{% endblock %}
--- a/source/screens/demo/examples/blog/article.md
+++ b/source/screens/demo/examples/blog/article.md
@ -3,7 +3,7 @@ tags:
  - blog
  - article
 title: "Artikel"
-releaseDate: JJJJ
+publishDate: JJJJ
 description: Text
 ---
 # Titel
--- a/source/screens/demo/examples/card.liquid
+++ b/source/screens/demo/examples/card.liquid
@ -0,0 +1,69 @@
+---
+title: Card
+tags:
+- demoExample
+---
+{% assign pageClass = "html_card" %}
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<div class="card_bkg">
+	<div id="dither"></div>
+	{% render 'hippie/partials/placeholder-flag.liquid', type: '', id: 'flag' %}
+	{% comment %}<img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/>{% endcomment %}
+</div>
+<div class="card_box">
+	<main>
+		<p>Titel<br/>und Beschreibung</p>
+		<h1>{% text hippie.placeholders.name %}</h1>
+		<p>
+			{% link hippie.placeholders.mail, '', '', 'card_address' %}<br/>
+			{% link hippie.placeholders.domain, 'site.tld', '', 'decent' %}
+			&middot;
+			{% text hippie.placeholders.address, '', 'decent' %}</p>
+	</main>
+</div>
+{% endblock %}
+
+{% block script %}
+<script>
+	const flag = document.getElementById('flag');
+	let colors = new Array();
+	let iId = undefined;
+	let position = 0;
+
+	for (let i = 1; i <= flag.childElementCount; i++) {
+		colors.push(document.getElementById('triangle-' + i).getAttribute('fill'));
+	}
+
+	document
+		.querySelector('main')
+		.addEventListener('mouseenter', () => {
+			iId = setInterval(() => {
+				for (let i = 1; i <= colors.length; i++) {
+					position++;
+
+					if (position >= colors.length) {
+						position = 0;
+					}
+
+					document
+						.getElementById('triangle-' + i)
+						.setAttribute('fill', colors[position]);
+				}
+
+				position++;
+
+				if (position >= colors.length) {
+					position = 0;
+				}
+			}, 600);
+		});
+
+	document
+		.querySelector('main')
+		.addEventListener('mouseleave', () => {
+			iId && clearInterval(iId);
+		});
+</script>
+{% endblock %}
--- a/source/screens/demo/examples/card.njk
+++ b/source/screens/demo/examples/card.njk
@ -1,83 +0,0 @@
---
-title: Card
-tags:
-  - demoExample
---
-{% set pageId = page.fileSlug %}
-{% set pageClass = "html_card" %}
-
-{% extends "demo/_default.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block body %}
-
-	<!-- {{ page.fileSlug }}.page -->
-	<div class="card_bkg">
-		<div id="dither"></div>
-		{{ ph.flag('svg', '', 'flag', '') }}
-		{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
-	</div>
-	<div class="card_box">
-		<div id="js_content">
-			<p>Titel<br/>und Beschreibung</p>
-			<h1>{{ ph.name() }}</h1>
-			<p>
-				{{ ph.email('card_address') }}<br/>
-				{{ ph.link('decent', 'site.tld') }}
-				&middot;
-				{{ ph.address('decent') }}</p>
-		</div>
-	</div>
-{% endblock %}
-
-{% block script %}
-	<script>
-		const flag = document.getElementById("flag");
-		let colors = new Array();
-		let iId = undefined;
-		let position = 0;
-
-		for (let i = 1; i <= flag.childElementCount; i++) {
-			colors.push(document.getElementById("triangle-" + i).getAttribute("fill"));
-		}
-
-		// console.log(colors);
-
-		document
-			.getElementById('js_content')
-			.addEventListener('mouseenter', () => {
-				iId = setInterval(() => {
-					for (let i = 1; i <= colors.length; i++) {
-						position++;
-
-						if (position >= colors.length) {
-							position = 0;
-						}
-
-						document
-							.getElementById("triangle-" + i)
-							.setAttribute("fill", colors[position]);
-					}
-
-					position++;
-
-					if (position >= colors.length) {
-						position = 0;
-					}
-				}, 600);
-			});
-
-		document
-			.getElementById('js_content')
-			.addEventListener('mouseleave', () => {
-				iId && clearInterval(iId);
-			});
-	</script>
-{% endblock %}
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@ -17,11 +17,13 @@ tags:
 <main></main>
 {% endblock %}

-{% block script %}
+{% block assets %}
 <script src="/vendor/hippie-script.js"></script>
 <script src="/js/globals.js"></script>
 <script src="/js/app.js"></script>
+{% endblock %}

+{% block script %}
 <script>
 	class HippieClock {
 		constructor(element, date = new Date(), options = {}) {
@ -44,7 +46,7 @@ tags:

 		#init() {
 			this.#createContext(['background', 'hands']);
-			this.createOverlay();
+			// this.createOverlay();

 			this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
 			this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
--- a/source/screens/demo/examples/game.liquid
+++ b/source/screens/demo/examples/game.liquid
@ -1,25 +0,0 @@
---
-title: Game - TFW
-tags:
- demoExample
- gameExample
---
-{% assign bodyClass = 'body_game' -%}
-{% layout 'hippie/simple.liquid' %}
-
-{% block body %}
-	<div class="sec_main_center">
-		<nav role="doc-toc">
-			<hgroup>
-				<h1>{{ title }}</h1>
-				<p>Additional name</p>
-			</hgroup>
-			<ul class="list_link">
-				<li><a href="#new">Neues Spiel</a></li>
-				<li><a href="#continue">Spiel fortsetzen</a></li>
-				<li><a href="#options">Einstellungen</a></li>
-				<li><a href="#quit">Spiel beenden</a></li>
-			</ul>
-		</nav>
-	</div>
-{% endblock %}
--- a/source/screens/demo/examples/game/index.liquid
+++ b/source/screens/demo/examples/game/index.liquid
@ -0,0 +1,24 @@
+---
+title: Game
+tags:
+- demoExample
+- index
+---
+{% layout 'hippie/simple.liquid' %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block body %}
+<div class="sec_main_center">
+	<nav role="doc-toc">
+		<h1>{{ title }}</h1>
+		<ul class="link">
+			{%- for game in collections.game -%}
+				<li>
+					<a href="{{ game.page.url }}">{{ game.data.title }}</a>
+				</li>
+			{%- endfor -%}
+		</ul>
+	</nav>
+</div>
+{% endblock %}
--- a/source/screens/demo/examples/game/intro.liquid
+++ b/source/screens/demo/examples/game/intro.liquid
@ -0,0 +1,141 @@
+---
+title: Intro
+tags:
+- game
+---
+{% assign bodyClass = 'body_intro' -%}
+{% layout 'hippie/app.liquid' %}
+
+{% block body %}
+<div id="loader" class="step op_show">
+	<div id="bar">
+		<div id="spinner">
+			<span>I</span>
+		</div>
+		<div id="wrap">
+			<div id="progress"></div>
+		</div>
+		<div id="status">0%</div>
+	</div>
+</div>
+<div id="init" class="step op_hide">
+	<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
+		<p>Hold
+			<kbd>space</kbd>
+			to skip.</p>
+	</div>
+	{% brand 'brand' %}
+	<h1>Marke</h1>
+	{% endbrand %}
+	<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-overlay"></div>
+	<div class="hello">Hello World!</div>
+	<p class="hello">Only left mouse click or any key</p>
+</div>
+{% endblock %}
+
+{% block assets %}
+{{ block.super -}}
+<script src="/js/intro.js"></script>
+{% endblock %}
+
+{%- block script %}
+{{ block.super -}}
+<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('init');
+	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';
+			window.location.href = './menu.html';
+		});
+</script>
+{% endblock %}
--- a/source/screens/demo/examples/game/menu.liquid
+++ b/source/screens/demo/examples/game/menu.liquid
@ -0,0 +1,29 @@
+---
+title: Menu
+tags:
+- game
+---
+{% assign bodyClass = 'body_game' -%}
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<div class="sec_main_center">
+	<nav role="doc-toc">
+		<hgroup>
+			<h1>Game - TFW</h1>
+			<p>Additional name</p>
+		</hgroup>
+		<ul class="link">
+			<li><a href="#new">Neues Spiel</a></li>
+			<li><a href="#continue">Spiel fortsetzen</a></li>
+			<li><a href="#options">Einstellungen</a></li>
+			<li><a href="#quit">Spiel beenden</a></li>
+		</ul>
+	</nav>
+</div>
+<footer>
+	{% brand 'brand', 'last' %}
+	<p>Marke</p>
+	{% endbrand %}
+</footer>
+{% endblock %}
--- a/source/screens/demo/examples/hello.md
+++ b/source/screens/demo/examples/hello.md
@ -1,6 +1,8 @@
 ---
 title: "Hello World"
 layout: hippie/world.liquid
+tags:
+- demoExample
 ---

 # {{ title }}
--- a/source/screens/demo/examples/intro.njk
+++ b/source/screens/demo/examples/intro.njk
@ -1,138 +0,0 @@
---
-title: Intro
-tags: 
-  - demoExample
---
-
-{% set pageId = "init" %}
-{% set bodyClass = "body_intro" %}
-
-{% extends "hippie/_app_frame.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
-
-{% block body %}
-	<div id="loader" class="step op_show">
-		<div id="bar">
-			<div id="spinner">
-				<span>I</span>
-			</div>
-			<div id="wrap">
-				<div id="progress"></div>
-			</div>
-			<div id="status">0%</div>
-		</div>
-	</div>
-	<div id="intro" class="step op_hide">
-		<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
-			<p>Hold
-				<kbd>space</kbd>
-				to skip.</p>
-		</div>
-		{{ ph.brand('brand') }}
-		<p>Powered by</p>
-		<ul class="tech-stack">
-			<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-overlay"></div>
-		<div class="hello">Hello World!</div>
-		<p class="hello">Only left mouse click or any key</p>
-	</div>
-{% endblock %}
-
-{%- block script %}
-	{{ super() }}
-	<script src="{{ pageBase }}js/intro.js"></script>
-	<script>
-		//let intro = new Intro('Intro');
-		//intro.init();
-
-		//const ui = new UI();
-		//ui
-		//  .init()
-		//  .then(() => ui.showIntro())
-		//  .then(() => ui.showHint())
-		//  .then(() => ui.showIdle())
-		//  .catch((error) => console.error(error));
-
-		let introDelay = 6;
-		let hintDelay = 1;
-		let cycleDelay = 2;
-		let isAgree = false;
-		const steps = {
-			agreement: {
-				element: document.getElementById('agreement'),
-				msgIn: 'Agreement shown.',
-				msgOut: 'Agreement accepted.',
-				msgNo: 'No agreement today.'
-			}
-		};
-		const intro = document.getElementById('intro');
-		const agreement = steps.agreement.element;
-		const hint = {
-			element: document.getElementById('hint'),
-			delay: hintDelay * 1000,
-			show() {
-				if (typeof this.timeoutId === 'number') {
-					this.cancel();
-				}
-				this
-					.element
-					.classList
-					.remove('di_none');
-				this.timeoutId = setTimeout(() => {
-					this.dismiss();
-				}, this.delay);
-			},
-			dismiss() {
-				this
-					.element
-					.classList
-					.add('di_none');
-				this.timeoutId = undefined;
-			},
-			cancel() {
-				clearTimeout(this.timeoutId);
-			}
-		};
-		const loader = document.getElementById('loader');
-		const idle = {
-			element: document.getElementById('idle'),
-			delay: cycleDelay * 1000,
-			position: 0,
-			cycle() {
-				if (typeof this.intervalId === 'number') {
-					this.cancel();
-				}
-				this.intervalId = setInterval(() => {
-					this.position++;
-					if (this.position >= flagColors.length) {
-						this.position = 0;
-					}
-					this.element.style.backgroundColor = '#' + flagColors[this.position];
-				}, this.delay);
-			},
-			cancel() {
-				this.intervalId && clearInterval(this.intervalId);
-			}
-		}
-		init()
-			.then(loadCore)
-			.then(showIntro)
-			.catch(er => console.error(er))
-			.then(showAgreement)
-			.then(showIdle)
-			.catch(er => console.error(er))
-			.finally(() => {
-				console.debug('Init end.', isAgree);
-				// location = 'demo/examples/ui/new.html';
-			});
-	</script>
-{% endblock %}
--- a/source/screens/demo/examples/portal.liquid
+++ b/source/screens/demo/examples/portal.liquid
@ -0,0 +1,29 @@
+---
+title: Portal
+tags:
+- demoExample
+image:
+  src: '/art/flag_websafe_128x80.gif'
+  alt: 'Flag of Interaktionsweise'
+links:
+- name: '1'
+  href: 'http://domain.tld'
+  img: '/art/bullet.gif'
+- name: 'Zwei'
+  href: 'http://domain.tld'
+  img: '/art/bullet.gif'
+---
+{% assign bodyClass = "body_portal" %}
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<div class="portal">
+	{% render 'hippie/partials/gate-list',
+		name: 'Tor mit Symbol und Liste',
+		url: '../demo',
+		image: image,
+		links: links
+	%}
+	{% render 'hippie/partials/gate-simple', name: 'Tor', url: '../demo' %}
+</div>
+{% endblock %}
--- a/source/screens/demo/examples/portal.njk
+++ b/source/screens/demo/examples/portal.njk
@ -1,41 +0,0 @@
---
-title: Portal
-tags:
-  - demoExample
---
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_portal" %}
-
-{% extends "demo/_default.njk" %}
-{% import "hippie/macros/_gate.njk" as gate %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block body %}
-	<!-- {{ page.fileSlug }}.page -->
-	<div class="portal">
-		{{ gate.list(
-		'Tor mit Symbol und Liste',
-		'../demo', {
-			src: '/art/flag_websafe_128x80.gif',
-			alt: 'Flag of Interaktionsweise'
-		}, [
-			{
-				name: '1',
-				href: 'http://domain.tld',
-				img: '../art/bullet.gif'
-			}, {
-				name: 'Zwei',
-				href: 'http://domain.tld',
-				img: '../art/bullet.gif'
-			}
-		]
-		) }}
-		{{ gate.simple('Tor', '../demo') }}
-	</div>
-{% endblock %}
--- a/source/screens/demo/examples/songbook.liquid
+++ b/source/screens/demo/examples/songbook.liquid
@ -0,0 +1,39 @@
+---
+title: Songbook
+tags:
+- demoExample
+---
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<div class="sec_main_center">
+	<header class="header_txt">
+		<h1>Titel</h1>
+		<p>Jahr</p>
+	</header>
+	<nav role="doc-toc">
+		<h2>Inhaltsverzeichnis</h2>
+		<ul>
+			{%- for song in collections.song -%}
+				<li>
+					<a href="{{ song.page.url }}">{{ song.data.title }}</a>
+				</li>
+			{%- endfor -%}
+		</ul>
+	</nav>
+	<h2>Vorwort</h2>
+	<p>Liederbuch für
+		<em>Name</em>.</p>
+	<p>Gibt es gebunden und hier
+		{% link hippie.placeholders.domain %}.<br/>
+		Bestellungen bitte an
+		{% text hippie.placeholders.name %}
+		richten.</p>
+	<hr class="double dotted">
+	{%- for piece in collections.song -%}
+		{% render 'hippie/partials/song.liquid', index: forloop.index0, data: piece.data, content: piece.content %}
+	{%- endfor -%}
+	<hr/>
+	<address>{% text hippie.placeholders.name %}</address>
+</div>
+{% endblock %}
--- a/source/screens/demo/examples/songbook.njk
+++ b/source/screens/demo/examples/songbook.njk
@ -1,52 +0,0 @@
---
-title: Songbook
-tags:
-  - demoExample
---
-{% set pageBase = "../" %}
-{% set pageId = page.fileSlug %}
-
-{% extends "demo/_default.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
-{% import "hippie/macros/_song.njk" as song %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block body %}
-	<!-- {{ page.fileSlug }}.page -->
-	<div class="sec_main_center">
-		<header class="header_txt">
-			<h1>Titel</h1>
-			<p>Jahr</p>
-		</header>
-		<nav role="doc-toc">
-			<h2>Inhaltsverzeichnis</h2>
-			<ul>
-				{%- for song in collections.song -%}
-					<li>
-						<a href="{{ song.page.url }}">{{ song.data.title }}</a>
-					</li>
-				{%- endfor -%}
-			</ul>
-		</nav>
-		<h2>Vorwort</h2>
-		<p>Liederbuch für
-			<em>Name</em>.</p>
-		<p>Gibt es gebunden und hier
-			{{ ph.link() }}.<br/>
-			Bestellungen bitte an
-			{{ ph.name() }}
-			richten.</p>
-		<hr class="double dotted">
-		{%- for piece in collections.song -%}
-			{{ song.simple(loop.index0, piece.data, piece.content) }}
-		{%- endfor -%}
-		<hr/>
-		<address>{{ ph.name() }}</address>
-	</div>
-{% endblock %}
--- a/source/screens/demo/examples/ui/drag.liquid
+++ b/source/screens/demo/examples/ui/drag.liquid
@ -21,9 +21,12 @@ tags:
 </div>
 {% endblock %}

-{%- block script %}
-<script src="/js/app.js"></script>
+{% block assets %}
+{{ block.super -}}
 <script src="/js/drag.js"></script>
+{% endblock %}
+
+{%- block script %}
 <script>
 	// Get the space element
 	const space = document.getElementById('space');
--- a/source/screens/demo/examples/ui/index.liquid
+++ b/source/screens/demo/examples/ui/index.liquid
@ -12,7 +12,7 @@ tags:
 <div class="sec_main_center">
 	<nav role="doc-toc">
 		<h1>{{ title }}</h1>
-		<ul class="list_link">
+		<ul class="link">
 			{%- for ui in collections.ui -%}
 				<li>
 					<a href="{{ ui.page.url }}">{{ ui.data.title }}</a>
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@ -49,10 +49,13 @@ tags:
 </div>
 {% endblock %}

+{% block assets %}
+{{ block.super -}}
+<script src="/js/windows.js"></script>
+{% endblock %}
+
 {%- block script %}
 {{ block.super -}}
-
-<script src="/js/windows.js"></script>
 <script>
 	console.log(HIPPIE.brand);
 	// Get the space element
--- a/source/screens/demo/index.liquid
+++ b/source/screens/demo/index.liquid
@ -1,8 +1,6 @@
 ---
-permalink: "/"
+permalink: "{{ hippie.demoPath }}"
 title: Index
-tags:
- demoIndex
 ---
 {% assign pageId = page.fileSlug -%}
 {% assign pageClass = 'h_full_view' -%}
@ -34,32 +32,39 @@ tags:
 			<h3>Overview</h3>
 		</div>
 		<nav>
-			<ul class="list_link">
-				{% for link in collections.demoIndex %}
+			<ul class="block link">
+				{% assign indexByOrder = collections.demoIndex | sort: 'data.order' %}
+				{% for link in indexByOrder %}
 					<li>
 						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
 					</li>
 				{% endfor %}
 			</ul>
 		</nav>
-		<h3>Page</h3>
-		<ul class="list_link">
-			{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
-
-			{% for link in pagesByTitle %}
-				<li>
-					<a href="{{ link.page.url }}">{{ link.data.title }}</a>
-				</li>
-			{% endfor %}
-		</ul>
-		<h3>Example</h3>
-		<ul class="list_link">
-			{% for link in collections.demoExample %}
-				<li>
-					<a href="{{ link.page.url }}">{{ link.data.title }}</a>
-				</li>
-			{% endfor %}
-		</ul>
+		<div class="responsive">
+			<section>
+				<h3>Page</h3>
+				<ul class="block link">
+					{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
+					{% for link in pagesByTitle %}
+						<li>
+							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
+						</li>
+					{% endfor %}
+				</ul>
+			</section>
+			<section>
+				<h3>Example</h3>
+				<ul class="block link">
+					{% assign examplesByTitle = collections.demoExample | sort: 'data.title' %}
+					{% for link in examplesByTitle %}
+						<li>
+							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
+						</li>
+					{% endfor %}
+				</ul>
+			</section>
+		</div>
 	</div>
 </div>
 {% endblock %}
--- a/source/screens/demo/introduction.liquid
+++ b/source/screens/demo/introduction.liquid
@ -2,6 +2,7 @@
 title: Introduction
 tags:
 - demoIndex
+order: 1
 ---
 {% layout 'hippie/page.liquid' %}

@ -28,13 +29,7 @@ tags:
 {% block script %}
 {{ block.super -}}
 <script>
-	assetsLoaded = true;
-	logPerf('Assets loaded.', assetsLoaded);
-	// Page specific
-	// ------------------------------------------------------------------------------
 	composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
 	composeMail('.general', 'name', 'domain', 'tld', '', '')
-
-	logPerf('Application ready... not.');
 </script>
 {% endblock %}
--- a/source/screens/demo/layouts.liquid
+++ b/source/screens/demo/layouts.liquid
@ -2,6 +2,7 @@
 title: Layouts
 tags:
 - demoIndex
+order: 4
 ---
 {% layout 'hippie/page.liquid' %}

@ -14,7 +15,7 @@ tags:
 		<p>Die Elemente werden fortlaufend komplexer</p>
 	</header>
 	<article>
-		<h2>Bereiche (sections)</h2>
+		<h2 id="sections">Bereiche (sections)</h2>
 		<h3>section</h3>
 		<pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre>
 		<section class="overflow">
@ -168,46 +169,9 @@ tags:
 				</footer>
 			</div>
 		</div>
-
-		<h2>Interaktiv (interactive)</h2>
-		<h3>input</h3>
-		<div class="flex inline">
-			<input value="Undefiniert"/>
-			<input type="text" size="8" value="Text"/>
-			<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
-			<input type="button" value="Auswählen">
-			<input type="submit" value="Senden" disabled="disabled"/>
-		</div>
-		<h3>form</h3>
-		<form method="get">
-			<p>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 (grouping)</h2>
+	</article>
+	<article>
+		<h2 id="grouping">Gruppierung (grouping)</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>
@ -231,9 +195,9 @@ tags:
 		<pre class="pre_code"><code>hr.dotted.space_even_fourth</code></pre>
 		<hr class="dotted space_even_fourth">
 		<h3>ul</h3>
-		<pre class="pre_code"><code>nav>ul.list_link>(li>a)+li>a>img+span</code></pre>
+		<pre class="pre_code"><code>nav>ul.link>(li>a)+li>a>img+span</code></pre>
 		<nav>
-			<ul class="list_link">
+			<ul class="link">
 				<li>{% link hippie.placeholders.mail, '📧 name@domain.tld' %}</li>
 				<li>
 					<a href=""><img src="/art/bullet.gif" alt="">{% text hippie.placeholders.name %}</a>
@ -247,8 +211,15 @@ tags:
 			<p>Eingerückter Inhalt</p>
 			<hr/>
 		</div>
-
-		<h2>Tabellen</h2>
+	</article>
+	<article>
+		<h2>Eingebettet</h2>
+		<div class="demo__flag">
+			{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
+		</div>
+	</article>
+	<article>
+		<h2 id="tabularData">Tabellen (tabular data)</h2>
 		<pre class="pre_code"><code>table.link>thead>tr>th{&amp;nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.icon[rowspan="2"]>img[width=16 height=16]^+td.link>span{name}+a[target=_blank]{url}^+td[rowspan="2"]{yyy-mm-dd}^tr>td.text>div.shorten{beschreibung})*2</code></pre>
 		<table class="link js_pop">
 			<thead>
@ -289,23 +260,67 @@ tags:
 			</tr>
 			</tbody>
 		</table>
-
-		<h2>Eingebettet</h2>
-		<div class="demo__flag">
-			{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
+	</article>
+	<article>
+		<h2 id="forms">Formulare (forms)</h2>
+		<h3>form</h3>
+		<form method="get">
+			<p>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>
+		<hr class="hidden">
+		<form action="" name="login">
+			<div>
+				<p>Anmeldung</p>
+				<input placeholder="Benutzername" name="username" type="text" autocomplete="username">
+				<input placeholder="Passwort" name="password" type="password" autocomplete="current-password">
+			</div>
+		</form>
+		<h3>input</h3>
+		<div class="flex inline">
+			<input value="Undefiniert"/>
+			<input type="text" size="8" value="Text"/>
+			<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
+			<input type="button" value="Auswählen">
+			<input type="submit" value="Senden" disabled="disabled"/>
 		</div>
 	</article>
+	<article>
+		<h2 id="interactive">Interaktiv (interactive)</h2>
+	</article>
 </section>
 {% endblock %}

+{% block assets %}
+{{ block.super -}}
+<script src="/vendor/jq-sticky-anything.min.js"></script>
+{% endblock %}
 {% block script %}
 {{ block.super -}}
-<script src="/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
 <script>
-	assetsLoaded = true;
-	logPerf('Assets loaded.', assetsLoaded);
-	// Page specific
-	// ------------------------------------------------------------------------------
 	$(document).ready(function () {
 		// jq-sticky-anything
 		$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
--- a/source/style/demo.scss
+++ b/source/style/demo.scss
@ -16,4 +16,5 @@
@use "modules/start";
@use "modules/clock";
@use "modules/game";
+@use "modules/login";
 // @use "modules/YOUR-MODULE/YOUR-FILES";
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@ -1 +1 @@
-Subproject commit ddedf3bbf2d6580dfeae297367fd673abaa11a96
+Subproject commit b4c56320060548dacde62639876c6aee72b297ea
--- a/source/style/modules/_game.scss
+++ b/source/style/modules/_game.scss
@ -1,3 +1,27 @@
+@use "../hippie-style/hippie";
+
 .body_game {
+	@extend .h_full_view;
 	background-color: hotpink;
+
+	footer {
+		@extend .pos_abs;
+		@extend .pin_bottom;
+		@extend .width_full;
+
+		.brand {
+			display: flex;
+			flex-flow: row nowrap;
+			align-items: center;
+			justify-content: flex-end;
+			gap: hippie.$space_half hippie.$space_basic;
+
+			margin: hippie.$space_basic hippie.$space_double;
+
+			& > svg {
+				height: 32px;
+				width: 32px;
+			}
+		}
+	}
 }
--- a/source/style/modules/_login.scss
+++ b/source/style/modules/_login.scss
@ -0,0 +1,28 @@
+@use "sass:color";
+@use "../hippie-style/hippie";
+
+form[name="login"] {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	& > div {
+		padding: hippie.$space_double;
+		background-color: color.adjust(hippie.basic_color(echo), $alpha: -0.4);
+
+		p {
+			margin-top: 0;
+			color: hippie.$color_brightest;
+		}
+
+		& > input {
+			display: block;
+			width: 100%;
+			margin-inline: 0;
+		}
+
+		input:first-of-type {
+			margin-bottom: hippie.$space_basic;
+		}
+	}
+}
--- a/source/style/modules/card/_card_module.scss
+++ b/source/style/modules/card/_card_module.scss
@ -32,7 +32,7 @@
 				// text-align: center;
 			}

-			& > div {
+			& > main {
 				position: relative;
 				padding: 64px 64px 24px 64px;
 				border: 1px solid #FFF;
--- a/source/style/modules/demo/_demo_module.scss
+++ b/source/style/modules/demo/_demo_module.scss
@ -281,10 +281,19 @@
 	.hello {
 		flex: 0 1 auto;
 		width: 80%;
+	}

-		ul {
-			padding: 1em 5em;
-			background-color: hippie.$color_darker;
+	.responsive {
+		@include hippie.forTabletPortraitUp {
+			display: flex;
+			flex-flow: row wrap;
+			align-items: stretch;
+			justify-content: space-between;
+			gap: hippie.$space_half hippie.$space_basic;
+
+			& > * {
+				flex: auto;
+			}
 		}
 	}
 }
--- a/source/style/modules/portal/_portal_module.scss
+++ b/source/style/modules/portal/_portal_module.scss
@ -129,7 +129,7 @@ $portal_icon_size: 64px;
 }

 .portal__list {
-  @extend .list_link;
+  @extend .link;

  display: none;
  position: relative;
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@ -33,146 +33,162 @@ $space_gui_half: hippie.$space_half;

 .body_intro {
 	background-color: black;
-}

-.step {
-	@extend %full_parent;
-}
-
-#loader {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	background-color: white;
-}
-
-#bar {
-	display: flex;
-	justify-content: space-between;
-	width: 50%;
-}
-
-#wrap {
-	flex: 1;
-	background-color: hippie.$color_back_basic;
-}
-
-#progress {
-	width: 0;
-	height: 100%;
-	background-color: black;
-}
-
-#status,
-#spinner {
-	@extend %basic;
-
-	display: flex;
-	flex-grow: 0;
-	flex-shrink: 0;
-	justify-content: center;
-	align-items: center;
-	margin-inline: $space_gui_half;
-	padding-block: calc($space_gui_half - 1px) $space_gui_half;
-	line-height: hippie.$line_basic;
-	text-align: center;
-}
-
-#status {
-	width: 4em;
-	background-color: black;
-	color: white;
-}
-
-#spinner {
-	width: 2.5em;
-	background-color: hippie.$color_back_basic;
-	color: black;
-
-	span {
-		animation: rotate 1s linear infinite;
-	}
-}
-
-@keyframes rotate {
-	from {
-		transform: rotate(0deg);
+	.step {
+		@extend %full_parent;
 	}

-	to {
-		transform: rotate(360deg);
-	}
-}
-
-#intro {
-	z-index: map.get(hippie.$z-indexes, "content-top");
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	background-color: black;
-
-	h1,
-	p,
-	li {
-		color: white;
-	}
-}
-
-.brand {
-	text-align: center;
-
-	img {
-		display: inline-block;
-		width: 128px;
-		height: 128px;
+	#loader {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
 		background-color: white;
 	}

-	*+h1 {
-		margin-top: hippie.$space_small;
-		margin-bottom: hippie.$space_large;
+	#bar {
+		display: flex;
+		justify-content: space-between;
+		width: 50%;
 	}
-}

-.tech-stack {
-	display: flex;
-	padding-left: 0;
-
-	li {
-		list-style: none;
-		padding-inline: hippie.$space_double;
+	#wrap {
+		flex: 1;
+		background-color: hippie.$color_back_basic;
 	}
-}

-#agreement,
-#idle {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 100vh;
-}
-
-#agreement {
-	flex-direction: column;
-	background-color: map.get(hippie.$color_palette, bravo);
-	user-select: none;
-
-	h1 {
-		margin-top: 0;
-		color: hippie.$color_brightest;
+	#progress {
+		width: 0;
+		height: 100%;
+		background-color: black;
 	}
-}

-#idle {
-	background-color: hippie.$color_back_basic;
-	transition: background-color 4s;
+	#status,
+	#spinner {
+		@extend %basic;

-	&:hover>.mouse-overlay {
-		background-color: transparent !important;
-		transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
+		display: flex;
+		flex-grow: 0;
+		flex-shrink: 0;
+		justify-content: center;
+		align-items: center;
+		margin-inline: $space_gui_half;
+		padding-block: calc($space_gui_half - 1px) $space_gui_half;
+		line-height: hippie.$line_basic;
+		text-align: center;
+	}
+
+	#status {
+		width: 4em;
+		background-color: black;
+		color: white;
+	}
+
+	#spinner {
+		width: 2.5em;
+		background-color: hippie.$color_back_basic;
+		color: black;
+
+		span {
+			animation: rotate 1s linear infinite;
+		}
+	}
+
+	@keyframes rotate {
+		from {
+			transform: rotate(0deg);
+		}
+
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	#init {
+		z-index: map.get(hippie.$z-indexes, "content-top");
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		background-color: black;
+
+		h1,
+		p,
+		li {
+			color: white;
+		}
+	}
+
+	.brand {
+		text-align: center;
+
+		svg {
+			height: 128px;
+			width: 128px;
+
+			rect, circle, path {
+				stroke: white !important;
+			}
+		}
+
+		img {
+			display: inline-block;
+			width: 128px;
+			height: 128px;
+			background-color: white;
+		}
+
+		* + h1 {
+			margin-top: hippie.$space_small;
+			margin-bottom: hippie.$space_large;
+		}
+	}
+
+	.tech-stack {
+		display: flex;
+		padding-left: 0;
+
+		li {
+			list-style: none;
+			padding-inline: hippie.$space_double;
+		}
+	}
+
+	#agreement,
+	#idle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100vh;
+	}
+
+	#agreement {
+		flex-direction: column;
+		background-color: map.get(hippie.$color_palette, bravo);
+		user-select: none;
+
+		h1 {
+			margin-top: 0;
+			color: hippie.$color_brightest;
+		}
+	}
+
+	#idle {
+		background-color: hippie.$color_back_basic;
+		transition: background-color 4s;
+
+		&:hover > .mouse-overlay {
+			background-color: transparent !important;
+			transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
+		}
+
+		.hello {
+			flex: 0 1 auto;
+			padding: 1em 2em;
+			background-color: rgba(hippie.$color_bright, .5);
+			font-family: hippie.$family_text_mono;
+		}
 	}
 }

@ -191,10 +207,3 @@ $space_gui_half: hippie.$space_half;
 		color: hippie.$color_back_io;
 	}
 }
-
-.hello {
-	flex: 0 1 auto;
-	padding: 1em 2em;
-	background-color: rgba(hippie.$color_bright, .5);
-	font-family: hippie.$family_text_mono;
-}
--- a/source/templates/demo/_default.njk
+++ b/source/templates/demo/_default.njk
@ -1,19 +0,0 @@
-<!-- demo.default.template -->
-{% extends "hippie/_default.njk" %}
-
-{% block meta %}
-	{% include "demo/partials/_meta.njk" %}
-	<base href="/">
-{% endblock %}
-
-{% block links %}
-	{{ super() }}
-	<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
-	{# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
-	{# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/> #}
-{% endblock %}
-
-{% block script %}
-	{{ super() }}
-	<script src="/vendor/jquery.min.js"></script>
-{% endblock %}
--- a/source/templates/demo/_main.njk
+++ b/source/templates/demo/_main.njk
@ -1,21 +0,0 @@
-<!-- demo.main.template -->
-{% extends "hippie/_main.njk" %}
-
-{% block meta %}
-	{% include "demo/partials/_meta.njk" %}
-	<base href="/">
-{% endblock %}
-
-{% block links %}
-	{{ super() }}
-	{% if hippie.legacyMode %}
-		<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
-		<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]-->
-		<!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
-		<!--Only use one of the above!-->
-	{% endif %}
-
-	<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
-	<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
-	<!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
-{% endblock %}
--- a/source/templates/demo/partials/_meta.njk
+++ b/source/templates/demo/partials/_meta.njk
@ -1,9 +0,0 @@
-<!-- meta.partial -->
-<meta name="author" content="Interaktionsweise">
-<meta name="generator" content="Visual Studio Code, Atom, Notepad++">
-<meta name="description" content="Hippie interweaves preeminent personal interface elements">
-<meta name="robots" content="noindex">
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-{# <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> #}
-{# <meta http-equiv="X-UA-Compatible" content="IE=edge" /> #}
--- a/source/templates/demo/partials/exp-colors.njk
+++ b/source/templates/demo/partials/exp-colors.njk
@ -1,7 +0,0 @@
-<!-- explanation-colors.partial -->
-{# var colors = [{name: "alpha", class: "alpha_color"}] #}
-
-{% set cls = cycler("odd", "even") %}
-{% for row in rows %}
-  <div class="{{ cls.next() }}">{{ row.name }}</div>
-{% endfor %}
--- a/source/templates/hippie/_app.njk
+++ b/source/templates/hippie/_app.njk
@ -1,52 +0,0 @@
-<!-- app.template -->
-<!DOCTYPE html>
-<html lang="de" class="html_ui" id="{{ pageId }}">
-	<head>
-		<meta charset="utf-8">
-
-		{% block head %}
-			<title>{{ hippie.titlePrefix }}
-				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
-
-			{% block meta %}
-				{% include "hippie/partials/_head_meta.njk" %}
-				<base href="/">
-			{% endblock %}
-
-			{% block links %}{% endblock %}
-
-		{% endblock %}
-	</head>
-
-	<body class="{{ bodyClass if bodyClass else 'body_frame' }}">
-		{% block body %}{% endblock %}
-
-		{% block script %}
-			<script src="/vendor/jquery.min.js"></script>
-			<script src="/vendor/hippie-script.js"></script>
-			<script src="{{ pageBase }}js/globals.js"></script>
-			<script src="{{ pageBase }}js/app.js"></script>
-
-			<script>
-				const frameHeader = document.querySelector('body > header.io');
-				const closeActionElements = document.querySelectorAll('[data-action=close]');
-
-				if (frameHeader) {
-					console.log('frame header found', frameHeader);
-
-					frameHeader.addEventListener('click', (e) => {
-						if (e.target.dataset.action === 'close') {
-							console.debug('close', e.target);
-
-							history.back();
-
-							if (closeActionElements.length > 1) {
-								console.debug('other frames present', closeActionElements.length);
-							}
-						}
-					});
-				}
-			</script>
-		{% endblock %}
-	</body>
-</html>
--- a/source/templates/hippie/_app_frame.njk
+++ b/source/templates/hippie/_app_frame.njk
@ -1,19 +0,0 @@
-<!-- frame.app.template -->
-{% extends "hippie/_app.njk" %}
-{% import "hippie/macros/_io.njk" as io %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block title %}{{ title }}{% endblock %}
-
-{% block links %}
-	{{ super() }}
-	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
-	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block script %}
-	{{ super() }}
-{% endblock %}
--- a/source/templates/hippie/_default.njk
+++ b/source/templates/hippie/_default.njk
@ -1,41 +0,0 @@
-<!-- default.template -->
-{# {% if hippie.debugMode %} #}
-  {% import "hippie/macros/_log.njk" as log %}
-{# {% endif %} #}
-
-<!DOCTYPE html>
-<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-  <head>
-    <meta charset="utf-8">
-
-    {% block head %}
-      <title>{{ hippie.titlePrefix }}
-        {%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
-
-      {% block meta %}
-        {% include "hippie/partials/_head_meta.njk" %}
-      {% endblock %}
-
-      {% include "hippie/partials/_head_script.njk" %}
-      {# {{ log.debug(true) }} #}
-      {{ log.start() }}
-
-      {% block links %}
-        {% include "hippie/partials/_head_links.njk" %}
-      {% endblock %}
-
-      {{ log.log('HEAD end    :: Links parsed, starting to load.') }}
-    {% endblock %}
-  </head>
-
-  <body class="{{ bodyClass }}">
-    {{ log.log('BODY start') }}
-    {% block body %}{% endblock %}
-
-    {% block script %}
-      {{ log.log('BODY        :: Loading script assets...') }}
-    {% endblock %}
-
-    {{ log.log('BODY end    :: Page script might still be loading.') }}
-  </body>
-</html>
--- a/source/templates/hippie/_main.njk
+++ b/source/templates/hippie/_main.njk
@ -1,73 +0,0 @@
-<!-- main.template -->
-{% import "hippie/macros/_log.njk" as log %}
-
-<!DOCTYPE html>
-<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-	<head>
-		<meta charset="utf-8">
-
-		{% block head %}
-			<title>{{ hippie.titlePrefix }}
-				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
-
-			{% block meta %}
-				{% include "hippie/partials/_head_meta.njk" %}
-			{% endblock %}
-
-			{% include "hippie/partials/_head_script.njk" %}
-			{{ log.debug(hippie.debugMode, true) }}
-			{{ log.start() }}
-
-			{% block links %}
-				{% include "hippie/partials/_head_links.njk" %}
-			{% endblock %}
-
-			{{ log.log('HEAD end    :: Links parsed, starting to load.') }}
-		{% endblock %}
-	</head>
-
-	<body class="{{ bodyClass }}">
-		{{ log.log('BODY start') }}
-		{% include "hippie/partials/_body_nav.njk" %}
-		<div id="root">
-			{% include "hippie/partials/_header.njk" %}
-
-			<main class="main_site">
-				{% block main %}{% endblock %}
-			</main>
-
-			{% include "hippie/partials/_footer.njk" %}
-		</div>
-
-		{% block script %}
-			{{ log.log('BODY        :: Loading script assets...') }}
-			{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
-			<script src="/vendor/jquery.min.js"></script>
-			<script src="/vendor/hippie-script.js"></script>
-			<script src="{{ pageBase }}js/globals.js"></script>
-			<script src="{{ pageBase }}js/app.js"></script>
-			<script>
-				// Setup global things for all screens
-				setup();
-
-				// Create instances of objects made by constructor functions
-				let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
-				let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
-
-				if (viewHover) {
-					let fadeUi = new HippieFade(document.getElementById('js-toggle-fade'), true);
-				}
-
-				document.addEventListener('scroll', () => {
-					scrollUi.check();
-				});
-
-				$(document).ready(function () {
-					logPerf('EVENT       :: jQuery \'ready\' event fired.');
-				});
-			</script>
-		{% endblock %}
-
-		{{ log.log('BODY end    :: Page script might still be loading.') }}
-	</body>
-</html>
--- a/source/templates/hippie/app.liquid
+++ b/source/templates/hippie/app.liquid
@ -10,12 +10,14 @@
 <link href="/css/ui.css" media="all" rel="stylesheet"/>
 {% endblock %}

-{% block script %}
+{% block assets %}
 <script src="/vendor/jquery.min.js"></script>
 <script src="/vendor/hippie-script.js"></script>
 <script src="/js/globals.js"></script>
 <script src="/js/app.js"></script>
+{% endblock %}

+{% block script %}
 <script>
 	const frameHeader = document.querySelector('body > header.io');
 	const closeActionElements = document.querySelectorAll('[data-action=close]');
@ -36,4 +38,4 @@
 		});
 	}
 </script>
-{% endblock %}
+{% endblock %}
--- a/source/templates/hippie/default.liquid
+++ b/source/templates/hippie/default.liquid
@ -28,6 +28,7 @@

 <body{{ bodyClassAttr }}>
 {%- block body %}{% endblock -%}
+{%- block assets %}{% endblock -%}
 <script>
 	// {{ title }} script using default template
 </script>
--- a/source/templates/hippie/full.liquid
+++ b/source/templates/hippie/full.liquid
@ -36,12 +36,13 @@
 {% render 'hippie/partials/log-log' with 'BODY start' as msg -%}
 {%- block body %}{% endblock -%}
 {% render 'hippie/partials/log-log' with 'BODY        :: Loading script assets...' as msg -%}
+{%- block assets %}{% endblock -%}
+{% render 'hippie/partials/log-assets', state: true -%}
+{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
 <script>
 	// {{ title }} script using full template
 </script>
 {%- block script %}{% endblock -%}
-{% render 'hippie/partials/log-assets', state: true -%}
-{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
 {% render 'hippie/partials/log-log' with 'BODY end    :: Page script might still be loading.' as msg -%}
 {% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
 </body>
--- a/source/templates/hippie/macros/_footer.njk
+++ b/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 %}
--- a/source/templates/hippie/macros/_gate.njk
+++ b/source/templates/hippie/macros/_gate.njk
@ -1,30 +0,0 @@
-{% macro list(name, url, image, links) %}
-	<article class="portal__entry">
-		<section>
-			<h2>
-				<a class="a_discreet" href="{{ url }}">{{ name }}</a>
-			</h2>
-			<a class="portal__link portal__link--{{ name | slug }}" href="{{ url }}">
-				<img src="{{ image.src }}" alt="{{ image.alt }}"/>
-			</a>
-			{% if links %}
-				<ul class="portal__list">
-					{% for link in links %}
-						<li>
-							<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
-						</li>
-					{% endfor %}
-				</ul>
-			{% endif %}
-		</section>
-	</article>
-{% endmacro %}
-{% macro simple(name, url) %}
-	<article class="portal__entry">
-		<section>
-			<h2>
-				<a class="a_discreet" href="{{ url }}">{{ name }}</a>
-			</h2>
-		</section>
-	</article>
-{% endmacro %}
--- a/source/templates/hippie/macros/_header.njk
+++ b/source/templates/hippie/macros/_header.njk
@ -1,30 +0,0 @@
-{% macro main() %}
-	<header class="header_site">
-		<div id="begin"></div>
-	</header>
-{% endmacro %}
-
-{% macro status(hippie, page) %}
-	{% import "hippie/macros/_state.njk" as state %}
-	<div id="top">
-		<h1 class="brand">
-			<a href="#">{{ hippie.brand | upper }}</a>
-		</h1>
-		<nav>
-			<ul>
-				{% for link in page %}
-					<li>
-						<a href="{{ link.href }}">{{ link.text }}</a>
-					</li>
-				{% endfor %}
-			</ul>
-		</nav>
-		<div class="state">
-			<p>{{ state.coord("log")}}
-        /
-        {{ state.date("date")}}
-        /
-        {{ state.time("time")}}</p>
-		</div>
-	</div>
-{% endmacro %}
--- a/source/templates/hippie/macros/_io.njk
+++ b/source/templates/hippie/macros/_io.njk
@ -1,49 +0,0 @@
-{% macro frameHeader(title) %}
-	<header class="io">
-		<nav>
-			<button title="menu">
-				<i class="bi bi-three-dots"></i>
-			</button>
-			<span>{{ title }}</span>
-		</nav>
-		<nav>
-			<div class="spacer a"></div>
-			<button title="minimize">
-				<i class="bi bi-dash"></i>
-			</button>
-			<button title="maximize">
-				<i class="bi bi-fullscreen"></i>
-			</button>
-			<button title="close" data-action="close">
-				<i class="bi bi-x-square"></i>
-			</button>
-		</nav>
-	</header>
-{% endmacro %}
-
-{% macro frameFooter(title) %}
-	<footer class="io">
-		<nav>
-			<button>mode</button>
-			<span>{{ title }}</span>
-		</nav>
-		<nav>
-			<div class="spacer a"></div>
-			<button>action</button>
-		</nav>
-	</footer>
-{% endmacro %}
-
-{% macro statusBar(title) %}
-	<footer class="io">
-		<nav>
-			<span>## items</span>
-			<span># selected (size)</span>
-			<span># type(s)</span>
-			<span># shared</span>
-		</nav>
-		<nav>
-			<span>{{ title | default('status-bar') }}</span>
-		</nav>
-	</footer>
-{% endmacro %}
--- a/source/templates/hippie/macros/_log.njk
+++ b/source/templates/hippie/macros/_log.njk
@ -1,24 +0,0 @@
-{% macro start() %}
-	<script>
-		logAdd('EVENT       :: Document \'%s\' event fired.', 'DOMContentLoaded');
-		logPerf('HEAD start  :: Debugging performance...', debugOn);
-	</script>
-{% endmacro %}
-{% macro log(msg, arg = '') %}
-	<script>
-		logPerf('{{ msg }}', {{ arg }});
-	</script>
-{% endmacro %}
-{% macro debug(state = false, display = false, assets = false) %}
-	{# {{ set hippie.debugMode = state }} #}
-	<script>
-		debugOn = {{ state }};
-		debugOnScreen = {{ display }};
-		assetsLoaded = {{ assets }};
-	</script>
-{% endmacro %}
-{% macro asset(state = false) %}
-	<script>
-		assetsLoaded = {{ state }};
-	</script>
-{% endmacro %}
--- a/source/templates/hippie/macros/_nav.njk
+++ b/source/templates/hippie/macros/_nav.njk
@ -1,13 +0,0 @@
-{% macro main(data, active = '') %}
-	<nav>
-		<ul>
-			{% for link in data %}
-				<li{%if active == link.text %} class="active_txt" {% endif %}>
-					{%if active == link.text %}{{ link.text }}{%else%}
-						<a href="{{ link.href }}">{{ link.text }}</a>
-					{% endif %}
-				</li>
-			{% endfor %}
-		</ul>
-	</nav>
-{% endmacro %}
--- a/source/templates/hippie/macros/_placeholder.njk
+++ b/source/templates/hippie/macros/_placeholder.njk
@ -1,100 +0,0 @@
-{% macro email(class = '', text = '', address = 'name@domain.tld') %}
-	{% if text === '' %}
-		{% set text = address %}
-	{% endif %}
-
-	<a class="{{ class }}" href="mailto:{{ address }}">{{ 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 phone(class = '', text = '+49 (0)101 1337 48') %}
-	<span class="{{ class }}">{{ text }}</span>
-{% endmacro %}
-
-{% macro brand(class = '', name = 'Marke') %}
-	<div class="{{ class }}">
-		{# <img src="" alt="Brand logo"> #}
-		<svg
-		width="128"
-		height="128"
-		viewBox="0 0 128 128"
-		version="1.1"
-		xmlns="http://www.w3.org/2000/svg"
-		xmlns:svg="http://www.w3.org/2000/svg">
-			<g>
-				<rect
-				style="display:inline;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-dasharray:none"
-				width="126"
-				height="126"
-				x="1"
-				y="1"/>
-				<circle
-				style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
-				cx="64"
-				cy="64"
-				r="63"/>
-				<path
-				style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
-				d="m 9.3926879,32.472455 109.2146221,-2e-6 -54.607309,94.582637 z"/>
-			</g>
-		</svg>
-		<h1>{{ name }}</h1>
-	</div>
-{% endmacro %}
-
-{% macro flag(type = '', src = '', id = '', desc = 'Fahne von Interaktionsweise', width = '128') %}
-	{% set height = width / 1.6 %}
-	{% if type === 'svg' or type === '' %}
-		<svg version="1.1" id="{{ id }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
-			{# <defs>
-			<filter id="turb3">
-				<feColorMatrix type="saturate" values="1" />
-				<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
-			</filter>
-			<symbol id="triangle-5">
-				<rect y="0" fill="#273F8B" width="1920" height="1200"/>
-			</symbol>
-		</defs>
-		<g>
-			<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
-		</g> #}
-			{% if desc !== '' %}
-				<desc>{{ desc }}</desc>
-			{% endif %}
-			<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
-			<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
-			<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
-			<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
-			<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
-			<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
-			<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
-			<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
-			<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
-		</svg>
-	{% elif type === 'img' %}
-		{% if src === 'file' %}
-			<picture>
-				<source srcset="{{ pageBase }}art/flag_websafe_128x80.webp" type="image/webp"/>
-				<img src="{{ pageBase }}art/flag_websafe_128x80.gif" width="{{ width }}" height="{{ height }}" alt="{{ desc }}"/>
-			</picture>
-		{% else %}
-			<img 
-				width="{{ width }}" 
-				height="{{ height }}" 
-				alt="{{ desc }}"
-				src="data:image/gif;base64,R0lGODlhgABQAIQAMf/MAP+ZM/+ZAP9mM8zM/8xmM8wzM8wAZpnM/5nMzJmZzJkzZpkAZmbMzGaZzGZmmWYzZjNmmTMzmQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAgABQAAQF/mDjiORolug5NiKSEG8Mz68SSbek73zv/8CgcEhkGY/IpBLRcBEQM+hL+nRIHrscLsvVab/drTcMHpvF6DIuxVaxj7I4DZZAE+/4vB6o7PubRgSCUIOCT4YRDxE3jFuNj46RkJOSlZSXlo5tm24nTXKgBA5ae6Wmpz5/qklOU1GvCYqNZ2q1ZLe0uGm6X5y+K0dzoQlWpKjHyHery0wIhIeFgwiLmZjW1djX2pa/viwjw3PUyeTlQct/TCyHru0ENru58vH0tvP29VndnazhMVjGzAkkh06VM2gICdkAmK3htocOI0bYtymQv2kBB2o8VrBPM3dUoDxQdI+XyZIo/vOlnMivJQk4wubA20iTYMcj6l5ESzgKok+JQH8+osivQcw4DezUXFrqJquQsAhQw0f1pMqrVe8RRcHCn6iMTMMqc8qCSUJDUmQFXSuUrcOtwBwk8FdMrF09ZHOy2+vsitWsWP8KXgk3WLhxdxMXIdtk5zMFattKdjt5UuGuR2GAVcyZR16jIGHYmBV45eDSqGttNdJKGAKlnWPvuNnsme2vlHNX1q3JZdHMM2UL9+yUb5S6ppOnPg1YtW+ureMogD08Nm1XOxPx3s3dLQQICyh+iz5jVHXZEBgsYJC+4EfjsZjLV97c6vf1C8CrF99gmJXziuGn3oDr3YQWWhht/qdgd5Sklx9++hlwgAHikfcCYgDSlJ6D7A14AAMHhHiAe1C9YF599M233BgO6vegehPGKCGFz1kkzGYZosKhgAKK6KOIzDRx2ztTLWjkT/e56KKMTM44IUWgvIZjjnlwuCOIP2bpY0HGkZTilytedZ96SzppZpMydvOJTFNSGcSVPGopZ5bMOFYXg0diM+aLC6B55p9NerOOdG7useGA6c2p6JwGgbZXkWCiGOYNLcYJ6KV+pukSZjJ4WSgQcMK46KiMqqITO3imWkmS+C2A6auZ/umNMFh8ysOh63FI6q6LGhSSlCpKWhUEEvAJXqzIwvqnAQNU1J84baJHoIe8/lab5QAFBCAAAAL4YdYzJ+Y52Z7HKptsstluGwAA667LyVw0RJuYldRaa20B6WrLrb7bAvBHO/9NGuwO5K5n7sFMYhtAu+w2vC4AEEdcEQ2vAXilvbsawGwB3Ha8rboRhyyxR4WQpCpElZ6LsJMKM8ywyDCLvIkM5sWGK5YYz6kxtvt+vHDMQMvcRxQMRSoYqwysnOzGDjcd9NMyu7EmMYrdnLOcBqTrsdNQdz0yEgcJUuTJkbyo9KXMgvyy12zD/MYMtYal69U+YiuAzx+3rXfMSqA68Dxjnt1kAQOovffhT0MXQ8AaEdtjzllrnTfilAOdxBTAplqmyoP//HDlyKAnrsIMG81t7cb8hq461GCbSJqwEjjIOcvZrr367UGjEIO8Q+zI6855f4778JYHI0pu983OtO3EN2+5CS7UgUqHGRtwt+fOZ886a1JJit/ShTes/fhev/ROKbIrmrUAzJPvfvGfMHTNd69a3+/7+LNNAtV31PsjvvrKnwD1tw5elKtzwhugArvWgrj9YD0+2hnHFkhBvXWlQUmLEc8qyMG9scCBscMS8DpIQg9Oh1JJS1sJV3i4pKQnaz9joQz15gDxzfCGegsBADs=">
-		{% endif %}
-	{% endif %}
-{% endmacro %}
--- a/source/templates/hippie/macros/_song.njk
+++ b/source/templates/hippie/macros/_song.njk
@ -1,12 +0,0 @@
-{% macro simple(index, data, content) %}
-	<article class="songbook_song">
-		<header>
-			<h2>{{ data.title }}</h2>
-			<h6>{{ data.releaseDate }}</h6>
-			<p>{{ data.description }}</p>
-		</header>
-		{# <pre class="pre_code"><code>{{ content }}</code></pre> #}
-		{{ content | safe }}
-		<footer>{{ index }}</footer>
-	</article>
-{% endmacro %}
--- a/source/templates/hippie/macros/_state.njk
+++ b/source/templates/hippie/macros/_state.njk
@ -1,16 +0,0 @@
-{% macro coord(id, text = 'X: #, Y: ##') %}
-	<span id="{{ id }}">{{ text }}</span>
-{% endmacro %}
-
-{% macro time(id, text = '00:00:00', postfix = ' Uhr') %}
-	<span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
-{% endmacro %}
-
-{% macro date(id) %}
-	<span id="{{ id }}">
-		<span id="day">Wochentag</span>,
-		<span id="dayNumb">##</span>.
-		<span id="month">Monat</span>
-		<span id="year">####</span>
-	</span>
-{% endmacro %}
--- a/source/templates/hippie/macros/top-macro.njk
+++ b/source/templates/hippie/macros/top-macro.njk
@ -1,5 +0,0 @@
-{% macro field(name, value='', type='text') %}
-<div class="field">
-  <input type="{{ type }}" name="{{ name }}" value="{{ value | escape }}" />
-</div>
-{% endmacro %}
--- a/source/templates/hippie/page.liquid
+++ b/source/templates/hippie/page.liquid
@ -34,11 +34,13 @@
 </div>
 {% endblock %}

-{% block script %}
+{% block assets %}
 <script src="/vendor/jquery.min.js"></script>
 <script src="/vendor/hippie-script.js"></script>
 <script src="/js/globals.js"></script>
 <script src="/js/app.js"></script>
+{% endblock %}
+{% block script %}
 <script>
 	// Setup global things for all screens
 	setup();
@ -59,4 +61,4 @@
 		logPerf('EVENT       :: jQuery \'ready\' event fired.');
 	});
 </script>
-{% endblock %}
+{% endblock %}
--- a/source/templates/hippie/partials/_body_nav.njk
+++ b/source/templates/hippie/partials/_body_nav.njk
@ -1,34 +0,0 @@
-<!-- nav.partial -->
-<div class="pos_rel">
-	<nav class="nav_page_meta">
-		<ul>
-			<li class="js_scrolltop di_none">
-				<a href="#begin" class="a_button_meta">
-					<div class="sprite_img demo__sprite_up"></div>
-					{# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}
-				</a>
-			</li>
-			<li>
-				{# <button class="">Show Meta Information</button> #}
-				{# <a href="#meta" class="js_showmeta a_button_meta">
-          <div class="sprite_img demo__sprite_meta"></div>
-        </a> #}
-				<button class="js_showmeta button_clear" type="button">
-					<div class="sprite_img demo__sprite_meta"></div>
-				</button>
-			</li>
-			<li>
-				<button id="js-toggle-fade">F</button>
-			</li>
-			<li class="js_scrolldown">
-				<a href="#end" class="a_button_meta">
-					<div class="sprite_img demo__sprite_down"></div>
-					{# <img src="{{ pageBase }}art/down.png" alt="" width="32" height="32"> #}
-				</a>
-			</li>
-		</ul>
-	</nav>
-</div>
-{# <div class="exp_overlay_btn exp_help_btn">
-<span class="span_solo">?</span>
-</div> #}
--- a/source/templates/hippie/partials/_footer.njk
+++ b/source/templates/hippie/partials/_footer.njk
@ -1,3 +0,0 @@
-<!-- footer.partial -->
-{% import "hippie/macros/_footer.njk" as footer %}
-{{ footer.main() }}
--- a/source/templates/hippie/partials/_head_links.njk
+++ b/source/templates/hippie/partials/_head_links.njk
@ -1,4 +0,0 @@
-<!-- links.partial -->
-{# <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon"> #}
-<link rel="shortcut icon" type="image/x-icon" href="{{ pageBase }}favicon.ico">
-<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEAAAIBAQCbjUIABQQCAGdfKgDcxYUAiXpGABkWCgDXxnEApmxRAMGZawAIBwMArZ5PAKFydQBmIZIAoGJFAIx+QwBSSyIA1biBADlx0gBNn+0AgztQAMimcQAMCwQADAsFANS/dAB7P3EAeuH7ANb4/gBQPLwAp2pNAI6CQwCilEwAr3hdADyH5ADw/f8A////AHTU+AB6M2YA0LN4ABMRBwA/OhsAyKR2AGYvjQCf7PwA7fz/AENy2gCrclkAk4ZDAAYFAgDNtXEAjkhHAEul7QD8//8AlOn8AGk1hwDWvXsAGBYJAJaHSgCnbE4AVy6rAML0/gD7/v8AQ6vuAKx1YwCZjEQALCgTALyOZwB+NVoAZ8D0AL30/QBLULMA2sV+AB4bCwDFpm0Ak087AFArvgBv4PoAjOf7AIzm+wCN4/sAjuH7AI7h+gCP3fkAOI/sAKVvcwCfkUQAfnM6ANO2hAC3iGkAk150AI9OcACKRmkAhj9kAH84YQB9NWEAfTRgAH0zYAB6MWYAei9lAItFUADdy3wAKCQPAFtTJQB2bDIAhXk5AJKGPwCbjkQAq5xOALepWwDEtGcAzLlwAMyzcgDKrXIAx6NwALyNZgDWu4IApJZHAAcGAwANDAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB3eGhpamtsbW5vcHFycwt0dXZYWVpbXF1eX2BhYmNkZWZnAktMTU5PUFFRUlNUVVZXAABDREVGJSUlJSUlR0hJSgAAADs8PT4lJSUlP0BBQgAAAAAyMzQ1NiUlJTc4OToAAAAAACorLC0lJS4vMDEAAAAAAAAAISIjJCUmJygpAAAAAAAAABkaGxwdHh8gAAAAAAAAAAAAEhMUFRYXGAAAAAAAAAAAAAANDg8QEQAAAAAAAAAAAAAACAkKCwwAAAAAAAAAAAAAAAAFBgcAAAAAAAAAAAAAAAAAAgMEAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=">
--- a/source/templates/hippie/partials/_head_meta.njk
+++ b/source/templates/hippie/partials/_head_meta.njk
@ -1,8 +0,0 @@
-<!-- meta.partial -->
-<meta name="robots" content="noindex">
-<meta name="generator" content="{{ eleventy.generator }}">
-<meta name="author" content="">
-<meta name="description" content="">
-<meta name="keywords" content="">
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
--- a/source/templates/hippie/partials/_head_script.njk
+++ b/source/templates/hippie/partials/_head_script.njk
@ -1,114 +0,0 @@
-<!-- script.partial -->
-<script>
-  // Entry script at page init
-  let debugOn = {{ hippie.debugMode }};
-  let debugOnScreen = false;
-  let assetsLoaded = false;
-
-  // Get the current time difference between page
-  // load and when this func was invoked
-  function getTimeDiff() {
-    return new Date().getTime() - performance.timing.navigationStart;
-  }
-
-  function pad(n, width, z) {
-    z = z || '0';
-    n = n + '';
-
-    return n.length >= width
-      ? n
-      : new Array(width - n.length + 1).join(z) + n;
-  }
-
-  // Log message to console and add
-  // performance measuring information
-  function logPerf(msg, arg) {
-    if (debugOn) {
-      if (debugOnScreen && assetsLoaded) {
-        if (!document.getElementById('jsLogPerf')) {
-          let wrap = document.createElement('div');
-          let box = document.createElement('div');
-
-          wrap.style.position = 'relative';
-          box.style.cssText = `position: fixed;
-            bottom: 16px;
-            right: 40px;
-            zIndex: 1000;
-            padding: 0 8px;
-            background: rgba(255,255,255,.6);
-            color: rgb(128);
-            fontSize: 1rem;`;
-          box.id = 'jsLogPerf';
-
-          wrap.prepend(box);
-          document
-            .body
-            .prepend(wrap);
-
-          /*
-          $('<div><div></div></div>')
-            .css('position', 'relative')
-            .find('div')
-            .attr('id', 'jsLogPerf')
-            .css({
-              position: 'fixed',
-              bottom: '16px',
-              right: '40px',
-              zIndex: '1000',
-              padding: '0 8px',
-              background: 'rgba(255,255,255,.6)',
-              color: 'rgb(128)',
-              fontSize: '1rem'
-            })
-            .end()
-            .prependTo('body');
-          */
-          // $('body').prepend('<div style="position:relative;"></div>');
-          // $('div').first().prepend('<div id="jslogPerf" style="position:fixed;bottom:8px;right:16px;z-index:1000;padding:8px;background:rgb(0,255,255,.5)"></div>');
-        }
-
-        let code = document.createElement('code');
-
-        code.style.cssText = `display: block;
-          margin: 8px 0;
-          padding: 1px 4px;
-          background-color: transparent;
-          color: black;
-          font-size: 12px;
-          line-height: 1.1;`;
-        code.innerHTML = '<b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '';
-
-        document
-          .getElementById('jsLogPerf')
-          .append(code);
-        // document.getElementById('jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
-        // $('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
-
-        // NOTE: Alternative short-circuit evaluation
-        // needs element in document but prevents error if not
-        // $log = $log || $('#jslogPerf');
-        // $log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
-      }
-
-      if (window.console) {
-        const time = pad(getTimeDiff(), 5) + 'ms :: ';
-
-        console.debug(time + msg, (
-          arg
-          ? arg
-          : ''));
-
-        // NOTE: Non standard feature. Not available on IE
-        if (console.timeStamp) {
-          console.timeStamp(msg);
-        }
-      }
-    }
-  }
-
-  function logAdd(msg, listener) {
-    document.addEventListener(listener, function () {
-      logPerf(msg, listener);
-    });
-  }
-</script>
--- a/source/templates/hippie/partials/_header.njk
+++ b/source/templates/hippie/partials/_header.njk
@ -1,3 +0,0 @@
-<!-- header.partial -->
-{% import "hippie/macros/_header.njk" as header %}
-{{ header.main() }}
--- a/source/templates/hippie/partials/gate-list.liquid
+++ b/source/templates/hippie/partials/gate-list.liquid
@ -0,0 +1,19 @@
+<article class="portal__entry">
+	<section>
+		<h2>
+			<a class="a_discreet" href="{{ url }}">{{ name }}</a>
+		</h2>
+		<a class="portal__link portal__link--{{ name | slug }}" href="{{ url }}">
+			<img src="{{ image.src }}" alt="{{ image.alt }}"/>
+		</a>
+		{% if links %}
+			<ul class="portal__list">
+				{% for link in links %}
+					<li>
+						<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
+					</li>
+				{% endfor %}
+			</ul>
+		{% endif %}
+	</section>
+</article>
--- a/source/templates/hippie/partials/gate-simple.liquid
+++ b/source/templates/hippie/partials/gate-simple.liquid
@ -0,0 +1,7 @@
+<article class="portal__entry">
+	<section>
+		<h2>
+			<a class="a_discreet" href="{{ url }}">{{ name }}</a>
+		</h2>
+	</section>
+</article>
--- a/source/templates/hippie/partials/placeholder-flag.liquid
+++ b/source/templates/hippie/partials/placeholder-flag.liquid
@ -14,7 +14,7 @@
 		<g>
 			<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
 		</g>{% endcomment %}
-		{% if desc != '' %}
+		{% if desc %}
 			<desc>{{ desc }}</desc>
 		{% endif %}
 		<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
--- a/source/templates/hippie/partials/song.liquid
+++ b/source/templates/hippie/partials/song.liquid
@ -0,0 +1,10 @@
+<article class="songbook_song">
+	<header>
+		<h2>{{ data.title }}</h2>
+		<h6>{{ data.releaseDate }}</h6>
+		<p>{{ data.description }}</p>
+	</header>
+	{% comment %}<pre class="pre_code"><code>{{ content }}</code></pre>{% endcomment %}
+	{{ content }}
+	<footer>{{ index }}</footer>
+</article>
Author	SHA1	Message	Date
sthag	18e7823063	Merge pull request 'Replace Nunjucks with Liquid' (#2 ) from development into main Reviewed-on: #2	2026-03-15 09:40:21 +01:00
sthag	c4947a9c04	docs: Update README Change project description to current toolset and update usage.	2026-03-15 09:27:33 +01:00
sthag	d3ab17d5a1	feat: Add check for content The `source/screens` directory is checked for any present file. This changes the permalink path for demo/index.liquid. - Add fs module to eleventy config - Add function to check for files - Add demoPath to global data - Change permalink for demo index to use demoPath	2026-03-15 08:52:09 +01:00
sthag	437c561847	chore: Add and remove 11ty plugins - Add eleventy-plugin-webc - Remove eleventy-upgrade-help	2026-03-14 17:00:18 +01:00
sthag	6520cdbcf0	feat: Add login to layouts - Add articles - Change order of articles - Add id attributes like in components - Add login example	2026-03-12 21:38:48 +01:00
sthag	a5bf80cb91	feat: Remove nunjucks - Remove all nunjucks templates, macros and partials - Remove nunjucks config from eleventy - Remove njk from template formats	2026-03-12 20:23:17 +01:00
sthag	95e0460325	feat: Update portal - Change portal from njk to liquid - Add gate partials as replacement for macro	2026-03-12 20:00:24 +01:00
sthag	52ee2e3dd7	fix: Clock overlay	2026-03-11 20:08:22 +01:00
sthag	a7431ec85d	feat: Update blog - Change blog from njk to liquid - Update content	2026-03-10 22:33:00 +01:00
sthag	2091dc4f30	feat: Change mouse to pointer for windows	2026-03-10 22:15:08 +01:00
sthag	99b98635e7	feat: Update songbook - Change songbook from njk to liquid - Add song partial	2026-03-10 22:13:28 +01:00
sthag	92f3c4f81f	feat: Update ui screens Separate script and assets block.	2026-03-10 21:21:08 +01:00
sthag	6a717b7ab8	feat: Update basic screens - Add order to front matter - Separate script and assets block - Sort index lists	2026-03-10 20:36:54 +01:00
sthag	fdef673886	feat: Update card and placeholder - Change card from njk to liquid - Fix flag placeholder - Update structure of card	2026-03-10 19:40:03 +01:00
sthag	f2ff20ce73	feat: Add location change to intro	2026-03-08 20:50:25 +01:00
sthag	30fcd22a7b	fix: Intro - Move style inside .body_intro - Fix overlap of ids	2026-03-08 18:54:44 +01:00
sthag	6ae411c83b	feat: Update intro and placeholder - Change intro from njk to liquid - New svg content for brand shortcode - New style for brand in ui	2026-03-08 18:18:54 +01:00
sthag	9b44963ba2	feat: Make game sub - Move game and intro to own collection - Add index - Add brand placeholder to shortcodes - Add variant of placeholder to menu	2026-03-08 17:00:04 +01:00
sthag	76791d93ba	feat: Move hello world to examples	2026-03-08 16:51:39 +01:00
sthag	a5462dcc7e	feat: Use paired styles Change .list_link style to &.link.	2026-03-08 14:54:41 +01:00
sthag	3ae1cebdd6	feat: Responsiveness for lists - New style for lists - Change index list layout	2026-03-08 14:42:16 +01:00