From 6ae411c83b3c32da55822d784db8533f457c77e4 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 8 Mar 2026 18:18:54 +0100
Subject: [PATCH] feat: Update intro and placeholder

- Change intro from njk to liquid
- New svg content for brand shortcode
- New style for brand in ui
---
 .eleventy.js                                  |  52 ++++---
 .../screens/demo/examples/game/intro.liquid   | 138 ++++++++++++++++++
 source/screens/demo/examples/game/intro.njk   | 138 ------------------
 source/style/modules/_game.scss               |   9 --
 source/style/ui.scss                          |  13 +-
 5 files changed, 181 insertions(+), 169 deletions(-)
 create mode 100644 source/screens/demo/examples/game/intro.liquid
 delete mode 100644 source/screens/demo/examples/game/intro.njk

diff --git a/.eleventy.js b/.eleventy.js
index 407553c..673656e 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -60,27 +60,39 @@ export default async function (eleventyConfig) {
 	eleventyConfig.addPairedShortcode("brand", function (content, attrClass = 'brand', direction = 'first') {
 		const logo = `
 <svg
-width="128"
-height="128"
-viewBox="0 0 128 128"
-preserveAspectRatio="xMidYMid meet">
-	<g>
-		<rect
-		style="display:inline;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-dasharray:none"
-		width="126"
-		height="126"
-		x="1"
-		y="1"/>
-		<circle
-		style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
-		cx="64"
-		cy="64"
-		r="63"/>
-		<path
-		style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
-		d="m 9.3926879,32.472455 109.2146221,-2e-6 -54.607309,94.582637 z"/>
-	</g>
+   width="100%"
+   height="100%"
+   viewBox="0 0 512 512"
+   preserveAspectRatio="xMidYMid meet">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <g
+       id="g2"
+       transform="matrix(0.984375,0,0,0.984375,4,4)"
+       style="stroke-width:1.01587">
+      <rect
+         style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:square;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect1"
+         width="512"
+         height="512"
+         x="0"
+         y="0" />
+      <circle
+         style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:square;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path1"
+         cx="256"
+         cy="256"
+         r="256" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:butt;stroke-linejoin:bevel;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path2"
+         d="M 477.7025,128 256,512 34.297496,128 Z"
+    </g>
+  </g>
 </svg>
+
 `;
 		let output = '';
 		switch (direction) {
diff --git a/source/screens/demo/examples/game/intro.liquid b/source/screens/demo/examples/game/intro.liquid
new file mode 100644
index 0000000..4e245b2
--- /dev/null
+++ b/source/screens/demo/examples/game/intro.liquid
@@ -0,0 +1,138 @@
+---
+title: Intro
+tags:
+- game
+---
+
+{% assign pageId = "init" %}
+{% assign bodyClass = 'body_intro' -%}
+{% layout 'hippie/app.liquid' %}
+
+{% 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>
+	{% brand 'brand' %}
+	<h1>Marke</h1>
+	{% endbrand %}
+	<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-overlay"></div>
+	<div class="hello">Hello World!</div>
+	<p class="hello">Only left mouse click or any key</p>
+</div>
+{% endblock %}
+
+{%- block script %}
+{{ block.super -}}
+<script src="/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 %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/game/intro.njk b/source/screens/demo/examples/game/intro.njk
deleted file mode 100644
index fbcb692..0000000
--- a/source/screens/demo/examples/game/intro.njk
+++ /dev/null
@@ -1,138 +0,0 @@
----
-title: Intro
-tags: 
-  - game
----
-
-{% set pageId = "init" %}
-{% set bodyClass = "body_intro" %}
-
-{% extends "hippie/_app_frame.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
-
-{% 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-overlay"></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 %}
\ No newline at end of file
diff --git a/source/style/modules/_game.scss b/source/style/modules/_game.scss
index 690a4e9..6d49400 100644
--- a/source/style/modules/_game.scss
+++ b/source/style/modules/_game.scss
@@ -21,16 +21,7 @@
 			& > svg {
 				height: 32px;
 				width: 32px;
-
-				rect, circle, path {
-					stroke: black !important;
-				}
 			}
-
-			p {
-
-			}
-		;
 		}
 	}
 }
\ No newline at end of file
diff --git a/source/style/ui.scss b/source/style/ui.scss
index 8c802c7..f1a3dcb 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -124,6 +124,15 @@ $space_gui_half: hippie.$space_half;
 .brand {
 	text-align: center;
 
+	svg {
+		height: 128px;
+		width: 128px;
+
+		rect, circle, path {
+			stroke: white !important;
+		}
+	}
+
 	img {
 		display: inline-block;
 		width: 128px;
@@ -131,7 +140,7 @@ $space_gui_half: hippie.$space_half;
 		background-color: white;
 	}
 
-	*+h1 {
+	* + h1 {
 		margin-top: hippie.$space_small;
 		margin-bottom: hippie.$space_large;
 	}
@@ -170,7 +179,7 @@ $space_gui_half: hippie.$space_half;
 	background-color: hippie.$color_back_basic;
 	transition: background-color 4s;
 
-	&:hover>.mouse-overlay {
+	&:hover > .mouse-overlay {
 		background-color: transparent !important;
 		transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
 	}