From 30fcd22a7b00cf8bef1e1c4aa2763e01c18cfecd Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 8 Mar 2026 18:54:44 +0100
Subject: [PATCH] fix: Intro

- Move style inside .body_intro
- Fix overlap of ids
---
 source/code/intro.js                          |   6 +-
 .../screens/demo/examples/game/intro.liquid   |   5 +-
 source/style/ui.scss                          | 286 +++++++++---------
 3 files changed, 148 insertions(+), 149 deletions(-)

diff --git a/source/code/intro.js b/source/code/intro.js
index bff5a87..26be826 100644
--- a/source/code/intro.js
+++ b/source/code/intro.js
@@ -25,7 +25,7 @@ class UI {
 				msgNo: 'No agreement today.'
 			}
 		};
-		this.intro = document.getElementById('intro');
+		this.intro = document.getElementById('init');
 		this.agreement = this.steps.agreement.element;
 		this.hint = {
 			element: document.getElementById('hint'),
@@ -61,7 +61,7 @@ class UI {
 			} else {
 				reject('No intro available.');
 			}
-		})
+		});
 	}
 
 	showHint() {
@@ -100,7 +100,7 @@ class UI {
 			} else {
 				reject();
 			}
-		})
+		});
 	}
 
 	init() {
diff --git a/source/screens/demo/examples/game/intro.liquid b/source/screens/demo/examples/game/intro.liquid
index 4e245b2..c223413 100644
--- a/source/screens/demo/examples/game/intro.liquid
+++ b/source/screens/demo/examples/game/intro.liquid
@@ -4,7 +4,6 @@ tags:
 - game
 ---
 
-{% assign pageId = "init" %}
 {% assign bodyClass = 'body_intro' -%}
 {% layout 'hippie/app.liquid' %}
 
@@ -20,7 +19,7 @@ tags:
 		<div id="status">0%</div>
 	</div>
 </div>
-<div id="intro" class="step op_hide">
+<div id="init" class="step op_hide">
 	<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
 		<p>Hold
 			<kbd>space</kbd>
@@ -74,7 +73,7 @@ tags:
 			msgNo: 'No agreement today.'
 		}
 	};
-	const intro = document.getElementById('intro');
+	const intro = document.getElementById('init');
 	const agreement = steps.agreement.element;
 	const hint = {
 		element: document.getElementById('hint'),
diff --git a/source/style/ui.scss b/source/style/ui.scss
index f1a3dcb..1266a3a 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -33,155 +33,162 @@ $space_gui_half: hippie.$space_half;
 
 .body_intro {
 	background-color: black;
-}
 
-.step {
-	@extend %full_parent;
-}
-
-#loader {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	background-color: white;
-}
-
-#bar {
-	display: flex;
-	justify-content: space-between;
-	width: 50%;
-}
-
-#wrap {
-	flex: 1;
-	background-color: hippie.$color_back_basic;
-}
-
-#progress {
-	width: 0;
-	height: 100%;
-	background-color: black;
-}
-
-#status,
-#spinner {
-	@extend %basic;
-
-	display: flex;
-	flex-grow: 0;
-	flex-shrink: 0;
-	justify-content: center;
-	align-items: center;
-	margin-inline: $space_gui_half;
-	padding-block: calc($space_gui_half - 1px) $space_gui_half;
-	line-height: hippie.$line_basic;
-	text-align: center;
-}
-
-#status {
-	width: 4em;
-	background-color: black;
-	color: white;
-}
-
-#spinner {
-	width: 2.5em;
-	background-color: hippie.$color_back_basic;
-	color: black;
-
-	span {
-		animation: rotate 1s linear infinite;
-	}
-}
-
-@keyframes rotate {
-	from {
-		transform: rotate(0deg);
+	.step {
+		@extend %full_parent;
 	}
 
-	to {
-		transform: rotate(360deg);
-	}
-}
-
-#intro {
-	z-index: map.get(hippie.$z-indexes, "content-top");
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	background-color: black;
-
-	h1,
-	p,
-	li {
-		color: white;
-	}
-}
-
-.brand {
-	text-align: center;
-
-	svg {
-		height: 128px;
-		width: 128px;
-
-		rect, circle, path {
-			stroke: white !important;
-		}
-	}
-
-	img {
-		display: inline-block;
-		width: 128px;
-		height: 128px;
+	#loader {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
 		background-color: white;
 	}
 
-	* + h1 {
-		margin-top: hippie.$space_small;
-		margin-bottom: hippie.$space_large;
+	#bar {
+		display: flex;
+		justify-content: space-between;
+		width: 50%;
 	}
-}
 
-.tech-stack {
-	display: flex;
-	padding-left: 0;
-
-	li {
-		list-style: none;
-		padding-inline: hippie.$space_double;
+	#wrap {
+		flex: 1;
+		background-color: hippie.$color_back_basic;
 	}
-}
 
-#agreement,
-#idle {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 100vh;
-}
-
-#agreement {
-	flex-direction: column;
-	background-color: map.get(hippie.$color_palette, bravo);
-	user-select: none;
-
-	h1 {
-		margin-top: 0;
-		color: hippie.$color_brightest;
+	#progress {
+		width: 0;
+		height: 100%;
+		background-color: black;
 	}
-}
 
-#idle {
-	background-color: hippie.$color_back_basic;
-	transition: background-color 4s;
+	#status,
+	#spinner {
+		@extend %basic;
 
-	&:hover > .mouse-overlay {
-		background-color: transparent !important;
-		transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
+		display: flex;
+		flex-grow: 0;
+		flex-shrink: 0;
+		justify-content: center;
+		align-items: center;
+		margin-inline: $space_gui_half;
+		padding-block: calc($space_gui_half - 1px) $space_gui_half;
+		line-height: hippie.$line_basic;
+		text-align: center;
+	}
+
+	#status {
+		width: 4em;
+		background-color: black;
+		color: white;
+	}
+
+	#spinner {
+		width: 2.5em;
+		background-color: hippie.$color_back_basic;
+		color: black;
+
+		span {
+			animation: rotate 1s linear infinite;
+		}
+	}
+
+	@keyframes rotate {
+		from {
+			transform: rotate(0deg);
+		}
+
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	#init {
+		z-index: map.get(hippie.$z-indexes, "content-top");
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		background-color: black;
+
+		h1,
+		p,
+		li {
+			color: white;
+		}
+	}
+
+	.brand {
+		text-align: center;
+
+		svg {
+			height: 128px;
+			width: 128px;
+
+			rect, circle, path {
+				stroke: white !important;
+			}
+		}
+
+		img {
+			display: inline-block;
+			width: 128px;
+			height: 128px;
+			background-color: white;
+		}
+
+		* + h1 {
+			margin-top: hippie.$space_small;
+			margin-bottom: hippie.$space_large;
+		}
+	}
+
+	.tech-stack {
+		display: flex;
+		padding-left: 0;
+
+		li {
+			list-style: none;
+			padding-inline: hippie.$space_double;
+		}
+	}
+
+	#agreement,
+	#idle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100vh;
+	}
+
+	#agreement {
+		flex-direction: column;
+		background-color: map.get(hippie.$color_palette, bravo);
+		user-select: none;
+
+		h1 {
+			margin-top: 0;
+			color: hippie.$color_brightest;
+		}
+	}
+
+	#idle {
+		background-color: hippie.$color_back_basic;
+		transition: background-color 4s;
+
+		&:hover > .mouse-overlay {
+			background-color: transparent !important;
+			transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
+		}
+
+		.hello {
+			flex: 0 1 auto;
+			padding: 1em 2em;
+			background-color: rgba(hippie.$color_bright, .5);
+			font-family: hippie.$family_text_mono;
+		}
 	}
 }
 
@@ -200,10 +207,3 @@ $space_gui_half: hippie.$space_half;
 		color: hippie.$color_back_io;
 	}
 }
-
-.hello {
-	flex: 0 1 auto;
-	padding: 1em 2em;
-	background-color: rgba(hippie.$color_bright, .5);
-	font-family: hippie.$family_text_mono;
-}