45 changed files with 568 additions and 705 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@ -1,7 +1,5 @@
-const {EleventyHtmlBasePlugin} = require("@11ty/eleventy");
-
 module.exports = function (eleventyConfig) {
-	eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+	// eleventyConfig.addPlugin(EleventyHtmlBasePlugin);

 	eleventyConfig.setLiquidOptions({
 		// greedy: false,
@ -28,32 +26,10 @@ 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,7 +1,6 @@
 # HIPPIE
 ###################
 build/**
-deploy/**
 reports/**
 source/art/sprites/
 source/art/images/sprite.*
--- a/package.json
+++ b/package.json
@ -24,11 +24,9 @@
    "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,7 +3,8 @@ title: Basics
 tags:
 - demoIndex
 ---
-{% layout 'hippie/page.liquid' %}
+{% assign pageBase = "../" -%}
+{% layout "hippie/page.liquid" %}

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

@ -277,7 +278,7 @@ tags:
 		<nav class="nav_center_old">
 			<ul>
 				<li>
-					<a href="/demo/examples/start.html" class="a_button">Startseite</a>
+					<a href="{{ pageBase }}demo.html" class="a_button">Startseite</a>
 				</li>
 				<li>
 					<a href="" class="a_button a_internal">Hilfe</a>
@ -579,7 +580,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
@ -598,7 +599,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>
@ -631,7 +632,7 @@ tags:
 			<div class="exp_pop">
 				<code class="code_solo">table>tr>td*2^tr>td[colspan=2]</code>
 			</div>
-			<table class="blank float_space_left js_pop">
+			<table class="table_blank float_space_left js_pop">
 				<tr>
 					<td>Mit</td>
 					<td>ohne</td>
@ -641,12 +642,12 @@ tags:
 				</tr>
 			</table>
 			<div class="exp_pop">
-				<code class="code_solo">table.blank>tr>td*2^tr>td[colspan=2]</code>
+				<code class="code_solo">table.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 fix js_pop">
+		<table class="width_full table_fix js_pop">
 			<caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
 			<thead>
 			<tr>
@ -684,7 +685,7 @@ tags:
 			</tfoot>
 		</table>
 		<div class="exp_pop">
-			<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>
+			<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>
 		</div>
 		<p>Viele weitere Formate sind möglich.</p>
 	</article>
@ -738,7 +739,7 @@ tags:
 		</p>
 		<div class="overflow">
 			<div class="float_left">
-				<table class="fix blank">
+				<table class="table_fix table_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,12 +31,8 @@ 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>
@ -44,8 +40,7 @@ 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 üblicherweise allgemeine Klassen zur Steuerung der Abmessungen
-			zugewiesen.</p>
+		<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
 		<h2>&lt;article&gt;</h2>
 		<article>Ein Artikel.</article>
 		<h2>&lt;section&gt;</h2>
@ -90,10 +85,10 @@ tags:
 			<p>Innerhalb eines <code>&lt;header&gt;</code>.</p>
 		</header>
 		<h2>&lt;footer&gt;</h2>
-		<p>Bekommt üblicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
+		<p>Bekommt überlicherweise 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>
@ -172,11 +167,12 @@ tags:
 		<h4>Varianten</h4>
 		<pre class="pre_code"><code>div.div_info>p</code></pre>
 		<div class="div_info">
-			<p>Absatz in einer Box mit dem Typ <i>Information</i>.</p>
+			<p>Absatz in Informationsbox.</p>
 		</div>
 		<pre class="pre_code"><code>div.box_space>div.box_cube>span</code></pre>
 		<div class="box_space">
-			<div class="box_cube"><span>Text</span></div>
+			<div 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>
@ -189,8 +185,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.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">
+		<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
+		<table class="width_full table_fix">
 			<thead>
 			<tr>
 				<th class="cell_pre" scope="col"></th>
@ -220,8 +216,8 @@ tags:
 			</tr>
 			</tbody>
 		</table>
-		<pre class="pre_code"><code>table.width_full.stripe.fix.free>tr>td*3</code></pre>
-		<table class="width_full stripe fix free">
+		<pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre>
+		<table class="width_full table_stripe table_fix table_free">
 			<tr>
 				<td>Tabelle</td>
 				<td></td>
@ -243,7 +239,7 @@ tags:
 				<td>Streifen</td>
 			</tr>
 		</table>
-		<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>
+		<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
 		<table>
 			<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
 			<thead>
@ -303,24 +299,20 @@ tags:
 		</div>
 		<div id="capsCheck">
 			<form action="">
-				<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>
+				<input type="password" onkeypress="capLock(event)"/>
+				<div id="hint" style="visibility:hidden">Caps Lock is on.</div>
+				<input type="text"/>
+				<span id="error">Caps Lock is ON.</span>
 			</form>
 		</div>
 		<h2>&lt;select&gt;</h2>
 		<select name="F">
 			<option value="0">
-				Plain list
-			</option>
+				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>
@ -329,47 +321,79 @@ tags:
 {% block script %}
 {{ block.super -}}
 <script>
-	const capsHint = document.getElementById('hintPass');
-	let isShiftPressed = false;
+	function capLock(e) {
+		console.log('capLock');
+		kc = e.keyCode
+			? e.keyCode
+			: e.which;
+		sk = e.shiftKey
+			? e.shiftKey
+			: (
+				(kc == 16)
+					? true
+					: false);

-	document.getElementById('inpPass').addEventListener('keydown', shiftDetect);
-
-	function shiftDetect(event) {
-		if (event.getModifierState('Shift')) {
-			isShiftPressed = true;
-			capsHint.style.visibility = 'visible';
+		if (((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk)) {
+			document
+				.getElementById('hint')
+				.style
+				.visibility = 'visible';
 		} else {
-			isShiftPressed = false;
-			capsHint.style.visibility = 'hidden';
+			document
+				.getElementById('hint')
+				.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 capsHint = document.getElementById('hintText');
+		const body = document.getElementsByTagName('body')[0];
+		const capsWarning = document.getElementById('error');
+		let isShiftPressed = false;
 		let isCapsOn = false;

-		document.getElementById('inpText').addEventListener('keyup', function (e) {
-			if (event.getModifierState('CapsLock')) {
-				capsHint.style.display = 'inline';
-				isCapsOn = true;
-			} else {
-				capsHint.style.display = 'none';
-				isCapsOn = false;
+		console.log(body);
+		body.addEventListener('keydown', function (e) {
+			var keyCode = e.keyCode
+				? e.keyCode
+				: e.which;
+			if (keyCode === 16) {
+				isShiftPressed = true;
+			}
+		});
+		body.addEventListener('keyup', function (e) {
+			var keyCode = e.keyCode
+				? e.keyCode
+				: e.which;
+			if (keyCode === 16) {
+				isShiftPressed = false;
+			}
+			if (keyCode === 20) {
+				if (isCapsOn) {
+					isCapsOn = false;
+					capsWarning.style.display = 'none';
+				} else {
+					isCapsOn = true;
+					capsWarning.style.display = 'inline-block';
+				}
+			}
+		});
+		body.addEventListener('keypress', function (e) {
+			var keyCode = e.keyCode
+				? e.keyCode
+				: e.which;
+			if (keyCode <= 40)
+				return;
+			if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
+				isCapsOn = true;
+				capsWarning.style.display = 'inline-block';
+			} else {
+				capsWarning.style.display = 'none';
 			}
-
-			console.log('CapsLock', isCapsOn);
 		});
 	}

-	capsDetect();
+	// TODO: Beide Varianten lauffähig machen
+	// 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,9 +3,10 @@ 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="/js/app.js"></script>
-<script src="/js/drag.js"></script>
+<script src="{{ pageBase }}js/app.js"></script>
+<script src="{{ pageBase }}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,8 +19,6 @@ 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>
@ -33,10 +31,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" class="draggable">
+		<table id="content">
 			<thead>
 			<tr>
 				<th scope="col" title="Index">#</th>
@ -45,10 +43,7 @@ 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>
@ -58,101 +53,11 @@ tags:
 	</section>
 </main>
 <template id="rowDefault">
-	<tr draggable="true">
+	<tr>
 		<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="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="Drag"><i class="bi bi-grip-horizontal"></i></button>
 				<button title="Expand"><i class="bi bi-arrows-expand"></i></button>
 			</nav>
 		</td>
@ -163,15 +68,6 @@ 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>
@ -182,7 +78,6 @@ tags:
 		</td>
 	</tr>
 </template>
-
 {% render 'hippie/partials/frame-mode.liquid' %}
 {% endblock %}

@ -221,6 +116,7 @@ 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) => {
@ -244,9 +140,6 @@ 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;
@ -254,10 +147,8 @@ tags:
 		td[3].textContent = placeholderNames[j];
 		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
 		td[4].firstElementChild.textContent = placeholderContents[k];
-		td[5].firstElementChild.value = amount;
-		td[5].firstElementChild.style.width = '4em';
-		td[7].textContent = currencyEuro.format(price);
-		td[8].textContent = currencyEuro.format(sum);
+		// td[5].textContent = randomIntFrom(1, i).toString();
+		td[5].textContent = currencyEuro.format(randomFloatFrom(1, 1000000, 2));

 		tbodyPosition.appendChild(clone);
 	}
@ -326,55 +217,7 @@ tags:
 				elementNew.scrollIntoView({behavior: 'smooth', block: 'nearest'});
 			}
 		}
-
-		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');
+		// TODO: Neuen index bilden
 	});

 	function cloneRow(type = 'default') {
@ -385,15 +228,5 @@ 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="/js/globals.js"></script>{% endcomment %}
+{% comment %}<script src="{{ pageBase }}js/globals.js"></script>{% endcomment %}
 <script src="/vendor/hippie-script.js"></script>
-<script src="/js/app.js"></script>
-<script src="/js/windows.js"></script>
+<script src="{{ pageBase }}js/app.js"></script>
+<script src="{{ pageBase }}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,9 +4,10 @@ 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
@ -1,40 +0,0 @@
---
-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
@ -0,0 +1,47 @@
+---
+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
@ -1,314 +0,0 @@
---
-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
@ -0,0 +1,317 @@
+---
+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,5 +1,10 @@
 ---
 title: Blank
 ---
+{% assign pageBase = "../../" -%}
 {% assign pageId = page.fileSlug -%}
-{% layout 'hippie/simple.liquid' %}
+{% layout "hippie/simple.liquid" %}
+
+{% block body %}
+<!-- {{ title }} -->
+{% endblock %}
--- a/source/screens/demo/pages/default.liquid
+++ b/source/screens/demo/pages/default.liquid
@ -1,13 +1,17 @@
 ---
 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 body %}
-<!-- {{ title }} body -->
-{% endblock %}
+{% block script %}
+<script>
+	// Page script
+	console.log("pageBase is: {{ pageBase }}");
+</script>
+{% endblock %}
--- a/source/screens/demo/pages/error/304.liquid
+++ b/source/screens/demo/pages/error/304.liquid
@ -1,8 +1,9 @@
 ---
 title: 304
 ---
-{% assign bodyClass = 'body_status' %}
-{% layout 'hippie/status.liquid' %}
+{% assign pageBase = "../../../" -%}
+{% 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,8 +1,9 @@
 ---
 title: 400
 ---
-{% assign bodyClass = 'body_status' %}
-{% layout 'hippie/status.liquid' %}
+{% assign pageBase = "../../../" -%}
+{% 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,8 +1,9 @@
 ---
 title: 401
 ---
-{% assign bodyClass = 'body_status' %}
-{% layout 'hippie/status.liquid' %}
+{% assign pageBase = "../../../" -%}
+{% 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,8 +1,9 @@
 ---
 title: 403
 ---
-{% assign bodyClass = 'body_status' %}
-{% layout 'hippie/status.liquid' %}
+{% assign pageBase = "../../../" -%}
+{% 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,8 +1,9 @@
 ---
 title: 404
 ---
-{% assign bodyClass = 'body_status' %}
-{% layout 'hippie/status.liquid' %}
+{% assign pageBase = "../../../" -%}
+{% 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,8 +1,9 @@
 ---
 title: 408
 ---
-{% assign bodyClass = 'body_status' %}
-{% layout 'hippie/status.liquid' %}
+{% assign pageBase = "../../../" -%}
+{% 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,8 +1,9 @@
 ---
 title: 500
 ---
-{% assign bodyClass = 'body_status' %}
-{% layout 'hippie/status.liquid' %}
+{% assign pageBase = "../../../" -%}
+{% 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,8 +1,9 @@
 ---
 title: 503
 ---
-{% assign bodyClass = 'body_status' %}
-{% layout 'hippie/status.liquid' %}
+{% assign pageBase = "../../../" -%}
+{% 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,8 +1,9 @@
 ---
 title: Maintenance
 ---
-{% assign pageClass = 'h_full_view' -%}
-{% layout 'hippie/status.liquid' %}
+{% assign pageBase = "../../" -%}
+{% 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 69535d87ac38cbe210ed40f6c2b9952b67b8ce5f
+Subproject commit 91d136f1c310c6276ecb2f4318f468f842099816
--- a/source/templates/hippie/app.liquid
+++ b/source/templates/hippie/app.liquid
@ -1,6 +1,7 @@
+{% 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>
-	// {{ title }} script
+	// Default script
 </script>
 {%- block script %}{% endblock -%}
 </body>
--- a/source/templates/hippie/full.liquid
+++ b/source/templates/hippie/full.liquid
@ -18,17 +18,19 @@
 		{{ 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' %}
+	{% 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 %}
 	<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="/favicon.ico">
+	<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/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="/art/up.png" alt="" width="32" height="64">{% endcomment %}
+					{% comment %}<img src="{{ pageBase }}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="/art/down.png" alt="" width="32" height="32">{% endcomment %}
+					{% comment %}<img src="{{ pageBase }}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,5 +1,4 @@
 {% 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="/css/demo_basic.css"/>
+	<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
 	{% endblock -%}
 	{% endblock -%}
 </head>