From f7dd7c93e3a06bc430fcf4e12f4be3d3b1aa29c6 Mon Sep 17 00:00:00 2001 From: Stephan Hagedorn Date: Sun, 14 Mar 2021 21:47:11 +0100 Subject: [PATCH] Added card and portal modules --- source/screens/demo/card.njk | 2 +- source/screens/demo/maintenance.njk | 2 +- source/screens/demo/portal.njk | 37 +++++ source/style/demo.scss | 3 +- source/style/hippie-style | 2 +- source/style/modules/card/_card_module.scss | 77 +++++++++ .../style/modules/portal/_portal_module.scss | 150 ++++++++++++++++++ source/templates/demo/data.json | 126 ++++++++------- source/templates/demo/macros/_gates.njk | 31 ++++ 9 files changed, 365 insertions(+), 65 deletions(-) create mode 100644 source/screens/demo/portal.njk create mode 100644 source/style/modules/card/_card_module.scss create mode 100644 source/style/modules/portal/_portal_module.scss create mode 100644 source/templates/demo/macros/_gates.njk 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) %} +
+
+

+ {{ name }} +

+ + {{ image.alt }} + + {% if links %} + + {% endif %} +
+
+{% endmacro %} +{% macro simple(name, url) %} +
+
+

+ {{ name }} +

+
+
+{% endmacro %} \ No newline at end of file