.eleventy.js

@@ -1,14 +1,6 @@
 module.exports = function (eleventyConfig) {
 	// eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
 
-	eleventyConfig.setLiquidOptions({
-		// greedy: false,
-		// trimOutputLeft: true,
-		// trimOutputRight: true,
-		// trimTagLeft: true,
-		// trimTagRight : true,
-	});
-
 	eleventyConfig.setNunjucksEnvironmentOptions({
 		// throwOnUndefined: true,
 		trimBlocks: true
@@ -40,10 +32,6 @@ module.exports = function (eleventyConfig) {
 
 	eleventyConfig.addPassthroughCopy("vendor");
 	eleventyConfig.addPassthroughCopy({"node_modules/bootstrap-icons": "vendor/bootstrap-icons"});
-	eleventyConfig.addPassthroughCopy({
-		"node_modules/jquery/dist/jquery.min.js": "vendor",
-		"node_modules/jquery/dist/jquery.min.map": "vendor"
-	});
 	// eleventyConfig.addPassthroughCopy({"node_modules/normalize.css/normalize.css": "vendor/normalize.css"});
 
 	eleventyConfig.addWatchTarget("./source/style/");
@@ -55,7 +43,9 @@ module.exports = function (eleventyConfig) {
 			includes: "../templates",
 			data: "../data"
 		},
-		templateFormats: ["html", "liquid", "njk", "md"]
+		markdownTemplateEngine: "njk",
+		htmlTemplateEngine: "njk",
+		templateFormats: ["html", "njk", "md"],
 		// pathPrefix: './demo/'
-	};
+	}
 };

package-lock.json

@@ -11,7 +11,6 @@
       "dependencies": {
         "@11ty/eleventy": "^2.0.1",
         "bootstrap-icons": "^1.13.1",
-        "jquery": "^3.7.1",
         "sass": "^1.93.0"
       },
       "devDependencies": {
@@ -1584,12 +1583,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/jquery": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
-      "license": "MIT"
-    },
     "node_modules/js-stringify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",

package.json

@@ -36,7 +36,6 @@
   "dependencies": {
     "@11ty/eleventy": "^2.0.1",
     "bootstrap-icons": "^1.13.1",
-    "jquery": "^3.7.1",
     "sass": "^1.93.0"
   }
-}
+}

source/code/windows.js

@@ -1,280 +0,0 @@
-class Draggable {
-	constructor(element) {
-		this.element = element;
-		this.offsetX = 0;
-		this.offsetY = 0;
-		this.isDragging = false;
-		this.barSize = '';
-
-		this.init();
-	}
-
-	init() {
-		this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
-		document.addEventListener('mousemove', this.onMouseMove.bind(this));
-		document.addEventListener('mouseup', this.onMouseUp.bind(this));
-		this.setPosition('bottom');
-	}
-
-	onMouseDown(event) {
-		this.isDragging = true;
-		this.offsetX = event.clientX - this.element.getBoundingClientRect().left;
-		this.offsetY = event.clientY - this.element.getBoundingClientRect().top;
-
-		event.preventDefault();
-	}
-
-	onMouseMove(event) {
-		if (!this.isDragging) {
-			return;
-		}
-
-		let x = event.clientX - this.offsetX;
-		let y = event.clientY - this.offsetY;
-
-		// Update the position of the element
-		this.element.style.left = `${x}px`;
-		this.element.style.top = `${y}px`;
-	}
-
-	onMouseUp() {
-		if (!this.isDragging) {
-			return;
-		}
-		this.isDragging = false;
-
-		this.snapToEdges();
-	}
-
-	snapToEdges() {
-		const rect = this.element.getBoundingClientRect();
-		const windowWidth = window.innerWidth;
-		const windowHeight = window.innerHeight;
-
-		// Determine the closest edge
-		const distances = {
-			left: rect.left,
-			right: windowWidth - rect.right,
-			top: rect.top,
-			bottom: windowHeight - rect.bottom
-		};
-
-		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
-
-		/*switch (closestEdge) {
-			case 'left':
-				this.element.style.left = '0px';
-				this.element.style.top = `${rect.top}px`;
-				break;
-			case 'right':
-				this.element.style.left = `${windowWidth - rect.width}px`;
-				this.element.style.top = `${rect.top}px`;
-				break;
-			case 'top':
-				this.element.style.top = '0px';
-				this.element.style.left = `${rect.left}px`;
-				break;
-			case 'bottom':
-				this.element.style.top = `${windowHeight - rect.height}px`;
-				this.element.style.left = `${rect.left}px`;
-				break;
-		}*/
-		this.setPosition(closestEdge, this.barSize);
-	}
-
-	setPosition(side, barSize) {
-		switch (side) {
-			case 'left':
-				// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
-				this.element.style.top = '0px';
-				this.element.style.right = '';
-				this.element.style.bottom = '0px';
-				this.element.style.left = '0px';
-				this.element.style.width = barSize;
-				this.element.style.height = '';
-				break;
-			case 'right':
-				// this.element.style.left = `${windowWidth - rect.width}px`;
-				// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
-				this.element.style.top = '0px';
-				this.element.style.right = '0px';
-				this.element.style.bottom = '0px';
-				this.element.style.left = '';
-				this.element.style.width = barSize;
-				this.element.style.height = '';
-				break;
-			case 'top':
-				// this.element.style.top = '0px';
-				// this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position
-				this.element.style.top = '0px';
-				this.element.style.right = '0px';
-				this.element.style.bottom = '';
-				this.element.style.left = '0px';
-				this.element.style.width = '';
-				this.element.style.height = barSize;
-				break;
-			case 'bottom':
-				// this.element.style.top = `${windowHeight - rect.height}px`;
-				// this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position
-				this.element.style.top = '';
-				this.element.style.right = '0px';
-				this.element.style.bottom = '0px';
-				this.element.style.left = '0px';
-				this.element.style.width = '';
-				this.element.style.height = barSize;
-				break;
-		}
-	}
-}
-
-class DragAdv {
-	constructor(element, placeholder) {
-		this.element = element;
-		this.placeholder = placeholder;
-		this.offsetX = 0;
-		this.offsetY = 0;
-		this.isDragging = false;
-		this.barSize = '';
-
-		this.init();
-	}
-
-	init() {
-		this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
-		document.addEventListener('mousemove', this.onMouseMove.bind(this));
-		document.addEventListener('mouseup', this.onMouseUp.bind(this));
-		this.setPosition('bottom', this.barSize);
-	}
-
-	onMouseDown(event) {
-		if (event.button === 0) {
-			this.isDragging = true;
-
-			this.showPlaceholder();
-
-			this.offsetX = this.placeholder.getBoundingClientRect().width / 2;
-			this.offsetY = this.placeholder.getBoundingClientRect().height / 2;
-
-			let x = event.clientX - this.offsetX;
-			let y = event.clientY - this.offsetY;
-
-			this.placeholder.style.left = `${x}px`;
-			this.placeholder.style.top = `${y}px`;
-		}
-
-		event.preventDefault();
-	}
-
-	onMouseMove(event) {
-		if (!this.isDragging) return;
-
-		let x = event.clientX - this.offsetX;
-		let y = event.clientY - this.offsetY;
-
-		this.placeholder.style.left = `${x}px`;
-		this.placeholder.style.top = `${y}px`;
-	}
-
-	onMouseUp() {
-		if (!this.isDragging) return;
-		this.isDragging = false;
-
-		this.snapToEdges();
-		this.hidePlaceholder();
-	}
-
-	showPlaceholder() {
-		this.element.style.display = 'none';
-		this.placeholder.style.display = 'block';
-	}
-
-	hidePlaceholder() {
-		this.placeholder.style.display = 'none';
-		this.element.style.display = '';
-	}
-
-	snapToEdges() {
-		const rect = this.placeholder.getBoundingClientRect();
-		const windowWidth = window.innerWidth;
-		const windowHeight = window.innerHeight;
-
-		const distances = {
-			left: rect.left,
-			right: windowWidth - rect.right,
-			top: rect.top,
-			bottom: windowHeight - rect.bottom
-		};
-
-		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
-
-		this.setPosition(closestEdge, this.barSize);
-	}
-
-	setPosition(side, barSize) {
-		switch (side) {
-			case 'left':
-				// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
-				this.element.style.top = '0px';
-				this.element.style.right = '';
-				this.element.style.bottom = '0px';
-				this.element.style.left = '0px';
-				this.element.style.width = barSize;
-				this.element.style.height = '';
-				break;
-			case 'right':
-				// this.element.style.left = `${windowWidth - rect.width}px`;
-				// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
-				this.element.style.top = '0px';
-				this.element.style.right = '0px';
-				this.element.style.bottom = '0px';
-				this.element.style.left = '';
-				this.element.style.width = barSize;
-				this.element.style.height = '';
-				break;
-			case 'top':
-				// this.element.style.top = '0px';
-				// this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position
-				this.element.style.top = '0px';
-				this.element.style.right = '0px';
-				this.element.style.bottom = '';
-				this.element.style.left = '0px';
-				this.element.style.width = '';
-				this.element.style.height = barSize;
-				break;
-			case 'bottom':
-				// this.element.style.top = `${windowHeight - rect.height}px`;
-				// this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position
-				this.element.style.top = '';
-				this.element.style.right = '0px';
-				this.element.style.bottom = '0px';
-				this.element.style.left = '0px';
-				this.element.style.width = '';
-				this.element.style.height = barSize;
-				break;
-		}
-	}
-}
-
-class BestDrag {
-	#element;
-
-	constructor(element) {
-		this.#setElement(element);
-	}
-
-	#setElement(value) {
-		if (!value) {
-			throw new Error('No element found');
-		}
-		this.#element = value;
-		this.#element.style.background = "hotpink";
-	}
-
-	get element() {
-		return this.#element;
-	}
-
-	set element(value) {
-		this.#setElement(value);
-	}
-}

source/screens/demo/components.njk

@@ -25,7 +25,7 @@ tags:
 			<div class="demo__queries">
 				<p class="query_phoneUp">Telefone und größer</p>
 				<p class="query_phoneOnly">Nur Telefone</p>
-				<p class="query_tabletPortraitOnly">Nur Schreibtafeln hochkant</p>
+				<p class="query_tabletPortaitOnly">Nur Schreibtafeln hochkant</p>
 				<p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
 				<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
 				<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>

source/screens/demo/examples/game.liquid

@@ -1,25 +0,0 @@
----
-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/intro.njk

@@ -49,7 +49,7 @@ tags:
 
 {%- block script %}
 	{{ super() }}
-	<script src="{{ pageBase }}js/intro.js"></script>
+	<script src="{{ pageBase }}js/_intro.js"></script>
 	<script>
 		//let intro = new Intro('Intro');
 		//intro.init();

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

@@ -1,48 +0,0 @@
----
-title: Drag
-tags:
-- ui
----
-{% layout "hippie/app.liquid" %}
-
-{% block body %}
-<header class="io pos_fix pin_top pin_right pin_left">
-	<button data-action="add">Add</button>
-</header>
-<div id="space"></div>
-<div>
-	<div id="test">
-		<div class="body_frame">
-			{% render 'hippie/partials/frame-header.liquid' %}
-			<main></main>
-			{% render 'hippie/partials/frame-mode.liquid' %}
-		</div>
-	</div>
-</div>
-{% endblock %}
-
-{%- block script %}
-<script src="{{ pageBase }}js/drag.js"></script>
-<script>
-	// Get the space element
-	const space = document.getElementById('space');
-	const add = document.querySelector('[data-action=add]');
-	const test = document.getElementById('test');
-
-	// Add event listener to the add space button
-	add.addEventListener('click', () => {
-		const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
-		newDiv.createDiv();
-		newDiv.appendToFrame(space);
-	});
-
-	// Create a new NewDiv instance
-	const newDiv = new NewDiv(100, 100, 200, 200, '#000');
-	newDiv.createDiv();
-	newDiv.appendToFrame(space);
-
-	const explorer = new NewDiv(256, 128, 800, 600, '#fff', test);
-	explorer.createDiv();
-	explorer.appendToFrame(space);
-</script>
-{% endblock %}

source/screens/demo/examples/ui/drag.njk

@@ -0,0 +1,50 @@
+---
+title: Drag
+tags:
+  - ui
+---
+{% set pageId = page.fileSlug %}
+
+{% extends "hippie/_app_frame.njk" %}
+
+{% block body %}
+  <header class="io pos_fix pin_top pin_right pin_left">
+    <button data-action="add">Add</button>
+  </header>
+  <div id="space"></div>
+  <div>
+    <div id="test">
+      <div class="body_frame">
+        {{ io.frameHeader('title-bar') }}
+        <main></main>
+        {{ io.frameFooter('mode-bar') }}
+      </div>
+    </div>
+  </div>
+{% endblock %}
+
+{%- block script %}
+  <script src="{{ pageBase }}js/_ui.js"></script>
+  <script>
+    // Get the space element
+    const space = document.getElementById('space');
+    const add = document.querySelector('[data-action=add]');
+    const test = document.getElementById('test');
+
+    // Add event listener to the add space button
+    add.addEventListener('click', () => {
+      const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
+      newDiv.createDiv();
+      newDiv.appendToFrame(space);
+    });
+
+    // Create a new NewDiv instance
+    const newDiv = new NewDiv(100, 100, 200, 200, '#000');
+    newDiv.createDiv();
+    newDiv.appendToFrame(space);
+
+    const explorer = new NewDiv(256, 128, 800, 600, '#fff', test);
+    explorer.createDiv();
+    explorer.appendToFrame(space);
+  </script>
+{% endblock %}

source/screens/demo/examples/ui/explorer.njk

@@ -12,7 +12,7 @@ tags:
 	<main class="io">
 		<aside class="io">
 			<nav>
-				<span>location-pane</span>
+				<div>location-pane</div>
 				<ul class="vertical">
 					<li>
 						<a class="a_button" href="">
@@ -139,7 +139,17 @@ tags:
 					</tbody>
 				</table>
 			</div>
-			{{ io.statusBar() }}
+			<footer class="io">
+				<nav>
+					<span>## items</span>
+					<span># selected (size)</span>
+					<span># type(s)</span>
+					<span># shared</span>
+				</nav>
+				<nav>
+					<span>status-bar</span>
+				</nav>
+			</footer>
 		</section>
 	</main>
 	{{ io.frameFooter('mode-bar') }}

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

@@ -1,56 +0,0 @@
----
-title: Form
-tags:
-- ui
----
-{% assign bodyClass = "body_frame" -%}
-{% layout "hippie/app.liquid" %}
-
-{% block body %}
-{% render 'hippie/partials/frame-header.liquid' %}
-<header class="io">
-	<h1>Formulare</h1>
-	<button data-action="add">Hinzufügen</button>
-	<button data-action="change">Ändern</button>
-	<hr>
-</header>
-<form id="form" action="">
-	<div id="grid">
-		<div>a</div>
-		<div>b</div>
-		<div>c</div>
-	</div>
-</form>
-{% endblock %}
-
-{%- block script %}
-{{ block.super -}}
-<script>
-	const add = document.querySelector('[data-action=add]');
-	const change = document.querySelector('[data-action=change]');
-	const grid = document.getElementById('grid');
-
-	add.addEventListener('click', (e) => {
-		const item = document.createElement('div');
-
-		item.style.backgroundColor = '#f0f';
-		item.textContent = 'c'
-
-		grid.appendChild(item);
-	});
-
-	change.addEventListener('click', (e) => {
-		changeLayout(grid);
-	});
-
-	function changeLayout(grid) {
-		const currentTemplate = grid.style.gridTemplateColumns;
-
-		if (currentTemplate === 'repeat(4, 1fr)') {
-			grid.style.gridTemplateColumns = 'repeat(2, 1fr)';
-		} else {
-			grid.style.gridTemplateColumns = 'repeat(4, 1fr)';
-		}
-	}
-</script>
-{% endblock %}

source/screens/demo/examples/ui/form.njk

@@ -0,0 +1,55 @@
+---
+title: Form
+tags: 
+  - ui
+---
+{% extends "hippie/_app_frame.njk" %}
+
+{% block body %}
+	{{ io.frameHeader('title-bar') }}
+	<header class="io">
+		<h1>Formulare</h1>
+		<button data-action="add">Hinzufügen</button>
+		<button data-action="change">Ändern</button>
+		<hr>
+	</header>
+	<form id="form" action="">
+		<div id="grid">
+			<div>a</div>
+			<div>b</div>
+			<div>c</div>
+		</div>
+	</form>
+{% endblock %}
+
+{%- block script %}
+	{{ super() }}
+	<script>
+		const add = document.querySelector('[data-action=add]');
+		const change = document.querySelector('[data-action=change]');
+		const grid = document.getElementById('grid');
+
+		add.addEventListener('click', (e) => {
+				const item = document.createElement('div');
+
+				item.style.backgroundColor = '#f0f';
+				item.textContent = 'c'
+				
+				grid.appendChild(item);
+		});
+
+		change.addEventListener('click', (e) => {
+				changeLayout(grid);
+		});
+
+		function changeLayout(grid) {
+			const currentTemplate = grid.style.gridTemplateColumns;
+
+			if (currentTemplate === 'repeat(4, 1fr)') {
+				grid.style.gridTemplateColumns = 'repeat(2, 1fr)';
+			} else {
+				grid.style.gridTemplateColumns = 'repeat(4, 1fr)';
+			}
+		}
+	</script>
+{% endblock %}

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

@@ -1,77 +0,0 @@
----
-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/screens/demo/examples/ui/windows.liquid

@@ -1,55 +0,0 @@
----
-title: Windows
-tags:
-- ui
----
-{% assign bodyClass = "body_frame" -%}
-{% layout "hippie/app.liquid" %}
-
-{% block body %}
-<div id="task-bar">
-	<nav>
-		<button data-action="start"><i class="bi bi-microsoft"></i></button>
-	</nav>
-	<nav>
-		<button><i class="bi bi-search"></i></button>
-		<button><i class="bi bi-layers-half"></i></button>
-	</nav>
-	<nav class="big">
-		<button><i class="bi bi-folder"></i></button>
-		<button><i class="bi bi-terminal"></i></button>
-	</nav>
-	<div>
-		<nav class="small">
-			<button><i class="bi bi-chevron-up"></i></button>
-			<button><i class="bi bi-steam"></i></button>
-			<button><i class="bi bi-router"></i></button>
-			<button><i class="bi bi-mic"></i></button>
-			<button><i class="bi bi-volume-down"></i></button>
-		</nav>
-		<nav class="clock">
-			<span>##:##<br>TT.MM.JJJJ</span>
-		</nav>
-		<nav>
-			<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
-		</nav>
-	</div>
-</div>
-<div id="screen-space"></div>
-<div id="placeholder"></div>
-{% endblock %}
-
-{%- block script %}
-<script src="{{ pageBase }}js/windows.js"></script>
-<script>
-	// Get the space element
-	const space = document.getElementById('screen-space');
-	const start = document.querySelector('[data-action=start]');
-	const draggableElement = document.getElementById('task-bar');
-	const placeholderElement = document.getElementById('placeholder');
-
-	// const draggable = new Draggable(draggableElement);
-	const dragMore = new DragAdv(draggableElement, placeholderElement);
-	// const dragBest = new BestDrag(draggableElement, placeholderElement);
-</script>
-{% endblock %}

source/screens/demo/pages/default.liquid

@@ -1,18 +0,0 @@
----
-title: "Default"
----
-{% assign pageBase = "../" -%}
-{% assign pageId = page.fileSlug -%}
-{% assign pageClass = "default" -%}
-{% assign bodyClass = "default" -%}
-{%- layout "hippie/default.liquid" %}
-
-{% block title %}{{ title }}{% endblock %}
-
-{% block script %}
-{{ block.super -}}
-<script>
-	// Page script
-	console.log("pageBase is: {{ pageBase }}");
-</script>
-{% endblock %}

source/screens/demo/pages/default.njk

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

source/screens/demo/pages/hello.md

@@ -1,8 +0,0 @@
----
-title: "Hello World"
-layout: hippie/world.liquid
----
-
-# {{ title }}
-
-This is a simple example for a *screen* written in Markdown, using Liquid *templates*.

source/style/modules/ui/_gallery_module.scss

@@ -1,18 +0,0 @@
-@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

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

source/style/modules/ui/_windows_module.scss

@@ -1,91 +0,0 @@
-@use "sass:map";
-
-@use "../../hippie-style/hippie";
-
-$padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
-
-%flex-bar {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: stretch;
-	align-content: center;
-	justify-content: flex-start;
-	gap: hippie.$space_half hippie.$space_basic;
-}
-
-#task-bar {
-	@extend %flex-bar;
-	z-index: map.get(hippie.$z-indexes, "content-top");
-	position: fixed;
-	//right: 0;
-	//bottom: 0;
-	//left: 0;
-	border: 1px solid transparent;
-	padding: hippie.$space_basic;
-	background-color: rgba(0, 0, 0, .1);
-
-	nav,
-	& > div {
-		@extend %flex-bar;
-
-		&:last-child {
-			margin-left: auto;
-		}
-	}
-
-	button {
-		@extend .button_io;
-		overflow: hidden;
-	}
-
-	nav.small {
-		//font-size: .8em;
-
-		button {
-			border: none;
-			padding: $padding_half;
-
-			&:hover {
-				background-color: transparent;
-			}
-		}
-	}
-
-	nav.big {
-		font-size: 1.5em;
-
-		button {
-			border: none;
-			padding: 0;
-
-			&:hover {
-				background-color: transparent;
-			}
-		}
-	}
-
-	.clock {
-		text-align: end;
-
-		&,
-		& > * {
-			line-height: 1;
-		}
-	}
-}
-
-#screen-space {
-	position: relative;
-	height: 100%;
-}
-
-#placeholder {
-	display: none;
-	z-index: map.get(hippie.$z-indexes, "content-top");
-	position: fixed;
-	width: 100px;
-	height: 100px;
-	border: 2px dashed deeppink;
-	background-color: hotpink;
-}

source/style/ui.scss

@@ -9,7 +9,6 @@
 @use "modules/ui/form_module";
 @use "modules/ui/game_module";
 @use "modules/ui/gallery_module";
-@use "modules/ui/windows_module";
 
 $color_gui_back: hippie.$color_dark;
 $space_gui_half: hippie.$space_half;

source/templates/hippie/app.liquid

@@ -1,40 +0,0 @@
-{% assign pageBase = "../../../" -%}
-{% assign pageId = page.fileSlug -%}
-{% assign pageClass = "html_ui" -%}
-{%- layout "hippie/default.liquid" %}
-
-{% block title %}{{ title }}{% endblock %}
-
-{% block links %}
-{{ block.super -}}
-<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
-<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block script %}
-{{ block.super -}}
-<script src="/vendor/jquery.min.js"></script>
-<script src="{{ pageBase }}js/variables.js"></script>
-<script src="{{ pageBase }}js/app.js"></script>
-
-<script>
-	const frameHeader = document.querySelector('body > header.io');
-	const closeActionElements = document.querySelectorAll('[data-action=close]');
-
-	if (frameHeader) {
-		console.log('frame header found', frameHeader);
-
-		frameHeader.addEventListener('click', (e) => {
-			if (e.target.dataset.action === 'close') {
-				console.debug('close', e.target);
-
-				history.back();
-
-				if (closeActionElements.length > 1) {
-					console.debug('other frames present', closeActionElements.length);
-				}
-			}
-		});
-	}
-</script>
-{% endblock %}

source/templates/hippie/default.liquid

@@ -1,37 +0,0 @@
-<!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 %}{% endblock -%}
-		{{ hippie.titlePostfix -}}
-	</title>
-	{% block meta -%}
-	{% render "hippie/partials/meta.liquid" %}
-	{% endblock -%}
-	{% block links -%}
-	{% render "hippie/partials/links.liquid" %}
-	{% endblock -%}
-	{% endblock -%}
-</head>
-
-<body{{ bodyClassAttr }}>
-{%- block body %}{% endblock -%}
-{% block script -%}
-<script>
-	// Default script
-</script>
-{% endblock -%}
-</body>
-</html>

source/templates/hippie/macros/_io.njk

@@ -32,18 +32,4 @@
 			<button>action</button>
 		</nav>
 	</footer>
-{% endmacro %}
-
-{% macro statusBar(title) %}
-	<footer class="io">
-		<nav>
-			<span>## items</span>
-			<span># selected (size)</span>
-			<span># type(s)</span>
-			<span># shared</span>
-		</nav>
-		<nav>
-			<span>{{ title | default('status-bar') }}</span>
-		</nav>
-	</footer>
 {% endmacro %}

source/templates/hippie/partials/frame-header.liquid

@@ -1,20 +0,0 @@
-<header class="io">
-	<nav>
-		<button title="menu">
-			<i class="bi bi-three-dots"></i>
-		</button>
-		<span>{{ title | default: 'title-bar' }}</span>
-	</nav>
-	<nav>
-		<div class="spacer a"></div>
-		<button title="minimize">
-			<i class="bi bi-dash"></i>
-		</button>
-		<button title="maximize">
-			<i class="bi bi-fullscreen"></i>
-		</button>
-		<button title="close" data-action="close">
-			<i class="bi bi-x-square"></i>
-		</button>
-	</nav>
-</header>

source/templates/hippie/partials/frame-mode.liquid

@@ -1,10 +0,0 @@
-<footer class="io">
-	<nav>
-		<button>mode</button>
-		<span>{{ title | default: 'mode-bar' }}</span>
-	</nav>
-	<nav>
-		<div class="spacer a"></div>
-		<button>action</button>
-	</nav>
-</footer>

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

@@ -1,11 +0,0 @@
-<footer class="io">
-	<nav>
-		<span>## items</span>
-		<span># selected (size)</span>
-		<span># type(s)</span>
-		<span># shared</span>
-	</nav>
-	<nav>
-		<span>{{ title | default: 'status-bar' }}</span>
-	</nav>
-</footer>

source/templates/hippie/partials/links.liquid

@@ -1,3 +0,0 @@
-{% comment %}<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">{% endcomment %}
-	<link rel="shortcut icon" type="image/x-icon" href="{{ pageBase }}favicon.ico">
-	<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEAAAIBAQCbjUIABQQCAGdfKgDcxYUAiXpGABkWCgDXxnEApmxRAMGZawAIBwMArZ5PAKFydQBmIZIAoGJFAIx+QwBSSyIA1biBADlx0gBNn+0AgztQAMimcQAMCwQADAsFANS/dAB7P3EAeuH7ANb4/gBQPLwAp2pNAI6CQwCilEwAr3hdADyH5ADw/f8A////AHTU+AB6M2YA0LN4ABMRBwA/OhsAyKR2AGYvjQCf7PwA7fz/AENy2gCrclkAk4ZDAAYFAgDNtXEAjkhHAEul7QD8//8AlOn8AGk1hwDWvXsAGBYJAJaHSgCnbE4AVy6rAML0/gD7/v8AQ6vuAKx1YwCZjEQALCgTALyOZwB+NVoAZ8D0AL30/QBLULMA2sV+AB4bCwDFpm0Ak087AFArvgBv4PoAjOf7AIzm+wCN4/sAjuH7AI7h+gCP3fkAOI/sAKVvcwCfkUQAfnM6ANO2hAC3iGkAk150AI9OcACKRmkAhj9kAH84YQB9NWEAfTRgAH0zYAB6MWYAei9lAItFUADdy3wAKCQPAFtTJQB2bDIAhXk5AJKGPwCbjkQAq5xOALepWwDEtGcAzLlwAMyzcgDKrXIAx6NwALyNZgDWu4IApJZHAAcGAwANDAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB3eGhpamtsbW5vcHFycwt0dXZYWVpbXF1eX2BhYmNkZWZnAktMTU5PUFFRUlNUVVZXAABDREVGJSUlJSUlR0hJSgAAADs8PT4lJSUlP0BBQgAAAAAyMzQ1NiUlJTc4OToAAAAAACorLC0lJS4vMDEAAAAAAAAAISIjJCUmJygpAAAAAAAAABkaGxwdHh8gAAAAAAAAAAAAEhMUFRYXGAAAAAAAAAAAAAANDg8QEQAAAAAAAAAAAAAACAkKCwwAAAAAAAAAAAAAAAAFBgcAAAAAAAAAAAAAAAAAAgMEAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=">

source/templates/hippie/partials/meta.liquid

@@ -1,7 +0,0 @@
-<meta name="robots" content="noindex">
-	<meta name="generator" content="{{ eleventy.generator }}">
-	<meta name="author" content="">
-	<meta name="description" content="">
-	<meta name="keywords" content="">
-
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">

source/templates/hippie/world.liquid

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-	<meta charset="utf-8">
-	<title>{{ title }}</title>
-</head>
-
-<body>
-{{ content }}
-</body>
-</html>