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 %}

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 %}

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>

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>