feat: Add game and gallery screens

source/screens/demo/examples/game.liquid

@@ -0,0 +1,25 @@
+---
+title: Game - TFW
+tags:
+- demoExample
+- gameExample
+---
+{% assign bodyClass = "body_game" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+	<div class="sec_main_center">
+		<nav role="doc-toc">
+			<hgroup>
+				<h1>{{ title }}</h1>
+				<p>Additional name</p>
+			</hgroup>
+			<ul class="list_link">
+				<li><a href="#new">Neues Spiel</a></li>
+				<li><a href="#continue">Spiel fortsetzen</a></li>
+				<li><a href="#options">Einstellungen</a></li>
+				<li><a href="#quit">Spiel beenden</a></li>
+			</ul>
+		</nav>
+	</div>
+{% endblock %}

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

@@ -0,0 +1,77 @@
+---
+title: Gallery
+tags:
+- ui
+---
+{% assign bodyClass = "body_frame" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+{% render 'hippie/partials/frame-header.liquid' %}
+<main class="io">
+	<section>
+		<header class="io">
+			<nav>
+				<div class="group">
+					<input id="slider-size" value="5" min="1" max="10" step="1" type="range"/>
+					<label class="right" for="slider-size">Größe</label>
+				</div>
+				<button title="details">
+					<i class="bi bi-layout-sidebar-reverse"></i>&nbsp;Details
+				</button>
+			</nav>
+			<nav></nav>
+		</header>
+		<div class="gallery">
+			<div>A</div>
+			<div>B</div>
+			<div>C</div>
+		</div>
+		{% render 'hippie/partials/frame-status.liquid' %}
+	</section>
+</main>
+{% render 'hippie/partials/frame-mode.liquid' %}
+{% endblock %}
+
+{%- block script %}
+{{ block.super -}}
+<script>
+	const sizeSlider = document.getElementById('slider-size');
+	const galleryItems = document.querySelectorAll('#flex > div');
+
+	// Set the default size
+	const defaultSize = 128; // In pixels
+	const minSize = 16; // Minimum width in pixels
+	const steps = 10;
+	// Define specific sizes for each step (from 1 to 10)
+	const sizes = [16, 32, 64, 96, 128, 256, 512, 1024, 2048]; // Sizes in pixels
+
+
+	// Calculate width based on slider value
+	function calculateWidth(value) {
+		// Map 1-10 to a pixel width
+		return Math.floor(minSize + (value - 1) * (defaultSize - minSize) / (steps - 1));
+	}
+
+	// Set initial size
+	galleryItems.forEach(item => {
+		item.style.width = `${defaultSize}px`;
+		item.style.width = `${sizes[5]}px`; // Initial width based on the default step (8 corresponds to index 7)
+	});
+
+	sizeSlider.addEventListener('input', function () {
+		// const newSize = calculateWidth(Number(sizeSlider.value));
+		// galleryItems.forEach(item => {
+		// 	item.style.width = `${newSize}px`;
+		// });
+		const selectedStep = Number(sizeSlider.value) - 1; // Adjust for zero-indexing
+		const newSize = sizes[selectedStep]; // Get size from the array using slider value
+		galleryItems.forEach(item => {
+			item.style.width = `${newSize}px`;
+		});
+	});
+
+	// Initialize slider to default
+	sizeSlider.value = 6; // Sets default to 128px width
+</script>
+{% endblock %}

source/style/modules/ui/_gallery_module.scss

@@ -0,0 +1,18 @@
+@use "../../hippie-style/hippie";
+
+.gallery {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: left;
+	align-items: start;
+	gap: 10px;
+	background-color: hippie.$color_back_io;
+
+	& > div {
+		background-color: hotpink;
+		aspect-ratio: 2 / 3;
+		width: 128px;
+		transition: width 0.3s ease;
+	}
+}
+

source/style/modules/ui/_game_module.scss

@@ -0,0 +1,3 @@
+.body_game {
+	background-color: hotpink;
+}