diff --git a/source/screens/demo/card.njk b/source/screens/demo/card.njk
index ff70bfc..28ca934 100644
--- a/source/screens/demo/card.njk
+++ b/source/screens/demo/card.njk
@@ -1,4 +1,4 @@
-
+
{% set pageBase = "../" %}
{% set pageId = "card" %}
{% set pageClass = "html_card" %}
diff --git a/source/screens/demo/maintenance.njk b/source/screens/demo/maintenance.njk
index b4714b1..d5914ed 100644
--- a/source/screens/demo/maintenance.njk
+++ b/source/screens/demo/maintenance.njk
@@ -13,6 +13,6 @@
{% block main %}
-
HIPPIE
+ HIPPIE
{% endblock %}
diff --git a/source/screens/demo/portal.njk b/source/screens/demo/portal.njk
new file mode 100644
index 0000000..c6e7b45
--- /dev/null
+++ b/source/screens/demo/portal.njk
@@ -0,0 +1,37 @@
+
+{% 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 %}
+
+ {{ 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') }}
+
+{% endblock %}
\ No newline at end of file
diff --git a/source/style/demo.scss b/source/style/demo.scss
index 7973df3..e46a622 100644
--- a/source/style/demo.scss
+++ b/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";
diff --git a/source/style/hippie-style b/source/style/hippie-style
index b27dc31..5e66737 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit b27dc31455b1dff17bbb1df4239a83981bafe748
+Subproject commit 5e667371e6aafdfc8bbafb56d4891f9d1cb795d8
diff --git a/source/style/modules/card/_card_module.scss b/source/style/modules/card/_card_module.scss
new file mode 100644
index 0000000..36b7424
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+}
diff --git a/source/style/modules/portal/_portal_module.scss b/source/style/modules/portal/_portal_module.scss
new file mode 100644
index 0000000..8cb116f
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+}
diff --git a/source/templates/demo/data.json b/source/templates/demo/data.json
index f19eac5..a41c8b2 100644
--- a/source/templates/demo/data.json
+++ b/source/templates/demo/data.json
@@ -1,62 +1,66 @@
{
- "demoadditionallinks": [
- {
- "href": "demo.html",
- "text": "Index"
- },
- {
- "href": "demo/intro.html",
- "text": "Intro"
- },
- {
- "href": "demo/elements.html",
- "text": "Elements"
- },
- {
- "href": "demo/examples.html",
- "text": "Examples"
- }
- ],
- "demolinks": [
- {
- "href": "demo/blank.html",
- "text": "Blank"
- },
- {
- "href": "demo/card.html",
- "text": "Card"
- },
- {
- "href": "demo/maintenance.html",
- "text": "Maintenance"
- },
- {
- "href": "demo/error/304.html",
- "text": "304"
- },
- {
- "href": "demo/error/400.html",
- "text": "400"
- },
- {
- "href": "demo/error/401.html",
- "text": "401"
- },
- {
- "href": "demo/error/403.html",
- "text": "403"
- },
- {
- "href": "demo/error/404.html",
- "text": "404"
- },
- {
- "href": "demo/error/408.html",
- "text": "408"
- },
- {
- "href": "demo/error/500.html",
- "text": "500"
- }
- ]
-}
+ "demoadditionallinks": [
+ {
+ "href": "demo.html",
+ "text": "Index"
+ },
+ {
+ "href": "demo/intro.html",
+ "text": "Intro"
+ },
+ {
+ "href": "demo/elements.html",
+ "text": "Elements"
+ },
+ {
+ "href": "demo/examples.html",
+ "text": "Examples"
+ }
+ ],
+ "demolinks": [
+ {
+ "href": "demo/blank.html",
+ "text": "Blank"
+ },
+ {
+ "href": "demo/card.html",
+ "text": "Card"
+ },
+ {
+ "href": "demo/portal.html",
+ "text": "Portal"
+ },
+ {
+ "href": "demo/maintenance.html",
+ "text": "Maintenance"
+ },
+ {
+ "href": "demo/error/304.html",
+ "text": "304"
+ },
+ {
+ "href": "demo/error/400.html",
+ "text": "400"
+ },
+ {
+ "href": "demo/error/401.html",
+ "text": "401"
+ },
+ {
+ "href": "demo/error/403.html",
+ "text": "403"
+ },
+ {
+ "href": "demo/error/404.html",
+ "text": "404"
+ },
+ {
+ "href": "demo/error/408.html",
+ "text": "408"
+ },
+ {
+ "href": "demo/error/500.html",
+ "text": "500"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/source/templates/demo/macros/_gates.njk b/source/templates/demo/macros/_gates.njk
new file mode 100644
index 0000000..f273edb
--- /dev/null
+++ b/source/templates/demo/macros/_gates.njk
@@ -0,0 +1,31 @@
+
+{% macro list(name, url, image, links) %}
+
+
+
+
+ 
+
+ {% if links %}
+
+ {% endif %}
+
+
+{% endmacro %}
+{% macro simple(name, url) %}
+
+
+
+{% endmacro %}
\ No newline at end of file
{{ link.name }} +
+ {% endfor %}
+