hippie/source/templates/hippie/macros/_placeholder.njk

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