feat: Update card and placeholder

- Change card from njk to liquid
- Fix flag placeholder
- Update structure of card

.eleventy.js

@@ -35,7 +35,8 @@ export default async function (eleventyConfig) {
 			name: 'Vorname Nachname',
 			address: 'Straße Nr., PLZ Ort',
 			phone: '+49 (0)101 1337 48',
-			mail: 'name@domain.tld'
+			mail: 'name@domain.tld',
+			domain: 'https://domain.tld'
 		},
 		debugMode: true,
 		legacyMode: false

source/screens/demo/examples/card.liquid

@@ -0,0 +1,69 @@
+---
+title: Card
+tags:
+- demoExample
+---
+{% assign pageClass = "html_card" %}
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<div class="card_bkg">
+	<div id="dither"></div>
+	{% render 'hippie/partials/placeholder-flag.liquid', type: '', id: 'flag' %}
+	{% comment %}<img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/>{% endcomment %}
+</div>
+<div class="card_box">
+	<main>
+		<p>Titel<br/>und Beschreibung</p>
+		<h1>{% text hippie.placeholders.name %}</h1>
+		<p>
+			{% link hippie.placeholders.mail, '', '', 'card_address' %}<br/>
+			{% link hippie.placeholders.domain, 'site.tld', '', 'decent' %}
+			&middot;
+			{% text hippie.placeholders.address, '', 'decent' %}</p>
+	</main>
+</div>
+{% endblock %}
+
+{% block script %}
+<script>
+	const flag = document.getElementById('flag');
+	let colors = new Array();
+	let iId = undefined;
+	let position = 0;
+
+	for (let i = 1; i <= flag.childElementCount; i++) {
+		colors.push(document.getElementById('triangle-' + i).getAttribute('fill'));
+	}
+
+	document
+		.querySelector('main')
+		.addEventListener('mouseenter', () => {
+			iId = setInterval(() => {
+				for (let i = 1; i <= colors.length; i++) {
+					position++;
+
+					if (position >= colors.length) {
+						position = 0;
+					}
+
+					document
+						.getElementById('triangle-' + i)
+						.setAttribute('fill', colors[position]);
+				}
+
+				position++;
+
+				if (position >= colors.length) {
+					position = 0;
+				}
+			}, 600);
+		});
+
+	document
+		.querySelector('main')
+		.addEventListener('mouseleave', () => {
+			iId && clearInterval(iId);
+		});
+</script>
+{% endblock %}

source/screens/demo/examples/card.njk

@@ -1,83 +0,0 @@
----
-title: Card
-tags:
-  - demoExample
----
-{% set pageId = page.fileSlug %}
-{% set pageClass = "html_card" %}
-
-{% extends "demo/_default.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block body %}
-
-	<!-- {{ page.fileSlug }}.page -->
-	<div class="card_bkg">
-		<div id="dither"></div>
-		{{ ph.flag('svg', '', 'flag', '') }}
-		{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
-	</div>
-	<div class="card_box">
-		<div id="js_content">
-			<p>Titel<br/>und Beschreibung</p>
-			<h1>{{ ph.name() }}</h1>
-			<p>
-				{{ ph.email('card_address') }}<br/>
-				{{ ph.link('decent', 'site.tld') }}
-				&middot;
-				{{ ph.address('decent') }}</p>
-		</div>
-	</div>
-{% endblock %}
-
-{% block script %}
-	<script>
-		const flag = document.getElementById("flag");
-		let colors = new Array();
-		let iId = undefined;
-		let position = 0;
-
-		for (let i = 1; i <= flag.childElementCount; i++) {
-			colors.push(document.getElementById("triangle-" + i).getAttribute("fill"));
-		}
-
-		// console.log(colors);
-
-		document
-			.getElementById('js_content')
-			.addEventListener('mouseenter', () => {
-				iId = setInterval(() => {
-					for (let i = 1; i <= colors.length; i++) {
-						position++;
-
-						if (position >= colors.length) {
-							position = 0;
-						}
-
-						document
-							.getElementById("triangle-" + i)
-							.setAttribute("fill", colors[position]);
-					}
-
-					position++;
-
-					if (position >= colors.length) {
-						position = 0;
-					}
-				}, 600);
-			});
-
-		document
-			.getElementById('js_content')
-			.addEventListener('mouseleave', () => {
-				iId && clearInterval(iId);
-			});
-	</script>
-{% endblock %}

source/style/modules/card/_card_module.scss

@@ -32,7 +32,7 @@
 				// text-align: center;
 			}
 
-			& > div {
+			& > main {
 				position: relative;
 				padding: 64px 64px 24px 64px;
 				border: 1px solid #FFF;

source/templates/hippie/partials/placeholder-flag.liquid

@@ -14,7 +14,7 @@
 		<g>
 			<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
 		</g>{% endcomment %}
-		{% if desc != '' %}
+		{% if desc %}
 			<desc>{{ desc }}</desc>
 		{% endif %}
 		<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>