diff --git a/.eleventy.js b/.eleventy.js
index 5b24790..34db01b 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,5 +1,7 @@
+const {EleventyHtmlBasePlugin} = require("@11ty/eleventy");
+
 module.exports = function (eleventyConfig) {
-	// eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+	eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
 
 	eleventyConfig.setLiquidOptions({
 		// greedy: false,
@@ -26,10 +28,32 @@ module.exports = function (eleventyConfig) {
 		brand: 'hippie',
 		titlePrefix: '',
 		titlePostfix: ' - HIPPIE',
+		placeholders: {
+			name: 'Vorname Nachname',
+			address: 'Straße Nr., PLZ Ort',
+			phone: '+49 (0)101 1337 48',
+			mail: 'name@domain.tld'
+		},
 		debugMode: true,
 		legacyMode: false
 	});
 
+	eleventyConfig.addShortcode('text', function (text, attrId, attrClass) {
+		return `<span id="${attrId}" class="${attrClass}">${text}</span>`;
+	});
+
+	eleventyConfig.addShortcode('link', function (target, text, attrId, attrClass) {
+		if (text === '') {
+			text = target;
+		}
+
+		if (target.indexOf('@') !== -1) {
+			target = 'mailto:' + target;
+		}
+
+		return `<a id="${attrId}" class="${attrClass}" href="${target}">${text}</a>`;
+	});
+
 	eleventyConfig.addPassthroughCopy({'source/art/images': 'art'});
 
 	eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'});
diff --git a/.gitignore b/.gitignore
index a4481ea..6ae690a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 # HIPPIE
 ###################
 build/**
+deploy/**
 reports/**
 source/art/sprites/
 source/art/images/sprite.*
diff --git a/package.json b/package.json
index 49351cc..8036798 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,11 @@
     "clean:report": "rm -rf report/*",
     "clean:test": "rm -rf test/*",
     "style:compile": "sass source/style:build/css --load-path=vendor",
+    "style:deploy": "sass source/style:deploy/css --load-path=vendor",
     "style:watch": "sass --watch source/style:build/css --load-path=vendor",
     "build:new": "npm run clean:build && npx @11ty/eleventy && npm run style:compile",
     "build": "npx @11ty/eleventy && npm run style:compile",
+    "deploy": "npm run clean:deploy && npx @11ty/eleventy --output=deploy --pathprefix=hippie && npm run style:deploy",
     "serve": "npm run style:watch & npx @11ty/eleventy --serve"
   },
   "private": true,
diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid
index 017fcfd..6d190ec 100644
--- a/source/screens/demo/basics.liquid
+++ b/source/screens/demo/basics.liquid
@@ -3,8 +3,7 @@ title: Basics
 tags:
 - demoIndex
 ---
-{% assign pageBase = "../" -%}
-{% layout "hippie/page.liquid" %}
+{% layout 'hippie/page.liquid' %}
 
 {% block title %}Grundlagen{% endblock %}
 
@@ -278,7 +277,7 @@ tags:
 		<nav class="nav_center_old">
 			<ul>
 				<li>
-					<a href="{{ pageBase }}demo.html" class="a_button">Startseite</a>
+					<a href="/demo/examples/start.html" class="a_button">Startseite</a>
 				</li>
 				<li>
 					<a href="" class="a_button a_internal">Hilfe</a>
@@ -580,7 +579,7 @@ tags:
 	</article>
 	<article>
 		<h1 id="embedded">Eingebundene Inhalte</h1>
-		{% render "hippie/partials/placeholder-flag.liquid", type: "img", width: "128", desc: "Fahne von Interaktionsweise" %}
+		{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', width: '128', desc: 'Fahne von Interaktionsweise' %}
 		<p>Dies ist ein Bild. Es wird mit dem Element
 			<code>&lt;img&gt;</code>
 			eingebunden. Solch ein Bild hat üblicherweise die Attribute
@@ -599,7 +598,7 @@ tags:
 			und
 			<code>&lt;picture&gt;</code>
 			in Kombination verwendet werden.</p>
-		{% render "hippie/partials/placeholder-flag.liquid", type: "img", src: "file", width: "128", desc: "Fahne von Interaktionsweise" %}
+		{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '128', desc: 'Fahne von Interaktionsweise' %}
 	</article>
 	<article>
 		<h1>Tabellen</h1>
@@ -632,7 +631,7 @@ tags:
 			<div class="exp_pop">
 				<code class="code_solo">table>tr>td*2^tr>td[colspan=2]</code>
 			</div>
-			<table class="table_blank float_space_left js_pop">
+			<table class="blank float_space_left js_pop">
 				<tr>
 					<td>Mit</td>
 					<td>ohne</td>
@@ -642,12 +641,12 @@ tags:
 				</tr>
 			</table>
 			<div class="exp_pop">
-				<code class="code_solo">table.table_blank>tr>td*2^tr>td[colspan=2]</code>
+				<code class="code_solo">table.blank>tr>td*2^tr>td[colspan=2]</code>
 			</div>
 		</div>
 		<p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre
 			Zellverteilung:</p>
-		<table class="width_full table_fix js_pop">
+		<table class="width_full fix js_pop">
 			<caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
 			<thead>
 			<tr>
@@ -685,7 +684,7 @@ tags:
 			</tfoot>
 		</table>
 		<div class="exp_pop">
-			<code class="code_solo">table.width_full.table_fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2</code>
+			<code class="code_solo">table.width_full.fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2</code>
 		</div>
 		<p>Viele weitere Formate sind möglich.</p>
 	</article>
@@ -739,7 +738,7 @@ tags:
 		</p>
 		<div class="overflow">
 			<div class="float_left">
-				<table class="table_fix table_blank">
+				<table class="fix blank">
 					<tr>
 						<td>
 							<label for="demo__raw_a">Alpha:</label>
diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid
index 75c6eeb..4f4dd2b 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,8 +31,12 @@ tags:
 <section class="sec_main_center">
 	<header class="header_txt">
 		<h1>Übersicht aller Elemente</h1>
-		<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://html.spec.whatwg.org/multipage/#toc-semantics">html.spec.whatwg.org/multipage/#toc-semantics</a>) verwendet.</p>
-		<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
+		<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in
+			Gruppen eingeteilt, die auch das W3Consortium (<a
+				href="https://html.spec.whatwg.org/multipage/#toc-semantics">html.spec.whatwg.org/multipage/#toc-semantics</a>)
+			verwendet.</p>
+		<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax
+			dargestellt.</p>
 	</header>
 	<pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h2{&lt;tag&gt;}+h4{Varianten}</code></pre>
 	<article>
@@ -40,7 +44,8 @@ tags:
 		<p>Elemente:</p>
 		<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
 		<h2>&lt;body&gt;</h2>
-		<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
+		<p>Keine speziellen Attribute. Bekommt üblicherweise allgemeine Klassen zur Steuerung der Abmessungen
+			zugewiesen.</p>
 		<h2>&lt;article&gt;</h2>
 		<article>Ein Artikel.</article>
 		<h2>&lt;section&gt;</h2>
@@ -85,10 +90,10 @@ tags:
 			<p>Innerhalb eines <code>&lt;header&gt;</code>.</p>
 		</header>
 		<h2>&lt;footer&gt;</h2>
-		<p>Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
+		<p>Bekommt üblicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
 		<footer>Fußbereich</footer>
 		<div style="position:relative;height:256px;background-color:#b7e0f0;">
-			{% render "hippie/partials/footer-pinned.liquid" %}
+			{% render 'hippie/partials/footer-pinned.liquid' %}
 		</div>
 	</article>
 	<article>
@@ -167,12 +172,11 @@ tags:
 		<h4>Varianten</h4>
 		<pre class="pre_code"><code>div.div_info>p</code></pre>
 		<div class="div_info">
-			<p>Absatz in Informationsbox.</p>
+			<p>Absatz in einer Box mit dem Typ <i>Information</i>.</p>
 		</div>
 		<pre class="pre_code"><code>div.box_space>div.box_cube>span</code></pre>
 		<div class="box_space">
-			<div class="box_cube">
-				<span>Text</span></div>
+			<div class="box_cube"><span>Text</span></div>
 		</div>
 		<pre class="pre_code"><code>div.box_placeholder+hr+div.box_placeholder_bkg</code></pre>
 		<div class="box_placeholder"></div>
@@ -185,8 +189,8 @@ tags:
 		<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
 		<h2>&lt;table&gt;</h2>
 		<h4>Varianten</h4>
-		<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
-		<table class="width_full table_fix">
+		<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
+		<table class="width_full fix">
 			<thead>
 			<tr>
 				<th class="cell_pre" scope="col"></th>
@@ -216,8 +220,8 @@ tags:
 			</tr>
 			</tbody>
 		</table>
-		<pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre>
-		<table class="width_full table_stripe table_fix table_free">
+		<pre class="pre_code"><code>table.width_full.stripe.fix.free>tr>td*3</code></pre>
+		<table class="width_full stripe fix free">
 			<tr>
 				<td>Tabelle</td>
 				<td></td>
@@ -239,7 +243,7 @@ tags:
 				<td>Streifen</td>
 			</tr>
 		</table>
-		<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
+		<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
 		<table>
 			<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
 			<thead>
@@ -299,20 +303,24 @@ tags:
 		</div>
 		<div id="capsCheck">
 			<form action="">
-				<input type="password" onkeypress="capLock(event)"/>
-				<div id="hint" style="visibility:hidden">Caps Lock is on.</div>
-				<input type="text"/>
-				<span id="error">Caps Lock is ON.</span>
+				<input id="inpPass" type="password"/>
+				<span id="hintPass" style="visibility:hidden"><kbd>Shift</kbd> is pressed.</span>
+				<br>
+				<input id ="inpText" type="text"/>
+				<span id="hintText"><kbd>CapsLock</kbd> is on.</span>
 			</form>
 		</div>
 		<h2>&lt;select&gt;</h2>
 		<select name="F">
 			<option value="0">
-				Plain list</option>
+				Plain list
+			</option>
 			<option value="1" selected="selected">
-				Fancy list</option>
+				Fancy list
+			</option>
 			<option value="2">
-				Table list</option>
+				Table list
+			</option>
 		</select>
 	</article>
 </section>
@@ -321,79 +329,47 @@ tags:
 {% block script %}
 {{ block.super -}}
 <script>
-	function capLock(e) {
-		console.log('capLock');
-		kc = e.keyCode
-			? e.keyCode
-			: e.which;
-		sk = e.shiftKey
-			? e.shiftKey
-			: (
-				(kc == 16)
-					? true
-					: false);
+	const capsHint = document.getElementById('hintPass');
+	let isShiftPressed = false;
 
-		if (((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk)) {
-			document
-				.getElementById('hint')
-				.style
-				.visibility = 'visible';
+	document.getElementById('inpPass').addEventListener('keydown', shiftDetect);
+
+	function shiftDetect(event) {
+		if (event.getModifierState('Shift')) {
+			isShiftPressed = true;
+			capsHint.style.visibility = 'visible';
 		} else {
-			document
-				.getElementById('hint')
-				.style
-				.visibility = 'hidden';
+			isShiftPressed = false;
+			capsHint.style.visibility = 'hidden';
 		}
+
+		console.log('Shift', isShiftPressed);
 	}
 
+	document.getElementById('inpPass').addEventListener('keyup', (event) => {
+		if (event.key === 'Shift') {
+			isShiftPressed = false;
+			capsHint.style.visibility = 'hidden';
+		}
+	});
+
 	function capsDetect() {
-		const body = document.getElementsByTagName('body')[0];
-		const capsWarning = document.getElementById('error');
-		let isShiftPressed = false;
+		const capsHint = document.getElementById('hintText');
 		let isCapsOn = false;
 
-		console.log(body);
-		body.addEventListener('keydown', function (e) {
-			var keyCode = e.keyCode
-				? e.keyCode
-				: e.which;
-			if (keyCode === 16) {
-				isShiftPressed = true;
-			}
-		});
-		body.addEventListener('keyup', function (e) {
-			var keyCode = e.keyCode
-				? e.keyCode
-				: e.which;
-			if (keyCode === 16) {
-				isShiftPressed = false;
-			}
-			if (keyCode === 20) {
-				if (isCapsOn) {
-					isCapsOn = false;
-					capsWarning.style.display = 'none';
-				} else {
-					isCapsOn = true;
-					capsWarning.style.display = 'inline-block';
-				}
-			}
-		});
-		body.addEventListener('keypress', function (e) {
-			var keyCode = e.keyCode
-				? e.keyCode
-				: e.which;
-			if (keyCode <= 40)
-				return;
-			if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
+		document.getElementById('inpText').addEventListener('keyup', function (e) {
+			if (event.getModifierState('CapsLock')) {
+				capsHint.style.display = 'inline';
 				isCapsOn = true;
-				capsWarning.style.display = 'inline-block';
 			} else {
-				capsWarning.style.display = 'none';
+				capsHint.style.display = 'none';
+				isCapsOn = false;
 			}
+
+			console.log('CapsLock', isCapsOn);
 		});
 	}
 
-	// TODO: Beide Varianten lauffähig machen
-	// capsDetect();
+	capsDetect();
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/10print.liquid b/source/screens/demo/examples/10print.liquid
index 8486ef3..9ee9246 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 ea927c6..7dc6998 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 19d97dd..734a5a6 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 3a42779..e11d3f8 100644
--- a/source/screens/demo/examples/start.liquid
+++ b/source/screens/demo/examples/start.liquid
@@ -3,10 +3,9 @@ title: Start
 tags:
 - demoExample
 ---
-{% assign pageBase = "../../" -%}
 {% assign pageId = page.fileSlug -%}
-{% assign bodyClass = "body_start" -%}
-{% layout "hippie/simple.liquid" %}
+{% assign bodyClass = 'body_start' -%}
+{% layout 'hippie/simple.liquid' %}
 
 {% block body %}
 <main>
diff --git a/source/screens/demo/examples/ui/cli.liquid b/source/screens/demo/examples/ui/cli.liquid
index 18f4cd4..a87d4b8 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 7b46674..37d806e 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="{{ pageBase }}js/app.js"></script>
-<script src="{{ pageBase }}js/drag.js"></script>
+<script src="/js/app.js"></script>
+<script src="/js/drag.js"></script>
 <script>
 	// Get the space element
 	const space = document.getElementById('space');
diff --git a/source/screens/demo/examples/ui/explorer.liquid b/source/screens/demo/examples/ui/explorer.liquid
index f8e66fa..bfdd28a 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 492e191..3a7aceb 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 8128023..0d372d4 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 614beed..5952f16 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 5266b2a..a386015 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,6 +19,8 @@ tags:
 					<div class="group-input-wrap"><input id="setScroll" type="checkbox"></div>
 					<label for="setScroll">Scroll to new entry</label>
 				</div>
+			</nav>
+			<nav>
 				<button id="tglIndex" title="Toggle index column">
 					<i class="bi bi-hash"></i>
 				</button>
@@ -31,10 +33,10 @@ tags:
 					</select>
 					<button id="setPosNum" title="Set numbering" type="button"><i class="bi bi-list-ol"></i></button>
 				</div>
+				{% comment %}TODO: Auswahl für ziehbares Element hinzufügen{% endcomment %}
 			</nav>
-			<nav></nav>
 		</header>
-		<table id="content">
+		<table id="content" class="draggable">
 			<thead>
 			<tr>
 				<th scope="col" title="Index">#</th>
@@ -43,7 +45,10 @@ tags:
 				<th scope="col">Number</th>
 				<th scope="col">Name</th>
 				<th scope="col">Description</th>
+				<th scope="col">Amount</th>
+				<th scope="col">Unit</th>
 				<th scope="col">Price</th>
+				<th scope="col">Sum</th>
 				<th scope="col"></th>
 			</tr>
 			</thead>
@@ -53,12 +58,11 @@ tags:
 	</section>
 </main>
 <template id="rowDefault">
-	<tr>
+	<tr draggable="true">
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<button title="Drag"><i class="bi bi-grip-horizontal"></i></button>
-				<button title="Expand"><i class="bi bi-arrows-expand"></i></button>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
@@ -68,6 +72,15 @@ tags:
 		<td>
 			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
 		</td>
+		<td><input name="amount" type="number"></td>
+		<td>
+			<select name="units">
+				<option value="">None</option>
+				<option value="piece">Piece(s)</option>
+				<option value="hour">Hour(s)</option>
+			</select>
+		</td>
+		<td class="unit"></td>
 		<td class="unit"></td>
 		<td class="io">
 			<nav>
@@ -78,6 +91,98 @@ tags:
 		</td>
 	</tr>
 </template>
+<template id="rowArticle">
+	<tr draggable="true">
+		<th scope="row"></th>
+		<td class="io">
+			<nav>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
+			</nav>
+		</td>
+		<td class="pos-num"></td>
+		<td class="rigid"></td>
+		<td></td>
+		{% comment %}<td class="ellipsis"></td>{% endcomment %}
+		<td>
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+		</td>
+		<td><input name="amount" type="number"></td>
+		<td>
+			<select name="units">
+				<option value="">None</option>
+				<option value="piece">Piece(s)</option>
+				<option value="hour">Hour(s)</option>
+			</select>
+		</td>
+		<td class="unit"></td>
+		<td class="unit"></td>
+		<td class="io">
+			<nav>
+				<button title="Event"><i class="bi bi-calendar-event"></i></button>
+				<button title="Note"><i class="bi bi-journal"></i></button>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+</template>
+<template id="rowText">
+	<tr draggable="true">
+		<th scope="row"></th>
+		<td class="io">
+			<nav>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
+			</nav>
+		</td>
+		<td class="pos-num"></td>
+		<td class="rigid"></td>
+		<td colspan="6">
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+		</td>
+		<td class="io">
+			<nav>
+				<button title="Event"><i class="bi bi-calendar-event"></i></button>
+				<button title="Note"><i class="bi bi-journal"></i></button>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+</template>
+<template id="rowGroup">
+	<tr draggable="true">
+		<th scope="row"></th>
+		<td class="io">
+			<nav>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
+				<button title="Expand"><i class="bi bi-arrows-expand"></i></button>
+			</nav>
+		</td>
+		<td class="pos-num"></td>
+		<td class="rigid"></td>
+		<td></td>
+		{% comment %}<td class="ellipsis"></td>{% endcomment %}
+		<td>
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+		</td>
+		<td><input name="amount" type="number"></td>
+		<td>
+			<select name="units">
+				<option value="">None</option>
+				<option value="piece">Piece(s)</option>
+				<option value="hour">Hour(s)</option>
+			</select>
+		</td>
+		<td class="unit"></td>
+		<td class="unit"></td>
+		<td class="io">
+			<nav>
+				<button title="Event"><i class="bi bi-calendar-event"></i></button>
+				<button title="Note"><i class="bi bi-journal"></i></button>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+</template>
+
 {% render 'hippie/partials/frame-mode.liquid' %}
 {% endblock %}
 
@@ -116,7 +221,6 @@ tags:
 	const currencyEuro = new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'});
 
 	const content = document.querySelector('main.io section > table');
-	// const content = document.getElementById('content');
 	const tbodyPosition = document.getElementById('positions');
 
 	tbodyPosition.addEventListener('click', (event) => {
@@ -140,6 +244,9 @@ tags:
 
 		const j = i % placeholderNames.length;
 		const k = randomIntFrom(0, placeholderContents.length - 1);
+		const amount = randomIntFrom(1, 100);
+		const price = randomFloatFrom(1, 10000, 2);
+		const sum = amount * price;
 
 		tr.setAttribute('data-id', i);
 		th.textContent = i + 1;
@@ -147,8 +254,10 @@ tags:
 		td[3].textContent = placeholderNames[j];
 		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
 		td[4].firstElementChild.textContent = placeholderContents[k];
-		// td[5].textContent = randomIntFrom(1, i).toString();
-		td[5].textContent = currencyEuro.format(randomFloatFrom(1, 1000000, 2));
+		td[5].firstElementChild.value = amount;
+		td[5].firstElementChild.style.width = '4em';
+		td[7].textContent = currencyEuro.format(price);
+		td[8].textContent = currencyEuro.format(sum);
 
 		tbodyPosition.appendChild(clone);
 	}
@@ -217,7 +326,55 @@ tags:
 				elementNew.scrollIntoView({behavior: 'smooth', block: 'nearest'});
 			}
 		}
-		// TODO: Neuen index bilden
+
+		reindexRows(tbodyPosition);
+	});
+
+	let draggedRow = null;
+
+	tbodyPosition.addEventListener('dragstart', (event) => {
+		const rowTarget = event.target.closest('tr[draggable="true"]');
+
+		if (rowTarget) {
+			draggedRow = rowTarget;
+			rowTarget.classList.add('dragging');
+			event.dataTransfer.effectAllowed = 'move';
+
+			console.debug('Drag', rowTarget);
+		}
+	});
+
+	tbodyPosition.addEventListener('dragend', () => {
+		if (draggedRow) {
+			draggedRow.classList.remove('dragging');
+			draggedRow = null;
+		}
+	});
+
+	tbodyPosition.addEventListener('dragover', (event) => {
+		event.preventDefault();
+		event.dataTransfer.dropEffect = 'move';
+
+		const rowTarget = event.target.closest('tr');
+
+		if (rowTarget && rowTarget !== draggedRow) {
+			const rows = [...tbodyPosition.querySelectorAll('tr')];
+			const draggedIndex = rows.indexOf(draggedRow);
+			const targetIndex = rows.indexOf(rowTarget);
+
+			if (draggedIndex < targetIndex) {
+				rowTarget.parentNode.insertBefore(draggedRow, rowTarget.nextSibling);
+			} else {
+				rowTarget.parentNode.insertBefore(draggedRow, rowTarget);
+			}
+		}
+	});
+
+	tbodyPosition.addEventListener('drop', (event) => {
+		event.preventDefault();
+		reindexRows(event.currentTarget);
+
+		console.debug('Drop');
 	});
 
 	function cloneRow(type = 'default') {
@@ -228,5 +385,15 @@ tags:
 
 		return document.importNode(rowFragment, true);
 	}
+
+	function reindexRows(parent, selector = 'tr') {
+		const rows = parent.querySelectorAll(selector);
+		let th = undefined;
+
+		for (let i = 0; i < rows.length; i++) {
+			th = rows[i].querySelector('th');
+			th.textContent = i + 1;
+		}
+	}
 </script>
 {% endblock %}
\ 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 4bcd8c4..be51071 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 cb2434f..ac42d52 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 02606e6..d8700cd 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="{{ pageBase }}js/globals.js"></script>{% endcomment %}
+{% comment %}<script src="/js/globals.js"></script>{% endcomment %}
 <script src="/vendor/hippie-script.js"></script>
-<script src="{{ pageBase }}js/app.js"></script>
-<script src="{{ pageBase }}js/windows.js"></script>
+<script src="/js/app.js"></script>
+<script src="/js/windows.js"></script>
 <script>
 	console.log(HIPPIE.brand);
 	// Get the space element
diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid
index 9f4aa9e..99ba875 100644
--- a/source/screens/demo/index.liquid
+++ b/source/screens/demo/index.liquid
@@ -4,10 +4,9 @@ title: Index
 tags:
 - demoIndex
 ---
-{% assign pageBase = hippie.pageBase -%}
 {% assign pageId = page.fileSlug -%}
-{% assign pageClass = "h_full_view" -%}
-{% layout "hippie/full.liquid" %}
+{% assign pageClass = 'h_full_view' -%}
+{% layout 'hippie/full.liquid' %}
 
 {% block body %}
 <div class="wrap">
diff --git a/source/screens/demo/introduction.liquid b/source/screens/demo/introduction.liquid
new file mode 100644
index 0000000..91993cb
--- /dev/null
+++ b/source/screens/demo/introduction.liquid
@@ -0,0 +1,40 @@
+---
+title: Introduction
+tags:
+- demoIndex
+---
+{% layout 'hippie/page.liquid' %}
+
+{% block title %}Einführung{% endblock %}
+
+{% block main %}
+<section class="sec_main_center">
+	<header>
+		<hgroup>
+			<h1>Introduction to HIPPIE</h1>
+			<p>Hippie interweaves preeminent personal interface elements.</p>
+		</hgroup>
+	</header>
+	<article>
+		<p>&hellip;</p>
+		<p>Contact: <a id="special" href=""></a>
+		</p>
+		<p>More: <a class="general" href=""></a>, <a class="general" href=""></a>
+		</p>
+	</article>
+</section>
+{% endblock %}
+
+{% block script %}
+{{ block.super -}}
+<script>
+	assetsLoaded = true;
+	logPerf('Assets loaded.', assetsLoaded);
+	// Page specific
+	// ------------------------------------------------------------------------------
+	composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
+	composeMail('.general', 'name', 'domain', 'tld', '', '')
+
+	logPerf('Application ready... not.');
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/introduction.njk b/source/screens/demo/introduction.njk
deleted file mode 100644
index f1a9752..0000000
--- a/source/screens/demo/introduction.njk
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: Introduction
-tags:
-  - demoIndex
----
-{% set pageBase = "../" %}
-{% set pageId = "intro" %}
-
-{% extends "demo/_main.njk" %}
-
-{% block title %}Einführung{% endblock %}
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block main %}
-	<!-- {{ page.fileSlug }}.page -->
-	<section class="sec_main_center">
-		<header>
-			<hgroup>
-				<h1>Introduction to HIPPIE</h1>
-				<p>Hippie interweaves preeminent personal interface elements.</p>
-			</hgroup>
-		</header>
-		<article>
-			<p>&hellip;</p>
-			<p>Contact: <a id="special" href=""></a>
-			</p>
-			<p>More: <a class="general" href=""></a>, <a class="general" href=""></a>
-			</p>
-		</article>
-	</section>
-{% endblock %}
-
-{% block script %}
-	{{ super() }}
-	<script>
-		assetsLoaded = true;
-		logPerf('Assets loaded.', assetsLoaded);
-		// Page specific
-		// ------------------------------------------------------------------------------
-		composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
-		composeMail('.general', 'name', 'domain', 'tld', '', '')
-
-		logPerf('Application ready... not.');
-	</script>
-{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/layouts.liquid b/source/screens/demo/layouts.liquid
new file mode 100644
index 0000000..500e902
--- /dev/null
+++ b/source/screens/demo/layouts.liquid
@@ -0,0 +1,314 @@
+---
+title: Layouts
+tags:
+- demoIndex
+---
+{% layout 'hippie/page.liquid' %}
+
+{% block title %}Gestaltungen{% endblock %}
+
+{% block main %}
+<section class="sec_main_center">
+	<header class="header_txt">
+		<h1>Sammlung formatierter Elemente</h1>
+		<p>Die Elemente werden fortlaufend komplexer</p>
+	</header>
+	<article>
+		<h2>Bereiche (sections)</h2>
+		<h3>section</h3>
+		<pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre>
+		<section class="overflow">
+			<div class="float_space_left demo__avatar">
+				{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '256', desc: 'Avatar' %}
+			</div>
+			<p>{% text hippie.placeholders.name %}<br>{% text hippie.placeholders.address %}</p>
+			<p>{% text hippie.placeholders.phone %}<br>{% link hippie.placeholders.mail, '', '', 'a_line' %}</p>
+		</section>
+		<h3>nav</h3>
+		<pre class="pre_code"><code>div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)</code></pre>
+		<div class="overflow">
+			<nav class="float_space_left">
+				<ul>
+					<li>
+						<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
+					</li>
+					<li>
+						<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
+					</li>
+					<li>
+						<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
+					</li>
+					<li>
+						<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
+					</li>
+				</ul>
+			</nav>
+			<nav>
+				<ul>
+					<li>
+						<a href="" class="a_button_border">Stufe 1</a>
+					</li>
+					<li>
+						<a href="" class="a_button_border">Stufe 2</a>
+					</li>
+					<li>
+						<a href="" class="a_button_border">Stufe 3</a>
+					</li>
+					<li>
+						<a href="" class="a_button_border">Stufe 4</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+		<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4</code></pre>
+		<nav class="nav_horizontal">
+			<ul>
+				<li>
+					<a href="" class="a_button">Abschnitt 1</a>
+				</li>
+				<li>
+					<a href="" class="a_button">Abschnitt 2</a>
+				</li>
+				<li>
+					<a href="" class="a_button">Abschnitt 3</a>
+				</li>
+				<li>
+					<a href="" class="a_button">Abschnitt 4</a>
+				</li>
+			</ul>
+		</nav>
+		<pre class="pre_code"><code>div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
+		<div class="overflow">
+			<nav class="nav_center_old">
+				<ul>
+					<li>
+						<a href="" class="a_button">Typ 1</a>
+					</li>
+					<li>
+						<a href="" class="a_button">Typ 2</a>
+					</li>
+					<li>
+						<a href="" class="a_button">Typ 3</a>
+					</li>
+					<li>
+						<a href="" class="a_button">Typ 4</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+		<h3>header</h3>
+		<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
+		<header class="header_page demo__header header_fancy">
+			<h1>Aufmacher</h1>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio,
+				volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh
+				quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
+			<nav class="nav_separate_right">
+				<ul>
+					<li>
+						<a href="" class="a_button">Mensch</a>
+					</li>
+					<li>
+						<a href="" class="a_button">Pflanze</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="nav_right">
+				<ul>
+					<li>
+						<a href="" class="a_button">Blau</a>
+					</li>
+					<li>
+						<a href="" class="a_button">Gelb</a>
+					</li>
+				</ul>
+			</nav>
+		</header>
+		<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
+		<div class="box_space h_basic">
+			<header id="js_demo_fix" class="header_page demo__header header_fix">
+				<nav class="nav_right">
+					<ul>
+						<li>
+							<a href="" class="a_button">Eins</a>
+						</li>
+						<li>
+							<a href="" class="a_button">Zwei</a>
+						</li>
+					</ul>
+				</nav>
+			</header>
+			<div class="pos_abs pin_bottom width_full">
+				<pre
+					class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
+				<footer id="js_demo_stop" class="demo_footer">
+					<nav class="nav_column nav_separate">
+						<ul>
+							<li>
+								<a href="" class="a_button_text">Alpha</a>
+							</li>
+							<li>
+								<a href="" class="a_button_text">Bravo</a>
+							</li>
+							<li>
+								<a href="" class="a_button_text">Charlie</a>
+							</li>
+							<li>
+								<a href="" class="a_button_text">Delta</a>
+							</li>
+						</ul>
+					</nav>
+					<p class="txt_center demo__credits">
+						<i class="i_bright">👨‍💻</i>
+						mit
+						<i class="i_bright">❤</i>
+						von
+						<a href="https://interaktionsweise.de">Interaktionsweise</a>
+					</p>
+				</footer>
+			</div>
+		</div>
+
+		<h2>Interaktiv (interactive)</h2>
+		<h3>input</h3>
+		<div class="flex inline">
+			<input value="Undefiniert"/>
+			<input type="text" size="8" value="Text"/>
+			<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
+			<input type="button" value="Auswählen">
+			<input type="submit" value="Senden" disabled="disabled"/>
+		</div>
+		<h3>form</h3>
+		<form method="get">
+			<p>Show me a
+				<select name="F">
+					<option value="0">Plain list</option>
+					<option value="1" selected="selected">Fancy list</option>
+					<option value="2">Table list</option>
+				</select>
+				Sorted by
+				<select name="C">
+					<option value="N" selected="selected">Name</option>
+					<option value="M">Date Modified</option>
+					<option value="S">Size</option>
+					<option value="D">Description</option>
+				</select>
+				<select name="O">
+					<option value="A" selected="selected">Ascending</option>
+					<option value="D">Descending</option>
+				</select>
+				<select name="V">
+					<option value="0" selected="selected">in Normal order</option>
+					<option value="1">in Version order</option>
+				</select>
+				Matching
+				<input type="text" name="P" value="*"/>
+				<input type="submit" name="X" value="Go"/>
+			</p>
+		</form>
+
+		<h2>Gruppierung (grouping)</h2>
+		<h3>p</h3>
+		<pre class="pre_code"><code>p.txt_right+p.txt_center+p.txt_left</code></pre>
+		<p class="txt_right">Rechts</p>
+		<p class="txt_center">Mittig</p>
+		<p class="txt_left">Links</p>
+		<h3>h*</h3>
+		<pre class="pre_code"><code>h3.txt_color_dark+p.txt_tiny</code></pre>
+		<h3 class="txt_color_dark">Dunkle Überschrift</h3>
+		<p class="txt_tiny">Mit winzigem Textabsatz</p>
+		<pre class="pre_code"><code>a>h4</code></pre>
+		<a href="">
+			<h4>Überschrift als Block-Verweis</h4>
+		</a>
+		<h1>Überschrift 1</h1>
+		<h1>Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.</h1>
+		<h2>Überschrift 2</h2>
+		<h2>kann das ebenso.</h2>
+		<h3>hr</h3>
+		<pre class="pre_code"><code>hr.space_even_half</code></pre>
+		<hr class="space_even_half">
+		<pre class="pre_code"><code>hr.dotted.space_even_fourth</code></pre>
+		<hr class="dotted space_even_fourth">
+		<h3>ul</h3>
+		<pre class="pre_code"><code>nav>ul.list_link>(li>a)+li>a>img+span</code></pre>
+		<nav>
+			<ul class="list_link">
+				<li>{% link hippie.placeholders.mail, '📧 name@domain.tld' %}</li>
+				<li>
+					<a href=""><img src="/art/bullet.gif" alt="">{% text hippie.placeholders.name %}</a>
+				</li>
+			</ul>
+		</nav>
+		<h3>div</h3>
+		<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre>
+		<div class="space_left_fourth">
+			<hr/>
+			<p>Eingerückter Inhalt</p>
+			<hr/>
+		</div>
+
+		<h2>Tabellen</h2>
+		<pre class="pre_code"><code>table.link>thead>tr>th{&amp;nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.icon[rowspan="2"]>img[width=16 height=16]^+td.link>span{name}+a[target=_blank]{url}^+td[rowspan="2"]{yyy-mm-dd}^tr>td.text>div.shorten{beschreibung})*2</code></pre>
+		<table class="link js_pop">
+			<thead>
+			<tr>
+				<th>&nbsp;</th>
+				<th>Ab / Zy</th>
+				<th>Neu / Alt</th>
+			</tr>
+			</thead>
+			<tbody>
+			<tr>
+				<td class="icon" rowspan="2">■</td>
+				<td class="link">
+					<span>Name</span>
+					<a href="" target="_blank">URL</a>
+				</td>
+				<td rowspan="2">YYYY-MM-DD</td>
+			</tr>
+			<tr>
+				<td class="text">
+					<div class="shorten">Beschreibung</div>
+				</td>
+			</tr>
+			</tbody>
+			<tbody>
+			<tr>
+				<td class="icon" rowspan="2">■</td>
+				<td class="link">
+					<span>Name</span>
+					<a href="" target="_blank">URL</a>
+				</td>
+				<td rowspan="2">YYYY-MM-DD</td>
+			</tr>
+			<tr>
+				<td class="text">
+					<div class="shorten">Beschreibung</div>
+				</td>
+			</tr>
+			</tbody>
+		</table>
+
+		<h2>Eingebettet</h2>
+		<div class="demo__flag">
+			{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
+		</div>
+	</article>
+</section>
+{% endblock %}
+
+{% block script %}
+{{ block.super -}}
+<script src="/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
+<script>
+	assetsLoaded = true;
+	logPerf('Assets loaded.', assetsLoaded);
+	// Page specific
+	// ------------------------------------------------------------------------------
+	$(document).ready(function () {
+		// jq-sticky-anything
+		$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
+	});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk
deleted file mode 100644
index a35cfff..0000000
--- a/source/screens/demo/layouts.njk
+++ /dev/null
@@ -1,317 +0,0 @@
----
-title: Layouts
-tags:
-  - demoIndex
----
-{% set pageBase = "../" %}
-{% set pageId = page.fileSlug %}
-
-{% extends "demo/_main.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
-
-{% block title %}Gestaltungen{% endblock %}
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block main %}
-	<!-- {{ page.fileSlug }}.page -->
-	<section class="sec_main_center">
-		<header class="header_txt">
-			<h1>Sammlung formatierter Elemente</h1>
-			<p>Die Elemente werden fortlaufend komplexer</p>
-		</header>
-		<article>
-			<h2>Bereiche (sections)</h2>
-			<h3>section</h3>
-			<pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre>
-			<section class="overflow">
-				<div class="float_space_left demo__avatar">{{ ph.flag('img', '', '', 'Avatar', '256') }}</div>
-				<p>{{ ph.name() }}<br>{{ ph.address() }}</p>
-				<p>{{ ph.phone() }}<br>{{ ph.email('lineLink') }}</p>
-			</section>
-			<h3>nav</h3>
-			<pre class="pre_code"><code>div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)</code></pre>
-			<div class="overflow">
-				<nav class="float_space_left">
-					<ul>
-						<li>
-							<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
-						</li>
-						<li>
-							<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
-						</li>
-						<li>
-							<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
-						</li>
-						<li>
-							<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
-						</li>
-					</ul>
-				</nav>
-				<nav>
-					<ul>
-						<li>
-							<a href="" class="a_button_border">Stufe 1</a>
-						</li>
-						<li>
-							<a href="" class="a_button_border">Stufe 2</a>
-						</li>
-						<li>
-							<a href="" class="a_button_border">Stufe 3</a>
-						</li>
-						<li>
-							<a href="" class="a_button_border">Stufe 4</a>
-						</li>
-					</ul>
-				</nav>
-			</div>
-			<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4</code></pre>
-			<nav class="nav_horizontal">
-				<ul>
-					<li>
-						<a href="" class="a_button">Abschnitt 1</a>
-					</li>
-					<li>
-						<a href="" class="a_button">Abschnitt 2</a>
-					</li>
-					<li>
-						<a href="" class="a_button">Abschnitt 3</a>
-					</li>
-					<li>
-						<a href="" class="a_button">Abschnitt 4</a>
-					</li>
-				</ul>
-			</nav>
-			<pre class="pre_code"><code>div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
-			<div class="overflow">
-				<nav class="nav_center_old">
-					<ul>
-						<li>
-							<a href="" class="a_button">Typ 1</a>
-						</li>
-						<li>
-							<a href="" class="a_button">Typ 2</a>
-						</li>
-						<li>
-							<a href="" class="a_button">Typ 3</a>
-						</li>
-						<li>
-							<a href="" class="a_button">Typ 4</a>
-						</li>
-					</ul>
-				</nav>
-			</div>
-			<h3>header</h3>
-			<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
-			<header class="header_page demo__header header_fancy">
-				<h1>Aufmacher</h1>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
-				<nav class="nav_separate_right">
-					<ul>
-						<li>
-							<a href="" class="a_button">Mensch</a>
-						</li>
-						<li>
-							<a href="" class="a_button">Pflanze</a>
-						</li>
-					</ul>
-				</nav>
-				<nav class="nav_right">
-					<ul>
-						<li>
-							<a href="" class="a_button">Blau</a>
-						</li>
-						<li>
-							<a href="" class="a_button">Gelb</a>
-						</li>
-					</ul>
-				</nav>
-			</header>
-			<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
-			<div class="box_space h_basic">
-				<header id="js_demo_fix" class="header_page demo__header header_fix">
-					<nav class="nav_right">
-						<ul>
-							<li>
-								<a href="" class="a_button">Eins</a>
-							</li>
-							<li>
-								<a href="" class="a_button">Zwei</a>
-							</li>
-						</ul>
-					</nav>
-				</header>
-				<div class="pos_abs pin_bottom width_full">
-					<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
-					<footer id="js_demo_stop" class="demo_footer">
-						<nav class="nav_column nav_separate">
-							<ul>
-								<li>
-									<a href="" class="a_button_text">Alpha</a>
-								</li>
-								<li>
-									<a href="" class="a_button_text">Bravo</a>
-								</li>
-								<li>
-									<a href="" class="a_button_text">Charlie</a>
-								</li>
-								<li>
-									<a href="" class="a_button_text">Delta</a>
-								</li>
-							</ul>
-						</nav>
-						<p class="txt_center demo__credits">
-							<i class="i_bright">👨‍💻</i>
-								mit
-								<i class="i_bright">❤</i>
-								von
-								<a href="https://interaktionsweise.de">Interaktionsweise</a>
-						</p>
-					</footer>
-				</div>
-			</div>
-
-			<h2>Interaktiv (interactive)</h2>
-			<h3>input</h3>
-			<div class="flex inline">
-				<input value="Undefiniert"/>
-				<input type="text" size="8" value="Text"/>
-				<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
-				<input type="button" value="Auswählen">
-				<input type="submit" value="Senden" disabled="disabled"/>
-			</div>
-			<h3>form</h3>
-			<form method="get">
-				<p>Show me a
-					<select name="F">
-						<option value="0">Plain list</option>
-						<option value="1" selected="selected">Fancy list</option>
-						<option value="2">Table list</option>
-					</select>
-					Sorted by
-					<select name="C">
-						<option value="N" selected="selected">Name</option>
-						<option value="M">Date Modified</option>
-						<option value="S">Size</option>
-						<option value="D">Description</option>
-					</select>
-					<select name="O">
-						<option value="A" selected="selected">Ascending</option>
-						<option value="D">Descending</option>
-					</select>
-					<select name="V">
-						<option value="0" selected="selected">in Normal order</option>
-						<option value="1">in Version order</option>
-					</select>
-					Matching
-					<input type="text" name="P" value="*"/>
-					<input type="submit" name="X" value="Go"/>
-				</p>
-			</form>
-
-			<h2>Gruppierung (grouping)</h2>
-			<h3>p</h3>
-			<pre class="pre_code"><code>p.txt_right+p.txt_center+p.txt_left</code></pre>
-			<p class="txt_right">Rechts</p>
-			<p class="txt_center">Mittig</p>
-			<p class="txt_left">Links</p>
-			<h3>h*</h3>
-			<pre class="pre_code"><code>h3.txt_color_dark+p.txt_tiny</code></pre>
-			<h3 class="txt_color_dark">Dunkle Überschrift</h3>
-			<p class="txt_tiny">Mit winzigem Textabsatz</p>
-			<pre class="pre_code"><code>a>h4</code></pre>
-			<a href="">
-				<h4>Überschrift als Block-Verweis</h4>
-			</a>
-			<h1>Überschrift 1</h1>
-			<h1>Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.</h1>
-			<h2>Überschrift 2</h2>
-			<h2>kann das ebenso.</h2>
-			<h3>hr</h3>
-			<pre class="pre_code"><code>hr.space_even_half</code></pre>
-			<hr class="space_even_half">
-			<pre class="pre_code"><code>hr.dotted.space_even_fourth</code></pre>
-			<hr class="dotted space_even_fourth">
-			<h3>ul</h3>
-			<pre class="pre_code"><code>nav>ul.list_link>(li>a)+li>a>img+span</code></pre>
-			<nav>
-				<ul class="list_link">
-					<li>{{ ph.email('', '📧 name@domain.tld') }}</li>
-					<li>
-						<a href=""><img src="{{ pageBase }}art/bullet.gif" alt="">{{ ph.name() }}</a>
-					</li>
-				</ul>
-			</nav>
-			<h3>div</h3>
-			<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre>
-			<div class="space_left_fourth">
-				<hr/>
-				<p>Eingerückter Inhalt</p>
-				<hr/>
-			</div>
-
-			<h2>Tabellen</h2>
-			<pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16  height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2</code></pre>
-			<table class="table_link js_pop">
-				<thead>
-					<tr>
-						<th>&nbsp;</th>
-						<th>Ab / Zy</th>
-						<th>Neu / Alt</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr>
-						<td class="cell_icon" rowspan="2">■</td>
-						<td class="cell_link">
-							<a href="" target="_blank">Name</a>
-							<a href="" target="_blank">URL</a>
-						</td>
-						<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
-					</tr>
-					<tr>
-						<td class="cell_text">
-							<div class="shorten">Beschreibung</div>
-						</td>
-					</tr>
-				</tbody>
-				<tbody>
-					<tr>
-						<td class="cell_icon" rowspan="2">■</td>
-						<td class="cell_link">
-							<a href="" target="_blank">Name</a>
-							<a href="" target="_blank">URL</a>
-						</td>
-						<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
-					</tr>
-					<tr>
-						<td class="cell_text">
-							<div class="shorten">Beschreibung</div>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-
-			<h2>Eingebettet</h2>
-			<div class="demo__flag">
-				{{ ph.flag() }}
-			</div>
-		</article>
-	</section>
-{% endblock %}
-
-{% block script %}
-	{{ super() }}
-	<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
-	{{ log.asset(true) }}
-	{{ log.log('Assets loaded.', assetsLoaded) }}
-	<script>
-		// Page specific
-		// ------------------------------------------------------------------------------
-		$(document).ready(function () {
-			// jq-sticky-anything
-			$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
-		});
-	</script>
-{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/pages/blank.liquid b/source/screens/demo/pages/blank.liquid
index 6ef5d56..5cf5e7c 100644
--- a/source/screens/demo/pages/blank.liquid
+++ b/source/screens/demo/pages/blank.liquid
@@ -1,10 +1,5 @@
 ---
 title: Blank
 ---
-{% assign pageBase = "../../" -%}
 {% assign pageId = page.fileSlug -%}
-{% layout "hippie/simple.liquid" %}
-
-{% block body %}
-<!-- {{ title }} -->
-{% endblock %}
+{% layout 'hippie/simple.liquid' %}
diff --git a/source/screens/demo/pages/default.liquid b/source/screens/demo/pages/default.liquid
index bb44e71..9b84b78 100644
--- a/source/screens/demo/pages/default.liquid
+++ b/source/screens/demo/pages/default.liquid
@@ -1,17 +1,13 @@
 ---
 title: Default
 ---
-{% assign pageBase = "../" -%}
 {% assign pageId = page.fileSlug -%}
-{% assign pageClass = "default" -%}
-{% assign bodyClass = "default" -%}
-{% layout "hippie/default.liquid" %}
+{% assign pageClass = 'default' -%}
+{% assign bodyClass = 'default' -%}
+{% layout 'hippie/default.liquid' %}
 
 {% block title %}{{ title }}{% endblock %}
 
-{% block script %}
-<script>
-	// Page script
-	console.log("pageBase is: {{ pageBase }}");
-</script>
-{% endblock %}
\ No newline at end of file
+{% block body %}
+<!-- {{ title }} body -->
+{% endblock %}
diff --git a/source/screens/demo/pages/error/304.liquid b/source/screens/demo/pages/error/304.liquid
index 4fa65ef..75127a7 100644
--- a/source/screens/demo/pages/error/304.liquid
+++ b/source/screens/demo/pages/error/304.liquid
@@ -1,9 +1,8 @@
 ---
 title: 304
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/400.liquid b/source/screens/demo/pages/error/400.liquid
index 86cb860..ffe7d9c 100644
--- a/source/screens/demo/pages/error/400.liquid
+++ b/source/screens/demo/pages/error/400.liquid
@@ -1,9 +1,8 @@
 ---
 title: 400
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/401.liquid b/source/screens/demo/pages/error/401.liquid
index 09029d6..a2fbb39 100644
--- a/source/screens/demo/pages/error/401.liquid
+++ b/source/screens/demo/pages/error/401.liquid
@@ -1,9 +1,8 @@
 ---
 title: 401
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/403.liquid b/source/screens/demo/pages/error/403.liquid
index 31a5790..cfa9eed 100644
--- a/source/screens/demo/pages/error/403.liquid
+++ b/source/screens/demo/pages/error/403.liquid
@@ -1,9 +1,8 @@
 ---
 title: 403
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/404.liquid b/source/screens/demo/pages/error/404.liquid
index a90082a..9a00731 100644
--- a/source/screens/demo/pages/error/404.liquid
+++ b/source/screens/demo/pages/error/404.liquid
@@ -1,9 +1,8 @@
 ---
 title: 404
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/408.liquid b/source/screens/demo/pages/error/408.liquid
index 7984e61..1f0ef44 100644
--- a/source/screens/demo/pages/error/408.liquid
+++ b/source/screens/demo/pages/error/408.liquid
@@ -1,9 +1,8 @@
 ---
 title: 408
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/500.liquid b/source/screens/demo/pages/error/500.liquid
index 6d21ccc..5e6cb69 100644
--- a/source/screens/demo/pages/error/500.liquid
+++ b/source/screens/demo/pages/error/500.liquid
@@ -1,9 +1,8 @@
 ---
 title: 500
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/503.liquid b/source/screens/demo/pages/error/503.liquid
index 4805020..2a01f87 100644
--- a/source/screens/demo/pages/error/503.liquid
+++ b/source/screens/demo/pages/error/503.liquid
@@ -1,9 +1,8 @@
 ---
 title: 503
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/maintenance.liquid b/source/screens/demo/pages/maintenance.liquid
index 4fa3286..fe36599 100644
--- a/source/screens/demo/pages/maintenance.liquid
+++ b/source/screens/demo/pages/maintenance.liquid
@@ -1,9 +1,8 @@
 ---
 title: Maintenance
 ---
-{% assign pageBase = "../../" -%}
-{% assign pageClass = "h_full_view" -%}
-{% layout "hippie/status.liquid" %}
+{% assign pageClass = 'h_full_view' -%}
+{% layout 'hippie/status.liquid' %}
 
 {% block body %}
 <hgroup id="root" class="txt_center">
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 91d136f..69535d8 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 91d136f1c310c6276ecb2f4318f468f842099816
+Subproject commit 69535d87ac38cbe210ed40f6c2b9952b67b8ce5f
diff --git a/source/templates/hippie/app.liquid b/source/templates/hippie/app.liquid
index 7e704f7..4118172 100644
--- a/source/templates/hippie/app.liquid
+++ b/source/templates/hippie/app.liquid
@@ -1,7 +1,6 @@
-{% assign pageBase = "../../../" -%}
 {% assign pageId = page.fileSlug -%}
-{% assign pageClass = "html_ui" -%}
-{% layout "hippie/default.liquid" %}
+{% assign pageClass = 'html_ui' -%}
+{% layout 'hippie/default.liquid' %}
 
 {% block title %}{{ title }}{% endblock %}
 
diff --git a/source/templates/hippie/default.liquid b/source/templates/hippie/default.liquid
index bdcf341..4cb653e 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>
-	// Default script
+	// {{ title }} script
 </script>
 {%- block script %}{% endblock -%}
 </body>
diff --git a/source/templates/hippie/full.liquid b/source/templates/hippie/full.liquid
index a3bc72c..5b22b17 100644
--- a/source/templates/hippie/full.liquid
+++ b/source/templates/hippie/full.liquid
@@ -18,19 +18,17 @@
 		{{ hippie.titlePostfix -}}
 	</title>
 	{% block meta -%}
-	{% render "hippie/partials/meta.liquid", author: "Interaktionsweise", desc: "Hippie interweaves preeminent personal interface elements" %}
+	{% render 'hippie/partials/meta.liquid', author: 'Interaktionsweise', desc: 'Hippie interweaves preeminent personal interface elements' %}
 	{% comment %}<base href="/">{% endcomment %}
 	{% endblock -%}
-	{% render "hippie/partials/script-log.liquid" %}
-	{% render "hippie/partials/log-setup", hippie: hippie, state: true -%}
-	{% render "hippie/partials/log-start" -%}
+	{% render 'hippie/partials/script-log.liquid' %}
+	{% render 'hippie/partials/log-setup', hippie: hippie, state: true -%}
+	{% render 'hippie/partials/log-start' -%}
 	{% block links -%}
-	{% render "hippie/partials/links.liquid" %}
-	{% comment %}<link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/>{% endcomment %}
-	{% comment %}<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/>{% endcomment %}
+	{% render 'hippie/partials/links.liquid' %}
 	<link rel="stylesheet" media="all" href="/css/demo.css" type="text/css"/>
 	{% endblock -%}
-	{% render "hippie/partials/log-log" with "HEAD end    :: Links parsed, starting to load." as msg -%}
+	{% render 'hippie/partials/log-log' with 'HEAD end    :: Links parsed, starting to load.' as msg -%}
 	{% endblock -%}
 </head>
 
diff --git a/source/templates/hippie/page.liquid b/source/templates/hippie/page.liquid
index 4afccb7..b6edd40 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 c1a8845..32d854d 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="{{ pageBase }}favicon.ico">
+	<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
 	<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEAAAIBAQCbjUIABQQCAGdfKgDcxYUAiXpGABkWCgDXxnEApmxRAMGZawAIBwMArZ5PAKFydQBmIZIAoGJFAIx+QwBSSyIA1biBADlx0gBNn+0AgztQAMimcQAMCwQADAsFANS/dAB7P3EAeuH7ANb4/gBQPLwAp2pNAI6CQwCilEwAr3hdADyH5ADw/f8A////AHTU+AB6M2YA0LN4ABMRBwA/OhsAyKR2AGYvjQCf7PwA7fz/AENy2gCrclkAk4ZDAAYFAgDNtXEAjkhHAEul7QD8//8AlOn8AGk1hwDWvXsAGBYJAJaHSgCnbE4AVy6rAML0/gD7/v8AQ6vuAKx1YwCZjEQALCgTALyOZwB+NVoAZ8D0AL30/QBLULMA2sV+AB4bCwDFpm0Ak087AFArvgBv4PoAjOf7AIzm+wCN4/sAjuH7AI7h+gCP3fkAOI/sAKVvcwCfkUQAfnM6ANO2hAC3iGkAk150AI9OcACKRmkAhj9kAH84YQB9NWEAfTRgAH0zYAB6MWYAei9lAItFUADdy3wAKCQPAFtTJQB2bDIAhXk5AJKGPwCbjkQAq5xOALepWwDEtGcAzLlwAMyzcgDKrXIAx6NwALyNZgDWu4IApJZHAAcGAwANDAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB3eGhpamtsbW5vcHFycwt0dXZYWVpbXF1eX2BhYmNkZWZnAktMTU5PUFFRUlNUVVZXAABDREVGJSUlJSUlR0hJSgAAADs8PT4lJSUlP0BBQgAAAAAyMzQ1NiUlJTc4OToAAAAAACorLC0lJS4vMDEAAAAAAAAAISIjJCUmJygpAAAAAAAAABkaGxwdHh8gAAAAAAAAAAAAEhMUFRYXGAAAAAAAAAAAAAANDg8QEQAAAAAAAAAAAAAACAkKCwwAAAAAAAAAAAAAAAAFBgcAAAAAAAAAAAAAAAAAAgMEAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=">
diff --git a/source/templates/hippie/partials/nav-page.liquid b/source/templates/hippie/partials/nav-page.liquid
index 36e5184..cf52d72 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="{{ pageBase }}art/up.png" alt="" width="32" height="64">{% endcomment %}
+					{% comment %}<img src="/art/up.png" alt="" width="32" height="64">{% endcomment %}
 				</a>
 			</li>
 			<li>
@@ -22,7 +22,7 @@
 			<li class="js_scrolldown">
 				<a href="#end" class="a_button_meta">
 					<div class="sprite_img demo__sprite_down"></div>
-					{% comment %}<img src="{{ pageBase }}art/down.png" alt="" width="32" height="32">{% endcomment %}
+					{% comment %}<img src="/art/down.png" alt="" width="32" height="32">{% endcomment %}
 				</a>
 			</li>
 		</ul>
diff --git a/source/templates/hippie/partials/placeholder-flag.liquid b/source/templates/hippie/partials/placeholder-flag.liquid
index 02432cb..280a48c 100644
--- a/source/templates/hippie/partials/placeholder-flag.liquid
+++ b/source/templates/hippie/partials/placeholder-flag.liquid
@@ -1,4 +1,5 @@
 {% assign height = width | divided_by: 1.6 %}
+
 {% if type == 'svg' or type == '' %}
 	<svg version="1.1" id="{{ id }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
 		{% comment %}<defs>
diff --git a/source/templates/hippie/simple.liquid b/source/templates/hippie/simple.liquid
index b644f9f..b711fe6 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 f2e0ce1..86499ed 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="{{ pageBase }}css/demo_basic.css"/>
+	<link rel="stylesheet" type="text/css" media="all" href="/css/demo_basic.css"/>
 	{% endblock -%}
 	{% endblock -%}
 </head>