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

Merge pull request 'Replace Nunjucks with Liquid' (#2) from development into main

Browse source 
Reviewed-on: #2
This commit is contained in:
sthag 2026-03-15 09:40:21 +01:00
commit 18e7823063
71 changed files with 3147 additions and 3515 deletions
Download patch file Download diff file Expand all files Collapse all files

84
.eleventy.js
View file

@ -1,10 +1,23 @@
/* jshint strict: false */
import fs from 'fs/promises';
import {HtmlBasePlugin} from "@11ty/eleventy";
import pluginWebc from "@11ty/eleventy-plugin-webc";
async function hasFiles(dirPath) {
try {
const entries = await fs.readdir(dirPath, {withFileTypes: true});
return entries.some(entry => entry.isFile());
} catch (err) {
console.error('Error reading directory:', err);
return false;
}
}
// noinspection JSUnusedGlobalSymbols
export default async function (eleventyConfig) {
eleventyConfig.addPlugin(HtmlBasePlugin);
eleventyConfig.addPlugin(pluginWebc);
eleventyConfig.setLiquidOptions({
// greedy: false,
@ -14,20 +27,13 @@ export default async function (eleventyConfig) {
// trimTagRight : true,
});
eleventyConfig.setNunjucksEnvironmentOptions({
// throwOnUndefined: true,
trimBlocks: true
});
eleventyConfig.addGlobalData('permalink', () => {
return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
});
let demoMode = false;
let pageBase = demoMode ? './demo/' : './';
const demoPath = await hasFiles('source/screens') ? '/demo/' : '/';
eleventyConfig.addGlobalData('hippie', {
pageBase: pageBase,
brand: 'hippie',
titlePrefix: '',
titlePostfix: ' - HIPPIE',
@ -35,8 +41,10 @@ export default async function (eleventyConfig) {
name: 'Vorname Nachname',
address: 'Straße Nr., PLZ Ort',
phone: '+49 (0)101 1337 48',
mail: 'name@domain.tld'
mail: 'name@domain.tld',
domain: 'https://domain.tld'
},
demoPath: demoPath,
debugMode: true,
legacyMode: false
});
@ -46,7 +54,7 @@ export default async function (eleventyConfig) {
});
eleventyConfig.addShortcode('link', function (target, text, attrId, attrClass) {
if (text === '') {
if (!text || text === '') {
text = target;
}
@ -57,12 +65,59 @@ export default async function (eleventyConfig) {
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/favicons/**/*.+(ico|png|svg)': '.'});
eleventyConfig.addPassthroughCopy({'source/code/**/*.js': 'js'});
eleventyConfig.addPassthroughCopy({'source/data/**/*.json': 'json'});
eleventyConfig.addPassthroughCopy('vendor');
@ -82,7 +137,6 @@ export default async function (eleventyConfig) {
includes: '../templates',
data: '../data'
},
templateFormats: ['html', 'liquid', 'njk', 'md']
// pathPrefix: './demo/'
templateFormats: ['html', 'liquid', 'md', 'njk']
};
}

47
README.md
View file

@ -5,14 +5,19 @@ Hippie interweaves preeminent personal interface elements
> WORK IN PROGRESS (it is not ready to be used)
This is a [Node.js](https://nodejs.org/) based generator for static HTML documents.
It uses the [Eleventy](https://www.11ty.dev/) project to fiddle everything together.
It uses the [gulp](https://gulpjs.com/) module to fiddle everything together. Styling is powered by the CSS extension language [SASS](https://sass-lang.com/). The HTML pages itself are made with the templating engine [Nunjucks](https://mozilla.github.io/nunjucks/).
Styling is powered by the CSS extension language [SASS](https://sass-lang.com/). The HTML pages are written with
templating engines or directly as HTML files. Mainly [Liquid](https://liquidjs.com/) is used,
but [Markdown](https://daringfireball.net/projects/markdown/) and [Nunjucks](https://mozilla.github.io/nunjucks/) are
also options.
## Installing
Clone the repository `https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git` to a folder to create your build environment.
Clone the repository `https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git` to a folder to create your
build environment.
Change to the newly created folder. By default this would be *hippie*.
Change to the newly created folder. By default, this would be *hippie*.
Run the command `git submodule update --init`.
This will load the submodules.
@ -22,21 +27,26 @@ This will install all dependencies into the folder *node_modules*.
## Usage
The command `gulp --tasks` will give you an overview of possible actions.
Different *scripts* are provided through `package.json`:
Run the command `gulp` for a live development environment.
This will create a folder *build* with the resulting files.
Also the source files will be watched for changes which are reflected live at [localhost:3000](http://localhost:3000) and the *build* directory.
Run the command `npm run serve` for a live development environment.
This will create a folder `/build` with the resulting files.
Also, the source files will be watched for changes which are reflected live at [localhost:8080](http://localhost:8080)
and the `/build` directory.
`gulp build` will create the resulting *build* directory ready for deployment.
`npm run build` will just create the resulting `/build` directory and `npm run deploy` will use a path prefix (*hippie*
by default) and create the results in `/deploy` ready for deployment.
HIPPIE is intended to be used as a basis when creating HTML sites. It can be used without changes. It can be modified to have a different look and feel. It also can be used to build a new basis on top of it.
HIPPIE is intended to be used as a basis when creating HTML sites. It can be used without changes. It can be modified to
have a different look and feel. It also can be used to build a new basis on top of it.
## Content
### Intro
There is an *intro* page which explains the main elements and their intended usage. It uses the default styling methods and also shows variations. The page is written in german language. However it has a semantic structure and the text itself can also just be seen as example content.
There is an *intro* page which explains the main elements and their intended usage. It uses the default styling methods
and also shows variations. The page is written in german language. However, it has a semantic structure and the text
itself can also just be seen as example content.
### Sass (CSS)
@ -44,7 +54,8 @@ Everything has its default style.
CSS classes follow a naming scheme of `<object>_<description>`.
- *Object* usually is the name of the HTML element. If it is not a element directly it is the thing which receives the styling
- *Object* usually is the name of the HTML element. If it is not an element directly it is the thing which receives the
styling
- *Description* is a name of the style e.g. what it does, how it looks
### JavaScript (JS)
@ -65,19 +76,23 @@ If the ID is for an interactive element the first part is an abbreviation of the
## Versioning
This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://quelltext.interaktionsweise.de/interaktionsweise/hippie/tags).
This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see
the [tags on this repository](https://quelltext.interaktionsweise.de/interaktionsweise/hippie/tags).
## Contribution
For contribution please use the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) specification.
For contribution please use the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary)
specification.
The commit *type* can include the following:
- feat – A new feature is introduced with the changes
- fix – A bug fix has occurred
- chore – Changes that do not relate to a fix or feature and don't modify src or test files (for example updating dependencies)
- chore – Changes that do not relate to a fix or feature and don't modify src or test files (for example updating
dependencies)
- refactor – Refactored code that neither fixes a bug nor adds a feature
- docs – Updates to documentation such as a the README or other markdown files
- style – Changes that do not affect the meaning of the code, likely related to code formatting such as white-space, missing semi-colons, and so on.
- docs – Updates to documentation such as the README or other Markdown files
- style – Changes that do not affect the meaning of the code, likely related to code formatting such as white-space,
missing semicolons, and so on.
- test – Including new or correcting previous tests
- perf – Performance improvements
- ci – Continuous integration related

4383
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
package.json
View file

@ -38,7 +38,7 @@
},
"dependencies": {
"@11ty/eleventy": "^3.1.2",
"@11ty/eleventy-upgrade-help": "^3.0.2",
"@11ty/eleventy-plugin-webc": "^0.11.2",
"bootstrap-icons": "^1.13.1",
"hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
"jquery": "^3.7.1",

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

@ -341,6 +341,7 @@ class DateDisplay {
}
}
// TODO: Kompatibilität für Zeiger
function checkButtonAndTarget(event, element, button = 0) {
return (
event.button === button &&
@ -539,6 +540,11 @@ function mapRange(value, inMin, inMax, outMin, outMax, reverse = false, clamp =
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
// NOTE: Benutzt private Zuweisungen

28
source/code/intro.js
View file

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

12
source/code/windows.js
View file

@ -21,9 +21,9 @@ class HippieTaskBar {
// TODO: Ereignisse besser delegieren
init() {
this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
document.addEventListener('mousemove', this.onMouseMove.bind(this));
document.addEventListener('mouseup', this.onMouseUp.bind(this));
this.element.addEventListener('pointerdown', this.onDown.bind(this));
document.addEventListener('pointermove', this.onMove.bind(this));
document.addEventListener('pointerup', this.onUp.bind(this));
const dateElement = document.createElement('span');
@ -34,7 +34,7 @@ class HippieTaskBar {
this.setOptions(this.options.position);
}
onMouseDown(event) {
onDown(event) {
if (checkButtonAndTarget(event, this.element, 0)) {
console.debug('Drag mode enabled');
@ -48,7 +48,7 @@ class HippieTaskBar {
event.preventDefault();
}
onMouseMove(event) {
onMove(event) {
if (this.isDragging) {
this.options.position = getClosestEdgeToMouse(event);
const borderRadius = '4px';
@ -116,7 +116,7 @@ class HippieTaskBar {
}
}
onMouseUp() {
onUp() {
if (event.target === this.placeholder) {
console.debug('Drag mode disabled');

1
source/screens/demo/basics.liquid
View file

@ -2,6 +2,7 @@
title: Basics
tags:
- demoIndex
order: 2
---
{% layout 'hippie/page.liquid' %}

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

@ -2,6 +2,7 @@
title: Components
tags:
- demoIndex
order: 3
---
{% layout 'hippie/page.liquid' %}
@ -151,8 +152,8 @@ tags:
<li>Mehr Abstand und</li>
<li>mit Unterstrichen.</li>
</ul>
<pre class="pre_code"><code>ul.list_link>(li>a)*2</code></pre>
<ul class="list_link">
<pre class="pre_code"><code>ul.link>(li>a)*2</code></pre>
<ul class="link">
<li>
<a href="">Mit</a>
</li>
@ -306,7 +307,7 @@ tags:
<input id="inpPass" type="password"/>
<span id="hintPass" style="visibility:hidden"><kbd>Shift</kbd> is pressed.</span>
<br>
<input id ="inpText" type="text"/>
<input id="inpText" type="text"/>
<span id="hintText"><kbd>CapsLock</kbd> is on.</span>
</form>
</div>

32
source/screens/demo/examples/blog.liquid Normal file
View file

@ -0,0 +1,32 @@
---
title: Blog
tags:
- demoExample
---
{% layout 'hippie/simple.liquid' %}
{% block body %}
<div class="sec_main_center">
<header class="header_txt">
<h1>Blog</h1>
</header>
<nav role="doc-toc">
<h2>Inhaltsverzeichnis</h2>
<ul>
{%- for blog in collections.blog -%}
<li>
<a href="{{ blog.page.url }}">{{ blog.data.title }}</a>
</li>
{%- endfor -%}
</ul>
</nav>
<hr class="double dotted">
{%- for post in collections.article -%}
<article>
{{ post.content }}
</article>
{%- endfor -%}
<hr/>
<address>{% text hippie.placeholders.name %}</address>
</div>
{% endblock %}

51
source/screens/demo/examples/blog.njk
View file

@ -1,51 +0,0 @@
---
title: Blog
tags:
- demoExample
---
{% set pageBase = "../" %}
{% set pageId = page.fileSlug %}
{% extends "demo/_default.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %}
{% import "hippie/macros/_song.njk" as song %}
{% block title %}{{ title }}
{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<!-- {{ page.fileSlug }}.page -->
<div class="sec_main_center">
<header class="header_txt">
<h1>Blog</h1>
</header>
<nav role="doc-toc">
<h2>Inhaltsverzeichnis</h2>
<ul>
{%- for song in collections.song -%}
<li>
<a href="{{ song.page.url }}">{{ song.data.title }}</a>
</li>
{%- endfor -%}
</ul>
</nav>
<h2>Vorwort</h2>
<p>Liederbuch für
<em>Name</em>.</p>
<p>Gibt es gebunden und hier
{{ ph.link() }}.<br/>
Bestellungen bitte an
{{ ph.name() }}
richten.</p>
<hr class="double dotted">
{%- for post in collections.article -%}
{{ post.content }}
{%- endfor -%}
<hr/>
<address>{{ ph.name() }}</address>
</div>
{% endblock %}

2
source/screens/demo/examples/blog/article.md
View file

@ -3,7 +3,7 @@ tags:
- blog
- article
title: "Artikel"
releaseDate: JJJJ
publishDate: JJJJ
description: Text
---
# Titel

69
source/screens/demo/examples/card.liquid Normal file
View file

@ -0,0 +1,69 @@
---
title: Card
tags:
- demoExample
---
{% assign pageClass = "html_card" %}
{% layout 'hippie/simple.liquid' %}
{% block body %}
<div class="card_bkg">
<div id="dither"></div>
{% render 'hippie/partials/placeholder-flag.liquid', type: '', id: 'flag' %}
{% comment %}<img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/>{% endcomment %}
</div>
<div class="card_box">
<main>
<p>Titel<br/>und Beschreibung</p>
<h1>{% text hippie.placeholders.name %}</h1>
<p>
{% link hippie.placeholders.mail, '', '', 'card_address' %}<br/>
{% link hippie.placeholders.domain, 'site.tld', '', 'decent' %}
&middot;
{% text hippie.placeholders.address, '', 'decent' %}</p>
</main>
</div>
{% endblock %}
{% block script %}
<script>
const flag = document.getElementById('flag');
let colors = new Array();
let iId = undefined;
let position = 0;
for (let i = 1; i <= flag.childElementCount; i++) {
colors.push(document.getElementById('triangle-' + i).getAttribute('fill'));
}
document
.querySelector('main')
.addEventListener('mouseenter', () => {
iId = setInterval(() => {
for (let i = 1; i <= colors.length; i++) {
position++;
if (position >= colors.length) {
position = 0;
}
document
.getElementById('triangle-' + i)
.setAttribute('fill', colors[position]);
}
position++;
if (position >= colors.length) {
position = 0;
}
}, 600);
});
document
.querySelector('main')
.addEventListener('mouseleave', () => {
iId && clearInterval(iId);
});
</script>
{% endblock %}

83
source/screens/demo/examples/card.njk
View file

@ -1,83 +0,0 @@
---
title: Card
tags:
- demoExample
---
{% set pageId = page.fileSlug %}
{% set pageClass = "html_card" %}
{% extends "demo/_default.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %}
{% block title %}{{ title }}
{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<!-- {{ page.fileSlug }}.page -->
<div class="card_bkg">
<div id="dither"></div>
{{ ph.flag('svg', '', 'flag', '') }}
{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
</div>
<div class="card_box">
<div id="js_content">
<p>Titel<br/>und Beschreibung</p>
<h1>{{ ph.name() }}</h1>
<p>
{{ ph.email('card_address') }}<br/>
{{ ph.link('decent', 'site.tld') }}
&middot;
{{ ph.address('decent') }}</p>
</div>
</div>
{% endblock %}
{% block script %}
<script>
const flag = document.getElementById("flag");
let colors = new Array();
let iId = undefined;
let position = 0;
for (let i = 1; i <= flag.childElementCount; i++) {
colors.push(document.getElementById("triangle-" + i).getAttribute("fill"));
}
// console.log(colors);
document
.getElementById('js_content')
.addEventListener('mouseenter', () => {
iId = setInterval(() => {
for (let i = 1; i <= colors.length; i++) {
position++;
if (position >= colors.length) {
position = 0;
}
document
.getElementById("triangle-" + i)
.setAttribute("fill", colors[position]);
}
position++;
if (position >= colors.length) {
position = 0;
}
}, 600);
});
document
.getElementById('js_content')
.addEventListener('mouseleave', () => {
iId && clearInterval(iId);
});
</script>
{% endblock %}

6
source/screens/demo/examples/clock.liquid
View file

@ -17,11 +17,13 @@ tags:
<main></main>
{% endblock %}
{% block script %}
{% block assets %}
<script src="/vendor/hippie-script.js"></script>
<script src="/js/globals.js"></script>
<script src="/js/app.js"></script>
{% endblock %}
{% block script %}
<script>
class HippieClock {
constructor(element, date = new Date(), options = {}) {
@ -44,7 +46,7 @@ tags:
#init() {
this.#createContext(['background', 'hands']);
this.createOverlay();
// this.createOverlay();
this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);

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

@ -1,25 +0,0 @@
---
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 Normal file
View file

@ -0,0 +1,24 @@
---
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 %}

141
source/screens/demo/examples/game/intro.liquid Normal file
View file

@ -0,0 +1,141 @@
---
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 assets %}
{{ block.super -}}
<script src="/js/intro.js"></script>
{% endblock %}
{%- block script %}
{{ block.super -}}
<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 Normal file
View file

@ -0,0 +1,29 @@
---
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 %}

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

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

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

@ -1,138 +0,0 @@
---
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 %}

29
source/screens/demo/examples/portal.liquid Normal file
View file

@ -0,0 +1,29 @@
---
title: Portal
tags:
- demoExample
image:
src: '/art/flag_websafe_128x80.gif'
alt: 'Flag of Interaktionsweise'
links:
- name: '1'
href: 'http://domain.tld'
img: '/art/bullet.gif'
- name: 'Zwei'
href: 'http://domain.tld'
img: '/art/bullet.gif'
---
{% assign bodyClass = "body_portal" %}
{% layout 'hippie/simple.liquid' %}
{% block body %}
<div class="portal">
{% render 'hippie/partials/gate-list',
name: 'Tor mit Symbol und Liste',
url: '../demo',
image: image,
links: links
%}
{% render 'hippie/partials/gate-simple', name: 'Tor', url: '../demo' %}
</div>
{% endblock %}

41
source/screens/demo/examples/portal.njk
View file

@ -1,41 +0,0 @@
---
title: Portal
tags:
- demoExample
---
{% set pageId = page.fileSlug %}
{% set bodyClass = "body_portal" %}
{% extends "demo/_default.njk" %}
{% import "hippie/macros/_gate.njk" as gate %}
{% block title %}{{ title }}
{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<!-- {{ page.fileSlug }}.page -->
<div class="portal">
{{ gate.list(
'Tor mit Symbol und Liste',
'../demo', {
src: '/art/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 %}

39
source/screens/demo/examples/songbook.liquid Normal file
View file

@ -0,0 +1,39 @@
---
title: Songbook
tags:
- demoExample
---
{% layout 'hippie/simple.liquid' %}
{% block body %}
<div class="sec_main_center">
<header class="header_txt">
<h1>Titel</h1>
<p>Jahr</p>
</header>
<nav role="doc-toc">
<h2>Inhaltsverzeichnis</h2>
<ul>
{%- for song in collections.song -%}
<li>
<a href="{{ song.page.url }}">{{ song.data.title }}</a>
</li>
{%- endfor -%}
</ul>
</nav>
<h2>Vorwort</h2>
<p>Liederbuch für
<em>Name</em>.</p>
<p>Gibt es gebunden und hier
{% link hippie.placeholders.domain %}.<br/>
Bestellungen bitte an
{% text hippie.placeholders.name %}
richten.</p>
<hr class="double dotted">
{%- for piece in collections.song -%}
{% render 'hippie/partials/song.liquid', index: forloop.index0, data: piece.data, content: piece.content %}
{%- endfor -%}
<hr/>
<address>{% text hippie.placeholders.name %}</address>
</div>
{% endblock %}

52
source/screens/demo/examples/songbook.njk
View file

@ -1,52 +0,0 @@
---
title: Songbook
tags:
- demoExample
---
{% set pageBase = "../" %}
{% set pageId = page.fileSlug %}
{% extends "demo/_default.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %}
{% import "hippie/macros/_song.njk" as song %}
{% block title %}{{ title }}
{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<!-- {{ page.fileSlug }}.page -->
<div class="sec_main_center">
<header class="header_txt">
<h1>Titel</h1>
<p>Jahr</p>
</header>
<nav role="doc-toc">
<h2>Inhaltsverzeichnis</h2>
<ul>
{%- for song in collections.song -%}
<li>
<a href="{{ song.page.url }}">{{ song.data.title }}</a>
</li>
{%- endfor -%}
</ul>
</nav>
<h2>Vorwort</h2>
<p>Liederbuch für
<em>Name</em>.</p>
<p>Gibt es gebunden und hier
{{ ph.link() }}.<br/>
Bestellungen bitte an
{{ ph.name() }}
richten.</p>
<hr class="double dotted">
{%- for piece in collections.song -%}
{{ song.simple(loop.index0, piece.data, piece.content) }}
{%- endfor -%}
<hr/>
<address>{{ ph.name() }}</address>
</div>
{% endblock %}

7
source/screens/demo/examples/ui/drag.liquid
View file

@ -21,9 +21,12 @@ tags:
</div>
{% endblock %}
{%- block script %}
<script src="/js/app.js"></script>
{% block assets %}
{{ block.super -}}
<script src="/js/drag.js"></script>
{% endblock %}
{%- block script %}
<script>
// Get the space element
const space = document.getElementById('space');

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

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

7
source/screens/demo/examples/ui/windows.liquid
View file

@ -49,10 +49,13 @@ tags:
</div>
{% endblock %}
{% block assets %}
{{ block.super -}}
<script src="/js/windows.js"></script>
{% endblock %}
{%- block script %}
{{ block.super -}}
<script src="/js/windows.js"></script>
<script>
console.log(HIPPIE.brand);
// Get the space element

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

@ -1,8 +1,6 @@
---
permalink: "/"
permalink: "{{ hippie.demoPath }}"
title: Index
tags:
- demoIndex
---
{% assign pageId = page.fileSlug -%}
{% assign pageClass = 'h_full_view' -%}
@ -34,32 +32,39 @@ tags:
<h3>Overview</h3>
</div>
<nav>
<ul class="list_link">
{% for link in collections.demoIndex %}
<ul class="block link">
{% assign indexByOrder = collections.demoIndex | sort: 'data.order' %}
{% for link in indexByOrder %}
<li>
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
<h3>Page</h3>
<ul class="list_link">
{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
{% for link in pagesByTitle %}
<li>
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
</li>
{% endfor %}
</ul>
<h3>Example</h3>
<ul class="list_link">
{% for link in collections.demoExample %}
<li>
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
</li>
{% endfor %}
</ul>
<div class="responsive">
<section>
<h3>Page</h3>
<ul class="block link">
{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
{% for link in pagesByTitle %}
<li>
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
</li>
{% endfor %}
</ul>
</section>
<section>
<h3>Example</h3>
<ul class="block link">
{% assign examplesByTitle = collections.demoExample | sort: 'data.title' %}
{% for link in examplesByTitle %}
<li>
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
</li>
{% endfor %}
</ul>
</section>
</div>
</div>
</div>
{% endblock %}

7
source/screens/demo/introduction.liquid
View file

@ -2,6 +2,7 @@
title: Introduction
tags:
- demoIndex
order: 1
---
{% layout 'hippie/page.liquid' %}
@ -28,13 +29,7 @@ tags:
{% block script %}
{{ block.super -}}
<script>
assetsLoaded = true;
logPerf('Assets loaded.', assetsLoaded);
// Page specific
// ------------------------------------------------------------------------------
composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
composeMail('.general', 'name', 'domain', 'tld', '', '')
logPerf('Application ready... not.');
</script>
{% endblock %}

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

@ -2,6 +2,7 @@
title: Layouts
tags:
- demoIndex
order: 4
---
{% layout 'hippie/page.liquid' %}
@ -14,7 +15,7 @@ tags:
<p>Die Elemente werden fortlaufend komplexer</p>
</header>
<article>
<h2>Bereiche (sections)</h2>
<h2 id="sections">Bereiche (sections)</h2>
<h3>section</h3>
<pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre>
<section class="overflow">
@ -168,46 +169,9 @@ tags:
</footer>
</div>
</div>
<h2>Interaktiv (interactive)</h2>
<h3>input</h3>
<div class="flex inline">
<input value="Undefiniert"/>
<input type="text" size="8" value="Text"/>
<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
<input type="button" value="Auswählen">
<input type="submit" value="Senden" disabled="disabled"/>
</div>
<h3>form</h3>
<form method="get">
<p>Show me a
<select name="F">
<option value="0">Plain list</option>
<option value="1" selected="selected">Fancy list</option>
<option value="2">Table list</option>
</select>
Sorted by
<select name="C">
<option value="N" selected="selected">Name</option>
<option value="M">Date Modified</option>
<option value="S">Size</option>
<option value="D">Description</option>
</select>
<select name="O">
<option value="A" selected="selected">Ascending</option>
<option value="D">Descending</option>
</select>
<select name="V">
<option value="0" selected="selected">in Normal order</option>
<option value="1">in Version order</option>
</select>
Matching
<input type="text" name="P" value="*"/>
<input type="submit" name="X" value="Go"/>
</p>
</form>
<h2>Gruppierung (grouping)</h2>
</article>
<article>
<h2 id="grouping">Gruppierung (grouping)</h2>
<h3>p</h3>
<pre class="pre_code"><code>p.txt_right+p.txt_center+p.txt_left</code></pre>
<p class="txt_right">Rechts</p>
@ -231,9 +195,9 @@ tags:
<pre class="pre_code"><code>hr.dotted.space_even_fourth</code></pre>
<hr class="dotted space_even_fourth">
<h3>ul</h3>
<pre class="pre_code"><code>nav>ul.list_link>(li>a)+li>a>img+span</code></pre>
<pre class="pre_code"><code>nav>ul.link>(li>a)+li>a>img+span</code></pre>
<nav>
<ul class="list_link">
<ul class="link">
<li>{% link hippie.placeholders.mail, '📧 name@domain.tld' %}</li>
<li>
<a href=""><img src="/art/bullet.gif" alt="">{% text hippie.placeholders.name %}</a>
@ -247,8 +211,15 @@ tags:
<p>Eingerückter Inhalt</p>
<hr/>
</div>
<h2>Tabellen</h2>
</article>
<article>
<h2>Eingebettet</h2>
<div class="demo__flag">
{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
</div>
</article>
<article>
<h2 id="tabularData">Tabellen (tabular data)</h2>
<pre class="pre_code"><code>table.link>thead>tr>th{&amp;nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.icon[rowspan="2"]>img[width=16 height=16]^+td.link>span{name}+a[target=_blank]{url}^+td[rowspan="2"]{yyy-mm-dd}^tr>td.text>div.shorten{beschreibung})*2</code></pre>
<table class="link js_pop">
<thead>
@ -289,23 +260,67 @@ tags:
</tr>
</tbody>
</table>
<h2>Eingebettet</h2>
<div class="demo__flag">
{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
</article>
<article>
<h2 id="forms">Formulare (forms)</h2>
<h3>form</h3>
<form method="get">
<p>Show me a
<select name="F">
<option value="0">Plain list</option>
<option value="1" selected="selected">Fancy list</option>
<option value="2">Table list</option>
</select>
Sorted by
<select name="C">
<option value="N" selected="selected">Name</option>
<option value="M">Date Modified</option>
<option value="S">Size</option>
<option value="D">Description</option>
</select>
<select name="O">
<option value="A" selected="selected">Ascending</option>
<option value="D">Descending</option>
</select>
<select name="V">
<option value="0" selected="selected">in Normal order</option>
<option value="1">in Version order</option>
</select>
Matching
<input type="text" name="P" value="*"/>
<input type="submit" name="X" value="Go"/>
</p>
</form>
<hr class="hidden">
<form action="" name="login">
<div>
<p>Anmeldung</p>
<input placeholder="Benutzername" name="username" type="text" autocomplete="username">
<input placeholder="Passwort" name="password" type="password" autocomplete="current-password">
</div>
</form>
<h3>input</h3>
<div class="flex inline">
<input value="Undefiniert"/>
<input type="text" size="8" value="Text"/>
<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
<input type="button" value="Auswählen">
<input type="submit" value="Senden" disabled="disabled"/>
</div>
</article>
<article>
<h2 id="interactive">Interaktiv (interactive)</h2>
</article>
</section>
{% endblock %}
{% block assets %}
{{ block.super -}}
<script src="/vendor/jq-sticky-anything.min.js"></script>
{% endblock %}
{% block script %}
{{ block.super -}}
<script src="/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script>
assetsLoaded = true;
logPerf('Assets loaded.', assetsLoaded);
// Page specific
// ------------------------------------------------------------------------------
$(document).ready(function () {
// jq-sticky-anything
$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});

1
source/style/demo.scss
View file

@ -16,4 +16,5 @@
@use "modules/start";
@use "modules/clock";
@use "modules/game";
@use "modules/login";
// @use "modules/YOUR-MODULE/YOUR-FILES";

2
source/style/hippie-style

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

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

@ -1,3 +1,27 @@
@use "../hippie-style/hippie";
.body_game {
@extend .h_full_view;
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;
}
}
}
}

28
source/style/modules/_login.scss Normal file
View file

@ -0,0 +1,28 @@
@use "sass:color";
@use "../hippie-style/hippie";
form[name="login"] {
display: flex;
align-items: center;
justify-content: center;
& > div {
padding: hippie.$space_double;
background-color: color.adjust(hippie.basic_color(echo), $alpha: -0.4);
p {
margin-top: 0;
color: hippie.$color_brightest;
}
& > input {
display: block;
width: 100%;
margin-inline: 0;
}
input:first-of-type {
margin-bottom: hippie.$space_basic;
}
}
}

2
source/style/modules/card/_card_module.scss
View file

@ -32,7 +32,7 @@
// text-align: center;
}
& > div {
& > main {
position: relative;
padding: 64px 64px 24px 64px;
border: 1px solid #FFF;

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

@ -281,10 +281,19 @@
.hello {
flex: 0 1 auto;
width: 80%;
}
ul {
padding: 1em 5em;
background-color: hippie.$color_darker;
.responsive {
@include hippie.forTabletPortraitUp {
display: flex;
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 {
@extend .list_link;
@extend .link;
display: none;
position: relative;

277
source/style/ui.scss
View file

@ -33,146 +33,162 @@ $space_gui_half: hippie.$space_half;
.body_intro {
background-color: black;
}
.step {
@extend %full_parent;
}
#loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: white;
}
#bar {
display: flex;
justify-content: space-between;
width: 50%;
}
#wrap {
flex: 1;
background-color: hippie.$color_back_basic;
}
#progress {
width: 0;
height: 100%;
background-color: black;
}
#status,
#spinner {
@extend %basic;
display: flex;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
align-items: center;
margin-inline: $space_gui_half;
padding-block: calc($space_gui_half - 1px) $space_gui_half;
line-height: hippie.$line_basic;
text-align: center;
}
#status {
width: 4em;
background-color: black;
color: white;
}
#spinner {
width: 2.5em;
background-color: hippie.$color_back_basic;
color: black;
span {
animation: rotate 1s linear infinite;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
.step {
@extend %full_parent;
}
to {
transform: rotate(360deg);
}
}
#intro {
z-index: map.get(hippie.$z-indexes, "content-top");
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: black;
h1,
p,
li {
color: white;
}
}
.brand {
text-align: center;
img {
display: inline-block;
width: 128px;
height: 128px;
#loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: white;
}
*+h1 {
margin-top: hippie.$space_small;
margin-bottom: hippie.$space_large;
#bar {
display: flex;
justify-content: space-between;
width: 50%;
}
}
.tech-stack {
display: flex;
padding-left: 0;
li {
list-style: none;
padding-inline: hippie.$space_double;
#wrap {
flex: 1;
background-color: hippie.$color_back_basic;
}
}
#agreement,
#idle {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#agreement {
flex-direction: column;
background-color: map.get(hippie.$color_palette, bravo);
user-select: none;
h1 {
margin-top: 0;
color: hippie.$color_brightest;
#progress {
width: 0;
height: 100%;
background-color: black;
}
}
#idle {
background-color: hippie.$color_back_basic;
transition: background-color 4s;
#status,
#spinner {
@extend %basic;
&:hover>.mouse-overlay {
background-color: transparent !important;
transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
display: flex;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
align-items: center;
margin-inline: $space_gui_half;
padding-block: calc($space_gui_half - 1px) $space_gui_half;
line-height: hippie.$line_basic;
text-align: center;
}
#status {
width: 4em;
background-color: black;
color: white;
}
#spinner {
width: 2.5em;
background-color: hippie.$color_back_basic;
color: black;
span {
animation: rotate 1s linear infinite;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#init {
z-index: map.get(hippie.$z-indexes, "content-top");
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: black;
h1,
p,
li {
color: white;
}
}
.brand {
text-align: center;
svg {
height: 128px;
width: 128px;
rect, circle, path {
stroke: white !important;
}
}
img {
display: inline-block;
width: 128px;
height: 128px;
background-color: white;
}
* + h1 {
margin-top: hippie.$space_small;
margin-bottom: hippie.$space_large;
}
}
.tech-stack {
display: flex;
padding-left: 0;
li {
list-style: none;
padding-inline: hippie.$space_double;
}
}
#agreement,
#idle {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#agreement {
flex-direction: column;
background-color: map.get(hippie.$color_palette, bravo);
user-select: none;
h1 {
margin-top: 0;
color: hippie.$color_brightest;
}
}
#idle {
background-color: hippie.$color_back_basic;
transition: background-color 4s;
&:hover > .mouse-overlay {
background-color: transparent !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;
}
}
}
@ -191,10 +207,3 @@ $space_gui_half: hippie.$space_half;
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;
}

19
source/templates/demo/_default.njk
View file

@ -1,19 +0,0 @@
<!-- demo.default.template -->
{% extends "hippie/_default.njk" %}
{% block meta %}
{% include "demo/partials/_meta.njk" %}
<base href="/">
{% endblock %}
{% block links %}
{{ super() }}
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
{# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
{# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/> #}
{% endblock %}
{% block script %}
{{ super() }}
<script src="/vendor/jquery.min.js"></script>
{% endblock %}

21
source/templates/demo/_main.njk
View file

@ -1,21 +0,0 @@
<!-- demo.main.template -->
{% extends "hippie/_main.njk" %}
{% block meta %}
{% include "demo/partials/_meta.njk" %}
<base href="/">
{% endblock %}
{% block links %}
{{ super() }}
{% if hippie.legacyMode %}
<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]-->
<!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
<!--Only use one of the above!-->
{% endif %}
<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
{% endblock %}

9
source/templates/demo/partials/_meta.njk
View file

@ -1,9 +0,0 @@
<!-- meta.partial -->
<meta name="author" content="Interaktionsweise">
<meta name="generator" content="Visual Studio Code, Atom, Notepad++">
<meta name="description" content="Hippie interweaves preeminent personal interface elements">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{# <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> #}
{# <meta http-equiv="X-UA-Compatible" content="IE=edge" /> #}

7
source/templates/demo/partials/exp-colors.njk
View file

@ -1,7 +0,0 @@
<!-- explanation-colors.partial -->
{# var colors = [{name: "alpha", class: "alpha_color"}] #}
{% set cls = cycler("odd", "even") %}
{% for row in rows %}
<div class="{{ cls.next() }}">{{ row.name }}</div>
{% endfor %}

52
source/templates/hippie/_app.njk
View file

@ -1,52 +0,0 @@
<!-- app.template -->
<!DOCTYPE html>
<html lang="de" class="html_ui" id="{{ pageId }}">
<head>
<meta charset="utf-8">
{% block head %}
<title>{{ hippie.titlePrefix }}
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
{% block meta %}
{% include "hippie/partials/_head_meta.njk" %}
<base href="/">
{% endblock %}
{% block links %}{% endblock %}
{% endblock %}
</head>
<body class="{{ bodyClass if bodyClass else 'body_frame' }}">
{% block body %}{% endblock %}
{% block script %}
<script src="/vendor/jquery.min.js"></script>
<script src="/vendor/hippie-script.js"></script>
<script src="{{ pageBase }}js/globals.js"></script>
<script src="{{ pageBase }}js/app.js"></script>
<script>
const frameHeader = document.querySelector('body > header.io');
const closeActionElements = document.querySelectorAll('[data-action=close]');
if (frameHeader) {
console.log('frame header found', frameHeader);
frameHeader.addEventListener('click', (e) => {
if (e.target.dataset.action === 'close') {
console.debug('close', e.target);
history.back();
if (closeActionElements.length > 1) {
console.debug('other frames present', closeActionElements.length);
}
}
});
}
</script>
{% endblock %}
</body>
</html>

19
source/templates/hippie/_app_frame.njk
View file

@ -1,19 +0,0 @@
<!-- frame.app.template -->
{% extends "hippie/_app.njk" %}
{% import "hippie/macros/_io.njk" as io %}
{% block head %}
{{ super() }}
{% endblock %}
{% block title %}{{ title }}{% endblock %}
{% block links %}
{{ super() }}
<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}
{% block script %}
{{ super() }}
{% endblock %}

41
source/templates/hippie/_default.njk
View file

@ -1,41 +0,0 @@
<!-- default.template -->
{# {% if hippie.debugMode %} #}
{% import "hippie/macros/_log.njk" as log %}
{# {% endif %} #}
<!DOCTYPE html>
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
<head>
<meta charset="utf-8">
{% block head %}
<title>{{ hippie.titlePrefix }}
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
{% block meta %}
{% include "hippie/partials/_head_meta.njk" %}
{% endblock %}
{% include "hippie/partials/_head_script.njk" %}
{# {{ log.debug(true) }} #}
{{ log.start() }}
{% block links %}
{% include "hippie/partials/_head_links.njk" %}
{% endblock %}
{{ log.log('HEAD end :: Links parsed, starting to load.') }}
{% endblock %}
</head>
<body class="{{ bodyClass }}">
{{ log.log('BODY start') }}
{% block body %}{% endblock %}
{% block script %}
{{ log.log('BODY :: Loading script assets...') }}
{% endblock %}
{{ log.log('BODY end :: Page script might still be loading.') }}
</body>
</html>

73
source/templates/hippie/_main.njk
View file

@ -1,73 +0,0 @@
<!-- main.template -->
{% import "hippie/macros/_log.njk" as log %}
<!DOCTYPE html>
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
<head>
<meta charset="utf-8">
{% block head %}
<title>{{ hippie.titlePrefix }}
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
{% block meta %}
{% include "hippie/partials/_head_meta.njk" %}
{% endblock %}
{% include "hippie/partials/_head_script.njk" %}
{{ log.debug(hippie.debugMode, true) }}
{{ log.start() }}
{% block links %}
{% include "hippie/partials/_head_links.njk" %}
{% endblock %}
{{ log.log('HEAD end :: Links parsed, starting to load.') }}
{% endblock %}
</head>
<body class="{{ bodyClass }}">
{{ log.log('BODY start') }}
{% include "hippie/partials/_body_nav.njk" %}
<div id="root">
{% include "hippie/partials/_header.njk" %}
<main class="main_site">
{% block main %}{% endblock %}
</main>
{% include "hippie/partials/_footer.njk" %}
</div>
{% block script %}
{{ log.log('BODY :: Loading script assets...') }}
{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
<script src="/vendor/jquery.min.js"></script>
<script src="/vendor/hippie-script.js"></script>
<script src="{{ pageBase }}js/globals.js"></script>
<script src="{{ pageBase }}js/app.js"></script>
<script>
// Setup global things for all screens
setup();
// Create instances of objects made by constructor functions
let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
if (viewHover) {
let fadeUi = new HippieFade(document.getElementById('js-toggle-fade'), true);
}
document.addEventListener('scroll', () => {
scrollUi.check();
});
$(document).ready(function () {
logPerf('EVENT :: jQuery \'ready\' event fired.');
});
</script>
{% endblock %}
{{ log.log('BODY end :: Page script might still be loading.') }}
</body>
</html>

4
source/templates/hippie/app.liquid
View file

@ -10,12 +10,14 @@
<link href="/css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}
{% block script %}
{% block assets %}
<script src="/vendor/jquery.min.js"></script>
<script src="/vendor/hippie-script.js"></script>
<script src="/js/globals.js"></script>
<script src="/js/app.js"></script>
{% endblock %}
{% block script %}
<script>
const frameHeader = document.querySelector('body > header.io');
const closeActionElements = document.querySelectorAll('[data-action=close]');

1
source/templates/hippie/default.liquid
View file

@ -28,6 +28,7 @@
<body{{ bodyClassAttr }}>
{%- block body %}{% endblock -%}
{%- block assets %}{% endblock -%}
<script>
// {{ title }} script using default template
</script>

5
source/templates/hippie/full.liquid
View file

@ -36,12 +36,13 @@
{% render 'hippie/partials/log-log' with 'BODY start' as msg -%}
{%- block body %}{% endblock -%}
{% render 'hippie/partials/log-log' with 'BODY :: Loading script assets...' as msg -%}
{%- block assets %}{% endblock -%}
{% render 'hippie/partials/log-assets', state: true -%}
{% render 'hippie/partials/log-log', msg: 'BODY :: Assets loaded, running page specific script...', arg: true -%}
<script>
// {{ title }} script using full template
</script>
{%- block script %}{% endblock -%}
{% render 'hippie/partials/log-assets', state: true -%}
{% render 'hippie/partials/log-log', msg: 'BODY :: Assets loaded, running page specific script...', arg: true -%}
{% render 'hippie/partials/log-log' with 'BODY end :: Page script might still be loading.' as msg -%}
{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
</body>

23
source/templates/hippie/macros/_footer.njk
View file

@ -1,23 +0,0 @@
{% macro status(email = 'admin@domain.tld', app = 'Application', version = 'ver.s.ion', system = 'System Name', domain = 'domain.tld:port') %}
<footer class="pos_abs pin_bottom width_full">
<address class="txt_center">Kontakt:
<a class="lineLink" href="mailto:{{ email }}">{{ email }}</a>
* Server:
{{ app }}/{{ version }}
({{ system }}) * Domain:
{{ domain }}
</address>
</footer>
{% endmacro %}
{% macro pinned(pos = 'bottom') %}
<footer class="pos_abs pin_{{ pos }} pin_right pin_left">
<p class="txt_center">Unten fixiert</p>
</footer>
{% endmacro %}
{% macro main() %}
<footer class="footer_site">
<div id="end"></div>
</footer>
{% endmacro %}

30
source/templates/hippie/macros/_gate.njk
View file

@ -1,30 +0,0 @@
{% 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 %}

30
source/templates/hippie/macros/_header.njk
View file

@ -1,30 +0,0 @@
{% macro main() %}
<header class="header_site">
<div id="begin"></div>
</header>
{% endmacro %}
{% macro status(hippie, page) %}
{% import "hippie/macros/_state.njk" as state %}
<div id="top">
<h1 class="brand">
<a href="#">{{ hippie.brand | upper }}</a>
</h1>
<nav>
<ul>
{% for link in page %}
<li>
<a href="{{ link.href }}">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
</nav>
<div class="state">
<p>{{ state.coord("log")}}
/
{{ state.date("date")}}
/
{{ state.time("time")}}</p>
</div>
</div>
{% endmacro %}

49
source/templates/hippie/macros/_io.njk
View file

@ -1,49 +0,0 @@
{% macro frameHeader(title) %}
<header class="io">
<nav>
<button title="menu">
<i class="bi bi-three-dots"></i>
</button>
<span>{{ title }}</span>
</nav>
<nav>
<div class="spacer a"></div>
<button title="minimize">
<i class="bi bi-dash"></i>
</button>
<button title="maximize">
<i class="bi bi-fullscreen"></i>
</button>
<button title="close" data-action="close">
<i class="bi bi-x-square"></i>
</button>
</nav>
</header>
{% endmacro %}
{% macro frameFooter(title) %}
<footer class="io">
<nav>
<button>mode</button>
<span>{{ title }}</span>
</nav>
<nav>
<div class="spacer a"></div>
<button>action</button>
</nav>
</footer>
{% endmacro %}
{% macro statusBar(title) %}
<footer class="io">
<nav>
<span>## items</span>
<span># selected (size)</span>
<span># type(s)</span>
<span># shared</span>
</nav>
<nav>
<span>{{ title | default('status-bar') }}</span>
</nav>
</footer>
{% endmacro %}

24
source/templates/hippie/macros/_log.njk
View file

@ -1,24 +0,0 @@
{% macro start() %}
<script>
logAdd('EVENT :: Document \'%s\' event fired.', 'DOMContentLoaded');
logPerf('HEAD start :: Debugging performance...', debugOn);
</script>
{% endmacro %}
{% macro log(msg, arg = '') %}
<script>
logPerf('{{ msg }}', {{ arg }});
</script>
{% endmacro %}
{% macro debug(state = false, display = false, assets = false) %}
{# {{ set hippie.debugMode = state }} #}
<script>
debugOn = {{ state }};
debugOnScreen = {{ display }};
assetsLoaded = {{ assets }};
</script>
{% endmacro %}
{% macro asset(state = false) %}
<script>
assetsLoaded = {{ state }};
</script>
{% endmacro %}

13
source/templates/hippie/macros/_nav.njk
View file

@ -1,13 +0,0 @@
{% macro main(data, active = '') %}
<nav>
<ul>
{% for link in data %}
<li{%if active == link.text %} class="active_txt" {% endif %}>
{%if active == link.text %}{{ link.text }}{%else%}
<a href="{{ link.href }}">{{ link.text }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endmacro %}

100
source/templates/hippie/macros/_placeholder.njk
View file

@ -1,100 +0,0 @@
{% macro email(class = '', text = '', address = 'name@domain.tld') %}
{% if text === '' %}
{% set text = address %}
{% endif %}
<a class="{{ class }}" href="mailto:{{ address }}">{{ text }}</a>
{# {{ 'name@domain.tld' | urlize | safe }} #}
{% endmacro %}
{% macro link(class = '', text = 'domain.tld', href = 'http://domain.internal') %}
<a class="{{ class }}" href="{{ href }}">{{ text }}</a>
{% endmacro %}
{% macro name(class = '', text = 'Vorname Nachname') %}
<span class="{{ class }}">{{ text }}</span>
{% endmacro %}
{% macro address(class = '', text = 'Straße Nr., PLZ Ort') %}
<span class="{{ class }}">{{ text }}</span>
{% endmacro %}
{% macro phone(class = '', text = '+49 (0)101 1337 48') %}
<span class="{{ class }}">{{ text }}</span>
{% endmacro %}
{% macro brand(class = '', name = 'Marke') %}
<div class="{{ class }}">
{# <img src="" alt="Brand logo"> #}
<svg
width="128"
height="128"
viewBox="0 0 128 128"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<g>
<rect
style="display:inline;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-dasharray:none"
width="126"
height="126"
x="1"
y="1"/>
<circle
style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
cx="64"
cy="64"
r="63"/>
<path
style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
d="m 9.3926879,32.472455 109.2146221,-2e-6 -54.607309,94.582637 z"/>
</g>
</svg>
<h1>{{ name }}</h1>
</div>
{% endmacro %}
{% macro flag(type = '', src = '', id = '', desc = 'Fahne von Interaktionsweise', width = '128') %}
{% set height = width / 1.6 %}
{% if type === 'svg' or type === '' %}
<svg version="1.1" id="{{ id }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
{# <defs>
<filter id="turb3">
<feColorMatrix type="saturate" values="1" />
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
</filter>
<symbol id="triangle-5">
<rect y="0" fill="#273F8B" width="1920" height="1200"/>
</symbol>
</defs>
<g>
<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
</g> #}
{% if desc !== '' %}
<desc>{{ desc }}</desc>
{% endif %}
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
</svg>
{% elif type === 'img' %}
{% if src === 'file' %}
<picture>
<source srcset="{{ pageBase }}art/flag_websafe_128x80.webp" type="image/webp"/>
<img src="{{ pageBase }}art/flag_websafe_128x80.gif" width="{{ width }}" height="{{ height }}" alt="{{ desc }}"/>
</picture>
{% else %}
<img
width="{{ width }}"
height="{{ height }}"
alt="{{ desc }}"
src="data:image/gif;base64,R0lGODlhgABQAIQAMf/MAP+ZM/+ZAP9mM8zM/8xmM8wzM8wAZpnM/5nMzJmZzJkzZpkAZmbMzGaZzGZmmWYzZjNmmTMzmQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAgABQAAQF/mDjiORolug5NiKSEG8Mz68SSbek73zv/8CgcEhkGY/IpBLRcBEQM+hL+nRIHrscLsvVab/drTcMHpvF6DIuxVaxj7I4DZZAE+/4vB6o7PubRgSCUIOCT4YRDxE3jFuNj46RkJOSlZSXlo5tm24nTXKgBA5ae6Wmpz5/qklOU1GvCYqNZ2q1ZLe0uGm6X5y+K0dzoQlWpKjHyHery0wIhIeFgwiLmZjW1djX2pa/viwjw3PUyeTlQct/TCyHru0ENru58vH0tvP29VndnazhMVjGzAkkh06VM2gICdkAmK3htocOI0bYtymQv2kBB2o8VrBPM3dUoDxQdI+XyZIo/vOlnMivJQk4wubA20iTYMcj6l5ESzgKok+JQH8+osivQcw4DezUXFrqJquQsAhQw0f1pMqrVe8RRcHCn6iMTMMqc8qCSUJDUmQFXSuUrcOtwBwk8FdMrF09ZHOy2+vsitWsWP8KXgk3WLhxdxMXIdtk5zMFattKdjt5UuGuR2GAVcyZR16jIGHYmBV45eDSqGttNdJKGAKlnWPvuNnsme2vlHNX1q3JZdHMM2UL9+yUb5S6ppOnPg1YtW+ureMogD08Nm1XOxPx3s3dLQQICyh+iz5jVHXZEBgsYJC+4EfjsZjLV97c6vf1C8CrF99gmJXziuGn3oDr3YQWWhht/qdgd5Sklx9++hlwgAHikfcCYgDSlJ6D7A14AAMHhHiAe1C9YF599M233BgO6vegehPGKCGFz1kkzGYZosKhgAKK6KOIzDRx2ztTLWjkT/e56KKMTM44IUWgvIZjjnlwuCOIP2bpY0HGkZTilytedZ96SzppZpMydvOJTFNSGcSVPGopZ5bMOFYXg0diM+aLC6B55p9NerOOdG7useGA6c2p6JwGgbZXkWCiGOYNLcYJ6KV+pukSZjJ4WSgQcMK46KiMqqITO3imWkmS+C2A6auZ/umNMFh8ysOh63FI6q6LGhSSlCpKWhUEEvAJXqzIwvqnAQNU1J84baJHoIe8/lab5QAFBCAAAAL4YdYzJ+Y52Z7HKptsstluGwAA667LyVw0RJuYldRaa20B6WrLrb7bAvBHO/9NGuwO5K5n7sFMYhtAu+w2vC4AEEdcEQ2vAXilvbsawGwB3Ha8rboRhyyxR4WQpCpElZ6LsJMKM8ywyDCLvIkM5sWGK5YYz6kxtvt+vHDMQMvcRxQMRSoYqwysnOzGDjcd9NMyu7EmMYrdnLOcBqTrsdNQdz0yEgcJUuTJkbyo9KXMgvyy12zD/MYMtYal69U+YiuAzx+3rXfMSqA68Dxjnt1kAQOovffhT0MXQ8AaEdtjzllrnTfilAOdxBTAplqmyoP//HDlyKAnrsIMG81t7cb8hq461GCbSJqwEjjIOcvZrr367UGjEIO8Q+zI6855f4778JYHI0pu983OtO3EN2+5CS7UgUqHGRtwt+fOZ886a1JJit/ShTes/fhev/ROKbIrmrUAzJPvfvGfMHTNd69a3+/7+LNNAtV31PsjvvrKnwD1tw5elKtzwhugArvWgrj9YD0+2hnHFkhBvXWlQUmLEc8qyMG9scCBscMS8DpIQg9Oh1JJS1sJV3i4pKQnaz9joQz15gDxzfCGegsBADs=">
{% endif %}
{% endif %}
{% endmacro %}

12
source/templates/hippie/macros/_song.njk
View file

@ -1,12 +0,0 @@
{% macro simple(index, data, content) %}
<article class="songbook_song">
<header>
<h2>{{ data.title }}</h2>
<h6>{{ data.releaseDate }}</h6>
<p>{{ data.description }}</p>
</header>
{# <pre class="pre_code"><code>{{ content }}</code></pre> #}
{{ content | safe }}
<footer>{{ index }}</footer>
</article>
{% endmacro %}

16
source/templates/hippie/macros/_state.njk
View file

@ -1,16 +0,0 @@
{% macro coord(id, text = 'X: #, Y: ##') %}
<span id="{{ id }}">{{ text }}</span>
{% endmacro %}
{% macro time(id, text = '00:00:00', postfix = ' Uhr') %}
<span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
{% endmacro %}
{% macro date(id) %}
<span id="{{ id }}">
<span id="day">Wochentag</span>,
<span id="dayNumb">##</span>.
<span id="month">Monat</span>
<span id="year">####</span>
</span>
{% endmacro %}

5
source/templates/hippie/macros/top-macro.njk
View file

@ -1,5 +0,0 @@
{% macro field(name, value='', type='text') %}
<div class="field">
<input type="{{ type }}" name="{{ name }}" value="{{ value | escape }}" />
</div>
{% endmacro %}

4
source/templates/hippie/page.liquid
View file

@ -34,11 +34,13 @@
</div>
{% endblock %}
{% block script %}
{% block assets %}
<script src="/vendor/jquery.min.js"></script>
<script src="/vendor/hippie-script.js"></script>
<script src="/js/globals.js"></script>
<script src="/js/app.js"></script>
{% endblock %}
{% block script %}
<script>
// Setup global things for all screens
setup();

34
source/templates/hippie/partials/_body_nav.njk
View file

@ -1,34 +0,0 @@
<!-- nav.partial -->
<div class="pos_rel">
<nav class="nav_page_meta">
<ul>
<li class="js_scrolltop di_none">
<a href="#begin" class="a_button_meta">
<div class="sprite_img demo__sprite_up"></div>
{# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}
</a>
</li>
<li>
{# <button class="">Show Meta Information</button> #}
{# <a href="#meta" class="js_showmeta a_button_meta">
<div class="sprite_img demo__sprite_meta"></div>
</a> #}
<button class="js_showmeta button_clear" type="button">
<div class="sprite_img demo__sprite_meta"></div>
</button>
</li>
<li>
<button id="js-toggle-fade">F</button>
</li>
<li class="js_scrolldown">
<a href="#end" class="a_button_meta">
<div class="sprite_img demo__sprite_down"></div>
{# <img src="{{ pageBase }}art/down.png" alt="" width="32" height="32"> #}
</a>
</li>
</ul>
</nav>
</div>
{# <div class="exp_overlay_btn exp_help_btn">
<span class="span_solo">?</span>
</div> #}

3
source/templates/hippie/partials/_footer.njk
View file

@ -1,3 +0,0 @@
<!-- footer.partial -->
{% import "hippie/macros/_footer.njk" as footer %}
{{ footer.main() }}

4
source/templates/hippie/partials/_head_links.njk
View file

@ -1,4 +0,0 @@
<!-- links.partial -->
{# <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon"> #}
<link rel="shortcut icon" type="image/x-icon" href="{{ pageBase }}favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEAAAIBAQCbjUIABQQCAGdfKgDcxYUAiXpGABkWCgDXxnEApmxRAMGZawAIBwMArZ5PAKFydQBmIZIAoGJFAIx+QwBSSyIA1biBADlx0gBNn+0AgztQAMimcQAMCwQADAsFANS/dAB7P3EAeuH7ANb4/gBQPLwAp2pNAI6CQwCilEwAr3hdADyH5ADw/f8A////AHTU+AB6M2YA0LN4ABMRBwA/OhsAyKR2AGYvjQCf7PwA7fz/AENy2gCrclkAk4ZDAAYFAgDNtXEAjkhHAEul7QD8//8AlOn8AGk1hwDWvXsAGBYJAJaHSgCnbE4AVy6rAML0/gD7/v8AQ6vuAKx1YwCZjEQALCgTALyOZwB+NVoAZ8D0AL30/QBLULMA2sV+AB4bCwDFpm0Ak087AFArvgBv4PoAjOf7AIzm+wCN4/sAjuH7AI7h+gCP3fkAOI/sAKVvcwCfkUQAfnM6ANO2hAC3iGkAk150AI9OcACKRmkAhj9kAH84YQB9NWEAfTRgAH0zYAB6MWYAei9lAItFUADdy3wAKCQPAFtTJQB2bDIAhXk5AJKGPwCbjkQAq5xOALepWwDEtGcAzLlwAMyzcgDKrXIAx6NwALyNZgDWu4IApJZHAAcGAwANDAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB3eGhpamtsbW5vcHFycwt0dXZYWVpbXF1eX2BhYmNkZWZnAktMTU5PUFFRUlNUVVZXAABDREVGJSUlJSUlR0hJSgAAADs8PT4lJSUlP0BBQgAAAAAyMzQ1NiUlJTc4OToAAAAAACorLC0lJS4vMDEAAAAAAAAAISIjJCUmJygpAAAAAAAAABkaGxwdHh8gAAAAAAAAAAAAEhMUFRYXGAAAAAAAAAAAAAANDg8QEQAAAAAAAAAAAAAACAkKCwwAAAAAAAAAAAAAAAAFBgcAAAAAAAAAAAAAAAAAAgMEAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=">

8
source/templates/hippie/partials/_head_meta.njk
View file

@ -1,8 +0,0 @@
<!-- meta.partial -->
<meta name="robots" content="noindex">
<meta name="generator" content="{{ eleventy.generator }}">
<meta name="author" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

114
source/templates/hippie/partials/_head_script.njk
View file

@ -1,114 +0,0 @@
<!-- script.partial -->
<script>
// Entry script at page init
let debugOn = {{ hippie.debugMode }};
let debugOnScreen = false;
let assetsLoaded = false;
// Get the current time difference between page
// load and when this func was invoked
function getTimeDiff() {
return new Date().getTime() - performance.timing.navigationStart;
}
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width
? n
: new Array(width - n.length + 1).join(z) + n;
}
// Log message to console and add
// performance measuring information
function logPerf(msg, arg) {
if (debugOn) {
if (debugOnScreen && assetsLoaded) {
if (!document.getElementById('jsLogPerf')) {
let wrap = document.createElement('div');
let box = document.createElement('div');
wrap.style.position = 'relative';
box.style.cssText = `position: fixed;
bottom: 16px;
right: 40px;
zIndex: 1000;
padding: 0 8px;
background: rgba(255,255,255,.6);
color: rgb(128);
fontSize: 1rem;`;
box.id = 'jsLogPerf';
wrap.prepend(box);
document
.body
.prepend(wrap);
/*
$('<div><div></div></div>')
.css('position', 'relative')
.find('div')
.attr('id', 'jsLogPerf')
.css({
position: 'fixed',
bottom: '16px',
right: '40px',
zIndex: '1000',
padding: '0 8px',
background: 'rgba(255,255,255,.6)',
color: 'rgb(128)',
fontSize: '1rem'
})
.end()
.prependTo('body');
*/
// $('body').prepend('<div style="position:relative;"></div>');
// $('div').first().prepend('<div id="jslogPerf" style="position:fixed;bottom:8px;right:16px;z-index:1000;padding:8px;background:rgb(0,255,255,.5)"></div>');
}
let code = document.createElement('code');
code.style.cssText = `display: block;
margin: 8px 0;
padding: 1px 4px;
background-color: transparent;
color: black;
font-size: 12px;
line-height: 1.1;`;
code.innerHTML = '<b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '';
document
.getElementById('jsLogPerf')
.append(code);
// document.getElementById('jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
// $('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
// NOTE: Alternative short-circuit evaluation
// needs element in document but prevents error if not
// $log = $log || $('#jslogPerf');
// $log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
}
if (window.console) {
const time = pad(getTimeDiff(), 5) + 'ms :: ';
console.debug(time + msg, (
arg
? arg
: ''));
// NOTE: Non standard feature. Not available on IE
if (console.timeStamp) {
console.timeStamp(msg);
}
}
}
}
function logAdd(msg, listener) {
document.addEventListener(listener, function () {
logPerf(msg, listener);
});
}
</script>

3
source/templates/hippie/partials/_header.njk
View file

@ -1,3 +0,0 @@
<!-- header.partial -->
{% import "hippie/macros/_header.njk" as header %}
{{ header.main() }}

19
source/templates/hippie/partials/gate-list.liquid Normal file
View file

@ -0,0 +1,19 @@
<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>

7
source/templates/hippie/partials/gate-simple.liquid Normal file
View file

@ -0,0 +1,7 @@
<article class="portal__entry">
<section>
<h2>
<a class="a_discreet" href="{{ url }}">{{ name }}</a>
</h2>
</section>
</article>

2
source/templates/hippie/partials/placeholder-flag.liquid
View file

@ -14,7 +14,7 @@
<g>
<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
</g>{% endcomment %}
{% if desc != '' %}
{% if desc %}
<desc>{{ desc }}</desc>
{% endif %}
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>

10
source/templates/hippie/partials/song.liquid Normal file
View file

@ -0,0 +1,10 @@
<article class="songbook_song">
<header>
<h2>{{ data.title }}</h2>
<h6>{{ data.releaseDate }}</h6>
<p>{{ data.description }}</p>
</header>
{% comment %}<pre class="pre_code"><code>{{ content }}</code></pre>{% endcomment %}
{{ content }}
<footer>{{ index }}</footer>
</article>