fix: Intro

- Move style inside .body_intro
- Fix overlap of ids

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() {

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'),

source/style/ui.scss

@@ -33,39 +33,38 @@ $space_gui_half: hippie.$space_half;
 
 .body_intro {
 	background-color: black;
-}
 
-.step {
+	.step {
 		@extend %full_parent;
-}
+	}
 
-#loader {
+	#loader {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
 		background-color: white;
-}
+	}
 
-#bar {
+	#bar {
 		display: flex;
 		justify-content: space-between;
 		width: 50%;
-}
+	}
 
-#wrap {
+	#wrap {
 		flex: 1;
 		background-color: hippie.$color_back_basic;
-}
+	}
 
-#progress {
+	#progress {
 		width: 0;
 		height: 100%;
 		background-color: black;
-}
+	}
 
-#status,
-#spinner {
+	#status,
+	#spinner {
 		@extend %basic;
 
 		display: flex;
@@ -77,15 +76,15 @@ $space_gui_half: hippie.$space_half;
 		padding-block: calc($space_gui_half - 1px) $space_gui_half;
 		line-height: hippie.$line_basic;
 		text-align: center;
-}
+	}
 
-#status {
+	#status {
 		width: 4em;
 		background-color: black;
 		color: white;
-}
+	}
 
-#spinner {
+	#spinner {
 		width: 2.5em;
 		background-color: hippie.$color_back_basic;
 		color: black;
@@ -93,9 +92,9 @@ $space_gui_half: hippie.$space_half;
 		span {
 			animation: rotate 1s linear infinite;
 		}
-}
+	}
 
-@keyframes rotate {
+	@keyframes rotate {
 		from {
 			transform: rotate(0deg);
 		}
@@ -103,9 +102,9 @@ $space_gui_half: hippie.$space_half;
 		to {
 			transform: rotate(360deg);
 		}
-}
+	}
 
-#intro {
+	#init {
 		z-index: map.get(hippie.$z-indexes, "content-top");
 		overflow: hidden;
 		display: flex;
@@ -119,9 +118,9 @@ $space_gui_half: hippie.$space_half;
 		li {
 			color: white;
 		}
-}
+	}
 
-.brand {
+	.brand {
 		text-align: center;
 
 		svg {
@@ -144,9 +143,9 @@ $space_gui_half: hippie.$space_half;
 			margin-top: hippie.$space_small;
 			margin-bottom: hippie.$space_large;
 		}
-}
+	}
 
-.tech-stack {
+	.tech-stack {
 		display: flex;
 		padding-left: 0;
 
@@ -154,17 +153,17 @@ $space_gui_half: hippie.$space_half;
 			list-style: none;
 			padding-inline: hippie.$space_double;
 		}
-}
+	}
 
-#agreement,
-#idle {
+	#agreement,
+	#idle {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		height: 100vh;
-}
+	}
 
-#agreement {
+	#agreement {
 		flex-direction: column;
 		background-color: map.get(hippie.$color_palette, bravo);
 		user-select: none;
@@ -173,9 +172,9 @@ $space_gui_half: hippie.$space_half;
 			margin-top: 0;
 			color: hippie.$color_brightest;
 		}
-}
+	}
 
-#idle {
+	#idle {
 		background-color: hippie.$color_back_basic;
 		transition: background-color 4s;
 
@@ -183,6 +182,14 @@ $space_gui_half: hippie.$space_half;
 			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;
+		}
+	}
 }
 
 .toast {
@@ -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;
-}