interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

10 years later #1

Merged
sthag merged 374 commits from development into main 2026-03-07 00:18:59 +01:00
Conversation 0 Commits 374 Files changed 135 +99 -79
9 changed files with 99 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 52daf0ca51 - Show all commits

0
source/art/images/demo/bullet.gif → source/art/images/bullet.gif
View file

Side by side

After

Width:  |  Height:  |  Size: 67 B

BIN
source/art/images/demo/letter.gif
View file

Binary file not shown.

0
source/art/images/demo/flag_websafe_128x80.gif → source/art/images/flag_websafe_128x80.gif
View file

Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

0
source/art/images/demo/flag_websafe_128x80.webp → source/art/images/flag_websafe_128x80.webp
View file

Side by side

After

Width:  |  Height:  |  Size: 832 B

8
source/screens/demo/basics.njk
View file

@ -7,6 +7,7 @@ tags:
{% set pageId = page.fileSlug %}
{% extends "demo/_main.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %}
{% block title %}Grundlagen{% endblock %}
{% block head %}
@ -517,7 +518,7 @@ tags:
<article>
<h1 id="embedded">Eingebundene Inhalte</h1>
{# // picture // source // img // iframe // embed // object // param // video // audio // track // map // area #}
<img 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=" width="128" height="80" alt="Fahne von Interaktionsweise">
{{ ph.flag('img') }}
<p>Dies ist ein Bild. Es wird mit dem Element
<code>&lt;img&gt;</code>
eingebunden. Solch ein Bild hat üblicherweise die Attribute
@ -533,10 +534,7 @@ tags:
und
<code>&lt;picture&gt;</code>
in Kombination verwendet werden.</p>
<picture>
<source srcset="{{ pageBase }}art/demo/flag_websafe_128x80.webp" type="image/webp"/>
<img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" alt="" width="128" height="80"/>
</picture>
{{ ph.flag('img', 'file') }}
</article>
<article>
<h1>Tabellen</h1>

64
source/screens/demo/examples/card.njk
View file

@ -21,29 +21,7 @@ tags:
<!-- {{ page.fileSlug }}.page -->
<div class="card_bkg">
<div id="dither"></div>
<svg version="1.1" id="flag" 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> #}
<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>
{{ 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">
@ -72,28 +50,34 @@ tags:
// console.log(colors);
document.getElementById('js_content').addEventListener('mouseenter', () => {
iId = setInterval(() => {
for (let i = 1; i <= colors.length; i++) {
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("triangle-" + i).setAttribute("fill", colors[position]);
}
position++;
if (position >= colors.length) {
position = 0;
}
}, 600);
});
document.getElementById('js_content').addEventListener('mouseleave', () => {
iId && clearInterval(iId);
});
document
.getElementById('js_content')
.addEventListener('mouseleave', () => {
iId && clearInterval(iId);
});
</script>
{% endblock %}

2
source/screens/demo/examples/portal.njk
View file

@ -22,7 +22,7 @@ tags:
{{ gate.list(
'Tor mit Symbol und Liste',
'../demo', {
src: '/art/demo/flag_websafe_128x80.gif',
src: '/art/flag_websafe_128x80.gif',
alt: 'Flag of Interaktionsweise'
}, [
{

47
source/screens/demo/layouts.njk
View file

@ -7,6 +7,7 @@ tags:
{% set pageId = page.fileSlug %}
{% extends "demo/_main.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %}
{% block title %}Gestaltungen{% endblock %}
{% block head %}
@ -25,11 +26,9 @@ tags:
<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">
<div class="float_space_left demo__avatar"><img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div>
<p>Vorname Name<br>Straße 1, 01234 Stadt</p>
<p>+49 (0)123 1337 0000<br>
<a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a>
</p>
<div class="float_space_left demo__avatar">{{ ph.flag('img', '', '', 'Avatar', '256') }}</div>
<p>{{ ph.name() }}<br>{{ ph.address() }}</p>
<p>{{ ph.phone() }}<br>{{ ph.email('lineLink') }}</p>
</section>
<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre>
<div class="space_left_fourth">
@ -245,18 +244,15 @@ tags:
<pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
<hr class="hr_dotted space_even_fourth">
<h3>ul</h3>
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
<ul class="list_link">
<li>
<a href=""><img src="{{ pageBase }}art/demo/letter.gif" alt="">name@domain.tld</a>
</li>
<li>
<a href="">Work</a>
</li>
<li>
<a href="">Projects</a>
</li>
</ul>
<pre class="pre_code"><code>ul.list_link>(li>a)+li>a>img+span</code></pre>
<nav>
<ul class="list_link">
<li>{{ ph.email('', '📧 name@domain.tld') }}</li>
<li>
<a href=""><img src="{{ pageBase }}art/bullet.gif" alt="">{{ ph.name() }}</a>
</li>
</ul>
</nav>
<h2>Tabellen</h2>
<pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2</code></pre>
@ -270,7 +266,7 @@ tags:
</thead>
<tbody>
<tr>
<td class="cell_icon" rowspan="2"><img src="/art/demo/bullet.gif" alt="" width="16" height="16"></td>
<td class="cell_icon" rowspan="2">■</td>
<td class="cell_link">
<a href="" target="_blank">Name</a>
<a href="" target="_blank">URL</a>
@ -285,7 +281,7 @@ tags:
</tbody>
<tbody>
<tr>
<td class="cell_icon" rowspan="2"><img src="/art/demo/bullet.gif" alt="" width="16" height="16"></td>
<td class="cell_icon" rowspan="2">■</td>
<td class="cell_link">
<a href="" target="_blank">Name</a>
<a href="" target="_blank">URL</a>
@ -302,18 +298,7 @@ tags:
<h2>Eingebettet</h2>
<div class="demo__flag">
<svg version="1.1" id="vector" 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">
<desc>Background flag</desc>
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
</svg>
{{ ph.flag() }}
</div>
</article>
</section>

57
source/templates/hippie/macros/_placeholder.njk
View file

@ -1,5 +1,9 @@
{% macro email(class = '', text = 'name@domain.tld') %}
<a class="{{ class }}" href="">{{ text }}</a>
{% 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 %}
@ -15,6 +19,10 @@
<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"> #}
@ -44,4 +52,49 @@
</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 %}