10 years later #1
9 changed files with 365 additions and 65 deletions
|
|
@ -1,4 +1,4 @@
|
|||
<!-- index.njk -->
|
||||
<!-- card.page -->
|
||||
{% set pageBase = "../" %}
|
||||
{% set pageId = "card" %}
|
||||
{% set pageClass = "html_card" %}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,6 @@
|
|||
|
||||
{% block main %}
|
||||
<div id="root" class="overflow">
|
||||
<h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
|
||||
<h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
37
source/screens/demo/portal.njk
Normal file
37
source/screens/demo/portal.njk
Normal file
|
|
@ -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 %}
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit b27dc31455b1dff17bbb1df4239a83981bafe748
|
||||
Subproject commit 5e667371e6aafdfc8bbafb56d4891f9d1cb795d8
|
||||
77
source/style/modules/card/_card_module.scss
Normal file
77
source/style/modules/card/_card_module.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
150
source/style/modules/portal/_portal_module.scss
Normal file
150
source/style/modules/portal/_portal_module.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
31
source/templates/demo/macros/_gates.njk
Normal file
31
source/templates/demo/macros/_gates.njk
Normal file
|
|
@ -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 %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue