feat!: move every layout to demo folder

- source/screens is now free for user files
- rename demo templates to their equivalent sources
- add demo maintenance template
- demo templates use html base element

source/screens/demo/examples/card.njk

@@ -0,0 +1,109 @@
+<!-- card.page -->
+{% set pageBase = "../" %}
+{% set pageId = "card" %}
+{% set pageClass = "html_card" %}
+
+{% extends "demo/_default.njk" %}
+{% import "hippie/macros/_placeholder.njk" as ph %}
+
+{% block title %}Karte{% endblock %}
+
+{% block head %}
+  {{ super() }}
+{% endblock %}
+
+{% block body %}
+  <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>
+    {# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
+  </div>
+  <div class="card_box">
+    <div id="jsCardHover">
+      <p>Titel<br/>and description</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 %}
+  {{ super() }}
+  {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
+  <!-- build:js js/main.concat.min.js -->
+  <script src="{{ pageBase }}js/variables.js"></script>
+  <script src="{{ pageBase }}js/functions.js"></script>
+  <script src="{{ pageBase }}js/global.js"></script>
+  <script>
+    $(document).ready(function () {
+      // composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', '');
+
+      var colors = new Array();
+      var position = 0;
+
+      for (var i = 1; i <= $("#flag").children().length; i++) {
+        colors.push($("#triangle-" + i).attr("fill"));
+      }
+
+      $('#jsCardHover').on({
+        mouseenter: function () {
+          // $('#flag').addClass('effect');
+          // $('#flag').css('opacity', 0);
+          $('#flag')
+            .stop()
+            .fadeOut(10000);
+          this.iid = setInterval(function () {
+            for (var i = 1; i <= colors.length; i++) {
+              position++;
+              if (position >= colors.length) {
+                position = 0;
+              }
+              $("#triangle-" + i).attr("fill", colors[position]);
+            }
+            position++;
+            if (position >= colors.length) {
+              position = 0;
+            }
+          }, 600);
+        },
+        mouseleave: function () {
+          // $('#flag').removeClass('effect');
+          // $('#flag').css('opacity', 1);
+          $('#flag')
+            .stop()
+            .fadeIn(1000);
+          this.iid && clearInterval(this.iid);
+        },
+        click: function () {
+          $("#dither").toggle();
+        }
+      });
+    });
+  </script>
+{% endblock %}

source/screens/demo/examples/portal.njk

@@ -0,0 +1,37 @@
+<!-- portal.page -->
+{% set pageBase = "../" %}
+{% set pageId = "index" %}
+{% set bodyClass = "body_portal" %}
+
+{% extends "demo/_default.njk" %}
+
+{% import "demo/macros/_gates.njk" as gate %}
+
+{% block title %}Portal{% endblock %}
+
+{% block head %}
+  {{ super() }}
+{% endblock %}
+
+{% block body %}
+  <div class="portal">
+    {{ gate.list(
+    'Tor mit Symbol und Liste',
+    '../demo', {
+      src: '/art/demo/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 %}