feat: Add login to layouts

- Add articles - Change order of articles - Add id attributes like in components - Add login example
feat: Remove nunjucks
2026-03-12 21:38:48 +01:00 · 2026-03-12 20:23:17 +01:00 · 2026-03-12 20:00:24 +01:00 · 2026-03-11 20:08:22 +01:00
33 changed files with 150 additions and 813 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@ -14,20 +14,10 @@ export default async function (eleventyConfig) {
 		// trimTagRight : true,
 	});

-	eleventyConfig.setNunjucksEnvironmentOptions({
-		// throwOnUndefined: true,
-		trimBlocks: true
-	});
-
 	eleventyConfig.addGlobalData('permalink', () => {
 		return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
 	});
-
-	let demoMode = false;
-	let pageBase = demoMode ? './demo/' : './';
-
 	eleventyConfig.addGlobalData('hippie', {
-		pageBase: pageBase,
 		brand: 'hippie',
 		titlePrefix: '',
 		titlePostfix: ' - HIPPIE',
@ -58,7 +48,7 @@ export default async function (eleventyConfig) {
 		return `<a id="${attrId}" class="${attrClass}" href="${target}">${text}</a>`;
 	});

-	eleventyConfig.addPairedShortcode("brand", function (content, attrClass = 'brand', direction = 'first') {
+	eleventyConfig.addPairedShortcode('brand', function (content, attrClass = 'brand', direction = 'first') {
 		const logo = `
 <svg
   width="100%"
@ -96,6 +86,7 @@ export default async function (eleventyConfig) {

 `;
 		let output = '';
+
 		switch (direction) {
 			case 'first':
 				output = logo + `${content}`;
@ -109,11 +100,8 @@ export default async function (eleventyConfig) {
 	});

 	eleventyConfig.addPassthroughCopy({'source/art/images': 'art'});
-
 	eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'});
-
 	eleventyConfig.addPassthroughCopy({'source/code/**/*.js': 'js'});
-
 	eleventyConfig.addPassthroughCopy({'source/data/**/*.json': 'json'});

 	eleventyConfig.addPassthroughCopy('vendor');
@ -133,7 +121,7 @@ export default async function (eleventyConfig) {
 			includes: '../templates',
 			data: '../data'
 		},
-		templateFormats: ['html', 'liquid', 'njk', 'md']
+		templateFormats: ['html', 'liquid', 'md']
 		// pathPrefix: './demo/'
 	};
 }
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@ -46,7 +46,7 @@ tags:

 		#init() {
 			this.#createContext(['background', 'hands']);
-			this.createOverlay();
+			// this.createOverlay();

 			this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
 			this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
--- a/source/screens/demo/examples/portal.liquid
+++ b/source/screens/demo/examples/portal.liquid
@ -0,0 +1,29 @@
+---
+title: Portal
+tags:
+- demoExample
+image:
+  src: '/art/flag_websafe_128x80.gif'
+  alt: 'Flag of Interaktionsweise'
+links:
+- name: '1'
+  href: 'http://domain.tld'
+  img: '/art/bullet.gif'
+- name: 'Zwei'
+  href: 'http://domain.tld'
+  img: '/art/bullet.gif'
+---
+{% assign bodyClass = "body_portal" %}
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<div class="portal">
+	{% render 'hippie/partials/gate-list',
+		name: 'Tor mit Symbol und Liste',
+		url: '../demo',
+		image: image,
+		links: links
+	%}
+	{% render 'hippie/partials/gate-simple', name: 'Tor', url: '../demo' %}
+</div>
+{% endblock %}
--- a/source/screens/demo/examples/portal.njk
+++ b/source/screens/demo/examples/portal.njk
@ -1,41 +0,0 @@
---
-title: Portal
-tags:
-  - demoExample
---
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_portal" %}
-
-{% extends "demo/_default.njk" %}
-{% import "hippie/macros/_gate.njk" as gate %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block body %}
-	<!-- {{ page.fileSlug }}.page -->
-	<div class="portal">
-		{{ gate.list(
-		'Tor mit Symbol und Liste',
-		'../demo', {
-			src: '/art/flag_websafe_128x80.gif',
-			alt: 'Flag of Interaktionsweise'
-		}, [
-			{
-				name: '1',
-				href: 'http://domain.tld',
-				img: '../art/bullet.gif'
-			}, {
-				name: 'Zwei',
-				href: 'http://domain.tld',
-				img: '../art/bullet.gif'
-			}
-		]
-		) }}
-		{{ gate.simple('Tor', '../demo') }}
-	</div>
-{% endblock %}
--- a/source/screens/demo/layouts.liquid
+++ b/source/screens/demo/layouts.liquid
@ -15,7 +15,7 @@ order: 4
 		<p>Die Elemente werden fortlaufend komplexer</p>
 	</header>
 	<article>
-		<h2>Bereiche (sections)</h2>
+		<h2 id="sections">Bereiche (sections)</h2>
 		<h3>section</h3>
 		<pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre>
 		<section class="overflow">
@ -169,46 +169,9 @@ order: 4
 				</footer>
 			</div>
 		</div>
-
-		<h2>Interaktiv (interactive)</h2>
-		<h3>input</h3>
-		<div class="flex inline">
-			<input value="Undefiniert"/>
-			<input type="text" size="8" value="Text"/>
-			<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
-			<input type="button" value="Auswählen">
-			<input type="submit" value="Senden" disabled="disabled"/>
-		</div>
-		<h3>form</h3>
-		<form method="get">
-			<p>Show me a
-				<select name="F">
-					<option value="0">Plain list</option>
-					<option value="1" selected="selected">Fancy list</option>
-					<option value="2">Table list</option>
-				</select>
-				Sorted by
-				<select name="C">
-					<option value="N" selected="selected">Name</option>
-					<option value="M">Date Modified</option>
-					<option value="S">Size</option>
-					<option value="D">Description</option>
-				</select>
-				<select name="O">
-					<option value="A" selected="selected">Ascending</option>
-					<option value="D">Descending</option>
-				</select>
-				<select name="V">
-					<option value="0" selected="selected">in Normal order</option>
-					<option value="1">in Version order</option>
-				</select>
-				Matching
-				<input type="text" name="P" value="*"/>
-				<input type="submit" name="X" value="Go"/>
-			</p>
-		</form>
-
-		<h2>Gruppierung (grouping)</h2>
+	</article>
+	<article>
+		<h2 id="grouping">Gruppierung (grouping)</h2>
 		<h3>p</h3>
 		<pre class="pre_code"><code>p.txt_right+p.txt_center+p.txt_left</code></pre>
 		<p class="txt_right">Rechts</p>
@ -248,8 +211,15 @@ order: 4
 			<p>Eingerückter Inhalt</p>
 			<hr/>
 		</div>
-
-		<h2>Tabellen</h2>
+	</article>
+	<article>
+		<h2>Eingebettet</h2>
+		<div class="demo__flag">
+			{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
+		</div>
+	</article>
+	<article>
+		<h2 id="tabularData">Tabellen (tabular data)</h2>
 		<pre class="pre_code"><code>table.link>thead>tr>th{&amp;nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.icon[rowspan="2"]>img[width=16 height=16]^+td.link>span{name}+a[target=_blank]{url}^+td[rowspan="2"]{yyy-mm-dd}^tr>td.text>div.shorten{beschreibung})*2</code></pre>
 		<table class="link js_pop">
 			<thead>
@ -290,11 +260,56 @@ order: 4
 			</tr>
 			</tbody>
 		</table>
-
-		<h2>Eingebettet</h2>
-		<div class="demo__flag">
-			{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
+	</article>
+	<article>
+		<h2 id="forms">Formulare (forms)</h2>
+		<h3>form</h3>
+		<form method="get">
+			<p>Show me a
+				<select name="F">
+					<option value="0">Plain list</option>
+					<option value="1" selected="selected">Fancy list</option>
+					<option value="2">Table list</option>
+				</select>
+				Sorted by
+				<select name="C">
+					<option value="N" selected="selected">Name</option>
+					<option value="M">Date Modified</option>
+					<option value="S">Size</option>
+					<option value="D">Description</option>
+				</select>
+				<select name="O">
+					<option value="A" selected="selected">Ascending</option>
+					<option value="D">Descending</option>
+				</select>
+				<select name="V">
+					<option value="0" selected="selected">in Normal order</option>
+					<option value="1">in Version order</option>
+				</select>
+				Matching
+				<input type="text" name="P" value="*"/>
+				<input type="submit" name="X" value="Go"/>
+			</p>
+		</form>
+		<hr class="hidden">
+		<form action="" name="login">
+			<div>
+				<p>Anmeldung</p>
+				<input placeholder="Benutzername" name="username" type="text" autocomplete="username">
+				<input placeholder="Passwort" name="password" type="password" autocomplete="current-password">
 			</div>
+		</form>
+		<h3>input</h3>
+		<div class="flex inline">
+			<input value="Undefiniert"/>
+			<input type="text" size="8" value="Text"/>
+			<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
+			<input type="button" value="Auswählen">
+			<input type="submit" value="Senden" disabled="disabled"/>
+		</div>
+	</article>
+	<article>
+		<h2 id="interactive">Interaktiv (interactive)</h2>
 	</article>
 </section>
 {% endblock %}
--- a/source/style/demo.scss
+++ b/source/style/demo.scss
@ -16,4 +16,5 @@
@use "modules/start";
@use "modules/clock";
@use "modules/game";
+@use "modules/login";
 // @use "modules/YOUR-MODULE/YOUR-FILES";
--- a/source/style/modules/_login.scss
+++ b/source/style/modules/_login.scss
@ -0,0 +1,28 @@
+@use "sass:color";
+@use "../hippie-style/hippie";
+
+form[name="login"] {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	& > div {
+		padding: hippie.$space_double;
+		background-color: color.adjust(hippie.basic_color(echo), $alpha: -0.4);
+
+		p {
+			margin-top: 0;
+			color: hippie.$color_brightest;
+		}
+
+		& > input {
+			display: block;
+			width: 100%;
+			margin-inline: 0;
+		}
+
+		input:first-of-type {
+			margin-bottom: hippie.$space_basic;
+		}
+	}
+}
--- a/source/templates/demo/_default.njk
+++ b/source/templates/demo/_default.njk
@ -1,19 +0,0 @@
-<!-- demo.default.template -->
-{% extends "hippie/_default.njk" %}
-
-{% block meta %}
-	{% include "demo/partials/_meta.njk" %}
-	<base href="/">
-{% endblock %}
-
-{% block links %}
-	{{ super() }}
-	<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
-	{# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
-	{# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/> #}
-{% endblock %}
-
-{% block script %}
-	{{ super() }}
-	<script src="/vendor/jquery.min.js"></script>
-{% endblock %}
--- a/source/templates/demo/_main.njk
+++ b/source/templates/demo/_main.njk
@ -1,21 +0,0 @@
-<!-- demo.main.template -->
-{% extends "hippie/_main.njk" %}
-
-{% block meta %}
-	{% include "demo/partials/_meta.njk" %}
-	<base href="/">
-{% endblock %}
-
-{% block links %}
-	{{ super() }}
-	{% if hippie.legacyMode %}
-		<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
-		<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]-->
-		<!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
-		<!--Only use one of the above!-->
-	{% endif %}
-
-	<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
-	<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
-	<!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
-{% endblock %}
--- a/source/templates/demo/partials/_meta.njk
+++ b/source/templates/demo/partials/_meta.njk
@ -1,9 +0,0 @@
-<!-- meta.partial -->
-<meta name="author" content="Interaktionsweise">
-<meta name="generator" content="Visual Studio Code, Atom, Notepad++">
-<meta name="description" content="Hippie interweaves preeminent personal interface elements">
-<meta name="robots" content="noindex">
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-{# <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> #}
-{# <meta http-equiv="X-UA-Compatible" content="IE=edge" /> #}
--- a/source/templates/demo/partials/exp-colors.njk
+++ b/source/templates/demo/partials/exp-colors.njk
@ -1,7 +0,0 @@
-<!-- explanation-colors.partial -->
-{# var colors = [{name: "alpha", class: "alpha_color"}] #}
-
-{% set cls = cycler("odd", "even") %}
-{% for row in rows %}
-  <div class="{{ cls.next() }}">{{ row.name }}</div>
-{% endfor %}
--- a/source/templates/hippie/_app.njk
+++ b/source/templates/hippie/_app.njk
@ -1,52 +0,0 @@
-<!-- app.template -->
-<!DOCTYPE html>
-<html lang="de" class="html_ui" id="{{ pageId }}">
-	<head>
-		<meta charset="utf-8">
-
-		{% block head %}
-			<title>{{ hippie.titlePrefix }}
-				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
-
-			{% block meta %}
-				{% include "hippie/partials/_head_meta.njk" %}
-				<base href="/">
-			{% endblock %}
-
-			{% block links %}{% endblock %}
-
-		{% endblock %}
-	</head>
-
-	<body class="{{ bodyClass if bodyClass else 'body_frame' }}">
-		{% block body %}{% endblock %}
-
-		{% block script %}
-			<script src="/vendor/jquery.min.js"></script>
-			<script src="/vendor/hippie-script.js"></script>
-			<script src="{{ pageBase }}js/globals.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 %}
-	</body>
-</html>
--- a/source/templates/hippie/_app_frame.njk
+++ b/source/templates/hippie/_app_frame.njk
@ -1,19 +0,0 @@
-<!-- frame.app.template -->
-{% extends "hippie/_app.njk" %}
-{% import "hippie/macros/_io.njk" as io %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block title %}{{ title }}{% endblock %}
-
-{% block links %}
-	{{ 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 %}
-	{{ super() }}
-{% endblock %}
--- a/source/templates/hippie/_default.njk
+++ b/source/templates/hippie/_default.njk
@ -1,41 +0,0 @@
-<!-- default.template -->
-{# {% if hippie.debugMode %} #}
-  {% import "hippie/macros/_log.njk" as log %}
-{# {% endif %} #}
-
-<!DOCTYPE html>
-<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-  <head>
-    <meta charset="utf-8">
-
-    {% block head %}
-      <title>{{ hippie.titlePrefix }}
-        {%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
-
-      {% block meta %}
-        {% include "hippie/partials/_head_meta.njk" %}
-      {% endblock %}
-
-      {% include "hippie/partials/_head_script.njk" %}
-      {# {{ log.debug(true) }} #}
-      {{ log.start() }}
-
-      {% block links %}
-        {% include "hippie/partials/_head_links.njk" %}
-      {% endblock %}
-
-      {{ log.log('HEAD end    :: Links parsed, starting to load.') }}
-    {% endblock %}
-  </head>
-
-  <body class="{{ bodyClass }}">
-    {{ log.log('BODY start') }}
-    {% block body %}{% endblock %}
-
-    {% block script %}
-      {{ log.log('BODY        :: Loading script assets...') }}
-    {% endblock %}
-
-    {{ log.log('BODY end    :: Page script might still be loading.') }}
-  </body>
-</html>
--- a/source/templates/hippie/_main.njk
+++ b/source/templates/hippie/_main.njk
@ -1,73 +0,0 @@
-<!-- main.template -->
-{% import "hippie/macros/_log.njk" as log %}
-
-<!DOCTYPE html>
-<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-	<head>
-		<meta charset="utf-8">
-
-		{% block head %}
-			<title>{{ hippie.titlePrefix }}
-				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
-
-			{% block meta %}
-				{% include "hippie/partials/_head_meta.njk" %}
-			{% endblock %}
-
-			{% include "hippie/partials/_head_script.njk" %}
-			{{ log.debug(hippie.debugMode, true) }}
-			{{ log.start() }}
-
-			{% block links %}
-				{% include "hippie/partials/_head_links.njk" %}
-			{% endblock %}
-
-			{{ log.log('HEAD end    :: Links parsed, starting to load.') }}
-		{% endblock %}
-	</head>
-
-	<body class="{{ bodyClass }}">
-		{{ log.log('BODY start') }}
-		{% include "hippie/partials/_body_nav.njk" %}
-		<div id="root">
-			{% include "hippie/partials/_header.njk" %}
-
-			<main class="main_site">
-				{% block main %}{% endblock %}
-			</main>
-
-			{% include "hippie/partials/_footer.njk" %}
-		</div>
-
-		{% block script %}
-			{{ log.log('BODY        :: Loading script assets...') }}
-			{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
-			<script src="/vendor/jquery.min.js"></script>
-			<script src="/vendor/hippie-script.js"></script>
-			<script src="{{ pageBase }}js/globals.js"></script>
-			<script src="{{ pageBase }}js/app.js"></script>
-			<script>
-				// Setup global things for all screens
-				setup();
-
-				// Create instances of objects made by constructor functions
-				let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
-				let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
-
-				if (viewHover) {
-					let fadeUi = new HippieFade(document.getElementById('js-toggle-fade'), true);
-				}
-
-				document.addEventListener('scroll', () => {
-					scrollUi.check();
-				});
-
-				$(document).ready(function () {
-					logPerf('EVENT       :: jQuery \'ready\' event fired.');
-				});
-			</script>
-		{% endblock %}
-
-		{{ log.log('BODY end    :: Page script might still be loading.') }}
-	</body>
-</html>
--- a/source/templates/hippie/macros/_footer.njk
+++ b/source/templates/hippie/macros/_footer.njk
@ -1,23 +0,0 @@
-{% macro status(email = 'admin@domain.tld', app = 'Application', version = 'ver.s.ion', system = 'System Name', domain = 'domain.tld:port') %}
-	<footer class="pos_abs pin_bottom width_full">
-		<address class="txt_center">Kontakt:
-			<a class="lineLink" href="mailto:{{ email }}">{{ email }}</a>
-			* Server:
-			{{ app }}/{{ version }}
-			({{ system }}) * Domain:
-			{{ domain }}
-		</address>
-	</footer>
-{% endmacro %}
-
-{% macro pinned(pos = 'bottom') %}
-	<footer class="pos_abs pin_{{ pos }} pin_right pin_left">
-		<p class="txt_center">Unten fixiert</p>
-	</footer>
-{% endmacro %}
-
-{% macro main() %}
-	<footer class="footer_site">
-		<div id="end"></div>
-	</footer>
-{% endmacro %}
--- a/source/templates/hippie/macros/_gate.njk
+++ b/source/templates/hippie/macros/_gate.njk
@ -1,30 +0,0 @@
-{% macro list(name, url, image, links) %}
-	<article class="portal__entry">
-		<section>
-			<h2>
-				<a class="a_discreet" href="{{ url }}">{{ name }}</a>
-			</h2>
-			<a class="portal__link portal__link--{{ name | slug }}" href="{{ url }}">
-				<img src="{{ image.src }}" alt="{{ image.alt }}"/>
-			</a>
-			{% if links %}
-				<ul class="portal__list">
-					{% for link in links %}
-						<li>
-							<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
-						</li>
-					{% endfor %}
-				</ul>
-			{% endif %}
-		</section>
-	</article>
-{% endmacro %}
-{% macro simple(name, url) %}
-	<article class="portal__entry">
-		<section>
-			<h2>
-				<a class="a_discreet" href="{{ url }}">{{ name }}</a>
-			</h2>
-		</section>
-	</article>
-{% endmacro %}
--- a/source/templates/hippie/macros/_header.njk
+++ b/source/templates/hippie/macros/_header.njk
@ -1,30 +0,0 @@
-{% macro main() %}
-	<header class="header_site">
-		<div id="begin"></div>
-	</header>
-{% endmacro %}
-
-{% macro status(hippie, page) %}
-	{% import "hippie/macros/_state.njk" as state %}
-	<div id="top">
-		<h1 class="brand">
-			<a href="#">{{ hippie.brand | upper }}</a>
-		</h1>
-		<nav>
-			<ul>
-				{% for link in page %}
-					<li>
-						<a href="{{ link.href }}">{{ link.text }}</a>
-					</li>
-				{% endfor %}
-			</ul>
-		</nav>
-		<div class="state">
-			<p>{{ state.coord("log")}}
-        /
-        {{ state.date("date")}}
-        /
-        {{ state.time("time")}}</p>
-		</div>
-	</div>
-{% endmacro %}
--- a/source/templates/hippie/macros/_io.njk
+++ b/source/templates/hippie/macros/_io.njk
@ -1,49 +0,0 @@
-{% macro frameHeader(title) %}
-	<header class="io">
-		<nav>
-			<button title="menu">
-				<i class="bi bi-three-dots"></i>
-			</button>
-			<span>{{ title }}</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>
-{% endmacro %}
-
-{% macro frameFooter(title) %}
-	<footer class="io">
-		<nav>
-			<button>mode</button>
-			<span>{{ title }}</span>
-		</nav>
-		<nav>
-			<div class="spacer a"></div>
-			<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 %}
--- a/source/templates/hippie/macros/_log.njk
+++ b/source/templates/hippie/macros/_log.njk
@ -1,24 +0,0 @@
-{% macro start() %}
-	<script>
-		logAdd('EVENT       :: Document \'%s\' event fired.', 'DOMContentLoaded');
-		logPerf('HEAD start  :: Debugging performance...', debugOn);
-	</script>
-{% endmacro %}
-{% macro log(msg, arg = '') %}
-	<script>
-		logPerf('{{ msg }}', {{ arg }});
-	</script>
-{% endmacro %}
-{% macro debug(state = false, display = false, assets = false) %}
-	{# {{ set hippie.debugMode = state }} #}
-	<script>
-		debugOn = {{ state }};
-		debugOnScreen = {{ display }};
-		assetsLoaded = {{ assets }};
-	</script>
-{% endmacro %}
-{% macro asset(state = false) %}
-	<script>
-		assetsLoaded = {{ state }};
-	</script>
-{% endmacro %}
--- a/source/templates/hippie/macros/_nav.njk
+++ b/source/templates/hippie/macros/_nav.njk
@ -1,13 +0,0 @@
-{% macro main(data, active = '') %}
-	<nav>
-		<ul>
-			{% for link in data %}
-				<li{%if active == link.text %} class="active_txt" {% endif %}>
-					{%if active == link.text %}{{ link.text }}{%else%}
-						<a href="{{ link.href }}">{{ link.text }}</a>
-					{% endif %}
-				</li>
-			{% endfor %}
-		</ul>
-	</nav>
-{% endmacro %}
--- a/source/templates/hippie/macros/_placeholder.njk
+++ b/source/templates/hippie/macros/_placeholder.njk
@ -1,100 +0,0 @@
-{% macro email(class = '', text = '', address = 'name@domain.tld') %}
-	{% if text === '' %}
-		{% set text = address %}
-	{% endif %}
-
-	<a class="{{ class }}" href="mailto:{{ address }}">{{ text }}</a>
-	{# {{ 'name@domain.tld' | urlize | safe }} #}
-{% endmacro %}
-
-{% macro link(class = '', text = 'domain.tld', href = 'http://domain.internal') %}
-	<a class="{{ class }}" href="{{ href }}">{{ text }}</a>
-{% endmacro %}
-
-{% macro name(class = '', text = 'Vorname Nachname') %}
-	<span class="{{ class }}">{{ text }}</span>
-{% endmacro %}
-
-{% macro address(class = '', text = 'Straße Nr., PLZ Ort') %}
-	<span class="{{ class }}">{{ text }}</span>
-{% endmacro %}
-
-{% macro phone(class = '', text = '+49 (0)101 1337 48') %}
-	<span class="{{ class }}">{{ text }}</span>
-{% endmacro %}
-
-{% macro brand(class = '', name = 'Marke') %}
-	<div class="{{ class }}">
-		{# <img src="" alt="Brand logo"> #}
-		<svg
-		width="128"
-		height="128"
-		viewBox="0 0 128 128"
-		version="1.1"
-		xmlns="http://www.w3.org/2000/svg"
-		xmlns:svg="http://www.w3.org/2000/svg">
-			<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>
-		<h1>{{ name }}</h1>
-	</div>
-{% endmacro %}
-
-{% macro flag(type = '', src = '', id = '', desc = 'Fahne von Interaktionsweise', width = '128') %}
-	{% set height = width / 1.6 %}
-	{% if type === 'svg' or type === '' %}
-		<svg version="1.1" id="{{ id }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
-			{# <defs>
-			<filter id="turb3">
-				<feColorMatrix type="saturate" values="1" />
-				<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
-			</filter>
-			<symbol id="triangle-5">
-				<rect y="0" fill="#273F8B" width="1920" height="1200"/>
-			</symbol>
-		</defs>
-		<g>
-			<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
-		</g> #}
-			{% if desc !== '' %}
-				<desc>{{ desc }}</desc>
-			{% endif %}
-			<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
-			<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
-			<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
-			<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
-			<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
-			<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
-			<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
-			<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
-			<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
-		</svg>
-	{% elif type === 'img' %}
-		{% if src === 'file' %}
-			<picture>
-				<source srcset="{{ pageBase }}art/flag_websafe_128x80.webp" type="image/webp"/>
-				<img src="{{ pageBase }}art/flag_websafe_128x80.gif" width="{{ width }}" height="{{ height }}" alt="{{ desc }}"/>
-			</picture>
-		{% else %}
-			<img 
-				width="{{ width }}" 
-				height="{{ height }}" 
-				alt="{{ desc }}"
-				src="data:image/gif;base64,R0lGODlhgABQAIQAMf/MAP+ZM/+ZAP9mM8zM/8xmM8wzM8wAZpnM/5nMzJmZzJkzZpkAZmbMzGaZzGZmmWYzZjNmmTMzmQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAgABQAAQF/mDjiORolug5NiKSEG8Mz68SSbek73zv/8CgcEhkGY/IpBLRcBEQM+hL+nRIHrscLsvVab/drTcMHpvF6DIuxVaxj7I4DZZAE+/4vB6o7PubRgSCUIOCT4YRDxE3jFuNj46RkJOSlZSXlo5tm24nTXKgBA5ae6Wmpz5/qklOU1GvCYqNZ2q1ZLe0uGm6X5y+K0dzoQlWpKjHyHery0wIhIeFgwiLmZjW1djX2pa/viwjw3PUyeTlQct/TCyHru0ENru58vH0tvP29VndnazhMVjGzAkkh06VM2gICdkAmK3htocOI0bYtymQv2kBB2o8VrBPM3dUoDxQdI+XyZIo/vOlnMivJQk4wubA20iTYMcj6l5ESzgKok+JQH8+osivQcw4DezUXFrqJquQsAhQw0f1pMqrVe8RRcHCn6iMTMMqc8qCSUJDUmQFXSuUrcOtwBwk8FdMrF09ZHOy2+vsitWsWP8KXgk3WLhxdxMXIdtk5zMFattKdjt5UuGuR2GAVcyZR16jIGHYmBV45eDSqGttNdJKGAKlnWPvuNnsme2vlHNX1q3JZdHMM2UL9+yUb5S6ppOnPg1YtW+ureMogD08Nm1XOxPx3s3dLQQICyh+iz5jVHXZEBgsYJC+4EfjsZjLV97c6vf1C8CrF99gmJXziuGn3oDr3YQWWhht/qdgd5Sklx9++hlwgAHikfcCYgDSlJ6D7A14AAMHhHiAe1C9YF599M233BgO6vegehPGKCGFz1kkzGYZosKhgAKK6KOIzDRx2ztTLWjkT/e56KKMTM44IUWgvIZjjnlwuCOIP2bpY0HGkZTilytedZ96SzppZpMydvOJTFNSGcSVPGopZ5bMOFYXg0diM+aLC6B55p9NerOOdG7useGA6c2p6JwGgbZXkWCiGOYNLcYJ6KV+pukSZjJ4WSgQcMK46KiMqqITO3imWkmS+C2A6auZ/umNMFh8ysOh63FI6q6LGhSSlCpKWhUEEvAJXqzIwvqnAQNU1J84baJHoIe8/lab5QAFBCAAAAL4YdYzJ+Y52Z7HKptsstluGwAA667LyVw0RJuYldRaa20B6WrLrb7bAvBHO/9NGuwO5K5n7sFMYhtAu+w2vC4AEEdcEQ2vAXilvbsawGwB3Ha8rboRhyyxR4WQpCpElZ6LsJMKM8ywyDCLvIkM5sWGK5YYz6kxtvt+vHDMQMvcRxQMRSoYqwysnOzGDjcd9NMyu7EmMYrdnLOcBqTrsdNQdz0yEgcJUuTJkbyo9KXMgvyy12zD/MYMtYal69U+YiuAzx+3rXfMSqA68Dxjnt1kAQOovffhT0MXQ8AaEdtjzllrnTfilAOdxBTAplqmyoP//HDlyKAnrsIMG81t7cb8hq461GCbSJqwEjjIOcvZrr367UGjEIO8Q+zI6855f4778JYHI0pu983OtO3EN2+5CS7UgUqHGRtwt+fOZ886a1JJit/ShTes/fhev/ROKbIrmrUAzJPvfvGfMHTNd69a3+/7+LNNAtV31PsjvvrKnwD1tw5elKtzwhugArvWgrj9YD0+2hnHFkhBvXWlQUmLEc8qyMG9scCBscMS8DpIQg9Oh1JJS1sJV3i4pKQnaz9joQz15gDxzfCGegsBADs=">
-		{% endif %}
-	{% endif %}
-{% endmacro %}
--- a/source/templates/hippie/macros/_song.njk
+++ b/source/templates/hippie/macros/_song.njk
@ -1,12 +0,0 @@
-{% macro simple(index, data, content) %}
-	<article class="songbook_song">
-		<header>
-			<h2>{{ data.title }}</h2>
-			<h6>{{ data.releaseDate }}</h6>
-			<p>{{ data.description }}</p>
-		</header>
-		{# <pre class="pre_code"><code>{{ content }}</code></pre> #}
-		{{ content | safe }}
-		<footer>{{ index }}</footer>
-	</article>
-{% endmacro %}
--- a/source/templates/hippie/macros/_state.njk
+++ b/source/templates/hippie/macros/_state.njk
@ -1,16 +0,0 @@
-{% macro coord(id, text = 'X: #, Y: ##') %}
-	<span id="{{ id }}">{{ text }}</span>
-{% endmacro %}
-
-{% macro time(id, text = '00:00:00', postfix = ' Uhr') %}
-	<span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
-{% endmacro %}
-
-{% macro date(id) %}
-	<span id="{{ id }}">
-		<span id="day">Wochentag</span>,
-		<span id="dayNumb">##</span>.
-		<span id="month">Monat</span>
-		<span id="year">####</span>
-	</span>
-{% endmacro %}
--- a/source/templates/hippie/macros/top-macro.njk
+++ b/source/templates/hippie/macros/top-macro.njk
@ -1,5 +0,0 @@
-{% macro field(name, value='', type='text') %}
-<div class="field">
-  <input type="{{ type }}" name="{{ name }}" value="{{ value | escape }}" />
-</div>
-{% endmacro %}
--- a/source/templates/hippie/partials/_body_nav.njk
+++ b/source/templates/hippie/partials/_body_nav.njk
@ -1,34 +0,0 @@
-<!-- nav.partial -->
-<div class="pos_rel">
-	<nav class="nav_page_meta">
-		<ul>
-			<li class="js_scrolltop di_none">
-				<a href="#begin" class="a_button_meta">
-					<div class="sprite_img demo__sprite_up"></div>
-					{# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}
-				</a>
-			</li>
-			<li>
-				{# <button class="">Show Meta Information</button> #}
-				{# <a href="#meta" class="js_showmeta a_button_meta">
-          <div class="sprite_img demo__sprite_meta"></div>
-        </a> #}
-				<button class="js_showmeta button_clear" type="button">
-					<div class="sprite_img demo__sprite_meta"></div>
-				</button>
-			</li>
-			<li>
-				<button id="js-toggle-fade">F</button>
-			</li>
-			<li class="js_scrolldown">
-				<a href="#end" class="a_button_meta">
-					<div class="sprite_img demo__sprite_down"></div>
-					{# <img src="{{ pageBase }}art/down.png" alt="" width="32" height="32"> #}
-				</a>
-			</li>
-		</ul>
-	</nav>
-</div>
-{# <div class="exp_overlay_btn exp_help_btn">
-<span class="span_solo">?</span>
-</div> #}
--- a/source/templates/hippie/partials/_footer.njk
+++ b/source/templates/hippie/partials/_footer.njk
@ -1,3 +0,0 @@
-<!-- footer.partial -->
-{% import "hippie/macros/_footer.njk" as footer %}
-{{ footer.main() }}
--- a/source/templates/hippie/partials/_head_links.njk
+++ b/source/templates/hippie/partials/_head_links.njk
@ -1,4 +0,0 @@
-<!-- links.partial -->
-{# <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon"> #}
-<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=">
--- a/source/templates/hippie/partials/_head_meta.njk
+++ b/source/templates/hippie/partials/_head_meta.njk
@ -1,8 +0,0 @@
-<!-- meta.partial -->
-<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">
--- a/source/templates/hippie/partials/_head_script.njk
+++ b/source/templates/hippie/partials/_head_script.njk
@ -1,114 +0,0 @@
-<!-- script.partial -->
-<script>
-  // Entry script at page init
-  let debugOn = {{ hippie.debugMode }};
-  let debugOnScreen = false;
-  let assetsLoaded = false;
-
-  // Get the current time difference between page
-  // load and when this func was invoked
-  function getTimeDiff() {
-    return new Date().getTime() - performance.timing.navigationStart;
-  }
-
-  function pad(n, width, z) {
-    z = z || '0';
-    n = n + '';
-
-    return n.length >= width
-      ? n
-      : new Array(width - n.length + 1).join(z) + n;
-  }
-
-  // Log message to console and add
-  // performance measuring information
-  function logPerf(msg, arg) {
-    if (debugOn) {
-      if (debugOnScreen && assetsLoaded) {
-        if (!document.getElementById('jsLogPerf')) {
-          let wrap = document.createElement('div');
-          let box = document.createElement('div');
-
-          wrap.style.position = 'relative';
-          box.style.cssText = `position: fixed;
-            bottom: 16px;
-            right: 40px;
-            zIndex: 1000;
-            padding: 0 8px;
-            background: rgba(255,255,255,.6);
-            color: rgb(128);
-            fontSize: 1rem;`;
-          box.id = 'jsLogPerf';
-
-          wrap.prepend(box);
-          document
-            .body
-            .prepend(wrap);
-
-          /*
-          $('<div><div></div></div>')
-            .css('position', 'relative')
-            .find('div')
-            .attr('id', 'jsLogPerf')
-            .css({
-              position: 'fixed',
-              bottom: '16px',
-              right: '40px',
-              zIndex: '1000',
-              padding: '0 8px',
-              background: 'rgba(255,255,255,.6)',
-              color: 'rgb(128)',
-              fontSize: '1rem'
-            })
-            .end()
-            .prependTo('body');
-          */
-          // $('body').prepend('<div style="position:relative;"></div>');
-          // $('div').first().prepend('<div id="jslogPerf" style="position:fixed;bottom:8px;right:16px;z-index:1000;padding:8px;background:rgb(0,255,255,.5)"></div>');
-        }
-
-        let code = document.createElement('code');
-
-        code.style.cssText = `display: block;
-          margin: 8px 0;
-          padding: 1px 4px;
-          background-color: transparent;
-          color: black;
-          font-size: 12px;
-          line-height: 1.1;`;
-        code.innerHTML = '<b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '';
-
-        document
-          .getElementById('jsLogPerf')
-          .append(code);
-        // document.getElementById('jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
-        // $('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
-
-        // NOTE: Alternative short-circuit evaluation
-        // needs element in document but prevents error if not
-        // $log = $log || $('#jslogPerf');
-        // $log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
-      }
-
-      if (window.console) {
-        const time = pad(getTimeDiff(), 5) + 'ms :: ';
-
-        console.debug(time + msg, (
-          arg
-          ? arg
-          : ''));
-
-        // NOTE: Non standard feature. Not available on IE
-        if (console.timeStamp) {
-          console.timeStamp(msg);
-        }
-      }
-    }
-  }
-
-  function logAdd(msg, listener) {
-    document.addEventListener(listener, function () {
-      logPerf(msg, listener);
-    });
-  }
-</script>
--- a/source/templates/hippie/partials/_header.njk
+++ b/source/templates/hippie/partials/_header.njk
@ -1,3 +0,0 @@
-<!-- header.partial -->
-{% import "hippie/macros/_header.njk" as header %}
-{{ header.main() }}
--- a/source/templates/hippie/partials/gate-list.liquid
+++ b/source/templates/hippie/partials/gate-list.liquid
@ -0,0 +1,19 @@
+<article class="portal__entry">
+	<section>
+		<h2>
+			<a class="a_discreet" href="{{ url }}">{{ name }}</a>
+		</h2>
+		<a class="portal__link portal__link--{{ name | slug }}" href="{{ url }}">
+			<img src="{{ image.src }}" alt="{{ image.alt }}"/>
+		</a>
+		{% if links %}
+			<ul class="portal__list">
+				{% for link in links %}
+					<li>
+						<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
+					</li>
+				{% endfor %}
+			</ul>
+		{% endif %}
+	</section>
+</article>
--- a/source/templates/hippie/partials/gate-simple.liquid
+++ b/source/templates/hippie/partials/gate-simple.liquid
@ -0,0 +1,7 @@
+<article class="portal__entry">
+	<section>
+		<h2>
+			<a class="a_discreet" href="{{ url }}">{{ name }}</a>
+		</h2>
+	</section>
+</article>
Author	SHA1	Message	Date
sthag	6520cdbcf0	feat: Add login to layouts - Add articles - Change order of articles - Add id attributes like in components - Add login example	2026-03-12 21:38:48 +01:00
sthag	a5bf80cb91	feat: Remove nunjucks - Remove all nunjucks templates, macros and partials - Remove nunjucks config from eleventy - Remove njk from template formats	2026-03-12 20:23:17 +01:00
sthag	95e0460325	feat: Update portal - Change portal from njk to liquid - Add gate partials as replacement for macro	2026-03-12 20:00:24 +01:00
sthag	52ee2e3dd7	fix: Clock overlay	2026-03-11 20:08:22 +01:00