Added card and portal modules

source/screens/demo/card.njk

@@ -1,4 +1,4 @@
-<!-- index.njk -->
+<!-- card.page -->
 {% set pageBase = "../" %}
 {% set pageId = "card" %}
 {% set pageClass = "html_card" %}

source/screens/demo/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 %}

source/style/demo.scss

@@ -5,10 +5,11 @@
 @import "demo_config";
 @import "hippie-style/hippie";
 
-
 // Additional Modules and variables
 // in dependency to other basic styles
 // could be defined here
 // -----------------------------------------------------------------------------
+@import "modules/card/card_module";
+@import "modules/portal/portal_module";
 @import "modules/demo/demo_module";
 // @import "modules/YOUR-MODULE/YOUR-FILES";

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit b27dc31455b1dff17bbb1df4239a83981bafe748
+Subproject commit 5e667371e6aafdfc8bbafb56d4891f9d1cb795d8

source/style/modules/card/_card_module.scss

@@ -0,0 +1,77 @@
+// Card module styles
+// ------------------------------------------------------------------------------
+
+.html_card {
+	height: 100%;
+
+	body {
+		min-height: 100%;
+
+		.card_bkg {
+			@extend %full_parent;
+			transition-duration: 800ms;
+			overflow: hidden;
+			vertical-align: top;
+			z-index: -1;
+
+			& > svg {
+				position: relative;
+			}
+		}
+
+		.card_box {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 100vh;
+
+			* {
+				font-family: $family_text_card;
+				// text-align: center;
+			}
+
+			& > div {
+				position: relative;
+				padding: 64px 64px 24px 64px;
+				border: 1px solid #FFF;
+				background-color: #F5F5F5;
+				z-index: 40;
+			}
+		}
+
+		h1 {
+			margin: 16px 0;
+			color: #1E1E1E;
+			font-size: 24px;
+			line-height: 1.4em;
+			font-weight: normal;
+		}
+
+		p {
+			margin-top: 0;
+			margin-bottom: 16px;
+			font-size: 12px;
+			line-height: 1.4em;
+		}
+
+		.marked {
+			// padding-left: 1em;
+			// text-indent: -1em;
+
+			&::before { content: "*\0000a0" }
+		}
+
+		.decent { color: #666 }
+
+		a {
+			color: #000;
+			text-decoration: none;
+
+			&:hover {
+				color: #F4F9FA;
+				background-color: #0C85FF;
+				text-decoration: none;
+			}
+		}
+	}
+}

source/style/modules/portal/_portal_module.scss

@@ -0,0 +1,150 @@
+$portal_highlight: $color_highlight_basic;
+$portal_margin: $space_double;
+$portal_link_size: 128px;
+$portal_icon_size: 64px;
+
+.body_portal {
+  @extend .h_full_view;
+}
+
+.portal {
+  display: flex;
+  height: 100vh;
+}
+
+.portal__entry {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding-right: $portal_margin;
+  padding-left: $portal_margin;
+  // overflow-x: hidden;
+  // overflow-y: auto;
+  transition: flex 500ms cubic-bezier(0, 0, 0.2, 1.4), background 800ms ease;
+
+  &:hover {
+    flex: 2;
+    background-color: #999;
+
+    // h2 {
+    //   color: $portal_highlight;
+    // }
+
+    .portal__list {
+      display: block;
+    }
+  }
+
+  section {
+    width: 100%;
+    padding: 32px 0;
+  }
+
+  h2 {
+    @extend h4;
+
+    position: relative;
+    margin-top: 0;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.portal__link {
+  display: block;
+  position: relative;
+  width: $portal_link_size;
+  height: $portal_link_size;
+  margin: 0 auto;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+
+  &:hover {
+    background-color: transparentize($portal_highlight, $amount: 0.2);
+    border-color: $portal_highlight;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: $portal_icon_size;
+    height: $portal_icon_size;
+    transform: translate(-50%, -50%);
+    object-fit: cover;
+    object-position: 0 0;
+  }
+}
+
+.portal__link--bibo {
+  background-image: url(../../art/portal/bibo.png);
+}
+
+.portal__link--portfolio {
+  background-image: url(../../art/portal/portfolio.png);
+}
+
+.portal__link--found {
+  background-image: url(../../art/portal/gems.png);
+}
+
+.portal__link--flux {
+  background-image: url(../../art/portal/flux.png);
+}
+
+.portal__link--blog {
+  background-image: url(../../art/portal/notes.png);
+}
+
+.portal__link--tools {
+  background-image: url(../../art/portal/tools.png);
+}
+
+.portal__link--safe {
+  background-image: url(../../art/portal/safe.png);
+}
+
+.portal__link--game {
+  &:hover {
+    background-image: url(../../art/portal/games.png);
+
+    & > img {
+      display: none;
+    }
+  }
+}
+
+.portal__list {
+  @extend .list_link;
+
+  display: none;
+  position: relative;
+  width: 80%;
+  margin: 48px auto 0 auto;
+  padding-left: 0;
+
+  li {
+    list-style: none;
+
+    a {
+      overflow: hidden;
+      width: 100%;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      img {
+        width: 16px;
+        height: auto;
+      }
+    }
+  }
+}

source/templates/demo/data.json

@@ -26,6 +26,10 @@
       "href": "demo/card.html",
       "text": "Card"
     },
+    {
+      "href": "demo/portal.html",
+      "text": "Portal"
+    },
     {
       "href": "demo/maintenance.html",
       "text": "Maintenance"

source/templates/demo/macros/_gates.njk

@@ -0,0 +1,31 @@
+<!-- gates.macro -->
+{% macro list(name, url, image, links) %}
+  <article class="portal__entry">
+    <section>
+      <h2>
+        <a class="a_discreet" href="{{ url }}">{{ name }}</a>
+      </h2>
+      <a class="portal__link portal__link--{{ name | slug }}" href="{{ url }}">
+        <img src="{{ image.src }}" alt="{{ image.alt }}"/>
+      </a>
+      {% if links %}
+        <ul class="portal__list">
+          {% for link in links %}
+            <li>
+              <a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
+            </li>
+          {% endfor %}
+        </ul>
+      {% endif %}
+    </section>
+  </article>
+{% endmacro %}
+{% macro simple(name, url) %}
+  <article class="portal__entry">
+    <section>
+      <h2>
+        <a class="a_discreet" href="{{ url }}">{{ name }}</a>
+      </h2>
+    </section>
+  </article>
+{% endmacro %}