feat: Change normalize css dependency

- Remove old v7.0.0 vendor file - Add node package for normalize css - Still not in use
feat: Add bootstrap icons dependency
2025-06-21 14:35:43 +02:00 · 2025-06-21 14:22:31 +02:00 · 2025-06-21 13:39:36 +02:00 · 2025-06-21 12:11:03 +02:00 · 2025-06-20 17:09:06 +02:00 · 2025-06-20 17:03:31 +02:00
29 changed files with 585 additions and 1108 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@ -31,6 +31,8 @@ module.exports = function (eleventyConfig) {
 	eleventyConfig.addPassthroughCopy({"source/data/**/*.json": "json"});

 	eleventyConfig.addPassthroughCopy("vendor");
+	eleventyConfig.addPassthroughCopy({"node_modules/bootstrap-icons": "vendor/bootstrap-icons"});
+	// eleventyConfig.addPassthroughCopy({"node_modules/normalize.css/normalize.css": "vendor/normalize.css"});

 	eleventyConfig.addWatchTarget("./source/style/");

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -31,7 +31,11 @@
  },
  "private": true,
  "devDependencies": {
+    "normalize.css": "^8.0.1"
+  },
+  "dependencies": {
    "@11ty/eleventy": "^2.0.1",
+    "bootstrap-icons": "^1.13.1",
    "sass": "^1.69.4"
  }
-}
+}
--- a/source/art/images/demo/bullet.gif
+++ b/source/art/images/demo/bullet.gif
--- a/source/art/images/demo/letter.gif
+++ b/source/art/images/demo/letter.gif
--- a/source/art/images/demo/flag_websafe_128x80.gif
+++ b/source/art/images/demo/flag_websafe_128x80.gif
--- a/source/art/images/demo/flag_websafe_128x80.webp
+++ b/source/art/images/demo/flag_websafe_128x80.webp
--- a/source/screens/demo/basics.njk
+++ b/source/screens/demo/basics.njk
@ -7,6 +7,7 @@ tags:
 {% set pageId = page.fileSlug %}

 {% extends "demo/_main.njk" %}
+{% import "hippie/macros/_placeholder.njk" as ph %}

 {% block title %}Grundlagen{% endblock %}
 {% block head %}
@ -517,7 +518,7 @@ tags:
 		<article>
 			<h1 id="embedded">Eingebundene Inhalte</h1>
 			{# // picture // source // img // iframe // embed // object // param // video // audio // track // map // area #}
-			<img src="data:image/gif;base64,R0lGODlhgABQAIQAMf/MAP+ZM/+ZAP9mM8zM/8xmM8wzM8wAZpnM/5nMzJmZzJkzZpkAZmbMzGaZzGZmmWYzZjNmmTMzmQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAgABQAAQF/mDjiORolug5NiKSEG8Mz68SSbek73zv/8CgcEhkGY/IpBLRcBEQM+hL+nRIHrscLsvVab/drTcMHpvF6DIuxVaxj7I4DZZAE+/4vB6o7PubRgSCUIOCT4YRDxE3jFuNj46RkJOSlZSXlo5tm24nTXKgBA5ae6Wmpz5/qklOU1GvCYqNZ2q1ZLe0uGm6X5y+K0dzoQlWpKjHyHery0wIhIeFgwiLmZjW1djX2pa/viwjw3PUyeTlQct/TCyHru0ENru58vH0tvP29VndnazhMVjGzAkkh06VM2gICdkAmK3htocOI0bYtymQv2kBB2o8VrBPM3dUoDxQdI+XyZIo/vOlnMivJQk4wubA20iTYMcj6l5ESzgKok+JQH8+osivQcw4DezUXFrqJquQsAhQw0f1pMqrVe8RRcHCn6iMTMMqc8qCSUJDUmQFXSuUrcOtwBwk8FdMrF09ZHOy2+vsitWsWP8KXgk3WLhxdxMXIdtk5zMFattKdjt5UuGuR2GAVcyZR16jIGHYmBV45eDSqGttNdJKGAKlnWPvuNnsme2vlHNX1q3JZdHMM2UL9+yUb5S6ppOnPg1YtW+ureMogD08Nm1XOxPx3s3dLQQICyh+iz5jVHXZEBgsYJC+4EfjsZjLV97c6vf1C8CrF99gmJXziuGn3oDr3YQWWhht/qdgd5Sklx9++hlwgAHikfcCYgDSlJ6D7A14AAMHhHiAe1C9YF599M233BgO6vegehPGKCGFz1kkzGYZosKhgAKK6KOIzDRx2ztTLWjkT/e56KKMTM44IUWgvIZjjnlwuCOIP2bpY0HGkZTilytedZ96SzppZpMydvOJTFNSGcSVPGopZ5bMOFYXg0diM+aLC6B55p9NerOOdG7useGA6c2p6JwGgbZXkWCiGOYNLcYJ6KV+pukSZjJ4WSgQcMK46KiMqqITO3imWkmS+C2A6auZ/umNMFh8ysOh63FI6q6LGhSSlCpKWhUEEvAJXqzIwvqnAQNU1J84baJHoIe8/lab5QAFBCAAAAL4YdYzJ+Y52Z7HKptsstluGwAA667LyVw0RJuYldRaa20B6WrLrb7bAvBHO/9NGuwO5K5n7sFMYhtAu+w2vC4AEEdcEQ2vAXilvbsawGwB3Ha8rboRhyyxR4WQpCpElZ6LsJMKM8ywyDCLvIkM5sWGK5YYz6kxtvt+vHDMQMvcRxQMRSoYqwysnOzGDjcd9NMyu7EmMYrdnLOcBqTrsdNQdz0yEgcJUuTJkbyo9KXMgvyy12zD/MYMtYal69U+YiuAzx+3rXfMSqA68Dxjnt1kAQOovffhT0MXQ8AaEdtjzllrnTfilAOdxBTAplqmyoP//HDlyKAnrsIMG81t7cb8hq461GCbSJqwEjjIOcvZrr367UGjEIO8Q+zI6855f4778JYHI0pu983OtO3EN2+5CS7UgUqHGRtwt+fOZ886a1JJit/ShTes/fhev/ROKbIrmrUAzJPvfvGfMHTNd69a3+/7+LNNAtV31PsjvvrKnwD1tw5elKtzwhugArvWgrj9YD0+2hnHFkhBvXWlQUmLEc8qyMG9scCBscMS8DpIQg9Oh1JJS1sJV3i4pKQnaz9joQz15gDxzfCGegsBADs=" width="128" height="80" alt="Fahne von Interaktionsweise">
+			{{ ph.flag('img') }}
 			<p>Dies ist ein Bild. Es wird mit dem Element
 				<code>&lt;img&gt;</code>
 				eingebunden. Solch ein Bild hat üblicherweise die Attribute
@ -533,10 +534,7 @@ tags:
 				und
 				<code>&lt;picture&gt;</code>
 				in Kombination verwendet werden.</p>
-			<picture>
-				<source srcset="{{ pageBase }}art/demo/flag_websafe_128x80.webp" type="image/webp"/>
-				<img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" alt="" width="128" height="80"/>
-			</picture>
+				{{ ph.flag('img', 'file') }}
 		</article>
 		<article>
 			<h1>Tabellen</h1>
@ -629,7 +627,7 @@ tags:
 				Elementes. Dieses ist notwendig um Angaben zur Kommunikation mit dem Server zu setzen. Es hat normalerweise keine gestalterische Funktion.</p>
 			<p>Grundlegend ist das Element
 				<code>&lt;input&gt;</code>. Es hat viele Attribute um den Typ der Eingabe anzupassen. Ist es undefiniert nimmt es jegliche textbasierte Information auf und erhält eine Standardgröße.</p>
-			<p><input value="Undefiniert"/><input class="io_input" value="Undefiniert mit Stil"/></p>
+			<p><input value="Undefiniert"/><input class="input_io" value="Undefiniert mit Stil"/></p>
 			<p>Ein spezieller Typ des Eingabefeldes hat die Funktion einer Schaltfläche
 				<code>&lt;input[type="button"]&gt;</code>. Es gibt allerdings auch ein eigenes Element
 				<code>&lt;button&gt;</code>
@ -637,8 +635,8 @@ tags:
 			<p><input type="button" value="Input Button">
 				<button>Button</button>
 			</p>
-			<p><input class="io_button" type="button" value="Input Button">
-				<button class="io_button">Button</button>
+			<p><input class="button_io" type="button" value="Input Button">
+				<button class="button_io">Button</button>
 			</p>
 			<p>Interaktive Elemente können durch das Attribut
 				<code>readonly</code>
@ -649,8 +647,8 @@ tags:
 			<p><input type="text" value="Nur lesbare Eingabe" readonly="readonly"><input type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
 				<button disabled="disabled">Deaktivierte Schaltfläche</button>
 			</p>
-			<p><input class="io_input" type="text" value="Nur lesbare Eingabe" readonly="readonly"><input class="io_input" type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
-				<button class="io_button" disabled="disabled">Deaktivierte Schaltfläche</button>
+			<p><input class="input_io" type="text" value="Nur lesbare Eingabe" readonly="readonly"><input class="input_io" type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
+				<button class="button_io" disabled="disabled">Deaktivierte Schaltfläche</button>
 			</p>
 			<p>Das Element
 				<code>&lt;label&gt;</code>
@ -677,31 +675,31 @@ tags:
 				</div>
 				<table class="float_right">
 					<tr>
-						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_d" value="11.966504" size="10"></td>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="text" id="demo__io_d" value="11.966504" size="10"></td>
 						<td class="demo__td_pr">
 							<label for="demo__io_a">x</label>
 						</td>
-						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_a" value="10" min="0" max="1000"></td>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="number" id="demo__io_a" value="10" min="0" max="1000"></td>
 						<td class="demo__td_pr">
 							<label for="demo__io_a">Breite</label>
 						</td>
 					</tr>
 					<tr>
-						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_e" value="51.503491" size="10"></td>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="text" id="demo__io_e" value="51.503491" size="10"></td>
 						<td class="demo__td_pr">
 							<label for="demo__io_b">y</label>
 						</td>
-						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_b" value="10" min="0" max="1000"></td>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="number" id="demo__io_b" value="10" min="0" max="1000"></td>
 						<td class="demo__td_pr">
 							<label for="demo__io_b">Tiefe</label>
 						</td>
 					</tr>
 					<tr>
-						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_f" value="88" size="10"></td>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="text" id="demo__io_f" value="88" size="10"></td>
 						<td class="demo__td_pr">
 							<label for="demo__io_c">z</label>
 						</td>
-						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_c" value="48" min="0" max="1000"></td>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="number" id="demo__io_c" value="48" min="0" max="1000"></td>
 						<td class="demo__td_pr">
 							<label for="demo__io_c">Höhe</label>
 						</td>
@ -713,8 +711,8 @@ tags:
 				realisiert.</p>
 			<fieldset>
 				<div class="grid grid_column_2">
-					<label for="demo__input">Input:</label><input class="io_input" type="text" value="love" readonly="readonly" id="demo__input">
-					<label for="demo__output">Output:</label><input class="io_input" type="text" value="happiness" readonly="readonly" id="demo__output">
+					<label for="demo__input">Input:</label><input class="input_io" type="text" value="love" readonly="readonly" id="demo__input">
+					<label for="demo__output">Output:</label><input class="input_io" type="text" value="happiness" readonly="readonly" id="demo__output">
 				</div>
 			</fieldset>
 			<p>Sie können mittels
@ -752,21 +750,20 @@ tags:
 				<legend>Einfache Eingabeelemente mit Stil</legend>
 				<div class="grid grid_column_2">
 					<label>Schaltflächen:</label>
-					<div>
-						<button class="io_button">Senden</button><input class="io_button" type="reset" value="Abbrechen"></div>
+					<div class="flex inline">
+						<button class="button_io">Senden</button><input class="button_io" type="reset" value="Abbrechen"></div>
 					<label>Zeicheneingaben:</label>
-					<div><input class="io_input" type="text" placeholder="Text"><input class="io_input" type="number" value="0815"></div>
+					<div class="flex inline"><input class="input_io" type="text" placeholder="Text"><input class="input_io" type="number" value="0815"></div>
 					<label>Einzelauswahl:</label>
 					<div><input class="io_radio" type="radio" name="direction" value="up" checked="checked"/><input class="io_radio" type="radio" name="direction" value="down"/></div>
 					<label>Mehrfachauswahl:</label>
 					<div><input class="io_check" type="checkbox" name="speed" value="slow" checked="checked"/><input class="io_check" type="checkbox" name="speed" value="fast"/></div>
 					<label>Auswahllisten:</label>
-					<div>
+					<div class="flex inline">
 						<select class="io_select txt_top">
 							<option value="A" selected="selected">Option A</option>
 							<option value="B">Option B</option>
-						</select>
-						<select class="io_select txt_top" size="3">
+						</select><select class="io_select txt_top" size="3">
 							<option value="red" selected="selected">Rot</option>
 							<option value="green">Grün</option>
 							<option value="blue">Blau</option>
@ -792,43 +789,43 @@ tags:
 					<label class="">Datum<br>
 						<code>&lt;input[type="date"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="date"></div>
+					<div><input class="input_io" type="date"></div>
 					<label class="">Uhrzeit<br>
 						<code>&lt;input[type="time"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="time"></div>
+					<div><input class="input_io" type="time"></div>
 					<label class="">Datum und Zeit<br>
 						<code>&lt;input[type="datetime-local"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="datetime-local"></div>
+					<div><input class="input_io" type="datetime-local"></div>
 					<label class="">Kalendermonat<br>
 						<code>&lt;input[type="month"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="month"></div>
+					<div><input class="input_io" type="month"></div>
 					<label class="">Kalenderwoche<br>
 						<code>&lt;input[type="week"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="week"></div>
+					<div><input class="input_io" type="week"></div>
 					<label class="">@dresse<br>
 						<code>&lt;input[type="email"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="email" placeholder="@"></div>
+					<div><input class="input_io" type="email" placeholder="@"></div>
 					<label class="">Passwort<br>
 						<code>&lt;input[type="password"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="password" value="admin"></div>
+					<div><input class="input_io" type="password" value="admin"></div>
 					<label class="">Telefonnummer<br>
 						<code>&lt;input[type="tel"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="tel" value="0190123456"></div>
+					<div><input class="input_io" type="tel" value="0190123456"></div>
 					<label class="">URL<br>
 						<code>&lt;input[type="url"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="url" placeholder="url://"></div>
+					<div><input class="input_io" type="url" placeholder="url://"></div>
 					<label class="">Suche<br>
 						<code>&lt;input[type="search"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="search"></div>
+					<div><input class="input_io" type="search"></div>
 					<label class="">Datei<br>
 						<code>&lt;input[type="file"]&gt;</code>
 					</label>
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@ -115,6 +115,8 @@ tags:
 			<hr class="hr_hidden">
 			<hr class="hr_dotted">
 			<hr class="hr_double">
+			<pre class="pre_code"><code>hr.vertical</code></pre>
+			<hr class="vertical">
 			<h2>&lt;pre&gt;</h2>
 			<pre>Vorformatierter Text.
 	erhält Umbrüche und Einrückung.
@ -150,8 +152,12 @@ tags:
 			</ul>
 			<pre class="pre_code"><code>ul.list_link>(li>a)*2</code></pre>
 			<ul class="list_link">
-				<li><a href="">Mit</a></li>
-				<li><a href="">Verweisen</a></li>
+				<li>
+					<a href="">Mit</a>
+				</li>
+				<li>
+					<a href="">Verweisen</a>
+				</li>
 			</ul>
 			<h2>&lt;figure&gt;</h2>
 			<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
@ -169,7 +175,8 @@ tags:
 			</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>
@ -276,14 +283,24 @@ tags:
 			<p>Elemente:</p>
 			<pre>// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend</pre>
 			<h2>&lt;input&gt;</h2>
-			<div class="flex_column_wrap">
-				<div class="flex_column"><input value="Undefiniert"/></div>
-				<div class="flex_column"><input type="text" size="8" value="Text"/></div>
-				<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
-				<div class="flex_column"><input type="button" value="Auswählen"></div>
-				<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
+			<div class="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>
 			<h4>Varianten</h4>
+			<pre class="pre_code"><code>input.button_io+button.button_io</code></pre>
+			<div class="inline">
+				<input class="button_io" type="button" value="Input type button">
+				<button class="button_io">Button</button>
+			</div>
+			<div class="inline">
+				<input class="input_io" type="text" value="Nur lesbare Eingabe" readonly="readonly">
+				<input class="input_io" type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
+				<button class="button_io" disabled="disabled">Deaktivierte Schaltfläche</button>
+			</div>
 			<div id="capsCheck">
 				<form action="">
 					<input type="password" onkeypress="capLock(event)"/>
--- a/source/screens/demo/examples/card.njk
+++ b/source/screens/demo/examples/card.njk
@ -21,29 +21,7 @@ tags:
 	<!-- {{ page.fileSlug }}.page -->
 	<div class="card_bkg">
 		<div id="dither"></div>
-		<svg version="1.1" id="flag" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
-			{# <defs>
-			<filter id="turb3">
-				<feColorMatrix type="saturate" values="1" />
-				<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
-			</filter>
-			<symbol id="triangle-5">
-				<rect y="0" fill="#273F8B" width="1920" height="1200"/>
-			</symbol>
-		</defs>
-		<g>
-			<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
-		</g> #}
-			<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
-			<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
-			<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
-			<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
-			<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
-			<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
-			<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
-			<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
-			<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
-		</svg>
+		{{ ph.flag('svg', '', 'flag', '') }}
 		{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
 	</div>
 	<div class="card_box">
@ -72,28 +50,34 @@ tags:

 		// console.log(colors);

-		document.getElementById('js_content').addEventListener('mouseenter', () => {
-			iId = setInterval(() => {
-				for (let i = 1; i <= colors.length; i++) {
+		document
+			.getElementById('js_content')
+			.addEventListener('mouseenter', () => {
+				iId = setInterval(() => {
+					for (let i = 1; i <= colors.length; i++) {
+						position++;
+
+						if (position >= colors.length) {
+							position = 0;
+						}
+
+						document
+							.getElementById("triangle-" + i)
+							.setAttribute("fill", colors[position]);
+					}
+
 					position++;

 					if (position >= colors.length) {
 						position = 0;
 					}
+				}, 600);
+			});

-					document.getElementById("triangle-" + i).setAttribute("fill", colors[position]);
-				}
-
-				position++;
-
-				if (position >= colors.length) {
-					position = 0;
-				}
-			}, 600);
-		});
-
-		document.getElementById('js_content').addEventListener('mouseleave', () => {
-			iId && clearInterval(iId);
-		});
+		document
+			.getElementById('js_content')
+			.addEventListener('mouseleave', () => {
+				iId && clearInterval(iId);
+			});
 	</script>
 {% endblock %}
--- a/source/screens/demo/examples/intro.njk
+++ b/source/screens/demo/examples/intro.njk
@ -0,0 +1,149 @@
+---
+title: Intro
+tags: 
+  - demoExample
+---
+
+{% set pageId = "init" %}
+{% set pageClass = "html_ui" %}
+
+{% extends "demo/_app.njk" %}
+{% import "hippie/macros/_placeholder.njk" as ph %}
+{% block title %}
+	{{ title }}
+{% endblock %}
+
+{% block links %}
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+	{{ super() }}
+{% endblock %}
+
+{% block body %}
+	<div id="loader" class="step op_show">
+		<div id="bar">
+			<div id="spinner">
+				<span>I</span>
+			</div>
+			<div id="wrap">
+				<div id="progress"></div>
+			</div>
+			<div id="status">0%</div>
+		</div>
+	</div>
+	<div id="intro" class="step op_hide">
+		<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
+			<p>Hold
+				<kbd>space</kbd>
+				to skip.</p>
+		</div>
+		{{ ph.brand('brand') }}
+		<p>Powered by</p>
+		<ul class="tech-stack">
+			<li>Vendor</li>
+			<li>IDE</li>
+			<li>Engine</li>
+		</ul>
+	</div>
+	<div id="agreement" class="step op_hide">
+		<h1>Agreement</h1>
+		<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
+	</div>
+	<div id="idle" class="step op_hide">
+		<div class="mouse_over"></div>
+		<div class="hello">Hello World!</div>
+		<p class="hello">Only left mouse click or any key</p>
+	</div>
+{% endblock %}
+
+{%- block script %}
+	{{ super() }}
+	<script src="{{ pageBase }}js/_intro.js"></script>
+	<script>
+		//let intro = new Intro('Intro');
+		//intro.init();
+
+		//const ui = new UI();
+		//ui
+		//  .init()
+		//  .then(() => ui.showIntro())
+		//  .then(() => ui.showHint())
+		//  .then(() => ui.showIdle())
+		//  .catch((error) => console.error(error));
+
+		let introDelay = 6;
+		let hintDelay = 1;
+		let cycleDelay = 2;
+		let isAgree = false;
+		const steps = {
+			agreement: {
+				element: document.getElementById('agreement'),
+				msgIn: 'Agreement shown.',
+				msgOut: 'Agreement accepted.',
+				msgNo: 'No agreement today.'
+			}
+		};
+		const intro = document.getElementById('intro');
+		const agreement = steps.agreement.element;
+		const hint = {
+			element: document.getElementById('hint'),
+			delay: hintDelay * 1000,
+			show() {
+				if (typeof this.timeoutId === 'number') {
+					this.cancel();
+				}
+				this
+					.element
+					.classList
+					.remove('di_none');
+				this.timeoutId = setTimeout(() => {
+					this.dismiss();
+				}, this.delay);
+			},
+			dismiss() {
+				this
+					.element
+					.classList
+					.add('di_none');
+				this.timeoutId = undefined;
+			},
+			cancel() {
+				clearTimeout(this.timeoutId);
+			}
+		};
+		const loader = document.getElementById('loader');
+		const idle = {
+			element: document.getElementById('idle'),
+			delay: cycleDelay * 1000,
+			position: 0,
+			cycle() {
+				if (typeof this.intervalId === 'number') {
+					this.cancel();
+				}
+				this.intervalId = setInterval(() => {
+					this.position++;
+					if (this.position >= flagColors.length) {
+						this.position = 0;
+					}
+					this.element.style.backgroundColor = '#' + flagColors[this.position];
+				}, this.delay);
+			},
+			cancel() {
+				this.intervalId && clearInterval(this.intervalId);
+			}
+		}
+		init()
+			.then(loadCore)
+			.then(showIntro)
+			.catch(er => console.error(er))
+			.then(showAgreement)
+			.then(showIdle)
+			.catch(er => console.error(er))
+			. finally(() => {
+				console.debug('Init end.', isAgree);
+				// location = 'demo/examples/ui/new.html';
+			});
+	</script>
+{% endblock %}
--- a/source/screens/demo/examples/portal.njk
+++ b/source/screens/demo/examples/portal.njk
@ -22,7 +22,7 @@ tags:
 		{{ gate.list(
 		'Tor mit Symbol und Liste',
 		'../demo', {
-			src: '/art/demo/flag_websafe_128x80.gif',
+			src: '/art/flag_websafe_128x80.gif',
 			alt: 'Flag of Interaktionsweise'
 		}, [
 			{
--- a/source/screens/demo/examples/ui/drag.njk
+++ b/source/screens/demo/examples/ui/drag.njk
@ -1,11 +1,11 @@
 ---
 title: Drag
 tags:
-  - demoExample
+  - ui
 ---
 {% set pageId = page.fileSlug %}
 {% set pageClass = "h_full_view" %}
-{% set bodyClass = "body_drag" %}
+{% set bodyClass = "body_ui" %}

 {% extends "demo/_app.njk" %}

@ -22,8 +22,10 @@ tags:
 {% endblock %}

 {% block body %}
+  <header class="io pos_fix pin_top pin_right pin_left">
+    <button data-action="add">Add</button>
+  </header>
  <div id="space"></div>
-  <button data-action="add">Add</button>
 {% endblock %}

 {%- block script %}
--- a/source/screens/demo/examples/ui/form.njk
+++ b/source/screens/demo/examples/ui/form.njk
@ -1,10 +1,10 @@
 ---
 title: Form
 tags: 
-  - demoExample
  - ui
 ---
-{% set bodyClass = "body_form" %}
+{% set pageClass = "html_ui" %}
+{% set bodyClass = "body_ui" %}

 {% extends "demo/_app.njk" %}

@ -20,12 +20,12 @@ tags:
 {% endblock %}

 {% block body %}
-	<div id="head">
+	<header class="io">
 		<h1>Formulare</h1>
 		<button data-action="add">Hinzufügen</button>
 		<button data-action="change">Ändern</button>
 		<hr>
-	</div>
+	</header>
 	<form id="form" action="">
 		<div id="grid">
 			<div>a</div>
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@ -1,16 +1,15 @@
 ---
-title: Init
+title: UI
 tags: 
  - demoExample
  - index
-  - ui
 ---

-{% set pageId = "init" %}
 {% set pageClass = "html_ui" %}

 {% extends "demo/_app.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
+
 {% block title %}
 	{{ title }}
 {% endblock %}
@ -24,128 +23,16 @@ tags:
 {% endblock %}

 {% block body %}
-	<div id="loader" class="step op_show">
-		<div id="bar">
-			<div id="spinner">
-				<span>I</span>
-			</div>
-			<div id="wrap">
-				<div id="progress"></div>
-			</div>
-			<div id="status">0%</div>
-		</div>
+	<div class="sec_main_center">
+		<nav role="doc-toc">
+			<h1>Inhaltsverzeichnis</h1>
+			<ul class="list_link">
+				{%- for ui in collections.ui -%}
+					<li>
+						<a href="{{ ui.page.url }}">{{ ui.data.title }}</a>
+					</li>
+				{%- endfor -%}
+			</ul>
+		</nav>
 	</div>
-	<div id="intro" class="step op_hide">
-		<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
-			<p>Hold
-				<kbd>space</kbd>
-				to skip.</p>
-		</div>
-		{{ ph.brand('brand') }}
-		<p>Powered by</p>
-		<ul class="tech-stack">
-			<li>Vendor</li>
-			<li>IDE</li>
-			<li>Engine</li>
-		</ul>
-	</div>
-	<div id="agreement" class="step op_hide">
-		<h1>Agreement</h1>
-		<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
-	</div>
-	<div id="idle" class="step op_hide">
-		<div class="mouse_over"></div>
-		<div class="hello">Hello World!</div>
-		<p class="hello">Only left mouse click or any key</p>
-	</div>
-{% endblock %}
-
-{%- block script %}
-	{{ super() }}
-	<script src="{{ pageBase }}js/_intro.js"></script>
-	<script>
-		//let intro = new Intro('Intro');
-		//intro.init();
-
-		//const ui = new UI();
-		//ui
-		//  .init()
-		//  .then(() => ui.showIntro())
-		//  .then(() => ui.showHint())
-		//  .then(() => ui.showIdle())
-		//  .catch((error) => console.error(error));
-
-		let introDelay = 6;
-		let hintDelay = 1;
-		let cycleDelay = 2;
-		let isAgree = false;
-		const steps = {
-			agreement: {
-				element: document.getElementById('agreement'),
-				msgIn: 'Agreement shown.',
-				msgOut: 'Agreement accepted.',
-				msgNo: 'No agreement today.'
-			}
-		};
-		const intro = document.getElementById('intro');
-		const agreement = steps.agreement.element;
-		const hint = {
-			element: document.getElementById('hint'),
-			delay: hintDelay * 1000,
-			show() {
-				if (typeof this.timeoutId === 'number') {
-					this.cancel();
-				}
-				this
-					.element
-					.classList
-					.remove('di_none');
-				this.timeoutId = setTimeout(() => {
-					this.dismiss();
-				}, this.delay);
-			},
-			dismiss() {
-				this
-					.element
-					.classList
-					.add('di_none');
-				this.timeoutId = undefined;
-			},
-			cancel() {
-				clearTimeout(this.timeoutId);
-			}
-		};
-		const loader = document.getElementById('loader');
-		const idle = {
-			element: document.getElementById('idle'),
-			delay: cycleDelay * 1000,
-			position: 0,
-			cycle() {
-				if (typeof this.intervalId === 'number') {
-					this.cancel();
-				}
-				this.intervalId = setInterval(() => {
-					this.position++;
-					if (this.position >= flagColors.length) {
-						this.position = 0;
-					}
-					this.element.style.backgroundColor = '#' + flagColors[this.position];
-				}, this.delay);
-			},
-			cancel() {
-				this.intervalId && clearInterval(this.intervalId);
-			}
-		}
-		init()
-			.then(loadCore)
-			.then(showIntro)
-			.catch(er => console.error(er))
-			.then(showAgreement)
-			.then(showIdle)
-			.catch(er => console.error(er))
-			. finally(() => {
-				console.debug('Init end.', isAgree);
-				// location = 'demo/examples/ui/new.html';
-			});
-	</script>
 {% endblock %}
--- a/source/screens/demo/examples/ui/new.njk
+++ b/source/screens/demo/examples/ui/new.njk
@ -1,14 +1,14 @@
 ---
 title: New
 tags:
-  - demoExample
+  - ui
 ---
 {% set pageId = page.fileSlug %}
 {% set pageClass = "h_full_view" %}
 {% set bodyClass = "body_new" %}

 {% extends "demo/_app.njk" %}
-{% import "hippie/macros/_state.njk" as state %}
+{% import "hippie/macros/_header.njk" as header %}

 {% block title %}{{ title }}
 {% endblock %}
@ -23,30 +23,10 @@ tags:
 {% endblock %}

 {% block body %}
-  <div id="top">
-    <h1 class="brand">
-      <a href="#">{{ hippie.brand | upper }}</a>
-    </h1>
-    <nav>
-      <ul>
-        {% for link in new %}
-          <li>
-            <a href="{{ link.href }}">{{ link.text }}</a>
-          </li>
-        {% endfor %}
-      </ul>
-    </nav>
-    <div class="state">
-      <p>{{ state.coord("log")}}
-        /
-        {{ state.date("date")}}
-        /
-        {{ state.time("time")}}</p>
-    </div>
-  </div>
-  <div class="container">
-    <div class="area menu">
-      <nav class="nav_horizontal">
+  {{ header.status(hippie, new) }}
+  <div id="frame">
+    <header class="area menu io">
+      <nav>
        <ul>
          <li>
            <a href="" class="a_button">Func 1</a>
@ -56,7 +36,7 @@ tags:
          </li>
        </ul>
      </nav>
-    </div>
+    </header>
    <div class="area grid">
      <div class="item">1</div>
      <div class="item">2</div>
@ -74,8 +54,9 @@ tags:
    let clock = new Clock('time');

    document.addEventListener('mousemove', (event) => {
-      document.getElementById('log')
-      .textContent = "X: " + event.pageX + ", Y: " + event.pageY;
+      document
+        .getElementById('log')
+        .textContent = "X: " + event.pageX + ", Y: " + event.pageY;
    });
  </script>
 {% endblock %}
--- a/source/screens/demo/examples/ui/settings.njk
+++ b/source/screens/demo/examples/ui/settings.njk
@ -1,12 +1,11 @@
 ---
 title: Settings
 tags:
-  - demoExample
-  - ui
+	- ui
 ---
 {% set pageId = page.fileSlug %}
 {% set pageClass = "h_full_view" %}
-{% set bodyClass = "body_ui" %}
+{% set bodyClass = "body_setting" %}

 {% extends "demo/_app.njk" %}

@ -14,37 +13,100 @@ tags:
 {% endblock %}

 {% block links %}
-  {{ super() }}
-  <link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+	{{ super() }}
+	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
 {% endblock %}

 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}

 {% block body %}
-<div id="frame" class="frame-flex">
-  <div class="title-bar">
-    <div>title-bar<button class="io_button">menu</button class="io_button"><button class="io_button">search</button class="io_button"></div>
-    <div><button class="io_button">minimize</button class="io_button"><button class="io_button">maximize</button class="io_button"><button class="io_button">close</button class="io_button"></div>
-  </div>
-  <main>
-    <aside class="left">aside
-    <nav>
-      <ul>
-        <li>setting</li>
-        <li>setting</li>
-      </ul>
-    </nav>
-    </aside>
-    <section class="bside">section</section>
-  </main>
-</div>
+	<div id="frame">
+		<header class="io">
+			<button title="menu">
+				<i class="bi bi-three-dots"></i>
+			</button>
+			<span class="span_solo">title-bar</span>
+			<nav>
+				<div class="spacer-a"></div>
+				<button title="minimize">
+					<i class="bi bi-dash"></i>
+				</button>
+				<button title="maximize">
+					<i class="bi bi-fullscreen"></i>
+				</button>
+				<button title="close">
+					<i class="bi bi-x-square"></i>
+				</button>
+			</nav>
+		</header>
+		<main class="io">
+			<aside class="io">
+				options
+				<nav>
+					<ul>
+						<li>setting</li>
+						<li>text</li>
+					</ul>
+					<hr>
+					<ul>
+						<li>
+							<label for="">label</label>
+						</li>
+						<li>
+							<button>button</button>
+						</li>
+					</ul>
+				</nav>
+			</aside>
+			<section>
+				<header class="io">
+					<nav>
+						<button title="search">
+							<i class="bi bi-search"></i>
+						</button>
+						<div class="spacer-b"></div>
+						<button title="cut">
+							<i class="bi bi-scissors"></i>
+						</button>
+						<button title="copy">
+							<i class="bi bi-copy"></i>
+						</button>
+						<button title="paste">
+							<i class="bi bi-clipboard-check-fill"></i>
+						</button>
+					</nav>
+					<hr class="vertical">
+					<nav>
+						<ul>
+							<li>
+								<button title="collapse">
+									<i class="bi bi-arrows-collapse"></i>
+								</button>
+							</li>
+							<li>
+								<button title="expand">
+									<i class="bi bi-arrows-expand-vertical"></i>
+								</button>
+							</li>
+						</ul>
+					</nav>
+					<span class="span_solo">section-bar</span>
+				</header>
+				section</section>
+		</main>
+		<footer class="io">
+			<span class="span_solo">state</span>
+			<div class="spacer-a"></div>
+			<button>action</button>
+		</footer>
+	</div>
 {% endblock %}

 {%- block script %}
-  {{ super() }}
-  <script src="{{ pageBase }}js/app.js"></script>
-  <script>
-  </script>
+	{{ super() }}
+	<script src="{{ pageBase }}js/app.js"></script>
+	<script></script>
 {% endblock %}
--- a/source/screens/demo/layouts.njk
+++ b/source/screens/demo/layouts.njk
@ -7,6 +7,7 @@ tags:
 {% set pageId = page.fileSlug %}

 {% extends "demo/_main.njk" %}
+{% import "hippie/macros/_placeholder.njk" as ph %}

 {% block title %}Gestaltungen{% endblock %}
 {% block head %}
@ -25,11 +26,9 @@ tags:
 			<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"><img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div>
-				<p>Vorname Name<br>Straße 1, 01234 Stadt</p>
-				<p>+49 (0)123 1337 0000<br>
-					<a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a>
-				</p>
+				<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>
 			<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre>
 			<div class="space_left_fourth">
@ -176,19 +175,12 @@ tags:
 					</footer>
 				</div>
 			</div>
-			<div class="flex">
-				<div class="flex_child"></div>
-				<div class="flex_child"></div>
-				<div class="flex_child"></div>
-				<div class="flex_child"></div>
-				<div class="flex_child"></div>
-			</div>
-			<div class="flex_column_wrap">
-				<div class="flex_column"><input value="Undefiniert"/></div>
-				<div class="flex_column"><input type="text" size="8" value="Text"/></div>
-				<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
-				<div class="flex_column"><input type="button" value="Auswählen"></div>
-				<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
+			<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>

 			<form method="get">
@ -245,18 +237,15 @@ tags:
 			<pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
 			<hr class="hr_dotted space_even_fourth">
 			<h3>ul</h3>
-			<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
-			<ul class="list_link">
-				<li>
-					<a href=""><img src="{{ pageBase }}art/demo/letter.gif" alt="">name@domain.tld</a>
-				</li>
-				<li>
-					<a href="">Work</a>
-				</li>
-				<li>
-					<a href="">Projects</a>
-				</li>
-			</ul>
+			<pre class="pre_code"><code>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>

 			<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>
@ -270,7 +259,7 @@ tags:
 				</thead>
 				<tbody>
 					<tr>
-						<td class="cell_icon" rowspan="2"><img src="/art/demo/bullet.gif" alt="" width="16" height="16"></td>
+						<td class="cell_icon" rowspan="2">■</td>
 						<td class="cell_link">
 							<a href="" target="_blank">Name</a>
 							<a href="" target="_blank">URL</a>
@ -285,7 +274,7 @@ tags:
 				</tbody>
 				<tbody>
 					<tr>
-						<td class="cell_icon" rowspan="2"><img src="/art/demo/bullet.gif" alt="" width="16" height="16"></td>
+						<td class="cell_icon" rowspan="2">■</td>
 						<td class="cell_link">
 							<a href="" target="_blank">Name</a>
 							<a href="" target="_blank">URL</a>
@ -302,18 +291,7 @@ tags:

 			<h2>Eingebettet</h2>
 			<div class="demo__flag">
-				<svg version="1.1" id="vector" 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">
-					<desc>Background flag</desc>
-					<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
-					<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
-					<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
-					<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
-					<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
-					<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
-					<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
-					<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
-					<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
-				</svg>
+				{{ ph.flag() }}
 			</div>
 		</article>
 	</section>
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@ -1 +1 @@
-Subproject commit a1a4bd408bedaa11f5e1aacca630d0b1bbbe7aa2
+Subproject commit b7ec209761cac635ba8312dbb07bf831ebc32933
--- a/source/style/modules/ui/_drag_module.scss
+++ b/source/style/modules/ui/_drag_module.scss
@ -1,18 +1,4 @@
-.body_drag {
-	height: 100vh;
-	// padding: $space_basic;
-
-	button {
-		@extend .io_button;
-		position: fixed;
-		top: 8px;
-		right: 8px;
-		margin: 0;
-	}
-}
-
 #space {
 	position: relative;
 	height: 100%;
-	background-color: $color-dark;
 }
--- a/source/style/modules/ui/_form_module.scss
+++ b/source/style/modules/ui/_form_module.scss
@ -1,20 +1,3 @@
-.body_form {
-	margin: 0;
-	background-color: $color-dark;
-}
-
-#head {
-	// display: flex;
-
-	button {
-			@extend .io_button;
-	}
-
-	h1 {
-		margin: 0;
-	}
-}
-
 #grid {
 	display: grid;
 	gap: 8px;
--- a/source/style/modules/ui/_new_module.scss
+++ b/source/style/modules/ui/_new_module.scss
@ -1,11 +1,13 @@
 $module_top_height: 32px;
+$body_top_space: $module_top_height + $space_basic;

 .body_new {
-	height: 100vh;
-	padding: $module_top_height + $space_basic $space_basic $space_basic;
+	@extend .body_ui;
+	
+	padding: $body_top_space $space_basic $space_basic;
 }

-.container {
+#frame {
 	display: grid;
 	height: 100%;
 	// margin: $space_basic;
--- a/source/style/modules/ui/_settings_module.scss
+++ b/source/style/modules/ui/_settings_module.scss
@ -1,44 +1,57 @@
-$module_top_height: 32px;
+@mixin nav-spacer($name, $size, $orientation) {
+	.spacer-#{$name} {
+		width: $size;
+		margin: 0;
+		border: $border_dotted;
+		opacity: .25;
+	}
+}

-.body_ui {
-	height: 100vh;
+.body_setting {
+	@extend .body_ui;
+
+	background-color: $color_back_basic;
 }

 #frame {
+	@extend %flex-column;
+
 	position: relative;
 	height: 100%;
-	background-color: $color-dark;

-	.title-bar {
-		button {
-			margin: 0 2px;
-		}
+	header,
+	aside,
+	footer {
+		border: 1px solid transparent;
+	}
+
+	&>header {
+		background-color: rgba(0, 0, 0, .1);
 	}

 	main {
+		@extend %flex-row;
+
+		flex: 1;
+
 		aside {
 			background-color: $color_brighter;
 		}
+
+		section {
+			flex: 1;
+		}
 	}
 }

-.frame-flex {
-	display: flex;
-	flex-direction: column;
-
-	.title-bar {
-		display: flex;
-
-		div:last-child {
-			margin-left: auto;
-		}
+.io {
+	.spacer {
+		width: $space_double;
+		margin: 0;
+		border: $border_dotted;
+		opacity: .25;
 	}
-	
-	main {
-		flex: 1;

-		aside, section {
-			height: 100%;
-		}
-	}
+	@include nav-spacer('a', $space_double, false);
+	@include nav-spacer('b', $space_small, false);
 }
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@ -3,18 +3,7 @@
@import "demo_config";
@import "hippie-style/hippie";

-$z-indexes: (
-	"default": 0,
-	"content-bottom": 1,
-	"content-low": 2,
-	"content-med": 3,
-	"content-high": 4,
-	"content-top": 10,
-	"modal-low": 11,
-	"modal-med": 12,
-	"modal-high": 13,
-	"toast": 100
-);
+$color_gui_back: $color_dark;

 .op_show {
 	transition: $transition_show;
@ -30,10 +19,14 @@ $z-indexes: (
 	body {
 		position: relative;
 		min-height: 100%;
-		background-color: black;
 	}
 }

+.body_ui {
+	height: 100vh;
+	background-color: $color_gui_back;
+}
+
 .step {
 	@extend %full_parent;
 }
--- a/source/templates/demo/_app.njk
+++ b/source/templates/demo/_app.njk
@ -25,6 +25,5 @@
 			<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
 			<script src="{{ pageBase }}js/variables.js"></script>
 		{% endblock %}
-
 	</body>
 </html>
--- a/source/templates/hippie/macros/_header.njk
+++ b/source/templates/hippie/macros/_header.njk
@ -2,4 +2,29 @@
 	<header class="header_site">
 		<div id="begin"></div>
 	</header>
+{% endmacro %}
+
+{% macro status(hippie, page) %}
+	{% import "hippie/macros/_state.njk" as state %}
+	<div id="top">
+		<h1 class="brand">
+			<a href="#">{{ hippie.brand | upper }}</a>
+		</h1>
+		<nav>
+			<ul>
+				{% for link in page %}
+					<li>
+						<a href="{{ link.href }}">{{ link.text }}</a>
+					</li>
+				{% endfor %}
+			</ul>
+		</nav>
+		<div class="state">
+			<p>{{ state.coord("log")}}
+        /
+        {{ state.date("date")}}
+        /
+        {{ state.time("time")}}</p>
+		</div>
+	</div>
 {% endmacro %}
--- a/source/templates/hippie/macros/_placeholder.njk
+++ b/source/templates/hippie/macros/_placeholder.njk
@ -1,5 +1,9 @@
-{% macro email(class = '', text = 'name@domain.tld') %}
-	<a class="{{ class }}" href="">{{ text }}</a>
+{% macro email(class = '', text = '', address = 'name@domain.tld') %}
+	{% if text === '' %}
+		{% set text = address %}
+	{% endif %}
+
+	<a class="{{ class }}" href="mailto:{{ address }}">{{ text }}</a>
 	{# {{ 'name@domain.tld' | urlize | safe }} #}
 {% endmacro %}

@ -15,6 +19,10 @@
 	<span class="{{ class }}">{{ text }}</span>
 {% endmacro %}

+{% macro phone(class = '', text = '+49 (0)101 1337 48') %}
+	<span class="{{ class }}">{{ text }}</span>
+{% endmacro %}
+
 {% macro brand(class = '', name = 'Marke') %}
 	<div class="{{ class }}">
 		{# <img src="" alt="Brand logo"> #}
@ -44,4 +52,49 @@
 		</svg>
 		<h1>{{ name }}</h1>
 	</div>
+{% endmacro %}
+
+{% macro flag(type = '', src = '', id = '', desc = 'Fahne von Interaktionsweise', width = '128') %}
+	{% set height = width / 1.6 %}
+	{% if type === 'svg' or type === '' %}
+		<svg version="1.1" id="{{ id }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
+			{# <defs>
+			<filter id="turb3">
+				<feColorMatrix type="saturate" values="1" />
+				<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
+			</filter>
+			<symbol id="triangle-5">
+				<rect y="0" fill="#273F8B" width="1920" height="1200"/>
+			</symbol>
+		</defs>
+		<g>
+			<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
+		</g> #}
+			{% if desc !== '' %}
+				<desc>{{ desc }}</desc>
+			{% endif %}
+			<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
+			<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
+			<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
+			<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
+			<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
+			<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
+			<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
+			<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
+			<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
+		</svg>
+	{% elif type === 'img' %}
+		{% if src === 'file' %}
+			<picture>
+				<source srcset="{{ pageBase }}art/flag_websafe_128x80.webp" type="image/webp"/>
+				<img src="{{ pageBase }}art/flag_websafe_128x80.gif" width="{{ width }}" height="{{ height }}" alt="{{ desc }}"/>
+			</picture>
+		{% else %}
+			<img 
+				width="{{ width }}" 
+				height="{{ height }}" 
+				alt="{{ desc }}"
+				src="data:image/gif;base64,R0lGODlhgABQAIQAMf/MAP+ZM/+ZAP9mM8zM/8xmM8wzM8wAZpnM/5nMzJmZzJkzZpkAZmbMzGaZzGZmmWYzZjNmmTMzmQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAgABQAAQF/mDjiORolug5NiKSEG8Mz68SSbek73zv/8CgcEhkGY/IpBLRcBEQM+hL+nRIHrscLsvVab/drTcMHpvF6DIuxVaxj7I4DZZAE+/4vB6o7PubRgSCUIOCT4YRDxE3jFuNj46RkJOSlZSXlo5tm24nTXKgBA5ae6Wmpz5/qklOU1GvCYqNZ2q1ZLe0uGm6X5y+K0dzoQlWpKjHyHery0wIhIeFgwiLmZjW1djX2pa/viwjw3PUyeTlQct/TCyHru0ENru58vH0tvP29VndnazhMVjGzAkkh06VM2gICdkAmK3htocOI0bYtymQv2kBB2o8VrBPM3dUoDxQdI+XyZIo/vOlnMivJQk4wubA20iTYMcj6l5ESzgKok+JQH8+osivQcw4DezUXFrqJquQsAhQw0f1pMqrVe8RRcHCn6iMTMMqc8qCSUJDUmQFXSuUrcOtwBwk8FdMrF09ZHOy2+vsitWsWP8KXgk3WLhxdxMXIdtk5zMFattKdjt5UuGuR2GAVcyZR16jIGHYmBV45eDSqGttNdJKGAKlnWPvuNnsme2vlHNX1q3JZdHMM2UL9+yUb5S6ppOnPg1YtW+ureMogD08Nm1XOxPx3s3dLQQICyh+iz5jVHXZEBgsYJC+4EfjsZjLV97c6vf1C8CrF99gmJXziuGn3oDr3YQWWhht/qdgd5Sklx9++hlwgAHikfcCYgDSlJ6D7A14AAMHhHiAe1C9YF599M233BgO6vegehPGKCGFz1kkzGYZosKhgAKK6KOIzDRx2ztTLWjkT/e56KKMTM44IUWgvIZjjnlwuCOIP2bpY0HGkZTilytedZ96SzppZpMydvOJTFNSGcSVPGopZ5bMOFYXg0diM+aLC6B55p9NerOOdG7useGA6c2p6JwGgbZXkWCiGOYNLcYJ6KV+pukSZjJ4WSgQcMK46KiMqqITO3imWkmS+C2A6auZ/umNMFh8ysOh63FI6q6LGhSSlCpKWhUEEvAJXqzIwvqnAQNU1J84baJHoIe8/lab5QAFBCAAAAL4YdYzJ+Y52Z7HKptsstluGwAA667LyVw0RJuYldRaa20B6WrLrb7bAvBHO/9NGuwO5K5n7sFMYhtAu+w2vC4AEEdcEQ2vAXilvbsawGwB3Ha8rboRhyyxR4WQpCpElZ6LsJMKM8ywyDCLvIkM5sWGK5YYz6kxtvt+vHDMQMvcRxQMRSoYqwysnOzGDjcd9NMyu7EmMYrdnLOcBqTrsdNQdz0yEgcJUuTJkbyo9KXMgvyy12zD/MYMtYal69U+YiuAzx+3rXfMSqA68Dxjnt1kAQOovffhT0MXQ8AaEdtjzllrnTfilAOdxBTAplqmyoP//HDlyKAnrsIMG81t7cb8hq461GCbSJqwEjjIOcvZrr367UGjEIO8Q+zI6855f4778JYHI0pu983OtO3EN2+5CS7UgUqHGRtwt+fOZ886a1JJit/ShTes/fhev/ROKbIrmrUAzJPvfvGfMHTNd69a3+/7+LNNAtV31PsjvvrKnwD1tw5elKtzwhugArvWgrj9YD0+2hnHFkhBvXWlQUmLEc8qyMG9scCBscMS8DpIQg9Oh1JJS1sJV3i4pKQnaz9joQz15gDxzfCGegsBADs=">
+		{% endif %}
+	{% endif %}
 {% endmacro %}
--- a/source/templates/hippie/macros/_state.njk
+++ b/source/templates/hippie/macros/_state.njk
@ -1,10 +1,12 @@
 {% macro coord(id, text = 'X: #, Y: ##') %}
 	<span id="{{ id }}">{{ text }}</span>
 {% endmacro %}
+
 {% macro time(id, text = '00:00:00', postfix = ' Uhr') %}
 	<span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
 {% endmacro %}
-{% macro date() %}
+
+{% macro date(id) %}
 	<span id="{{ id }}">
 		<span id="day">Wochentag</span>,
 		<span id="dayNumb">##</span>.
--- a/vendor/normalizecss/normalize.css
+++ b/vendor/normalizecss/normalize.css
@ -1,447 +0,0 @@
-/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in
- *    IE on Windows Phone and in iOS.
- */
-
-html {
-  line-height: 1.15; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
-
-/**
- * Remove the margin in all browsers (opinionated).
- */
-
-body {
-  margin: 0;
-}
-
-/**
- * Add the correct display in IE 9-.
- */
-
-article,
-aside,
-footer,
-header,
-nav,
-section {
-  display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- * 1. Add the correct display in IE.
- */
-
-figcaption,
-figure,
-main { /* 1 */
-  display: block;
-}
-
-/**
- * Add the correct margin in IE 8.
- */
-
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
- */
-
-a {
-  background-color: transparent; /* 1 */
-  -webkit-text-decoration-skip: objects; /* 2 */
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
- */
-
-b,
-strong {
-  font-weight: inherit;
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font style in Android 4.3-.
- */
-
-dfn {
-  font-style: italic;
-}
-
-/**
- * Add the correct background and color in IE 9-.
- */
-
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- */
-
-audio,
-video {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in iOS 4-7.
- */
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Remove the border on images inside links in IE 10-.
- */
-
-img {
-  border-style: none;
-}
-
-/**
- * Hide the overflow in IE.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers (opinionated).
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: sans-serif; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
-  text-transform: none;
-}
-
-/**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-html [type="button"], /* 1 */
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * 1. Add the correct display in IE 9-.
- * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  display: inline-block; /* 1 */
-  vertical-align: baseline; /* 2 */
-}
-
-/**
- * Remove the default vertical scrollbar in IE.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/* Interactive
-   ========================================================================== */
-
-/*
- * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
- */
-
-details, /* 1 */
-menu {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}
-
-/* Scripting
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- */
-
-canvas {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in IE.
- */
-
-template {
-  display: none;
-}
-
-/* Hidden
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 10-.
- */
-
-[hidden] {
-  display: none;
-}
Author	SHA1	Message	Date
sthag	30ad2f3067	feat: Change normalize css dependency - Remove old v7.0.0 vendor file - Add node package for normalize css - Still not in use	2025-06-21 14:35:43 +02:00
sthag	a33163d556	feat: Add bootstrap icons dependency - Add node package for bootstrap icons - New eleventy config addPassthroughCopy for package files - Change link to local resource - Change all node dependencies to production	2025-06-21 14:22:31 +02:00
sthag	8b7241c4da	feat: Change styles and ui - Change to hippie styles - Remove unused styles and components - Change colors for ui pages	2025-06-21 13:39:36 +02:00
sthag	52daf0ca51	feat: Change placeholder and usage - Move files - Remove demo folder for art - Remove unused files - Add placeholders - Move flag to placeholder - Replace content with placeholders	2025-06-21 12:11:03 +02:00
sthag	57dffa3502	feat: New settings - Add dependency to bootstrap icons - Add example content - Restructure layout - Now more usage of base hippie styles	2025-06-20 17:09:06 +02:00
sthag	5786e9e4b0	feat: Update components to new hippie styles	2025-06-20 17:03:31 +02:00
sthag	06e4a80b66	fix: Remove wrong page id	2025-06-20 17:00:07 +02:00
sthag	d83ae3ea22	feat: Adapt new hippie styles - Use bound io class - Remove over specified styles	2025-06-19 16:45:20 +02:00
sthag	3b380e954a	feat: Changes to style and logic for ui parts - Update hippie styles - Move top element for new page to header macro - Reassign ui and example collections	2025-06-19 16:21:09 +02:00
sthag	08e258d7aa	feat: Create new ui index - New index page for ui collection - Move intro to examples and rename	2025-06-19 16:13:22 +02:00