diff --git a/.eleventy.js b/.eleventy.js
index 34db01b..5b24790 100644
--- 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)': '.'});
diff --git a/.gitignore b/.gitignore
index 6ae690a..a4481ea 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,6 @@
 # HIPPIE
 ###################
 build/**
-deploy/**
 reports/**
 source/art/sprites/
 source/art/images/sprite.*
diff --git a/package.json b/package.json
index 8036798..49351cc 100644
--- 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,
diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid
index 6d190ec..017fcfd 100644
--- 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>
diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid
index 4f4dd2b..75c6eeb 100644
--- 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 %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/10print.liquid b/source/screens/demo/examples/10print.liquid
index 9ee9246..8486ef3 100644
--- 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 -}}
diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 7dc6998..ea927c6 100644
--- 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>
diff --git a/source/screens/demo/examples/game.liquid b/source/screens/demo/examples/game.liquid
index 734a5a6..19d97dd 100644
--- 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">
diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid
index e11d3f8..3a42779 100644
--- 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>
diff --git a/source/screens/demo/examples/ui/cli.liquid b/source/screens/demo/examples/ui/cli.liquid
index a87d4b8..18f4cd4 100644
--- 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">
diff --git a/source/screens/demo/examples/ui/drag.liquid b/source/screens/demo/examples/ui/drag.liquid
index 37d806e..7b46674 100755
--- 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');
diff --git a/source/screens/demo/examples/ui/explorer.liquid b/source/screens/demo/examples/ui/explorer.liquid
index bfdd28a..f8e66fa 100644
--- 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' %}
diff --git a/source/screens/demo/examples/ui/form.liquid b/source/screens/demo/examples/ui/form.liquid
index 3a7aceb..492e191 100644
--- 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' %}
diff --git a/source/screens/demo/examples/ui/gallery.liquid b/source/screens/demo/examples/ui/gallery.liquid
index 0d372d4..8128023 100755
--- 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' %}
diff --git a/source/screens/demo/examples/ui/index.liquid b/source/screens/demo/examples/ui/index.liquid
index 5952f16..614beed 100644
--- 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 %}
 
diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
index a386015..5266b2a 100755
--- 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 %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/tile.liquid b/source/screens/demo/examples/ui/tile.liquid
index be51071..4bcd8c4 100644
--- 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 %}
diff --git a/source/screens/demo/examples/ui/tui.liquid b/source/screens/demo/examples/ui/tui.liquid
index ac42d52..cb2434f 100644
--- 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' %}
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index d8700cd..02606e6 100644
--- 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
diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid
index 99ba875..9f4aa9e 100644
--- 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">
diff --git a/source/screens/demo/introduction.liquid b/source/screens/demo/introduction.liquid
deleted file mode 100644
index 91993cb..0000000
--- a/source/screens/demo/introduction.liquid
+++ /dev/null
@@ -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 %}
\ No newline at end of file
diff --git a/source/screens/demo/introduction.njk b/source/screens/demo/introduction.njk
new file mode 100644
index 0000000..f1a9752
--- /dev/null
+++ 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 %}
\ No newline at end of file
diff --git a/source/screens/demo/layouts.liquid b/source/screens/demo/layouts.liquid
deleted file mode 100644
index 500e902..0000000
--- a/source/screens/demo/layouts.liquid
+++ /dev/null
@@ -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 %}
\ No newline at end of file
diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk
new file mode 100644
index 0000000..a35cfff
--- /dev/null
+++ 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 %}
\ No newline at end of file
diff --git a/source/screens/demo/pages/blank.liquid b/source/screens/demo/pages/blank.liquid
index 5cf5e7c..6ef5d56 100644
--- 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 %}
diff --git a/source/screens/demo/pages/default.liquid b/source/screens/demo/pages/default.liquid
index 9b84b78..bb44e71 100644
--- 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 %}
\ No newline at end of file
diff --git a/source/screens/demo/pages/error/304.liquid b/source/screens/demo/pages/error/304.liquid
index 75127a7..4fa65ef 100644
--- 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 -}}
diff --git a/source/screens/demo/pages/error/400.liquid b/source/screens/demo/pages/error/400.liquid
index ffe7d9c..86cb860 100644
--- 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 -}}
diff --git a/source/screens/demo/pages/error/401.liquid b/source/screens/demo/pages/error/401.liquid
index a2fbb39..09029d6 100644
--- 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 -}}
diff --git a/source/screens/demo/pages/error/403.liquid b/source/screens/demo/pages/error/403.liquid
index cfa9eed..31a5790 100644
--- 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 -}}
diff --git a/source/screens/demo/pages/error/404.liquid b/source/screens/demo/pages/error/404.liquid
index 9a00731..a90082a 100644
--- 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 -}}
diff --git a/source/screens/demo/pages/error/408.liquid b/source/screens/demo/pages/error/408.liquid
index 1f0ef44..7984e61 100644
--- 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 -}}
diff --git a/source/screens/demo/pages/error/500.liquid b/source/screens/demo/pages/error/500.liquid
index 5e6cb69..6d21ccc 100644
--- 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 -}}
diff --git a/source/screens/demo/pages/error/503.liquid b/source/screens/demo/pages/error/503.liquid
index 2a01f87..4805020 100644
--- 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 -}}
diff --git a/source/screens/demo/pages/maintenance.liquid b/source/screens/demo/pages/maintenance.liquid
index fe36599..4fa3286 100644
--- 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">
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 69535d8..91d136f 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 69535d87ac38cbe210ed40f6c2b9952b67b8ce5f
+Subproject commit 91d136f1c310c6276ecb2f4318f468f842099816
diff --git a/source/templates/hippie/app.liquid b/source/templates/hippie/app.liquid
index 4118172..7e704f7 100644
--- 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 %}
 
diff --git a/source/templates/hippie/default.liquid b/source/templates/hippie/default.liquid
index 4cb653e..bdcf341 100644
--- 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>
diff --git a/source/templates/hippie/full.liquid b/source/templates/hippie/full.liquid
index 5b22b17..a3bc72c 100644
--- 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>
 
diff --git a/source/templates/hippie/page.liquid b/source/templates/hippie/page.liquid
index b6edd40..4afccb7 100644
--- 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 %}
 
diff --git a/source/templates/hippie/partials/links.liquid b/source/templates/hippie/partials/links.liquid
index 32d854d..c1a8845 100644
--- 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=">
diff --git a/source/templates/hippie/partials/nav-page.liquid b/source/templates/hippie/partials/nav-page.liquid
index cf52d72..36e5184 100644
--- 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>
diff --git a/source/templates/hippie/partials/placeholder-flag.liquid b/source/templates/hippie/partials/placeholder-flag.liquid
index 280a48c..02432cb 100644
--- 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>
diff --git a/source/templates/hippie/simple.liquid b/source/templates/hippie/simple.liquid
index b711fe6..b644f9f 100644
--- 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 %}
 
diff --git a/source/templates/hippie/status.liquid b/source/templates/hippie/status.liquid
index 86499ed..f2e0ce1 100644
--- 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>