interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

Compare commits

base: interaktionsweise:f2ff20ce735ba9a0040ae93bb3bf54f5284d2b1f
Branches Tags
interaktionsweise:development
interaktionsweise:main
interaktionsweise:testing-clean-css
interaktionsweise:testing-gulp
interaktionsweise:testing-npm-scripts
interaktionsweise:v3
interaktionsweise:v2
interaktionsweise:v1
..
compare: interaktionsweise:dd8b461034b038ac522c5f049e35704ce19c8fe8
Branches Tags
interaktionsweise:development
interaktionsweise:main
interaktionsweise:testing-clean-css
interaktionsweise:testing-gulp
interaktionsweise:testing-npm-scripts
interaktionsweise:v3
interaktionsweise:v2
interaktionsweise:v1

No commits in common. "f2ff20ce735ba9a0040ae93bb3bf54f5284d2b1f" and "dd8b461034b038ac522c5f049e35704ce19c8fe8" have entirely different histories.
f2ff20ce73 ... dd8b461034

18 changed files with 340 additions and 481 deletions
Download patch file Download diff file Expand all files Collapse all files

50
.eleventy.js
View file

@ -57,56 +57,6 @@ export default async function (eleventyConfig) {
return `<a id="${attrId}" class="${attrClass}" href="${target}">${text}</a>`; return `<a id="${attrId}" class="${attrClass}" href="${target}">${text}</a>`;
}); });
eleventyConfig.addPairedShortcode("brand", function (content, attrClass = 'brand', direction = 'first') {
const logo = `
<svg
width="100%"
height="100%"
viewBox="0 0 512 512"
preserveAspectRatio="xMidYMid meet">
<defs
id="defs1" />
<g
id="layer1">
<g
id="g2"
transform="matrix(0.984375,0,0,0.984375,4,4)"
style="stroke-width:1.01587">
<rect
style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:square;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect1"
width="512"
height="512"
x="0"
y="0" />
<circle
style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:square;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path1"
cx="256"
cy="256"
r="256" />
<path
style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:butt;stroke-linejoin:bevel;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2"
d="M 477.7025,128 256,512 34.297496,128 Z"
</g>
</g>
</svg>
`;
let output = '';
switch (direction) {
case 'first':
output = logo + `${content}`;
break;
case 'last':
output = `${content}` + logo;
break;
}
return `<div class="${attrClass}">` + output + `</div>`;
});
eleventyConfig.addPassthroughCopy({'source/art/images': 'art'}); eleventyConfig.addPassthroughCopy({'source/art/images': 'art'});
eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'}); eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'});

5
source/code/hippie/app.js
View file

@ -539,11 +539,6 @@ function mapRange(value, inMin, inMax, outMin, outMax, reverse = false, clamp =
return mapped; return mapped;
} }
// Source - https://stackoverflow.com/a/47480429
// Posted by Etienne Martin, modified by community. See post 'Timeline' for change history
// Retrieved 2026-03-08, License - CC BY-SA 4.0
const delay = ms => new Promise(res => setTimeout(res, ms));
// CONCEPTS // CONCEPTS
// NOTE: Benutzt private Zuweisungen // NOTE: Benutzt private Zuweisungen

28
source/code/intro.js
View file

@ -25,7 +25,7 @@ class UI {
msgNo: 'No agreement today.' msgNo: 'No agreement today.'
} }
}; };
this.intro = document.getElementById('init'); this.intro = document.getElementById('intro');
this.agreement = this.steps.agreement.element; this.agreement = this.steps.agreement.element;
this.hint = { this.hint = {
element: document.getElementById('hint'), element: document.getElementById('hint'),
@ -61,7 +61,7 @@ class UI {
} else { } else {
reject('No intro available.'); reject('No intro available.');
} }
}); })
} }
showHint() { showHint() {
@ -100,7 +100,7 @@ class UI {
} else { } else {
reject(); reject();
} }
}); })
} }
init() { init() {
@ -158,7 +158,7 @@ function showIntro() {
reject('No intro available.'); reject('No intro available.');
} }
}); })
} }
function showAgreement() { function showAgreement() {
@ -197,7 +197,7 @@ function showAgreement() {
resolve(steps.agreement.msgOut); resolve(steps.agreement.msgOut);
}); });
} }
}); })
} }
function showIdle() { function showIdle() {
@ -212,24 +212,16 @@ function showIdle() {
el.classList.replace('op_hide', 'op_show'); el.classList.replace('op_hide', 'op_show');
el.style.pointerEvents = ''; el.style.pointerEvents = '';
el.addEventListener('contextmenu', (event) => { el.addEventListener('click', idleStart, false);
event.preventDefault();
}); resolve('Idle.');
el.addEventListener('click', (event) => {
if (checkButtonAndTarget(event, event.target)) {
console.log('OK go', event.target);
resolve('Idle fin.');
} else {
event.preventDefault();
}
}, false);
} else { } else {
document.removeEventListener('mouseleave', idleStart); document.removeEventListener('mouseleave', idleStart);
document.removeEventListener('mouseenter', idleStop); document.removeEventListener('mouseenter', idleStop);
reject(); reject();
} }
}); })
} }
function loadCore() { function loadCore() {
@ -314,5 +306,5 @@ function stepHandler(e) {
resolve(msg); resolve(msg);
}); });
}); })
} }

4
source/screens/demo/components.liquid
View file

@ -151,8 +151,8 @@ tags:
<li>Mehr Abstand und</li> <li>Mehr Abstand und</li>
<li>mit Unterstrichen.</li> <li>mit Unterstrichen.</li>
</ul> </ul>
<pre class="pre_code"><code>ul.link>(li>a)*2</code></pre> <pre class="pre_code"><code>ul.list_link>(li>a)*2</code></pre>
<ul class="link"> <ul class="list_link">
<li> <li>
<a href="">Mit</a> <a href="">Mit</a>
</li> </li>

25
source/screens/demo/examples/game.liquid Normal file
View file

@ -0,0 +1,25 @@
---
title: Game - TFW
tags:
- demoExample
- gameExample
---
{% assign bodyClass = 'body_game' -%}
{% layout 'hippie/simple.liquid' %}
{% block body %}
<div class="sec_main_center">
<nav role="doc-toc">
<hgroup>
<h1>{{ title }}</h1>
<p>Additional name</p>
</hgroup>
<ul class="list_link">
<li><a href="#new">Neues Spiel</a></li>
<li><a href="#continue">Spiel fortsetzen</a></li>
<li><a href="#options">Einstellungen</a></li>
<li><a href="#quit">Spiel beenden</a></li>
</ul>
</nav>
</div>
{% endblock %}

24
source/screens/demo/examples/game/index.liquid
View file

@ -1,24 +0,0 @@
---
title: Game
tags:
- demoExample
- index
---
{% layout 'hippie/simple.liquid' %}
{% block title %}{{ title }}{% endblock %}
{% block body %}
<div class="sec_main_center">
<nav role="doc-toc">
<h1>{{ title }}</h1>
<ul class="link">
{%- for game in collections.game -%}
<li>
<a href="{{ game.page.url }}">{{ game.data.title }}</a>
</li>
{%- endfor -%}
</ul>
</nav>
</div>
{% endblock %}

138
source/screens/demo/examples/game/intro.liquid
View file

@ -1,138 +0,0 @@
---
title: Intro
tags:
- game
---
{% assign bodyClass = 'body_intro' -%}
{% layout 'hippie/app.liquid' %}
{% block body %}
<div id="loader" class="step op_show">
<div id="bar">
<div id="spinner">
<span>I</span>
</div>
<div id="wrap">
<div id="progress"></div>
</div>
<div id="status">0%</div>
</div>
</div>
<div id="init" class="step op_hide">
<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
<p>Hold
<kbd>space</kbd>
to skip.</p>
</div>
{% brand 'brand' %}
<h1>Marke</h1>
{% endbrand %}
<p>Powered by</p>
<ul class="tech-stack">
<li>Vendor</li>
<li>IDE</li>
<li>Engine</li>
</ul>
</div>
<div id="agreement" class="step op_hide">
<h1>Agreement</h1>
<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
</div>
<div id="idle" class="step op_hide">
<div class="mouse-overlay"></div>
<div class="hello">Hello World!</div>
<p class="hello">Only left mouse click or any key</p>
</div>
{% endblock %}
{%- block script %}
{{ block.super -}}
<script src="/js/intro.js"></script>
<script>
//let intro = new Intro('Intro');
//intro.init();
//const ui = new UI();
//ui
// .init()
// .then(() => ui.showIntro())
// .then(() => ui.showHint())
// .then(() => ui.showIdle())
// .catch((error) => console.error(error));
let introDelay = 6;
let hintDelay = 1;
let cycleDelay = 2;
let isAgree = false;
const steps = {
agreement: {
element: document.getElementById('agreement'),
msgIn: 'Agreement shown.',
msgOut: 'Agreement accepted.',
msgNo: 'No agreement today.'
}
};
const intro = document.getElementById('init');
const agreement = steps.agreement.element;
const hint = {
element: document.getElementById('hint'),
delay: hintDelay * 1000,
show() {
if (typeof this.timeoutId === 'number') {
this.cancel();
}
this
.element
.classList
.remove('di_none');
this.timeoutId = setTimeout(() => {
this.dismiss();
}, this.delay);
},
dismiss() {
this
.element
.classList
.add('di_none');
this.timeoutId = undefined;
},
cancel() {
clearTimeout(this.timeoutId);
}
};
const loader = document.getElementById('loader');
const idle = {
element: document.getElementById('idle'),
delay: cycleDelay * 1000,
position: 0,
cycle() {
if (typeof this.intervalId === 'number') {
this.cancel();
}
this.intervalId = setInterval(() => {
this.position++;
if (this.position >= flagColors.length) {
this.position = 0;
}
this.element.style.backgroundColor = '#' + flagColors[this.position];
}, this.delay);
},
cancel() {
this.intervalId && clearInterval(this.intervalId);
}
}
init()
.then(loadCore)
.then(showIntro)
.catch(er => console.error(er))
.then(showAgreement)
.then(showIdle)
.catch(er => console.error(er))
.finally(() => {
console.debug('Init end.', isAgree);
// location = 'demo/examples/ui/new.html';
window.location.href = './menu.html';
});
</script>
{% endblock %}

29
source/screens/demo/examples/game/menu.liquid
View file

@ -1,29 +0,0 @@
---
title: Menu
tags:
- game
---
{% assign bodyClass = 'body_game' -%}
{% layout 'hippie/simple.liquid' %}
{% block body %}
<div class="sec_main_center">
<nav role="doc-toc">
<hgroup>
<h1>Game - TFW</h1>
<p>Additional name</p>
</hgroup>
<ul class="link">
<li><a href="#new">Neues Spiel</a></li>
<li><a href="#continue">Spiel fortsetzen</a></li>
<li><a href="#options">Einstellungen</a></li>
<li><a href="#quit">Spiel beenden</a></li>
</ul>
</nav>
</div>
<footer>
{% brand 'brand', 'last' %}
<p>Marke</p>
{% endbrand %}
</footer>
{% endblock %}

138
source/screens/demo/examples/intro.njk Normal file
View file

@ -0,0 +1,138 @@
---
title: Intro
tags:
- demoExample
---
{% set pageId = "init" %}
{% set bodyClass = "body_intro" %}
{% extends "hippie/_app_frame.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %}
{% block body %}
<div id="loader" class="step op_show">
<div id="bar">
<div id="spinner">
<span>I</span>
</div>
<div id="wrap">
<div id="progress"></div>
</div>
<div id="status">0%</div>
</div>
</div>
<div id="intro" class="step op_hide">
<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
<p>Hold
<kbd>space</kbd>
to skip.</p>
</div>
{{ ph.brand('brand') }}
<p>Powered by</p>
<ul class="tech-stack">
<li>Vendor</li>
<li>IDE</li>
<li>Engine</li>
</ul>
</div>
<div id="agreement" class="step op_hide">
<h1>Agreement</h1>
<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
</div>
<div id="idle" class="step op_hide">
<div class="mouse-overlay"></div>
<div class="hello">Hello World!</div>
<p class="hello">Only left mouse click or any key</p>
</div>
{% endblock %}
{%- block script %}
{{ super() }}
<script src="{{ pageBase }}js/intro.js"></script>
<script>
//let intro = new Intro('Intro');
//intro.init();
//const ui = new UI();
//ui
// .init()
// .then(() => ui.showIntro())
// .then(() => ui.showHint())
// .then(() => ui.showIdle())
// .catch((error) => console.error(error));
let introDelay = 6;
let hintDelay = 1;
let cycleDelay = 2;
let isAgree = false;
const steps = {
agreement: {
element: document.getElementById('agreement'),
msgIn: 'Agreement shown.',
msgOut: 'Agreement accepted.',
msgNo: 'No agreement today.'
}
};
const intro = document.getElementById('intro');
const agreement = steps.agreement.element;
const hint = {
element: document.getElementById('hint'),
delay: hintDelay * 1000,
show() {
if (typeof this.timeoutId === 'number') {
this.cancel();
}
this
.element
.classList
.remove('di_none');
this.timeoutId = setTimeout(() => {
this.dismiss();
}, this.delay);
},
dismiss() {
this
.element
.classList
.add('di_none');
this.timeoutId = undefined;
},
cancel() {
clearTimeout(this.timeoutId);
}
};
const loader = document.getElementById('loader');
const idle = {
element: document.getElementById('idle'),
delay: cycleDelay * 1000,
position: 0,
cycle() {
if (typeof this.intervalId === 'number') {
this.cancel();
}
this.intervalId = setInterval(() => {
this.position++;
if (this.position >= flagColors.length) {
this.position = 0;
}
this.element.style.backgroundColor = '#' + flagColors[this.position];
}, this.delay);
},
cancel() {
this.intervalId && clearInterval(this.intervalId);
}
}
init()
.then(loadCore)
.then(showIntro)
.catch(er => console.error(er))
.then(showAgreement)
.then(showIdle)
.catch(er => console.error(er))
.finally(() => {
console.debug('Init end.', isAgree);
// location = 'demo/examples/ui/new.html';
});
</script>
{% endblock %}

2
source/screens/demo/examples/ui/index.liquid
View file

@ -12,7 +12,7 @@ tags:
<div class="sec_main_center"> <div class="sec_main_center">
<nav role="doc-toc"> <nav role="doc-toc">
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
<ul class="link"> <ul class="list_link">
{%- for ui in collections.ui -%} {%- for ui in collections.ui -%}
<li> <li>
<a href="{{ ui.page.url }}">{{ ui.data.title }}</a> <a href="{{ ui.page.url }}">{{ ui.data.title }}</a>

12
source/screens/demo/index.liquid
View file

@ -34,7 +34,7 @@ tags:
<h3>Overview</h3> <h3>Overview</h3>
</div> </div>
<nav> <nav>
<ul class="block link"> <ul class="list_link">
{% for link in collections.demoIndex %} {% for link in collections.demoIndex %}
<li> <li>
<a href="{{ link.page.url }}">{{ link.data.title }}</a> <a href="{{ link.page.url }}">{{ link.data.title }}</a>
@ -42,10 +42,8 @@ tags:
{% endfor %} {% endfor %}
</ul> </ul>
</nav> </nav>
<div class="responsive">
<section>
<h3>Page</h3> <h3>Page</h3>
<ul class="block link"> <ul class="list_link">
{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %} {% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
{% for link in pagesByTitle %} {% for link in pagesByTitle %}
@ -54,18 +52,14 @@ tags:
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</section>
<section>
<h3>Example</h3> <h3>Example</h3>
<ul class="block link"> <ul class="list_link">
{% for link in collections.demoExample %} {% for link in collections.demoExample %}
<li> <li>
<a href="{{ link.page.url }}">{{ link.data.title }}</a> <a href="{{ link.page.url }}">{{ link.data.title }}</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</section>
</div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}

4
source/screens/demo/layouts.liquid
View file

@ -231,9 +231,9 @@ tags:
<pre class="pre_code"><code>hr.dotted.space_even_fourth</code></pre> <pre class="pre_code"><code>hr.dotted.space_even_fourth</code></pre>
<hr class="dotted space_even_fourth"> <hr class="dotted space_even_fourth">
<h3>ul</h3> <h3>ul</h3>
<pre class="pre_code"><code>nav>ul.link>(li>a)+li>a>img+span</code></pre> <pre class="pre_code"><code>nav>ul.list_link>(li>a)+li>a>img+span</code></pre>
<nav> <nav>
<ul class="link"> <ul class="list_link">
<li>{% link hippie.placeholders.mail, '📧 name@domain.tld' %}</li> <li>{% link hippie.placeholders.mail, '📧 name@domain.tld' %}</li>
<li> <li>
<a href=""><img src="/art/bullet.gif" alt="">{% text hippie.placeholders.name %}</a> <a href=""><img src="/art/bullet.gif" alt="">{% text hippie.placeholders.name %}</a>

2
source/screens/demo/examples/hello.md → source/screens/demo/pages/hello.md
View file

@ -1,8 +1,6 @@
--- ---
title: "Hello World" title: "Hello World"
layout: hippie/world.liquid layout: hippie/world.liquid
tags:
- demoExample
--- ---
# {{ title }} # {{ title }}

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit b4c56320060548dacde62639876c6aee72b297ea Subproject commit ddedf3bbf2d6580dfeae297367fd673abaa11a96

24
source/style/modules/_game.scss
View file

@ -1,27 +1,3 @@
@use "../hippie-style/hippie";
.body_game { .body_game {
@extend .h_full_view;
background-color: hotpink; background-color: hotpink;
footer {
@extend .pos_abs;
@extend .pin_bottom;
@extend .width_full;
.brand {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-end;
gap: hippie.$space_half hippie.$space_basic;
margin: hippie.$space_basic hippie.$space_double;
& > svg {
height: 32px;
width: 32px;
}
}
}
} }

15
source/style/modules/demo/_demo_module.scss
View file

@ -281,19 +281,10 @@
.hello { .hello {
flex: 0 1 auto; flex: 0 1 auto;
width: 80%; width: 80%;
}
.responsive { ul {
@include hippie.forTabletPortraitUp { padding: 1em 5em;
display: flex; background-color: hippie.$color_darker;
flex-flow: row wrap;
align-items: stretch;
justify-content: space-between;
gap: hippie.$space_half hippie.$space_basic;
& > * {
flex: auto;
}
} }
} }
} }

2
source/style/modules/portal/_portal_module.scss
View file

@ -129,7 +129,7 @@ $portal_icon_size: 64px;
} }
.portal__list { .portal__list {
@extend .link; @extend .list_link;
display: none; display: none;
position: relative; position: relative;

91
source/style/ui.scss
View file

@ -33,38 +33,39 @@ $space_gui_half: hippie.$space_half;
.body_intro { .body_intro {
background-color: black; background-color: black;
}
.step { .step {
@extend %full_parent; @extend %full_parent;
} }
#loader { #loader {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: white; background-color: white;
} }
#bar { #bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 50%; width: 50%;
} }
#wrap { #wrap {
flex: 1; flex: 1;
background-color: hippie.$color_back_basic; background-color: hippie.$color_back_basic;
} }
#progress { #progress {
width: 0; width: 0;
height: 100%; height: 100%;
background-color: black; background-color: black;
} }
#status, #status,
#spinner { #spinner {
@extend %basic; @extend %basic;
display: flex; display: flex;
@ -76,15 +77,15 @@ $space_gui_half: hippie.$space_half;
padding-block: calc($space_gui_half - 1px) $space_gui_half; padding-block: calc($space_gui_half - 1px) $space_gui_half;
line-height: hippie.$line_basic; line-height: hippie.$line_basic;
text-align: center; text-align: center;
} }
#status { #status {
width: 4em; width: 4em;
background-color: black; background-color: black;
color: white; color: white;
} }
#spinner { #spinner {
width: 2.5em; width: 2.5em;
background-color: hippie.$color_back_basic; background-color: hippie.$color_back_basic;
color: black; color: black;
@ -92,9 +93,9 @@ $space_gui_half: hippie.$space_half;
span { span {
animation: rotate 1s linear infinite; animation: rotate 1s linear infinite;
} }
} }
@keyframes rotate { @keyframes rotate {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
@ -102,9 +103,9 @@ $space_gui_half: hippie.$space_half;
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
#init { #intro {
z-index: map.get(hippie.$z-indexes, "content-top"); z-index: map.get(hippie.$z-indexes, "content-top");
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@ -118,20 +119,11 @@ $space_gui_half: hippie.$space_half;
li { li {
color: white; color: white;
} }
} }
.brand { .brand {
text-align: center; text-align: center;
svg {
height: 128px;
width: 128px;
rect, circle, path {
stroke: white !important;
}
}
img { img {
display: inline-block; display: inline-block;
width: 128px; width: 128px;
@ -139,13 +131,13 @@ $space_gui_half: hippie.$space_half;
background-color: white; background-color: white;
} }
* + h1 { *+h1 {
margin-top: hippie.$space_small; margin-top: hippie.$space_small;
margin-bottom: hippie.$space_large; margin-bottom: hippie.$space_large;
} }
} }
.tech-stack { .tech-stack {
display: flex; display: flex;
padding-left: 0; padding-left: 0;
@ -153,17 +145,17 @@ $space_gui_half: hippie.$space_half;
list-style: none; list-style: none;
padding-inline: hippie.$space_double; padding-inline: hippie.$space_double;
} }
} }
#agreement, #agreement,
#idle { #idle {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100vh; height: 100vh;
} }
#agreement { #agreement {
flex-direction: column; flex-direction: column;
background-color: map.get(hippie.$color_palette, bravo); background-color: map.get(hippie.$color_palette, bravo);
user-select: none; user-select: none;
@ -172,24 +164,16 @@ $space_gui_half: hippie.$space_half;
margin-top: 0; margin-top: 0;
color: hippie.$color_brightest; color: hippie.$color_brightest;
} }
} }
#idle { #idle {
background-color: hippie.$color_back_basic; background-color: hippie.$color_back_basic;
transition: background-color 4s; transition: background-color 4s;
&:hover > .mouse-overlay { &:hover>.mouse-overlay {
background-color: transparent !important; background-color: transparent !important;
transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important; transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
} }
.hello {
flex: 0 1 auto;
padding: 1em 2em;
background-color: rgba(hippie.$color_bright, .5);
font-family: hippie.$family_text_mono;
}
}
} }
.toast { .toast {
@ -207,3 +191,10 @@ $space_gui_half: hippie.$space_half;
color: hippie.$color_back_io; color: hippie.$color_back_io;
} }
} }
.hello {
flex: 0 1 auto;
padding: 1em 2em;
background-color: rgba(hippie.$color_bright, .5);
font-family: hippie.$family_text_mono;
}