feat: Add simple blog structure

Display full circle when seconds or minutes turn to 0.

source/screens/demo/examples/10print.liquid

@@ -0,0 +1,73 @@
+---
+title: 10print
+tags:
+- demoExample
+---
+{% assign pageBase = "../../" -%}
+{% layout "hippie/full.liquid" %}
+
+{% block head %}
+{{ block.super -}}
+<style>
+	canvas {
+		display: block;
+	}
+</style>
+{% endblock %}
+
+{% block body %}
+<canvas id="10print"></canvas>
+{% endblock %}
+
+{% block script %}
+{{ block.super -}}
+<script>
+	// Page script
+	const canvas = document.getElementById('10print');
+	const ctx = canvas.getContext('2d');
+
+	const lineWidth = 20;
+	const randomSeed = Math.random;
+
+	// Function to draw the 10PRINT pattern
+	function draw10Print() {
+		// Clear the canvas
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+		// Set line style
+		ctx.strokeStyle = 'black';
+		ctx.lineWidth = 2;
+
+		// Loop through the canvas grid
+		for (let x = 0; x < canvas.width; x += lineWidth) {
+			for (let y = 0; y < canvas.height; y += lineWidth) {
+				// Randomly choose between two diagonal lines
+				if (randomSeed() > 0.5) {
+					// Draw line from top-left to bottom-right
+					ctx.beginPath();
+					ctx.moveTo(x, y);
+					ctx.lineTo(x + lineWidth, y + lineWidth);
+					ctx.stroke();
+				} else {
+					// Draw line from top-right to bottom-left
+					ctx.beginPath();
+					ctx.moveTo(x + lineWidth, y);
+					ctx.lineTo(x, y + lineWidth);
+					ctx.stroke();
+				}
+			}
+		}
+	}
+
+	function resizeCanvas() {
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+	}
+
+	resizeCanvas();
+	draw10Print();
+
+	// window.addEventListener('resize', resizeCanvas);
+	canvas.addEventListener('click', draw10Print);
+</script>
+{% endblock %}

source/screens/demo/examples/blog.njk

@@ -0,0 +1,51 @@
+---
+title: Blog
+tags:
+  - demoExample
+---
+{% set pageBase = "../" %}
+{% set pageId = page.fileSlug %}
+
+{% extends "demo/_default.njk" %}
+{% import "hippie/macros/_placeholder.njk" as ph %}
+{% import "hippie/macros/_song.njk" as song %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block head %}
+	{{ super() }}
+{% endblock %}
+
+{% block body %}
+	<!-- {{ page.fileSlug }}.page -->
+	<div class="sec_main_center">
+		<header class="header_txt">
+			<h1>Blog</h1>
+		</header>
+		<nav role="doc-toc">
+			<h2>Inhaltsverzeichnis</h2>
+			<ul>
+				{%- for song in collections.song -%}
+					<li>
+						<a href="{{ song.page.url }}">{{ song.data.title }}</a>
+					</li>
+				{%- endfor -%}
+			</ul>
+		</nav>
+		<h2>Vorwort</h2>
+		<p>Liederbuch für
+			<em>Name</em>.</p>
+		<p>Gibt es gebunden und hier
+			{{ ph.link() }}.<br/>
+			Bestellungen bitte an
+			{{ ph.name() }}
+			richten.</p>
+		<hr class="hr_double hr_dotted">
+		{%- for post in collections.article -%}
+			{{ post.content }}
+		{%- endfor -%}
+		<hr/>
+		<address>{{ ph.name() }}</address>
+	</div>
+{% endblock %}

source/screens/demo/examples/blog/article.md

@@ -0,0 +1,11 @@
+---
+tags: 
+  - blog
+  - article
+title: "Artikel"
+releaseDate: JJJJ
+description: Text
+---
+# Titel
+
+Inhalt

source/screens/demo/examples/clock.liquid

@@ -0,0 +1,112 @@
+---
+title: Clock
+tags:
+- demoExample
+---
+{% assign pageBase = "../../" -%}
+{% assign bodyClass = "body_clock" -%}
+{% layout "hippie/full.liquid" %}
+
+{% block body %}
+<main>
+	<canvas id="clock" width="512" height="512"></canvas>
+	<p>
+		<button id="toggleFormat">12-Stunden-Format</button>
+	</p>
+</main>
+{% endblock %}
+
+{% block script %}
+{{ block.super -}}
+<script>
+	// Page script
+	const canvas = document.getElementById('clock');
+	const ctx = canvas.getContext('2d');
+	let is24HourFormat = true;
+	const colorDayOfWeek = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim();
+	const colorDayOfMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim();
+	const colorMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim();
+
+	document.getElementById('toggleFormat').addEventListener('click', () => {
+		is24HourFormat = !is24HourFormat;
+		document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
+	});
+
+	function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
+		const centerX = canvas.width / 2;
+		const centerY = canvas.height / 2;
+		const lineWidth = 16;
+		const lineGap = 8;
+		const maxSize = canvas.width / 2 - lineWidth;
+
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+		function drawArc(value, maxValue, radius, strokeStyle) {
+			const startAngle = -0.5 * Math.PI; // Start at the top
+			const endAngle = startAngle + (2 * Math.PI * (value / maxValue));
+
+			ctx.beginPath();
+			ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
+			ctx.lineWidth = 16;
+			ctx.strokeStyle = strokeStyle;
+			ctx.stroke();
+		}
+
+		drawArc(
+			(seconds === 0) ? 60 : seconds,
+			60,
+			maxSize,
+			'black'
+		);
+		drawArc(
+			(minutes === 0) ? 60 : minutes,
+			60,
+			maxSize - lineWidth - lineGap,
+			'lightgrey'
+		);
+		drawArc(
+			is24HourFormat ? hours : hours % 12,
+			is24HourFormat ? 24 : 12,
+			maxSize - (lineWidth + lineGap) * 2,
+			'white'
+		);
+		drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, colorDayOfWeek);
+		drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, colorDayOfMonth);
+		drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, colorMonth);
+	}
+
+	function updateRings() {
+		const currentDate = new Date();
+		const currentSeconds = currentDate.getSeconds();
+		const currentMinutes = currentDate.getMinutes();
+		const currentHours = currentDate.getHours();
+		const currentDayOfWeek = getNumericWeekday(currentDate);
+		const currentDayOfMonth = currentDate.getDate();
+		const currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
+		const daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
+
+		drawRings(
+			currentSeconds,
+			currentMinutes,
+			currentHours,
+			currentDayOfWeek,
+			currentDayOfMonth,
+			currentMonth,
+			daysInCurrentMonth
+		);
+	}
+
+	// TODO: Parameter für Wochenstart ergänzen
+	function getNumericWeekday(date) {
+		const weekday = date.getDay(); // 0 (Sunday) to 6 (Saturday)
+		return (weekday === 0) ? 7 : weekday;
+	}
+
+	function daysInMonth(month, year) {
+		return new Date(year, month, 0).getDate();
+	}
+
+	updateRings();
+	setInterval(updateRings, 1000);
+</script>
+{% endblock %}

source/screens/demo/examples/start.liquid

@@ -0,0 +1,84 @@
+---
+title: Start
+tags:
+- demoExample
+---
+{% assign pageBase = "../../" -%}
+{% assign pageId = page.fileSlug -%}
+{% assign bodyClass = "body_start" -%}
+{% layout "hippie/full.liquid" %}
+
+{% block body %}
+<main>
+	<form id="www-search" class="flex inline" action="https://duckduckgo.com/">
+		<input id="query" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
+		<input class="button_io" value="Suchen" type="submit"/>
+	</form>
+	<div class="blocks">
+		<article>
+			<section>
+				<h2><a href="">Name</a></h2>
+				<ul>
+					<li>
+						<a href=""><img src="/art/bullet.gif" width="16" height="16"/>Link</a>
+					</li>
+				</ul>
+			</section>
+		</article>
+		<article>
+			<section>
+				<h2><a href="">Name</a></h2>
+			</section>
+		</article>
+	</div>
+</main>
+{% endblock %}
+
+{% block script %}
+{{ block.super -}}
+<script>
+	// Page script
+	// NOTE: https://duckduckgo.com/duckduckgo-help-pages/settings/params
+	const defaultOptions = {
+		kl: 'de-de',
+		kp: '-2',
+		kz: '-1',
+		// kae: 't',
+		k1: '-1'
+	};
+	let options = Object.assign({}, defaultOptions);
+
+	function setOptions(jsonOptions) {
+		if (!jsonOptions || typeof jsonOptions !== 'object') return;
+
+		options = Object.assign({}, options, jsonOptions);
+	}
+
+	function buildSearchUrl(query) {
+		const base = 'https://duckduckgo.com/';
+		const params = new URLSearchParams({q: query});
+
+		for (const [k, v] of Object.entries(options)) {
+			if (v === undefined || v === null || v === '') continue;
+
+			params.set(k, String(v));
+		}
+
+		return base + '?' + params.toString();
+	}
+
+	document.getElementById('www-search').addEventListener('submit', function (e) {
+		e.preventDefault();
+		const query = document.getElementById('query').value.trim();
+
+		if (!query) return;
+
+		const url = buildSearchUrl(query);
+
+		window.open(url, '_blank', 'noopener');
+	});
+
+	// Example of setting options programmatically:
+	// setOptions({ kl: 'de-de', kp: '2', iar: 'images' });
+</script>
+{% endblock %}

source/screens/demo/examples/ui/tile.liquid

@@ -1,5 +1,5 @@
 ---
-title: Start
+title: Tile
 tags:
 - ui
 ---

source/screens/demo/index.liquid

@@ -0,0 +1,76 @@
+---
+permalink: "/"
+title: Index
+tags:
+- demoIndex
+---
+{% assign pageBase = hippie.pageBase -%}
+{% assign pageId = page.fileSlug -%}
+{% assign pageClass = "h_full_view" -%}
+{%- layout "hippie/full.liquid" %}
+
+{% block body %}
+<div class="wrap">
+	<div class="hello">
+		<h2>This is {{ hippie.brand | upcase }}</h2>
+		<p>You can start using it by replacing this file with your own index page.</p>
+		<p>To do this you need to create a file
+			<code>/index.njk</code>
+			inside the
+			<i>source/screens</i>
+			folder. You can also create a
+			<code>data.json</code>
+			file inside the
+			<i>source/templates</i>
+			folder as a data source for your nunjucks files.</p>
+		<p>For a very basic start you can make a copy of the demo page
+			<code>blank.njk</code>. You can find it at
+			<i>/source/screens/demo</i>.</p>
+		<p>The
+			<i>source/demo</i>
+			folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole
+			page layouts.<br/>Follow the white rabbit.</p>
+		<div class="pos_rel">
+			<pre class="txt_tiny txt_white pos_abs pin_down pin_right">  ()()<br>  (..)<br>c(")(")</pre>
+			<h3>Overview</h3>
+		</div>
+		<nav>
+			<ul class="list_link">
+				{% for link in collections.demoIndex %}
+					<li>
+						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
+					</li>
+				{% endfor %}
+			</ul>
+		</nav>
+		<h3>Page</h3>
+		<ul class="list_link">
+			{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
+
+			{% for link in pagesByTitle %}
+				<li>
+					<a href="{{ link.page.url }}">{{ link.data.title }}</a>
+				</li>
+			{% endfor %}
+		</ul>
+		<h3>Example</h3>
+		<ul class="list_link">
+			{% for link in collections.demoExample %}
+				<li>
+					<a href="{{ link.page.url }}">{{ link.data.title }}</a>
+				</li>
+			{% endfor %}
+		</ul>
+	</div>
+</div>
+{% endblock %}
+
+{% block script %}
+{{ block.super -}}
+{% render 'hippie/partials/log-assets', state: true -%}
+{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
+<script>
+	// Page script
+</script>
+{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
+{% endblock %}

source/screens/demo/index.njk

@@ -1,82 +0,0 @@
----
-permalink: "/"
-title: Index
-tags:
-  - demoIndex
----
-{% set pageBase = hippie.pageBase %}
-{% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
-
-{% extends "demo/_default.njk" %}
-
-{% block title %}Index{% endblock %}
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block body %}
-	<!-- {{ page.fileSlug }}.page -->
-	<div class="wrap">
-		<div class="hello">
-			<h2>This is
-				{{ hippie.brand | upper }}</h2>
-			<p>You can start using it by replacing this file with your own index page.</p>
-			<p>To do this you need to create a file
-				<code>/index.njk</code>
-				inside the
-				<i>source/screens</i>
-				folder. You can also create a
-				<code>data.json</code>
-				file inside the
-				<i>source/templates</i>
-				folder as a data source for your nunjucks files.</p>
-			<p>For a very basic start you can make a copy of the demo page
-				<code>blank.njk</code>. You can find it at
-				<i>/source/screens/demo</i>.</p>
-			<p>The
-				<i>source/demo</i>
-				folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
-			<div class="pos_rel">
-				<pre class="txt_tiny txt_white pos_abs pin_down pin_right">  ()()<br>  (..)<br>c(")(")</pre>
-				<h3>Overview</h3>
-			</div>
-			<nav>
-				<ul class="list_link">
-					{% for link in collections.demoIndex %}
-						<li>
-							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
-						</li>
-					{% endfor %}
-				</ul>
-			</nav>
-			<h3>Page</h3>
-			<ul class="list_link">
-				{% for link in collections.demoPage | sort(false, false, 'data.title') %}
-					<li>
-						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
-					</li>
-				{% endfor %}
-			</ul>
-			<h3>Example</h3>
-			<ul class="list_link">
-				{% for link in collections.demoExample %}
-					<li>
-						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
-					</li>
-				{% endfor %}
-			</ul>
-		</div>
-	</div>
-{% endblock %}
-
-{% block script %}
-	{{ super() }}
-	<script>
-		assetsLoaded = true;
-		logPerf('BODY        :: Assets loaded, running page specific script...', assetsLoaded);
-		// Page specific
-		// ------------------------------------------------------------------------------
-		logPerf('Application ready... not.');
-	</script>
-{% endblock %}

source/screens/demo/pages/blank.liquid

@@ -0,0 +1,10 @@
+---
+title: Blank
+---
+{% assign pageBase = "../../" -%}
+{% assign pageId = page.fileSlug -%}
+{%- layout "hippie/full.liquid" %}
+
+{% block body %}
+<!-- {{ title }} -->
+{% endblock %}

source/screens/demo/pages/blank.njk

@@ -1,22 +0,0 @@
----
-title: Blank
----
-{% set pageBase = "../" %}
-{% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
-
-{% extends "demo/_default.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<!-- {{ page.fileSlug }}.page -->
-{% endblock %}
-
-{% block script %}
-{{ super() }}
-{% endblock %}

source/screens/demo/pages/default.liquid

@@ -1,5 +1,5 @@
 ---
-title: "Default"
+title: Default
 ---
 {% assign pageBase = "../" -%}
 {% assign pageId = page.fileSlug -%}

source/screens/demo/pages/error/304.liquid

@@ -0,0 +1,20 @@
+---
+title: 304
+---
+{% assign pageBase = "../../../" -%}
+{% assign bodyClass = "body_status" %}
+{%- layout "hippie/status.liquid" %}
+
+{% block main %}
+{{ block.super -}}
+<h3>Umleitung</h3>
+<p>Unverändert <dfn>Not Modified</dfn></p>
+<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">
+	<p>Der Inhalt der angeforderten Ressource hat sich seit der letzten Abfrage des Clients nicht verändert und wird
+		deshalb nicht übertragen. Zu den Einzelheiten siehe <a
+			href="https://de.wikipedia.org/wiki/Browser-Cache#Versionsvergleich" title="Browser-Cache">Browser-Cache-Versionsvergleich</a>.
+	</p>
+	<p class="quote_source"><a
+			href="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">Wikipedia</a></p>
+</blockquote>
+{% endblock %}

source/screens/demo/pages/error/304.njk

@@ -1,26 +0,0 @@
----
-title: 304
----
-{% set pageBase = "../../" %}
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_status" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<main class="main_site">
-  <h1>{{ title }}</h1>
-  <h3>Umleitung</h3>
-  <p>Unverändert <dfn>Not Modified</dfn></p>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">
-    <p>Der Inhalt der angeforderten Ressource hat sich seit der letzten Abfrage des Clients nicht verändert und wird deshalb nicht übertragen. Zu den Einzelheiten siehe <a href="https://de.wikipedia.org/wiki/Browser-Cache#Versionsvergleich" title="Browser-Cache">Browser-Cache-Versionsvergleich</a>.</p>
-    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">Wikipedia</a></p>
-  </blockquote>
-</main>
-{{ super() }}
-{% endblock %}

source/screens/demo/pages/error/400.liquid

@@ -0,0 +1,17 @@
+---
+title: 400
+---
+{% assign pageBase = "../../../" -%}
+{% assign bodyClass = "body_status" %}
+{%- layout "hippie/status.liquid" %}
+
+{% block main %}
+{{ block.super -}}
+<h3>Client-Fehler</h3>
+<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
+<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
+	<p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
+	<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
+	</p>
+</blockquote>
+{% endblock %}

source/screens/demo/pages/error/400.njk

@@ -1,26 +0,0 @@
----
-title: 400
----
-{% set pageBase = "../../" %}
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_status" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<main class="main_site">
-  <h1>{{ title }}</h1>
-  <h3>Client-Fehler</h3>
-  <p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
-    <p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
-    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
-  </blockquote>
-</main>
-{{ super() }}
-{% endblock %}

source/screens/demo/pages/error/401.liquid

@@ -0,0 +1,18 @@
+---
+title: 401
+---
+{% assign pageBase = "../../../" -%}
+{% assign bodyClass = "body_status" %}
+{%- layout "hippie/status.liquid" %}
+
+{% block main %}
+{{ block.super -}}
+<h3>Client-Fehler</h3>
+<p>Nicht autorisiert! <dfn>Unauthorized</dfn></p>
+<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
+	<p>Die Anfrage kann nicht ohne gültige Authentifizierung durchgeführt werden. Wie die Authentifizierung durchgeführt
+		werden soll, wird im „WWW-Authenticate“-Header-Feld der Antwort übermittelt.</p>
+	<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
+	</p>
+</blockquote>
+{% endblock %}

source/screens/demo/pages/error/401.njk

@@ -1,26 +0,0 @@
----
-title: 401
----
-{% set pageBase = "../../" %}
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_status" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<main class="main_site">
-  <h1>{{ title }}</h1>
-  <h3>Client-Fehler</h3>
-  <p>Nicht autorisiert! <dfn>Unauthorized</dfn></p>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
-    <p>Die Anfrage kann nicht ohne gültige Authentifizierung durchgeführt werden. Wie die Authentifizierung durchgeführt werden soll, wird im „WWW-Authenticate“-Header-Feld der Antwort übermittelt.</p>
-    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
-  </blockquote>
-</main>
-{{ super() }}
-{% endblock %}

source/screens/demo/pages/error/403.liquid

@@ -0,0 +1,18 @@
+---
+title: 403
+---
+{% assign pageBase = "../../../" -%}
+{% assign bodyClass = "body_status" %}
+{%- layout "hippie/status.liquid" %}
+
+{% block main %}
+{{ block.super -}}
+<h3>Client-Fehler</h3>
+<p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
+<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
+	<p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer
+		nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
+	<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
+	</p>
+</blockquote>
+{% endblock %}

source/screens/demo/pages/error/403.njk

@@ -1,26 +0,0 @@
----
-title: 403
----
-{% set pageBase = "../../" %}
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_status" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<main class="main_site">
-  <h1>{{ title }}</h1>
-  <h3>Client-Fehler</h3>
-  <p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
-    <p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
-    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
-  </blockquote>
-</main>
-{{ super() }}
-{% endblock %}

source/screens/demo/pages/error/404.liquid

@@ -0,0 +1,19 @@
+---
+title: 404
+---
+{% assign pageBase = "../../../" -%}
+{% assign bodyClass = "body_status" %}
+{%- layout "hippie/status.liquid" %}
+
+{% block main %}
+{{ block.super -}}
+<h3>Client-Fehler</h3>
+<p>Hier ist nichts. <dfn>Not Found</dfn></p>
+<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
+	<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine
+		Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote
+		Links bezeichnet.</p>
+	<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
+	</p>
+</blockquote>
+{% endblock %}

source/screens/demo/pages/error/404.njk

@@ -1,26 +0,0 @@
----
-title: 404
----
-{% set pageBase = "../../" %}
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_status" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<main class="main_site">
-  <h1>{{ title }}</h1>
-  <h3>Client-Fehler</h3>
-  <p>Hier ist nichts. <dfn>Not Found</dfn></p>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
-    <p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
-    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
-  </blockquote>
-</main>
-{{ super() }}
-{% endblock %}

source/screens/demo/pages/error/408.liquid

@@ -0,0 +1,17 @@
+---
+title: 408
+---
+{% assign pageBase = "../../../" -%}
+{% assign bodyClass = "body_status" %}
+{%- layout "hippie/status.liquid" %}
+
+{% block main %}
+{{ block.super -}}
+<h3>Client-Fehler</h3>
+<p>Zeitüberschreitung der Anforderung. <dfn>Request Timeout</dfn></p>
+<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
+	<p>Innerhalb der vom Server erlaubten Zeitspanne wurde keine vollständige Anfrage des Clients empfangen.</p>
+	<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
+	</p>
+</blockquote>
+{% endblock %}

source/screens/demo/pages/error/408.njk

@@ -1,26 +0,0 @@
----
-title: 408
----
-{% set pageBase = "../../" %}
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_status" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<main class="main_site">
-  <h1>{{ title }}</h1>
-  <h3>Client-Fehler</h3>
-  <p>Zeitüberschreitung der Anforderung. <dfn>Request Timeout</dfn></p>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
-    <p>Innerhalb der vom Server erlaubten Zeitspanne wurde keine vollständige Anfrage des Clients empfangen.</p>
-    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
-  </blockquote>
-</main>
-{{ super() }}
-{% endblock %}

source/screens/demo/pages/error/500.liquid

@@ -0,0 +1,17 @@
+---
+title: 500
+---
+{% assign pageBase = "../../../" -%}
+{% assign bodyClass = "body_status" %}
+{%- layout "hippie/status.liquid" %}
+
+{% block main %}
+{{ block.super -}}
+<h3>Server-Fehler</h3>
+<p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
+<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
+	<p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p>
+	<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a>
+	</p>
+</blockquote>
+{% endblock %}

source/screens/demo/pages/error/500.njk

@@ -1,26 +0,0 @@
----
-title: 500
----
-{% set pageBase = "../../" %}
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_status" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<main class="main_site">
-  <h1>{{ title }}</h1>
-  <h3>Server-Fehler</h3>
-  <p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
-    <p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p>
-    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a></p>
-  </blockquote>
-</main>
-{{ super() }}
-{% endblock %}

source/screens/demo/pages/error/503.liquid

@@ -0,0 +1,19 @@
+---
+title: 503
+---
+{% assign pageBase = "../../../" -%}
+{% assign bodyClass = "body_status" %}
+{%- layout "hippie/status.liquid" %}
+
+{% block main %}
+{{ block.super -}}
+<h3>Server-Fehler</h3>
+<p>Dienst nicht verfügbar. <dfn>Service Unavailable</dfn></p>
+<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
+	<p>Der Server steht temporär nicht zur Verfügung, zum Beispiel wegen Überlastung oder Wartungsarbeiten. Ein
+		„Retry-After“-Header-Feld in der Antwort kann den Client auf einen Zeitpunkt hinweisen, zu dem die Anfrage
+		eventuell bearbeitet werden könnte.</p>
+	<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a>
+	</p>
+</blockquote>
+{% endblock %}

source/screens/demo/pages/error/503.njk

@@ -1,26 +0,0 @@
----
-title: 503
----
-{% set pageBase = "../../" %}
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_status" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<main class="main_site">
-  <h1>{{ title }}</h1>
-  <h3>Server-Fehler</h3>
-  <p>Dienst nicht verfügbar. <dfn>Service Unavailable</dfn></p>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
-    <p>Der Server steht temporär nicht zur Verfügung, zum Beispiel wegen Überlastung oder Wartungsarbeiten. Ein „Retry-After“-Header-Feld in der Antwort kann den Client auf einen Zeitpunkt hinweisen, zu dem die Anfrage eventuell bearbeitet werden könnte.</p>
-    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a></p>
-  </blockquote>
-</main>
-{{ super() }}
-{% endblock %}

source/screens/demo/pages/maintenance.liquid

@@ -0,0 +1,13 @@
+---
+title: Maintenance
+---
+{% assign pageBase = "../../" -%}
+{% assign pageClass = "h_full_view" -%}
+{%- layout "hippie/status.liquid" %}
+
+{% block body %}
+<hgroup id="root" class="txt_center">
+	<h1 class="txt_hero txt_gradient">HIPPIE</h1>
+	<p>Diese Seite wird gerade gewartet.</p>
+</hgroup>
+{% endblock %}

source/screens/demo/pages/maintenance.njk

@@ -1,21 +0,0 @@
----
-title: Maintenance
----
-{% set pageBase = "../" %}
-{% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<!-- {{ page.fileSlug }}.page -->
-<div id="root" class="overflow">
-  <h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
-</div>
-{% endblock %}

source/style/demo.scss

@@ -13,4 +13,6 @@
 @use "modules/portal/portal_module";
 @use "modules/songbook/songbook_module";
 @use "modules/demo/demo_module";
+@use "modules/start";
+@use "modules/clock";
 // @use "modules/YOUR-MODULE/YOUR-FILES";

source/style/modules/_clock.scss

@@ -0,0 +1,26 @@
+@use "../../hippie-style/hippie";
+
+:root {
+	--clock-color-yellow: rgb(250, 216, 3);
+	--clock-color-orange: rgb(242, 175, 19);
+	--clock-color-pink: rgb(211, 10, 81);
+	--clock-color-purple: rgb(142, 31, 104);
+	--clock-color-blue: rgb(39, 63, 139);
+	--clock-color-pblue: rgb(60, 87, 154);
+	--clock-color-lblue: rgb(183, 224, 240);
+	--clock-color-lcyan: rgb(107, 199, 217);
+	--clock-color-cyan: rgb(82, 190, 209);
+}
+
+.body_clock {
+	main {
+		@extend .sec_main_center;
+		display: flex;
+		flex-flow: column nowrap;
+		justify-content: center;
+	}
+
+	p {
+		text-align: center;
+	}
+}

source/style/modules/_start.scss

@@ -0,0 +1,15 @@
+@use "../../hippie-style/hippie";
+
+.body_start {
+	main {
+		@extend .sec_main_center;
+	}
+
+	#www-search {
+		input[type="text"] {
+			flex: 1;
+			padding: hippie.$padding_basic;
+			line-height: hippie.$line_text_basic;
+		}
+	}
+}

source/templates/demo/_maintenance.njk

@@ -1,12 +0,0 @@
-<!-- demo.maintenance.template -->
-{% extends "hippie/_maintenance.njk" %}
-
-{% block meta %}
-	{% include "demo/partials/_meta.njk" %}
-	<base href="/">
-{% endblock %}
-
-{% block links %}
-	{{ super() }}
-	<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
-{% endblock %}

source/templates/hippie/_maintenance.njk

@@ -1,27 +0,0 @@
-<!-- maintenance.template -->
-{% import "hippie/macros/_footer.njk" as footer %}
-<!DOCTYPE html>
-<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-	<head>
-		<meta charset="utf-8">
-
-		{% block head %}
-			<title>{{ hippie.titlePrefix }}
-				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
-
-			{% block meta %}
-				{% include "hippie/partials/_head_meta.njk" %}
-			{% 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=">
-			{% endblock %}
-		{% endblock %}
-	</head>
-
-	<body class="{{ bodyClass }}">
-		{% block body %}
-			{{ footer.status() }}
-		{% endblock %}
-	</body>
-</html>

source/templates/hippie/full.liquid

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+{% if pageId %}
+{%- capture idAttr %} id="{{ pageId }}"{% endcapture -%}
+{% endif -%}
+{% if pageClass %}
+	{%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%}
+{% endif -%}
+{% if bodyClass %}
+	{%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%}
+{% endif -%}
+<html{{ idAttr }}{{ classAttr }} lang="de">
+<head>
+	<meta charset="utf-8">
+	{% block head %}
+	<title>
+		{{- hippie.titlePrefix -}}
+		{% block title %}{{ title }}{% endblock -%}
+		{{ hippie.titlePostfix -}}
+	</title>
+	{% block meta -%}
+	{% render "hippie/partials/meta.liquid" %}
+	{% 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' -%}
+	{% 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 %}
+	<link rel="stylesheet" media="all" href="{{ pageBase }}css/demo.css" type="text/css"/>
+	{% endblock -%}
+	{% render 'hippie/partials/log-log' with 'HEAD end    :: Links parsed, starting to load.' as msg -%}
+	{% endblock -%}
+</head>
+
+<body{{ bodyClassAttr }}>
+{% render 'hippie/partials/log-log' with 'BODY start' as msg -%}
+{%- block body %}{% endblock -%}
+{% block script -%}
+{% render 'hippie/partials/log-log' with 'BODY        :: Loading script assets...' as msg -%}
+<script src="/vendor/jquery.min.js"></script>
+<script>
+	// Full script
+</script>
+{% endblock -%}
+{% render 'hippie/partials/log-log' with 'BODY end    :: Page script might still be loading.' as msg -%}
+</body>
+</html>

source/templates/hippie/partials/footer-status.liquid

@@ -0,0 +1,9 @@
+<footer class="pos_abs pin_bottom width_full">
+	<address class="txt_center">Kontakt:
+		<a class="lineLink" href="mailto:{{ email | default: 'admin@domain.tld' }}">{{ email | default: 'admin@domain.tld' }}</a>
+		· Server:
+		{{ app | default: 'Application' }}/{{ version | default: 'ver.s.ion' }}
+		({{ system | default: 'System name' }}) · Domain:
+		{{ domain | default: 'domain.tld:port' }}
+	</address>
+</footer>

source/templates/hippie/partials/log-assets.liquid

@@ -0,0 +1,3 @@
+<script>
+	assetsLoaded = {{ state | default: false, allow_false: true }};
+</script>

source/templates/hippie/partials/log-log.liquid

@@ -0,0 +1,3 @@
+<script>
+	logPerf('{{ msg }}', {{ arg | default: '' }});
+</script>

source/templates/hippie/partials/log-setup.liquid

@@ -0,0 +1,6 @@
+{% comment %}{% assign hippie.debugMode = state %}{% endcomment %}
+<script>
+	debugOn = {{ state }};
+	debugOnScreen = {{ display | default: false }};
+	assetsLoaded = {{ assets | default: false }};
+</script>

source/templates/hippie/partials/log-start.liquid

@@ -0,0 +1,4 @@
+<script>
+	logAdd('EVENT       :: Document \'%s\' event fired.', 'DOMContentLoaded');
+	logPerf('HEAD start  :: Debugging performance...', debugOn);
+</script>

source/templates/hippie/partials/script-log.liquid

@@ -0,0 +1,113 @@
+<script>
+  // Entry script at page init
+  let debugOn = {{ hippie.debugMode | default: false, allow_false: true }};
+  let debugOnScreen = false;
+  let assetsLoaded = false;
+
+  // Get the current time difference between page
+  // load and when this func was invoked
+  function getTimeDiff() {
+    return new Date().getTime() - performance.timing.navigationStart;
+  }
+
+  function pad(n, width, z) {
+    z = z || '0';
+    n = n + '';
+
+    return n.length >= width
+      ? n
+      : new Array(width - n.length + 1).join(z) + n;
+  }
+
+  // Log message to console and add
+  // performance measuring information
+  function logPerf(msg, arg) {
+    if (debugOn) {
+      if (debugOnScreen && assetsLoaded) {
+        if (!document.getElementById('jsLogPerf')) {
+          let wrap = document.createElement('div');
+          let box = document.createElement('div');
+
+          wrap.style.position = 'relative';
+          box.style.cssText = `position: fixed;
+            bottom: 16px;
+            right: 40px;
+            zIndex: 1000;
+            padding: 0 8px;
+            background: rgba(255,255,255,.6);
+            color: rgb(128);
+            fontSize: 1rem;`;
+          box.id = 'jsLogPerf';
+
+          wrap.prepend(box);
+          document
+            .body
+            .prepend(wrap);
+
+          /*
+          $('<div><div></div></div>')
+            .css('position', 'relative')
+            .find('div')
+            .attr('id', 'jsLogPerf')
+            .css({
+              position: 'fixed',
+              bottom: '16px',
+              right: '40px',
+              zIndex: '1000',
+              padding: '0 8px',
+              background: 'rgba(255,255,255,.6)',
+              color: 'rgb(128)',
+              fontSize: '1rem'
+            })
+            .end()
+            .prependTo('body');
+          */
+          // $('body').prepend('<div style="position:relative;"></div>');
+          // $('div').first().prepend('<div id="jslogPerf" style="position:fixed;bottom:8px;right:16px;z-index:1000;padding:8px;background:rgb(0,255,255,.5)"></div>');
+        }
+
+        let code = document.createElement('code');
+
+        code.style.cssText = `display: block;
+          margin: 8px 0;
+          padding: 1px 4px;
+          background-color: transparent;
+          color: black;
+          font-size: 12px;
+          line-height: 1.1;`;
+        code.innerHTML = '<b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '';
+
+        document
+          .getElementById('jsLogPerf')
+          .append(code);
+        // document.getElementById('jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
+        // $('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
+
+        // NOTE: Alternative short-circuit evaluation
+        // needs element in document but prevents error if not
+        // $log = $log || $('#jslogPerf');
+        // $log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
+      }
+
+      if (window.console) {
+        const time = pad(getTimeDiff(), 5) + 'ms :: ';
+
+        console.debug(time + msg, (
+          arg
+          ? arg
+          : ''));
+
+        // NOTE: Non standard feature. Not available on IE
+        if (console.timeStamp) {
+          console.timeStamp(msg);
+        }
+      }
+    }
+  }
+
+  function logAdd(msg, listener) {
+    document.addEventListener(listener, function () {
+      logPerf(msg, listener);
+    });
+  }
+</script>

source/templates/hippie/status.liquid

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+{% if pageClass %}
+{%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%}
+{% endif -%}
+{% if bodyClass %}
+	{%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%}
+{% endif -%}
+<html id="{{ page.fileSlug }}"{{ classAttr }} lang="de">
+<head>
+	<meta charset="utf-8">
+	{% block head %}
+	<title>
+		{{- hippie.titlePrefix -}}
+		{% block title %}{{ title }}{% endblock -%}
+		{{ hippie.titlePostfix -}}
+	</title>
+	{% block meta -%}
+	{% 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"/>
+	{% endblock -%}
+	{% endblock -%}
+</head>
+
+<body{{ bodyClassAttr }}>
+{%- block body %}
+<main class="main_site">
+	<h1>{{ title }}</h1>
+	{% block main %}{% endblock -%}
+</main>
+{% render 'hippie/partials/footer-status' %}
+{% endblock -%}
+</body>
+</html>