diff --git a/source/art/images/demo/bullet.gif b/source/art/images/bullet.gif similarity index 100% rename from source/art/images/demo/bullet.gif rename to source/art/images/bullet.gif diff --git a/source/art/images/demo/letter.gif b/source/art/images/demo/letter.gif deleted file mode 100644 index 60aac08..0000000 Binary files a/source/art/images/demo/letter.gif and /dev/null differ diff --git a/source/art/images/demo/flag_websafe_128x80.gif b/source/art/images/flag_websafe_128x80.gif similarity index 100% rename from source/art/images/demo/flag_websafe_128x80.gif rename to source/art/images/flag_websafe_128x80.gif diff --git a/source/art/images/demo/flag_websafe_128x80.webp b/source/art/images/flag_websafe_128x80.webp similarity index 100% rename from source/art/images/demo/flag_websafe_128x80.webp rename to source/art/images/flag_websafe_128x80.webp diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk index e49936b..088d90d 100644 --- a/source/screens/demo/basics.njk +++ b/source/screens/demo/basics.njk @@ -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:

Eingebundene Inhalte

{# // picture // source // img // iframe // embed // object // param // video // audio // track // map // area #} - Fahne von Interaktionsweise + {{ ph.flag('img') }}

Dies ist ein Bild. Es wird mit dem Element <img> eingebunden. Solch ein Bild hat üblicherweise die Attribute @@ -533,10 +534,7 @@ tags: und <picture> in Kombination verwendet werden.

- - - - + {{ ph.flag('img', 'file') }}

Tabellen

diff --git a/source/screens/demo/examples/card.njk b/source/screens/demo/examples/card.njk index 7db860b..e05818d 100644 --- a/source/screens/demo/examples/card.njk +++ b/source/screens/demo/examples/card.njk @@ -21,29 +21,7 @@ tags:
- - {# - - - - - - - - - - - #} - - - - - - - - - - + {{ ph.flag('svg', '', 'flag', '') }} {# Background flag dithered #}
@@ -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); + }); {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/portal.njk b/source/screens/demo/examples/portal.njk index 8f949f2..68268c7 100644 --- a/source/screens/demo/examples/portal.njk +++ b/source/screens/demo/examples/portal.njk @@ -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' }, [ { diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk index a45a817..4bbeb66 100644 --- a/source/screens/demo/layouts.njk +++ b/source/screens/demo/layouts.njk @@ -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:

section

section.overflow>div.float_space_left>img^p+p>br+a.lineLink
-
Fahne von interaktionsweise
-

Vorname Name
Straße 1, 01234 Stadt

-

+49 (0)123 1337 0000
- name@domain.tld -

+
{{ ph.flag('img', '', '', 'Avatar', '256') }}
+

{{ ph.name() }}
{{ ph.address() }}

+

{{ ph.phone() }}
{{ ph.email('lineLink') }}

div.space_left_fourth>(hr+p+hr)
@@ -245,18 +244,15 @@ tags: 
hr.hr_dotted.space_even_fourth

ul

- 
ul.list_link>(li>a>img)*2+li>a
- + 
ul.list_link>(li>a)+li>a>img+span
+

Tabellen

table.table_link>thead>tr>th{&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
@@ -270,7 +266,7 @@ tags: - + ■ Name URL @@ -285,7 +281,7 @@ tags: - + ■ Name URL @@ -302,18 +298,7 @@ tags:

Eingebettet

- - Background flag - - - - - - - - - - + {{ ph.flag() }}
diff --git a/source/templates/hippie/macros/_placeholder.njk b/source/templates/hippie/macros/_placeholder.njk index 2e8d298..f3c2fa1 100644 --- a/source/templates/hippie/macros/_placeholder.njk +++ b/source/templates/hippie/macros/_placeholder.njk @@ -1,5 +1,9 @@ -{% macro email(class = '', text = 'name@domain.tld') %} - {{ text }} +{% macro email(class = '', text = '', address = 'name@domain.tld') %} + {% if text === '' %} + {% set text = address %} + {% endif %} + + {{ text }} {# {{ 'name@domain.tld' | urlize | safe }} #} {% endmacro %} @@ -15,6 +19,10 @@ {{ text }} {% endmacro %} +{% macro phone(class = '', text = '+49 (0)101 1337 48') %} + {{ text }} +{% endmacro %} + {% macro brand(class = '', name = 'Marke') %}
{# Brand logo #} @@ -44,4 +52,49 @@

{{ name }}

+{% endmacro %} + +{% macro flag(type = '', src = '', id = '', desc = 'Fahne von Interaktionsweise', width = '128') %} + {% set height = width / 1.6 %} + {% if type === 'svg' or type === '' %} + + {# + + + + + + + + + + + #} + {% if desc !== '' %} + {{ desc }} + {% endif %} + + + + + + + + + + + {% elif type === 'img' %} + {% if src === 'file' %} + + + {{ desc }} + + {% else %} + {{ desc }} + {% endif %} + {% endif %} {% endmacro %} \ No newline at end of file