feat: Change table classes

feat: Remove pageBase from liquid templates
- Remove pageBase global from all liquid templates - Change " to ' for all liquid tags
2026-02-21 14:09:10 +01:00 · 2026-02-21 12:58:31 +01:00 · 2026-02-21 12:16:34 +01:00 · 2026-02-21 09:28:50 +01:00 · 2026-02-19 20:43:52 +01:00 · 2026-02-17 21:53:06 +01:00
45 changed files with 704 additions and 567 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@ -1,5 +1,7 @@
+const {EleventyHtmlBasePlugin} = require("@11ty/eleventy");
+
 module.exports = function (eleventyConfig) {
-	// eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+	eleventyConfig.addPlugin(EleventyHtmlBasePlugin);

 	eleventyConfig.setLiquidOptions({
 		// greedy: false,
@ -26,10 +28,32 @@ module.exports = function (eleventyConfig) {
 		brand: 'hippie',
 		titlePrefix: '',
 		titlePostfix: ' - HIPPIE',
+		placeholders: {
+			name: 'Vorname Nachname',
+			address: 'Straße Nr., PLZ Ort',
+			phone: '+49 (0)101 1337 48',
+			mail: 'name@domain.tld'
+		},
 		debugMode: true,
 		legacyMode: false
 	});

+	eleventyConfig.addShortcode('text', function (text, attrId, attrClass) {
+		return `<span id="${attrId}" class="${attrClass}">${text}</span>`;
+	});
+
+	eleventyConfig.addShortcode('link', function (target, text, attrId, attrClass) {
+		if (text === '') {
+			text = target;
+		}
+
+		if (target.indexOf('@') !== -1) {
+			target = 'mailto:' + target;
+		}
+
+		return `<a id="${attrId}" class="${attrClass}" href="${target}">${text}</a>`;
+	});
+
 	eleventyConfig.addPassthroughCopy({'source/art/images': 'art'});

 	eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'});
--- a/.gitignore
+++ b/.gitignore
@ -1,6 +1,7 @@
 # HIPPIE
 ###################
 build/**
+deploy/**
 reports/**
 source/art/sprites/
 source/art/images/sprite.*
--- a/package.json
+++ b/package.json
@ -24,9 +24,11 @@
    "clean:report": "rm -rf report/*",
    "clean:test": "rm -rf test/*",
    "style:compile": "sass source/style:build/css --load-path=vendor",
+    "style:deploy": "sass source/style:deploy/css --load-path=vendor",
    "style:watch": "sass --watch source/style:build/css --load-path=vendor",
    "build:new": "npm run clean:build && npx @11ty/eleventy && npm run style:compile",
    "build": "npx @11ty/eleventy && npm run style:compile",
+    "deploy": "npm run clean:deploy && npx @11ty/eleventy --output=deploy --pathprefix=hippie && npm run style:deploy",
    "serve": "npm run style:watch & npx @11ty/eleventy --serve"
  },
  "private": true,
--- a/source/screens/demo/basics.liquid
+++ b/source/screens/demo/basics.liquid
@ -3,8 +3,7 @@ title: Basics
 tags:
 - demoIndex
 ---
-{% assign pageBase = "../" -%}
-{% layout "hippie/page.liquid" %}
+{% layout 'hippie/page.liquid' %}

 {% block title %}Grundlagen{% endblock %}

@ -278,7 +277,7 @@ tags:
 		<nav class="nav_center_old">
 			<ul>
 				<li>
-					<a href="{{ pageBase }}demo.html" class="a_button">Startseite</a>
+					<a href="/demo/examples/start.html" class="a_button">Startseite</a>
 				</li>
 				<li>
 					<a href="" class="a_button a_internal">Hilfe</a>
@ -580,7 +579,7 @@ tags:
 	</article>
 	<article>
 		<h1 id="embedded">Eingebundene Inhalte</h1>
-		{% render "hippie/partials/placeholder-flag.liquid", type: "img", width: "128", desc: "Fahne von Interaktionsweise" %}
+		{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', width: '128', desc: 'Fahne von Interaktionsweise' %}
 		<p>Dies ist ein Bild. Es wird mit dem Element
 			<code>&lt;img&gt;</code>
 			eingebunden. Solch ein Bild hat üblicherweise die Attribute
@ -599,7 +598,7 @@ tags:
 			und
 			<code>&lt;picture&gt;</code>
 			in Kombination verwendet werden.</p>
-		{% render "hippie/partials/placeholder-flag.liquid", type: "img", src: "file", width: "128", desc: "Fahne von Interaktionsweise" %}
+		{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '128', desc: 'Fahne von Interaktionsweise' %}
 	</article>
 	<article>
 		<h1>Tabellen</h1>
@ -632,7 +631,7 @@ tags:
 			<div class="exp_pop">
 				<code class="code_solo">table>tr>td*2^tr>td[colspan=2]</code>
 			</div>
-			<table class="table_blank float_space_left js_pop">
+			<table class="blank float_space_left js_pop">
 				<tr>
 					<td>Mit</td>
 					<td>ohne</td>
@ -642,12 +641,12 @@ tags:
 				</tr>
 			</table>
 			<div class="exp_pop">
-				<code class="code_solo">table.table_blank>tr>td*2^tr>td[colspan=2]</code>
+				<code class="code_solo">table.blank>tr>td*2^tr>td[colspan=2]</code>
 			</div>
 		</div>
 		<p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre
 			Zellverteilung:</p>
-		<table class="width_full table_fix js_pop">
+		<table class="width_full fix js_pop">
 			<caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
 			<thead>
 			<tr>
@ -685,7 +684,7 @@ tags:
 			</tfoot>
 		</table>
 		<div class="exp_pop">
-			<code class="code_solo">table.width_full.table_fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2</code>
+			<code class="code_solo">table.width_full.fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2</code>
 		</div>
 		<p>Viele weitere Formate sind möglich.</p>
 	</article>
@ -739,7 +738,7 @@ tags:
 		</p>
 		<div class="overflow">
 			<div class="float_left">
-				<table class="table_fix table_blank">
+				<table class="fix blank">
 					<tr>
 						<td>
 							<label for="demo__raw_a">Alpha:</label>
--- a/source/screens/demo/components.liquid
+++ b/source/screens/demo/components.liquid
@ -3,7 +3,7 @@ title: Components
 tags:
 - demoIndex
 ---
-{% layout "hippie/page.liquid" %}
+{% layout 'hippie/page.liquid' %}

 {% block title %}Komponenten{% endblock %}

@ -31,8 +31,12 @@ 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>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
+		<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in
+			Gruppen eingeteilt, die auch das W3Consortium (<a
+				href="https://html.spec.whatwg.org/multipage/#toc-semantics">html.spec.whatwg.org/multipage/#toc-semantics</a>)
+			verwendet.</p>
+		<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax
+			dargestellt.</p>
 	</header>
 	<pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h2{&lt;tag&gt;}+h4{Varianten}</code></pre>
 	<article>
@ -40,7 +44,8 @@ tags:
 		<p>Elemente:</p>
 		<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
 		<h2>&lt;body&gt;</h2>
-		<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
+		<p>Keine speziellen Attribute. Bekommt üblicherweise allgemeine Klassen zur Steuerung der Abmessungen
+			zugewiesen.</p>
 		<h2>&lt;article&gt;</h2>
 		<article>Ein Artikel.</article>
 		<h2>&lt;section&gt;</h2>
@ -85,10 +90,10 @@ tags:
 			<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>
+		<p>Bekommt üblicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
 		<footer>Fußbereich</footer>
 		<div style="position:relative;height:256px;background-color:#b7e0f0;">
-			{% render "hippie/partials/footer-pinned.liquid" %}
+			{% render 'hippie/partials/footer-pinned.liquid' %}
 		</div>
 	</article>
 	<article>
@ -167,12 +172,11 @@ tags:
 		<h4>Varianten</h4>
 		<pre class="pre_code"><code>div.div_info>p</code></pre>
 		<div class="div_info">
-			<p>Absatz in Informationsbox.</p>
+			<p>Absatz in einer Box mit dem Typ <i>Information</i>.</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 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>
@ -185,8 +189,8 @@ tags:
 		<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
 		<h2>&lt;table&gt;</h2>
 		<h4>Varianten</h4>
-		<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
-		<table class="width_full table_fix">
+		<pre class="pre_code"><code>table.width_full.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 fix">
 			<thead>
 			<tr>
 				<th class="cell_pre" scope="col"></th>
@ -216,8 +220,8 @@ tags:
 			</tr>
 			</tbody>
 		</table>
-		<pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre>
-		<table class="width_full table_stripe table_fix table_free">
+		<pre class="pre_code"><code>table.width_full.stripe.fix.free>tr>td*3</code></pre>
+		<table class="width_full stripe fix free">
 			<tr>
 				<td>Tabelle</td>
 				<td></td>
@ -239,7 +243,7 @@ tags:
 				<td>Streifen</td>
 			</tr>
 		</table>
-		<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
+		<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
 		<table>
 			<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
 			<thead>
@ -299,20 +303,24 @@ tags:
 		</div>
 		<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>
+				<input id="inpPass" type="password"/>
+				<span id="hintPass" style="visibility:hidden"><kbd>Shift</kbd> is pressed.</span>
+				<br>
+				<input id ="inpText" type="text"/>
+				<span id="hintText"><kbd>CapsLock</kbd> is on.</span>
 			</form>
 		</div>
 		<h2>&lt;select&gt;</h2>
 		<select name="F">
 			<option value="0">
-				Plain list</option>
+				Plain list
+			</option>
 			<option value="1" selected="selected">
-				Fancy list</option>
+				Fancy list
+			</option>
 			<option value="2">
-				Table list</option>
+				Table list
+			</option>
 		</select>
 	</article>
 </section>
@ -321,79 +329,47 @@ tags:
 {% block script %}
 {{ block.super -}}
 <script>
-	function capLock(e) {
-		console.log('capLock');
-		kc = e.keyCode
-			? e.keyCode
-			: e.which;
-		sk = e.shiftKey
-			? e.shiftKey
-			: (
-				(kc == 16)
-					? true
-					: false);
+	const capsHint = document.getElementById('hintPass');
+	let isShiftPressed = false;

-		if (((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk)) {
-			document
-				.getElementById('hint')
-				.style
-				.visibility = 'visible';
+	document.getElementById('inpPass').addEventListener('keydown', shiftDetect);
+
+	function shiftDetect(event) {
+		if (event.getModifierState('Shift')) {
+			isShiftPressed = true;
+			capsHint.style.visibility = 'visible';
 		} else {
-			document
-				.getElementById('hint')
-				.style
-				.visibility = 'hidden';
+			isShiftPressed = false;
+			capsHint.style.visibility = 'hidden';
 		}
+
+		console.log('Shift', isShiftPressed);
 	}

+	document.getElementById('inpPass').addEventListener('keyup', (event) => {
+		if (event.key === 'Shift') {
+			isShiftPressed = false;
+			capsHint.style.visibility = 'hidden';
+		}
+	});
+
 	function capsDetect() {
-		const body = document.getElementsByTagName('body')[0];
-		const capsWarning = document.getElementById('error');
-		let isShiftPressed = false;
+		const capsHint = document.getElementById('hintText');
 		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) {
+		document.getElementById('inpText').addEventListener('keyup', function (e) {
+			if (event.getModifierState('CapsLock')) {
+				capsHint.style.display = 'inline';
 				isCapsOn = true;
-				capsWarning.style.display = 'inline-block';
 			} else {
-				capsWarning.style.display = 'none';
+				capsHint.style.display = 'none';
+				isCapsOn = false;
 			}
+
+			console.log('CapsLock', isCapsOn);
 		});
 	}

-	// TODO: Beide Varianten lauffähig machen
-	// capsDetect();
+	capsDetect();
 </script>
 {% endblock %}
--- a/source/screens/demo/examples/10print.liquid
+++ b/source/screens/demo/examples/10print.liquid
@ -3,7 +3,7 @@ title: 10print
 tags:
 - demoExample
 ---
-{% layout "hippie/simple.liquid" %}
+{% layout 'hippie/simple.liquid' %}

 {% block head %}
 {{ block.super -}}
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@ -3,8 +3,8 @@ title: Clock
 tags:
 - demoExample
 ---
-{% assign bodyClass = "body_clock" -%}
-{% layout "hippie/simple.liquid" %}
+{% assign bodyClass = 'body_clock' -%}
+{% layout 'hippie/simple.liquid' %}

 {% block body %}
 <main>
--- a/source/screens/demo/examples/game.liquid
+++ b/source/screens/demo/examples/game.liquid
@ -4,8 +4,8 @@ tags:
 - demoExample
 - gameExample
 ---
-{% assign bodyClass = "body_game" -%}
-{% layout "hippie/simple.liquid" %}
+{% assign bodyClass = 'body_game' -%}
+{% layout 'hippie/simple.liquid' %}

 {% block body %}
 	<div class="sec_main_center">
--- a/source/screens/demo/examples/start.liquid
+++ b/source/screens/demo/examples/start.liquid
@ -3,10 +3,9 @@ title: Start
 tags:
 - demoExample
 ---
-{% assign pageBase = "../../" -%}
 {% assign pageId = page.fileSlug -%}
-{% assign bodyClass = "body_start" -%}
-{% layout "hippie/simple.liquid" %}
+{% assign bodyClass = 'body_start' -%}
+{% layout 'hippie/simple.liquid' %}

 {% block body %}
 <main>
--- a/source/screens/demo/examples/ui/cli.liquid
+++ b/source/screens/demo/examples/ui/cli.liquid
@ -3,8 +3,8 @@ title: CLI
 tags:
 - ui
 ---
-{% assign bodyClass = "body_cli" -%}
-{% layout "hippie/app.liquid" %}
+{% assign bodyClass = 'body_cli' -%}
+{% layout 'hippie/app.liquid' %}

 {% block body %}
 <div id="cli">
--- a/source/screens/demo/examples/ui/drag.liquid
+++ b/source/screens/demo/examples/ui/drag.liquid
@ -3,7 +3,7 @@ title: Drag
 tags:
 - ui
 ---
-{% layout "hippie/app.liquid" %}
+{% layout 'hippie/app.liquid' %}

 {% block body %}
 <header class="io pos_fix pin_top pin_right pin_left">
@ -22,8 +22,8 @@ tags:
 {% endblock %}

 {%- block script %}
-<script src="{{ pageBase }}js/app.js"></script>
-<script src="{{ pageBase }}js/drag.js"></script>
+<script src="/js/app.js"></script>
+<script src="/js/drag.js"></script>
 <script>
 	// Get the space element
 	const space = document.getElementById('space');
--- a/source/screens/demo/examples/ui/explorer.liquid
+++ b/source/screens/demo/examples/ui/explorer.liquid
@ -3,8 +3,8 @@ title: Explorer
 tags:
 - ui
 ---
-{% assign bodyClass = "body_frame" -%}
-{% layout "hippie/app.liquid" %}
+{% assign bodyClass = 'body_frame' -%}
+{% layout 'hippie/app.liquid' %}

 {% block body %}
 {% render 'hippie/partials/frame-header.liquid' %}
--- a/source/screens/demo/examples/ui/form.liquid
+++ b/source/screens/demo/examples/ui/form.liquid
@ -3,8 +3,8 @@ title: Form
 tags:
 - ui
 ---
-{% assign bodyClass = "body_frame" -%}
-{% layout "hippie/app.liquid" %}
+{% assign bodyClass = 'body_frame' -%}
+{% layout 'hippie/app.liquid' %}

 {% block body %}
 {% render 'hippie/partials/frame-header.liquid' %}
--- a/source/screens/demo/examples/ui/gallery.liquid
+++ b/source/screens/demo/examples/ui/gallery.liquid
@ -3,8 +3,8 @@ title: Gallery
 tags:
 - ui
 ---
-{% assign bodyClass = "body_frame" -%}
-{% layout "hippie/app.liquid" %}
+{% assign bodyClass = 'body_frame' -%}
+{% layout 'hippie/app.liquid' %}

 {% block body %}
 {% render 'hippie/partials/frame-header.liquid' %}
--- a/source/screens/demo/examples/ui/index.liquid
+++ b/source/screens/demo/examples/ui/index.liquid
@ -4,7 +4,7 @@ tags:
 - demoExample
 - index
 ---
-{% layout "hippie/simple.liquid" %}
+{% layout 'hippie/simple.liquid' %}

 {% block title %}{{ title }}{% endblock %}

--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@ -3,8 +3,8 @@ title: Table
 tags:
 - ui
 ---
-{% assign bodyClass = "body_frame" -%}
-{% layout "hippie/app.liquid" %}
+{% assign bodyClass = 'body_frame' -%}
+{% layout 'hippie/app.liquid' %}

 {% block body %}
 {% render 'hippie/partials/frame-header.liquid' %}
@ -19,6 +19,8 @@ tags:
 					<div class="group-input-wrap"><input id="setScroll" type="checkbox"></div>
 					<label for="setScroll">Scroll to new entry</label>
 				</div>
+			</nav>
+			<nav>
 				<button id="tglIndex" title="Toggle index column">
 					<i class="bi bi-hash"></i>
 				</button>
@ -31,10 +33,10 @@ tags:
 					</select>
 					<button id="setPosNum" title="Set numbering" type="button"><i class="bi bi-list-ol"></i></button>
 				</div>
+				{% comment %}TODO: Auswahl für ziehbares Element hinzufügen{% endcomment %}
 			</nav>
-			<nav></nav>
 		</header>
-		<table id="content">
+		<table id="content" class="draggable">
 			<thead>
 			<tr>
 				<th scope="col" title="Index">#</th>
@ -43,7 +45,10 @@ tags:
 				<th scope="col">Number</th>
 				<th scope="col">Name</th>
 				<th scope="col">Description</th>
+				<th scope="col">Amount</th>
+				<th scope="col">Unit</th>
 				<th scope="col">Price</th>
+				<th scope="col">Sum</th>
 				<th scope="col"></th>
 			</tr>
 			</thead>
@ -53,12 +58,11 @@ tags:
 	</section>
 </main>
 <template id="rowDefault">
-	<tr>
+	<tr draggable="true">
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<button title="Drag"><i class="bi bi-grip-horizontal"></i></button>
-				<button title="Expand"><i class="bi bi-arrows-expand"></i></button>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
@ -68,6 +72,15 @@ tags:
 		<td>
 			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
 		</td>
+		<td><input name="amount" type="number"></td>
+		<td>
+			<select name="units">
+				<option value="">None</option>
+				<option value="piece">Piece(s)</option>
+				<option value="hour">Hour(s)</option>
+			</select>
+		</td>
+		<td class="unit"></td>
 		<td class="unit"></td>
 		<td class="io">
 			<nav>
@ -78,6 +91,98 @@ tags:
 		</td>
 	</tr>
 </template>
+<template id="rowArticle">
+	<tr draggable="true">
+		<th scope="row"></th>
+		<td class="io">
+			<nav>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
+			</nav>
+		</td>
+		<td class="pos-num"></td>
+		<td class="rigid"></td>
+		<td></td>
+		{% comment %}<td class="ellipsis"></td>{% endcomment %}
+		<td>
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+		</td>
+		<td><input name="amount" type="number"></td>
+		<td>
+			<select name="units">
+				<option value="">None</option>
+				<option value="piece">Piece(s)</option>
+				<option value="hour">Hour(s)</option>
+			</select>
+		</td>
+		<td class="unit"></td>
+		<td class="unit"></td>
+		<td class="io">
+			<nav>
+				<button title="Event"><i class="bi bi-calendar-event"></i></button>
+				<button title="Note"><i class="bi bi-journal"></i></button>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+</template>
+<template id="rowText">
+	<tr draggable="true">
+		<th scope="row"></th>
+		<td class="io">
+			<nav>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
+			</nav>
+		</td>
+		<td class="pos-num"></td>
+		<td class="rigid"></td>
+		<td colspan="6">
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+		</td>
+		<td class="io">
+			<nav>
+				<button title="Event"><i class="bi bi-calendar-event"></i></button>
+				<button title="Note"><i class="bi bi-journal"></i></button>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+</template>
+<template id="rowGroup">
+	<tr draggable="true">
+		<th scope="row"></th>
+		<td class="io">
+			<nav>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
+				<button title="Expand"><i class="bi bi-arrows-expand"></i></button>
+			</nav>
+		</td>
+		<td class="pos-num"></td>
+		<td class="rigid"></td>
+		<td></td>
+		{% comment %}<td class="ellipsis"></td>{% endcomment %}
+		<td>
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+		</td>
+		<td><input name="amount" type="number"></td>
+		<td>
+			<select name="units">
+				<option value="">None</option>
+				<option value="piece">Piece(s)</option>
+				<option value="hour">Hour(s)</option>
+			</select>
+		</td>
+		<td class="unit"></td>
+		<td class="unit"></td>
+		<td class="io">
+			<nav>
+				<button title="Event"><i class="bi bi-calendar-event"></i></button>
+				<button title="Note"><i class="bi bi-journal"></i></button>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+</template>
+
 {% render 'hippie/partials/frame-mode.liquid' %}
 {% endblock %}

@ -116,7 +221,6 @@ tags:
 	const currencyEuro = new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'});

 	const content = document.querySelector('main.io section > table');
-	// const content = document.getElementById('content');
 	const tbodyPosition = document.getElementById('positions');

 	tbodyPosition.addEventListener('click', (event) => {
@ -140,6 +244,9 @@ tags:

 		const j = i % placeholderNames.length;
 		const k = randomIntFrom(0, placeholderContents.length - 1);
+		const amount = randomIntFrom(1, 100);
+		const price = randomFloatFrom(1, 10000, 2);
+		const sum = amount * price;

 		tr.setAttribute('data-id', i);
 		th.textContent = i + 1;
@ -147,8 +254,10 @@ tags:
 		td[3].textContent = placeholderNames[j];
 		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
 		td[4].firstElementChild.textContent = placeholderContents[k];
-		// td[5].textContent = randomIntFrom(1, i).toString();
-		td[5].textContent = currencyEuro.format(randomFloatFrom(1, 1000000, 2));
+		td[5].firstElementChild.value = amount;
+		td[5].firstElementChild.style.width = '4em';
+		td[7].textContent = currencyEuro.format(price);
+		td[8].textContent = currencyEuro.format(sum);

 		tbodyPosition.appendChild(clone);
 	}
@ -217,7 +326,55 @@ tags:
 				elementNew.scrollIntoView({behavior: 'smooth', block: 'nearest'});
 			}
 		}
-		// TODO: Neuen index bilden
+
+		reindexRows(tbodyPosition);
+	});
+
+	let draggedRow = null;
+
+	tbodyPosition.addEventListener('dragstart', (event) => {
+		const rowTarget = event.target.closest('tr[draggable="true"]');
+
+		if (rowTarget) {
+			draggedRow = rowTarget;
+			rowTarget.classList.add('dragging');
+			event.dataTransfer.effectAllowed = 'move';
+
+			console.debug('Drag', rowTarget);
+		}
+	});
+
+	tbodyPosition.addEventListener('dragend', () => {
+		if (draggedRow) {
+			draggedRow.classList.remove('dragging');
+			draggedRow = null;
+		}
+	});
+
+	tbodyPosition.addEventListener('dragover', (event) => {
+		event.preventDefault();
+		event.dataTransfer.dropEffect = 'move';
+
+		const rowTarget = event.target.closest('tr');
+
+		if (rowTarget && rowTarget !== draggedRow) {
+			const rows = [...tbodyPosition.querySelectorAll('tr')];
+			const draggedIndex = rows.indexOf(draggedRow);
+			const targetIndex = rows.indexOf(rowTarget);
+
+			if (draggedIndex < targetIndex) {
+				rowTarget.parentNode.insertBefore(draggedRow, rowTarget.nextSibling);
+			} else {
+				rowTarget.parentNode.insertBefore(draggedRow, rowTarget);
+			}
+		}
+	});
+
+	tbodyPosition.addEventListener('drop', (event) => {
+		event.preventDefault();
+		reindexRows(event.currentTarget);
+
+		console.debug('Drop');
 	});

 	function cloneRow(type = 'default') {
@ -228,5 +385,15 @@ tags:

 		return document.importNode(rowFragment, true);
 	}
+
+	function reindexRows(parent, selector = 'tr') {
+		const rows = parent.querySelectorAll(selector);
+		let th = undefined;
+
+		for (let i = 0; i < rows.length; i++) {
+			th = rows[i].querySelector('th');
+			th.textContent = i + 1;
+		}
+	}
 </script>
 {% endblock %}
--- a/source/screens/demo/examples/ui/tile.liquid
+++ b/source/screens/demo/examples/ui/tile.liquid
@ -3,8 +3,8 @@ title: Tile
 tags:
 - ui
 ---
-{% assign bodyClass = "body_new" -%}
-{% layout "hippie/app.liquid" %}
+{% assign bodyClass = 'body_new' -%}
+{% layout 'hippie/app.liquid' %}

 {% block body %}
 {% render 'hippie/partials/header-status', hippie: hippie, links: start %}
--- a/source/screens/demo/examples/ui/tui.liquid
+++ b/source/screens/demo/examples/ui/tui.liquid
@ -3,8 +3,8 @@ title: TUI
 tags:
 - ui
 ---
-{% assign bodyClass = "body_frame" -%}
-{% layout "hippie/app.liquid" %}
+{% assign bodyClass = 'body_frame' -%}
+{% layout 'hippie/app.liquid' %}

 {% block body %}
 {% render 'hippie/partials/frame-header.liquid' %}
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@ -3,8 +3,8 @@ title: Windows
 tags:
 - ui
 ---
-{% assign bodyClass = "body_frame" -%}
-{% layout "hippie/app.liquid" %}
+{% assign bodyClass = 'body_frame' -%}
+{% layout 'hippie/app.liquid' %}

 {% block body %}
 <div id="task-bar">
@ -50,10 +50,10 @@ tags:
 {% endblock %}

 {%- block script %}
-{% comment %}<script src="{{ pageBase }}js/globals.js"></script>{% endcomment %}
+{% comment %}<script src="/js/globals.js"></script>{% endcomment %}
 <script src="/vendor/hippie-script.js"></script>
-<script src="{{ pageBase }}js/app.js"></script>
-<script src="{{ pageBase }}js/windows.js"></script>
+<script src="/js/app.js"></script>
+<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
@ -4,10 +4,9 @@ title: Index
 tags:
 - demoIndex
 ---
-{% assign pageBase = hippie.pageBase -%}
 {% assign pageId = page.fileSlug -%}
-{% assign pageClass = "h_full_view" -%}
-{% layout "hippie/full.liquid" %}
+{% assign pageClass = 'h_full_view' -%}
+{% layout 'hippie/full.liquid' %}

 {% block body %}
 <div class="wrap">
--- a/source/screens/demo/introduction.liquid
+++ b/source/screens/demo/introduction.liquid
@ -0,0 +1,40 @@
+---
+title: Introduction
+tags:
+- demoIndex
+---
+{% layout 'hippie/page.liquid' %}
+
+{% block title %}Einführung{% endblock %}
+
+{% block main %}
+<section class="sec_main_center">
+	<header>
+		<hgroup>
+			<h1>Introduction to HIPPIE</h1>
+			<p>Hippie interweaves preeminent personal interface elements.</p>
+		</hgroup>
+	</header>
+	<article>
+		<p>&hellip;</p>
+		<p>Contact: <a id="special" href=""></a>
+		</p>
+		<p>More: <a class="general" href=""></a>, <a class="general" href=""></a>
+		</p>
+	</article>
+</section>
+{% endblock %}
+
+{% block script %}
+{{ 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/introduction.njk
+++ b/source/screens/demo/introduction.njk
@ -1,47 +0,0 @@
---
-title: Introduction
-tags:
-  - demoIndex
---
-{% set pageBase = "../" %}
-{% set pageId = "intro" %}
-
-{% extends "demo/_main.njk" %}
-
-{% block title %}Einführung{% endblock %}
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block main %}
-	<!-- {{ page.fileSlug }}.page -->
-	<section class="sec_main_center">
-		<header>
-			<hgroup>
-				<h1>Introduction to HIPPIE</h1>
-				<p>Hippie interweaves preeminent personal interface elements.</p>
-			</hgroup>
-		</header>
-		<article>
-			<p>&hellip;</p>
-			<p>Contact: <a id="special" href=""></a>
-			</p>
-			<p>More: <a class="general" href=""></a>, <a class="general" href=""></a>
-			</p>
-		</article>
-	</section>
-{% endblock %}
-
-{% block script %}
-	{{ super() }}
-	<script>
-		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
@ -0,0 +1,314 @@
+---
+title: Layouts
+tags:
+- demoIndex
+---
+{% layout 'hippie/page.liquid' %}
+
+{% block title %}Gestaltungen{% endblock %}
+
+{% block main %}
+<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 (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">
+			<div class="float_space_left demo__avatar">
+				{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '256', desc: 'Avatar' %}
+			</div>
+			<p>{% text hippie.placeholders.name %}<br>{% text hippie.placeholders.address %}</p>
+			<p>{% text hippie.placeholders.phone %}<br>{% link hippie.placeholders.mail, '', '', 'a_line' %}</p>
+		</section>
+		<h3>nav</h3>
+		<pre class="pre_code"><code>div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)</code></pre>
+		<div class="overflow">
+			<nav class="float_space_left">
+				<ul>
+					<li>
+						<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
+					</li>
+					<li>
+						<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
+					</li>
+					<li>
+						<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
+					</li>
+					<li>
+						<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
+					</li>
+				</ul>
+			</nav>
+			<nav>
+				<ul>
+					<li>
+						<a href="" class="a_button_border">Stufe 1</a>
+					</li>
+					<li>
+						<a href="" class="a_button_border">Stufe 2</a>
+					</li>
+					<li>
+						<a href="" class="a_button_border">Stufe 3</a>
+					</li>
+					<li>
+						<a href="" class="a_button_border">Stufe 4</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+		<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4</code></pre>
+		<nav class="nav_horizontal">
+			<ul>
+				<li>
+					<a href="" class="a_button">Abschnitt 1</a>
+				</li>
+				<li>
+					<a href="" class="a_button">Abschnitt 2</a>
+				</li>
+				<li>
+					<a href="" class="a_button">Abschnitt 3</a>
+				</li>
+				<li>
+					<a href="" class="a_button">Abschnitt 4</a>
+				</li>
+			</ul>
+		</nav>
+		<pre class="pre_code"><code>div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
+		<div class="overflow">
+			<nav class="nav_center_old">
+				<ul>
+					<li>
+						<a href="" class="a_button">Typ 1</a>
+					</li>
+					<li>
+						<a href="" class="a_button">Typ 2</a>
+					</li>
+					<li>
+						<a href="" class="a_button">Typ 3</a>
+					</li>
+					<li>
+						<a href="" class="a_button">Typ 4</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+		<h3>header</h3>
+		<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
+		<header class="header_page demo__header header_fancy">
+			<h1>Aufmacher</h1>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio,
+				volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh
+				quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
+			<nav class="nav_separate_right">
+				<ul>
+					<li>
+						<a href="" class="a_button">Mensch</a>
+					</li>
+					<li>
+						<a href="" class="a_button">Pflanze</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="nav_right">
+				<ul>
+					<li>
+						<a href="" class="a_button">Blau</a>
+					</li>
+					<li>
+						<a href="" class="a_button">Gelb</a>
+					</li>
+				</ul>
+			</nav>
+		</header>
+		<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
+		<div class="box_space h_basic">
+			<header id="js_demo_fix" class="header_page demo__header header_fix">
+				<nav class="nav_right">
+					<ul>
+						<li>
+							<a href="" class="a_button">Eins</a>
+						</li>
+						<li>
+							<a href="" class="a_button">Zwei</a>
+						</li>
+					</ul>
+				</nav>
+			</header>
+			<div class="pos_abs pin_bottom width_full">
+				<pre
+					class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
+				<footer id="js_demo_stop" class="demo_footer">
+					<nav class="nav_column nav_separate">
+						<ul>
+							<li>
+								<a href="" class="a_button_text">Alpha</a>
+							</li>
+							<li>
+								<a href="" class="a_button_text">Bravo</a>
+							</li>
+							<li>
+								<a href="" class="a_button_text">Charlie</a>
+							</li>
+							<li>
+								<a href="" class="a_button_text">Delta</a>
+							</li>
+						</ul>
+					</nav>
+					<p class="txt_center demo__credits">
+						<i class="i_bright">👨‍💻</i>
+						mit
+						<i class="i_bright">❤</i>
+						von
+						<a href="https://interaktionsweise.de">Interaktionsweise</a>
+					</p>
+				</footer>
+			</div>
+		</div>
+
+		<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>
+		<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.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>
+		<nav>
+			<ul class="list_link">
+				<li>{% link hippie.placeholders.mail, '📧 name@domain.tld' %}</li>
+				<li>
+					<a href=""><img src="/art/bullet.gif" alt="">{% text hippie.placeholders.name %}</a>
+				</li>
+			</ul>
+		</nav>
+		<h3>div</h3>
+		<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre>
+		<div class="space_left_fourth">
+			<hr/>
+			<p>Eingerückter Inhalt</p>
+			<hr/>
+		</div>
+
+		<h2>Tabellen</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>
+			<tr>
+				<th>&nbsp;</th>
+				<th>Ab / Zy</th>
+				<th>Neu / Alt</th>
+			</tr>
+			</thead>
+			<tbody>
+			<tr>
+				<td class="icon" rowspan="2">■</td>
+				<td class="link">
+					<span>Name</span>
+					<a href="" target="_blank">URL</a>
+				</td>
+				<td rowspan="2">YYYY-MM-DD</td>
+			</tr>
+			<tr>
+				<td class="text">
+					<div class="shorten">Beschreibung</div>
+				</td>
+			</tr>
+			</tbody>
+			<tbody>
+			<tr>
+				<td class="icon" rowspan="2">■</td>
+				<td class="link">
+					<span>Name</span>
+					<a href="" target="_blank">URL</a>
+				</td>
+				<td rowspan="2">YYYY-MM-DD</td>
+			</tr>
+			<tr>
+				<td class="text">
+					<div class="shorten">Beschreibung</div>
+				</td>
+			</tr>
+			</tbody>
+		</table>
+
+		<h2>Eingebettet</h2>
+		<div class="demo__flag">
+			{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
+		</div>
+	</article>
+</section>
+{% 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'});
+	});
+</script>
+{% endblock %}
--- a/source/screens/demo/layouts.njk
+++ b/source/screens/demo/layouts.njk
@ -1,317 +0,0 @@
---
-title: Layouts
-tags:
-  - demoIndex
---
-{% set pageBase = "../" %}
-{% set pageId = page.fileSlug %}
-
-{% extends "demo/_main.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
-
-{% block title %}Gestaltungen{% endblock %}
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block main %}
-	<!-- {{ page.fileSlug }}.page -->
-	<section class="sec_main_center">
-		<header class="header_txt">
-			<h1>Sammlung formatierter Elemente</h1>
-			<p>Die Elemente werden fortlaufend komplexer</p>
-		</header>
-		<article>
-			<h2>Bereiche (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">
-				<div class="float_space_left demo__avatar">{{ ph.flag('img', '', '', 'Avatar', '256') }}</div>
-				<p>{{ ph.name() }}<br>{{ ph.address() }}</p>
-				<p>{{ ph.phone() }}<br>{{ ph.email('lineLink') }}</p>
-			</section>
-			<h3>nav</h3>
-			<pre class="pre_code"><code>div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)</code></pre>
-			<div class="overflow">
-				<nav class="float_space_left">
-					<ul>
-						<li>
-							<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
-						</li>
-						<li>
-							<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
-						</li>
-						<li>
-							<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
-						</li>
-						<li>
-							<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
-						</li>
-					</ul>
-				</nav>
-				<nav>
-					<ul>
-						<li>
-							<a href="" class="a_button_border">Stufe 1</a>
-						</li>
-						<li>
-							<a href="" class="a_button_border">Stufe 2</a>
-						</li>
-						<li>
-							<a href="" class="a_button_border">Stufe 3</a>
-						</li>
-						<li>
-							<a href="" class="a_button_border">Stufe 4</a>
-						</li>
-					</ul>
-				</nav>
-			</div>
-			<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4</code></pre>
-			<nav class="nav_horizontal">
-				<ul>
-					<li>
-						<a href="" class="a_button">Abschnitt 1</a>
-					</li>
-					<li>
-						<a href="" class="a_button">Abschnitt 2</a>
-					</li>
-					<li>
-						<a href="" class="a_button">Abschnitt 3</a>
-					</li>
-					<li>
-						<a href="" class="a_button">Abschnitt 4</a>
-					</li>
-				</ul>
-			</nav>
-			<pre class="pre_code"><code>div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
-			<div class="overflow">
-				<nav class="nav_center_old">
-					<ul>
-						<li>
-							<a href="" class="a_button">Typ 1</a>
-						</li>
-						<li>
-							<a href="" class="a_button">Typ 2</a>
-						</li>
-						<li>
-							<a href="" class="a_button">Typ 3</a>
-						</li>
-						<li>
-							<a href="" class="a_button">Typ 4</a>
-						</li>
-					</ul>
-				</nav>
-			</div>
-			<h3>header</h3>
-			<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
-			<header class="header_page demo__header header_fancy">
-				<h1>Aufmacher</h1>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
-				<nav class="nav_separate_right">
-					<ul>
-						<li>
-							<a href="" class="a_button">Mensch</a>
-						</li>
-						<li>
-							<a href="" class="a_button">Pflanze</a>
-						</li>
-					</ul>
-				</nav>
-				<nav class="nav_right">
-					<ul>
-						<li>
-							<a href="" class="a_button">Blau</a>
-						</li>
-						<li>
-							<a href="" class="a_button">Gelb</a>
-						</li>
-					</ul>
-				</nav>
-			</header>
-			<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
-			<div class="box_space h_basic">
-				<header id="js_demo_fix" class="header_page demo__header header_fix">
-					<nav class="nav_right">
-						<ul>
-							<li>
-								<a href="" class="a_button">Eins</a>
-							</li>
-							<li>
-								<a href="" class="a_button">Zwei</a>
-							</li>
-						</ul>
-					</nav>
-				</header>
-				<div class="pos_abs pin_bottom width_full">
-					<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
-					<footer id="js_demo_stop" class="demo_footer">
-						<nav class="nav_column nav_separate">
-							<ul>
-								<li>
-									<a href="" class="a_button_text">Alpha</a>
-								</li>
-								<li>
-									<a href="" class="a_button_text">Bravo</a>
-								</li>
-								<li>
-									<a href="" class="a_button_text">Charlie</a>
-								</li>
-								<li>
-									<a href="" class="a_button_text">Delta</a>
-								</li>
-							</ul>
-						</nav>
-						<p class="txt_center demo__credits">
-							<i class="i_bright">👨‍💻</i>
-								mit
-								<i class="i_bright">❤</i>
-								von
-								<a href="https://interaktionsweise.de">Interaktionsweise</a>
-						</p>
-					</footer>
-				</div>
-			</div>
-
-			<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>
-			<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.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>
-			<nav>
-				<ul class="list_link">
-					<li>{{ ph.email('', '📧 name@domain.tld') }}</li>
-					<li>
-						<a href=""><img src="{{ pageBase }}art/bullet.gif" alt="">{{ ph.name() }}</a>
-					</li>
-				</ul>
-			</nav>
-			<h3>div</h3>
-			<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre>
-			<div class="space_left_fourth">
-				<hr/>
-				<p>Eingerückter Inhalt</p>
-				<hr/>
-			</div>
-
-			<h2>Tabellen</h2>
-			<pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16  height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2</code></pre>
-			<table class="table_link js_pop">
-				<thead>
-					<tr>
-						<th>&nbsp;</th>
-						<th>Ab / Zy</th>
-						<th>Neu / Alt</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr>
-						<td class="cell_icon" rowspan="2">■</td>
-						<td class="cell_link">
-							<a href="" target="_blank">Name</a>
-							<a href="" target="_blank">URL</a>
-						</td>
-						<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
-					</tr>
-					<tr>
-						<td class="cell_text">
-							<div class="shorten">Beschreibung</div>
-						</td>
-					</tr>
-				</tbody>
-				<tbody>
-					<tr>
-						<td class="cell_icon" rowspan="2">■</td>
-						<td class="cell_link">
-							<a href="" target="_blank">Name</a>
-							<a href="" target="_blank">URL</a>
-						</td>
-						<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
-					</tr>
-					<tr>
-						<td class="cell_text">
-							<div class="shorten">Beschreibung</div>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-
-			<h2>Eingebettet</h2>
-			<div class="demo__flag">
-				{{ ph.flag() }}
-			</div>
-		</article>
-	</section>
-{% endblock %}
-
-{% block script %}
-	{{ super() }}
-	<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
-	{{ log.asset(true) }}
-	{{ log.log('Assets loaded.', assetsLoaded) }}
-	<script>
-		// Page specific
-		// ------------------------------------------------------------------------------
-		$(document).ready(function () {
-			// jq-sticky-anything
-			$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
-		});
-	</script>
-{% endblock %}
--- a/source/screens/demo/pages/blank.liquid
+++ b/source/screens/demo/pages/blank.liquid
@ -1,10 +1,5 @@
 ---
 title: Blank
 ---
-{% assign pageBase = "../../" -%}
 {% assign pageId = page.fileSlug -%}
-{% layout "hippie/simple.liquid" %}
-
-{% block body %}
-<!-- {{ title }} -->
-{% endblock %}
+{% layout 'hippie/simple.liquid' %}
--- a/source/screens/demo/pages/default.liquid
+++ b/source/screens/demo/pages/default.liquid
@ -1,17 +1,13 @@
 ---
 title: Default
 ---
-{% assign pageBase = "../" -%}
 {% assign pageId = page.fileSlug -%}
-{% assign pageClass = "default" -%}
-{% assign bodyClass = "default" -%}
-{% layout "hippie/default.liquid" %}
+{% assign pageClass = 'default' -%}
+{% assign bodyClass = 'default' -%}
+{% layout 'hippie/default.liquid' %}

 {% block title %}{{ title }}{% endblock %}

-{% block script %}
-<script>
-	// Page script
-	console.log("pageBase is: {{ pageBase }}");
-</script>
-{% endblock %}
+{% block body %}
+<!-- {{ title }} body -->
+{% endblock %}
--- a/source/screens/demo/pages/error/304.liquid
+++ b/source/screens/demo/pages/error/304.liquid
@ -1,9 +1,8 @@
 ---
 title: 304
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}

 {% block main %}
 {{ block.super -}}
--- a/source/screens/demo/pages/error/400.liquid
+++ b/source/screens/demo/pages/error/400.liquid
@ -1,9 +1,8 @@
 ---
 title: 400
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}

 {% block main %}
 {{ block.super -}}
--- a/source/screens/demo/pages/error/401.liquid
+++ b/source/screens/demo/pages/error/401.liquid
@ -1,9 +1,8 @@
 ---
 title: 401
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}

 {% block main %}
 {{ block.super -}}
--- a/source/screens/demo/pages/error/403.liquid
+++ b/source/screens/demo/pages/error/403.liquid
@ -1,9 +1,8 @@
 ---
 title: 403
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}

 {% block main %}
 {{ block.super -}}
--- a/source/screens/demo/pages/error/404.liquid
+++ b/source/screens/demo/pages/error/404.liquid
@ -1,9 +1,8 @@
 ---
 title: 404
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}

 {% block main %}
 {{ block.super -}}
--- a/source/screens/demo/pages/error/408.liquid
+++ b/source/screens/demo/pages/error/408.liquid
@ -1,9 +1,8 @@
 ---
 title: 408
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}

 {% block main %}
 {{ block.super -}}
--- a/source/screens/demo/pages/error/500.liquid
+++ b/source/screens/demo/pages/error/500.liquid
@ -1,9 +1,8 @@
 ---
 title: 500
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}

 {% block main %}
 {{ block.super -}}
--- a/source/screens/demo/pages/error/503.liquid
+++ b/source/screens/demo/pages/error/503.liquid
@ -1,9 +1,8 @@
 ---
 title: 503
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}

 {% block main %}
 {{ block.super -}}
--- a/source/screens/demo/pages/maintenance.liquid
+++ b/source/screens/demo/pages/maintenance.liquid
@ -1,9 +1,8 @@
 ---
 title: Maintenance
 ---
-{% assign pageBase = "../../" -%}
-{% assign pageClass = "h_full_view" -%}
-{% layout "hippie/status.liquid" %}
+{% assign pageClass = 'h_full_view' -%}
+{% layout 'hippie/status.liquid' %}

 {% block body %}
 <hgroup id="root" class="txt_center">
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@ -1 +1 @@
-Subproject commit 91d136f1c310c6276ecb2f4318f468f842099816
+Subproject commit 69535d87ac38cbe210ed40f6c2b9952b67b8ce5f
--- a/source/templates/hippie/app.liquid
+++ b/source/templates/hippie/app.liquid
@ -1,7 +1,6 @@
-{% assign pageBase = "../../../" -%}
 {% assign pageId = page.fileSlug -%}
-{% assign pageClass = "html_ui" -%}
-{% layout "hippie/default.liquid" %}
+{% assign pageClass = 'html_ui' -%}
+{% layout 'hippie/default.liquid' %}

 {% block title %}{{ title }}{% endblock %}

--- a/source/templates/hippie/default.liquid
+++ b/source/templates/hippie/default.liquid
@ -18,10 +18,10 @@
 		{{ hippie.titlePostfix -}}
 	</title>
 	{% block meta -%}
-	{% render "hippie/partials/meta.liquid" %}
+	{% render 'hippie/partials/meta.liquid' %}
 	{% endblock -%}
 	{% block links -%}
-	{% render "hippie/partials/links.liquid" %}
+	{% render 'hippie/partials/links.liquid' %}
 	{% endblock -%}
 	{% endblock -%}
 </head>
@ -29,7 +29,7 @@
 <body{{ bodyClassAttr }}>
 {%- block body %}{% endblock -%}
 <script>
-	// Default script
+	// {{ title }} script
 </script>
 {%- block script %}{% endblock -%}
 </body>
--- a/source/templates/hippie/full.liquid
+++ b/source/templates/hippie/full.liquid
@ -18,19 +18,17 @@
 		{{ hippie.titlePostfix -}}
 	</title>
 	{% block meta -%}
-	{% render "hippie/partials/meta.liquid", author: "Interaktionsweise", desc: "Hippie interweaves preeminent personal interface elements" %}
+	{% render 'hippie/partials/meta.liquid', author: 'Interaktionsweise', desc: 'Hippie interweaves preeminent personal interface elements' %}
 	{% comment %}<base href="/">{% endcomment %}
 	{% endblock -%}
-	{% render "hippie/partials/script-log.liquid" %}
-	{% render "hippie/partials/log-setup", hippie: hippie, state: true -%}
-	{% render "hippie/partials/log-start" -%}
+	{% render 'hippie/partials/script-log.liquid' %}
+	{% render 'hippie/partials/log-setup', hippie: hippie, state: true -%}
+	{% render 'hippie/partials/log-start' -%}
 	{% block links -%}
-	{% render "hippie/partials/links.liquid" %}
-	{% comment %}<link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/>{% endcomment %}
-	{% comment %}<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/>{% endcomment %}
+	{% render 'hippie/partials/links.liquid' %}
 	<link rel="stylesheet" media="all" href="/css/demo.css" type="text/css"/>
 	{% endblock -%}
-	{% render "hippie/partials/log-log" with "HEAD end    :: Links parsed, starting to load." as msg -%}
+	{% render 'hippie/partials/log-log' with 'HEAD end    :: Links parsed, starting to load.' as msg -%}
 	{% endblock -%}
 </head>

--- a/source/templates/hippie/page.liquid
+++ b/source/templates/hippie/page.liquid
@ -1,5 +1,5 @@
 {% assign pageId = page.fileSlug -%}
-{% layout "hippie/full.liquid" %}
+{% layout 'hippie/full.liquid' %}

 {% block meta %}
 {{ block.super -}}
@ -22,15 +22,15 @@

 {% block body %}
 {{ block.super -}}
-{% render "hippie/partials/nav-page.liquid" %}
+{% render 'hippie/partials/nav-page.liquid' %}
 <div id="root">
-	{% render "hippie/partials/header-page.liquid" %}
+	{% render 'hippie/partials/header-page.liquid' %}

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

-	{% render "hippie/partials/footer-page.liquid" %}
+	{% render 'hippie/partials/footer-page.liquid' %}
 </div>
 {% endblock %}

--- a/source/templates/hippie/partials/links.liquid
+++ b/source/templates/hippie/partials/links.liquid
@ -1,3 +1,3 @@
 {% comment %}<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">{% endcomment %}
-	<link rel="shortcut icon" type="image/x-icon" href="{{ pageBase }}favicon.ico">
+	<link rel="shortcut icon" type="image/x-icon" href="/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/nav-page.liquid
+++ b/source/templates/hippie/partials/nav-page.liquid
@ -4,7 +4,7 @@
 			<li class="js_scrolltop di_none">
 				<a href="#begin" class="a_button_meta">
 					<div class="sprite_img demo__sprite_up"></div>
-					{% comment %}<img src="{{ pageBase }}art/up.png" alt="" width="32" height="64">{% endcomment %}
+					{% comment %}<img src="/art/up.png" alt="" width="32" height="64">{% endcomment %}
 				</a>
 			</li>
 			<li>
@ -22,7 +22,7 @@
 			<li class="js_scrolldown">
 				<a href="#end" class="a_button_meta">
 					<div class="sprite_img demo__sprite_down"></div>
-					{% comment %}<img src="{{ pageBase }}art/down.png" alt="" width="32" height="32">{% endcomment %}
+					{% comment %}<img src="/art/down.png" alt="" width="32" height="32">{% endcomment %}
 				</a>
 			</li>
 		</ul>
--- a/source/templates/hippie/partials/placeholder-flag.liquid
+++ b/source/templates/hippie/partials/placeholder-flag.liquid
@ -1,4 +1,5 @@
 {% assign height = width | divided_by: 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">
 		{% comment %}<defs>
--- a/source/templates/hippie/simple.liquid
+++ b/source/templates/hippie/simple.liquid
@ -1,5 +1,5 @@
 {% assign pageId = page.fileSlug -%}
-{% layout "hippie/default.liquid" %}
+{% layout 'hippie/default.liquid' %}

 {% block title %}{{ title }}{% endblock %}

--- a/source/templates/hippie/status.liquid
+++ b/source/templates/hippie/status.liquid
@ -15,12 +15,12 @@
 		{{ hippie.titlePostfix -}}
 	</title>
 	{% block meta -%}
-	{% render "hippie/partials/meta.liquid" %}
+	{% render 'hippie/partials/meta.liquid' %}
 	{% endblock -%}
 	{% block links -%}
 	<link rel="shortcut icon" type="image/x-icon"
 		  href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH7SURBVDiNldM/aJNBGMfx71viH7TqIoLiIOoiSJRu0qE4uIiDm5OI4ODk4uYioqBuUkR0kKJNFC1mqUltlbZSqE3RYt+2SUyTppCmeU2bkiZ907z3vnfnUEU0NrXPeMd97p6H+xlaa02D0oDRYL+p4WEN9yZm8dT6dzQEQtkCuiIJxHKbBxZrLiNWmc8vRxn7lMGRanPAw0QW49Uwp8ODJEZmCCSt/wcGrCWavte44LRz7FyYnd+yxMZz2J7cGKh6kvczRUp3X9BnmFyLzHNVRpkeShNM1b+iDngUn2Oue4qLLV3cf+YST2tiLf3sj04wmypSEt76wFixwoJpcbKnh/ZMmuXK2vqdYJXLxyPMDiTpTOX/DbhK88bMMh4Y5sSZt3R2/+53aRkCzgT+oX4Kls2i49YDT+M5JkMmV+aj3BrII/+a15MuSevZEPl3UzxP5/8EMiurfO1L0hyNU27tZehL/c/zJNzsLXB+uoNySZBfFQD4tIbHHxJMfoxxu2pi7rK5fsm3FgL5MwXKQAPaMzh8JMbg61E6mn3c8B/CF5yx2L1tC/5TR4nsAS/RhlNzcR0P6TggFVoDGrYqyYMkLOybZ4fQZFZqGOHsgi4KF1tIakrhKIXj/WrBQAuJV3EQtsBbEQjbQVQEB/0HUHu3Y2wU5/XKVRqhFD8AgpYX2M9TNGcAAAAASUVORK5CYII=">
-	<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
+	<link rel="stylesheet" type="text/css" media="all" href="/css/demo_basic.css"/>
 	{% endblock -%}
 	{% endblock -%}
 </head>
Author	SHA1	Message	Date
sthag	5765207e51	feat: Change table classes	2026-02-21 14:09:10 +01:00
sthag	2d3c049d40	feat: Remove pageBase from liquid templates - Remove pageBase global from all liquid templates - Change " to ' for all liquid tags	2026-02-21 12:58:31 +01:00
sthag	d64bf61a9c	feat: Replace layouts template - Change nunjucks to liquid for layouts screen - Add shortcodes for placeholders to eleventy	2026-02-21 12:16:34 +01:00
sthag	b10379782f	feat: Add functionality to table screen - New templates for rows with different content - Rows can now be repositioned - Change of rows now causes a reindex	2026-02-21 09:28:50 +01:00
sthag	fd5f3ba89f	chore: Add possibility to deploy - New npm scripts - New folder for deployment content - Currently using a fixed --pathprefix option with hippie as value - Add deploy to gitignore	2026-02-19 20:43:52 +01:00
sthag	d04e0e3174	feat: Add content to table screen	2026-02-17 21:53:06 +01:00
sthag	6c5bf2e54d	feat: Replace nunjucks with liquid for introduction screen	2026-02-17 21:01:00 +01:00
sthag	f28bed372c	feat: Optimize components screen - Fix typos - Format - Rework shift and capslock detection	2026-02-17 20:33:44 +01:00