.eleventy.js

@@ -57,6 +57,44 @@ export default async function (eleventyConfig) {
 		return `<a id="${attrId}" class="${attrClass}" href="${target}">${text}</a>`;
 	});
 
+	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>
+</svg>
+`;
+		let output = '';
+		switch (direction) {
+			case 'first':
+				output = logo + `${content}`;
+				break;
+			case 'last':
+				output = `${content}` + logo;
+				break;
+		}
+
+		return `<div class="${attrClass}">` + output + `</div>`;
+	});
+
 	eleventyConfig.addPassthroughCopy({'source/art/images': 'art'});
 
 	eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'});

source/screens/demo/examples/game.liquid

@@ -1,25 +0,0 @@
----
-title: Game - TFW
-tags:
-- demoExample
-- gameExample
----
-{% assign bodyClass = 'body_game' -%}
-{% layout 'hippie/simple.liquid' %}
-
-{% block body %}
-	<div class="sec_main_center">
-		<nav role="doc-toc">
-			<hgroup>
-				<h1>{{ title }}</h1>
-				<p>Additional name</p>
-			</hgroup>
-			<ul class="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/game/index.liquid

@@ -0,0 +1,24 @@
+---
+title: Game
+tags:
+- demoExample
+- index
+---
+{% layout 'hippie/simple.liquid' %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block body %}
+<div class="sec_main_center">
+	<nav role="doc-toc">
+		<h1>{{ title }}</h1>
+		<ul class="link">
+			{%- for game in collections.game -%}
+				<li>
+					<a href="{{ game.page.url }}">{{ game.data.title }}</a>
+				</li>
+			{%- endfor -%}
+		</ul>
+	</nav>
+</div>
+{% endblock %}

source/screens/demo/examples/game/intro.njk

@@ -1,7 +1,7 @@
 ---
 title: Intro
 tags: 
-  - demoExample
+  - game
 ---
 
 {% set pageId = "init" %}

source/screens/demo/examples/game/menu.liquid

@@ -0,0 +1,29 @@
+---
+title: Menu
+tags:
+- game
+---
+{% assign bodyClass = 'body_game' -%}
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<div class="sec_main_center">
+	<nav role="doc-toc">
+		<hgroup>
+			<h1>Game - TFW</h1>
+			<p>Additional name</p>
+		</hgroup>
+		<ul class="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>
+<footer>
+	{% brand 'brand', 'last' %}
+	<p>Marke</p>
+	{% endbrand %}
+</footer>
+{% endblock %}

source/style/modules/_game.scss

@@ -1,3 +1,36 @@
+@use "../hippie-style/hippie";
+
 .body_game {
+	@extend .h_full_view;
 	background-color: hotpink;
+
+	footer {
+		@extend .pos_abs;
+		@extend .pin_bottom;
+		@extend .width_full;
+
+		.brand {
+			display: flex;
+			flex-flow: row nowrap;
+			align-items: center;
+			justify-content: flex-end;
+			gap: hippie.$space_half hippie.$space_basic;
+
+			margin: hippie.$space_basic hippie.$space_double;
+
+			& > svg {
+				height: 32px;
+				width: 32px;
+
+				rect, circle, path {
+					stroke: black !important;
+				}
+			}
+
+			p {
+
+			}
+		;
+		}
+	}
 }