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

10 years later #1

Merged
sthag merged 374 commits from development into main 2026-03-07 00:18:59 +01:00
Conversation 0 Commits 374 Files changed 135 +332 -1250
35 changed files with 332 additions and 1250 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 8dc9724a3e - Show all commits

48
gulpfile.js
View file

@ -32,7 +32,7 @@ const jshint = require('gulp-jshint');
const gulpif = require('gulp-if');
const changed = require('gulp-changed');
const merge = require('merge-stream');
// const spritesmith = require('gulp.spritesmith');
const spritesmith = require('gulp.spritesmith');
// const buffer = require('vinyl-buffer');
// const imagemin = require('gulp-imagemin');
@ -48,7 +48,7 @@ const input = {
art: {
favicons: 'source/art/favicons/**/*.+(ico|png)',
sprites: 'source/art/sprites/**/*.png',
images: 'source/art/images/**/*.+(png|gif|jpg)'
images: 'source/art/images/**/*.+(png|gif|jpg|webp)'
},
vendor: 'vendor/**/*',
demo: {
@ -201,19 +201,42 @@ function fonts() {
function art() {
// Move favicons to the root folder
let favicons = src(input.art.favicons)
.pipe(plumber())
.pipe(changed(output.art))
.pipe(dest(output.root))
// Assemble sprites
// Move images to the root folder
let images = src(input.art.images)
.pipe(plumber())
.pipe(changed(output.art))
.pipe(dest(output.art))
.pipe(dest(output.art));
return merge(favicons, images)
}
function sprites() {
// Assemble sprites
let sprites = src(input.art.sprites)
.pipe(plumber())
.pipe(changed(output.art))
.pipe(spritesmith({
imgName: 'sprite.png',
imgPath: '../art/sprite.png',
cssName: '_sprite.scss'
}));
var imgStream = sprites.img
// DEV: We must buffer our stream into a Buffer for `imagemin`
// .pipe(buffer())
// .pipe(imagemin())
.pipe(dest(output.art));
var cssStream = sprites.css
.pipe(dest('source/style/hippie/mixins/'));
return merge(imgStream, cssStream);
}
// Gather dependencies for tools
function vendor() {
return src(input.vendor)
@ -222,21 +245,24 @@ function vendor() {
}
function overview() {
watch([input.screens, input.demo.data], series(nunjucks, reload));
watch([input.templates, input.screens, input.demo.data], series(nunjucks, reload));
watch(input.style, series(styleLint, style, reload));
watch(input.code, series(codeLint, code, reload));
watch(input.fonts, series(fonts, reload));
watch([input.art.favicons, input.art.sprites, input.art.images], series(art, reload));
watch(input.art.sprites, series(parallel(sprites, style), reload));
watch([input.art.favicons, input.art.images], series(art, reload));
watch(input.data, series(json, reload));
}
const assets = parallel(fonts, art, json, vendor);
const build = series(clean, assets, parallel(nunjucks, series(styleLint, style), series(codeLint, code)));
const assets = parallel(fonts, art, sprites, json, vendor);
const build = series(clean, assets, parallel(nunjucks, style, code));
const dev = series(clean, assets, parallel(nunjucks, series(styleLint, style), series(codeLint, code)));
exports.lint = parallel(styleLint, codeLint);
exports.lint = parallel(series(style, styleLint), series(code, codeLint));
exports.assets = assets;
exports.build = build;
exports.default = series(build, serve, overview);
exports.dev = dev;
exports.default = series(dev, serve, overview);
// function plumbError(errTitle) {
// return plumber({

1101
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
package.json
View file

@ -1,6 +1,6 @@
{
"name": "hippie",
"version": "0.4.0",
"version": "0.4.1",
"description": "Hippie interweaves preeminent personal interface elements",
"main": "gulpfile.js",
"scripts": {
@ -30,7 +30,7 @@
"gulp-jshint": "^2.1.0",
"gulp-json-concat": "^0.1.1",
"gulp-notify": "^3.2.0",
"gulp-nunjucks-render": "^2.2.2",
"gulp-nunjucks-render": "^2.2.3",
"gulp-plumber": "^1.2.1",
"gulp-remember": "^1.0.1",
"gulp-rename": "^1.4.0",

25
source/screens/demo.njk
View file

@ -2,14 +2,14 @@
{% set pageId = "index" %}
{% set pageClass = "height_full" %}
{% extends "demo/default.njk" %}
{% extends "demo/_default.njk" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body_content %}
{% block body %}
<div class="wrap">
<div class="hello">
<h2>This is {{hippie.brand | upper}}</h2>
@ -18,19 +18,18 @@
<p>For a very basic start you can make a copy of the demo page <code>blank.njk</code>. You can find it at <code>/source/pages/demo</code>.</p>
<p>The <i>demo</i> folder contains an overview of all elements and also examples for style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
<h3>Overview</h3>
<ul class="list_link">
<!-- Loops through "demoadditionallinks" array -->
{% for link in data.demoadditionallinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %}
</ul>
<nav>
<ul class="list_link">
<!-- Loops through "demoadditionallinks" array -->
{% for link in data.demoadditionallinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %}
</ul>
</nav>
<div class="pos_rel">
<pre class="txt_tiny txt_white pos_abs pin_down pin_right">
()()
(..)
C(")(")</pre>
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>C(")(")</pre>
<h3>Demo Pages</h3>
</div>
</div>
<ul class="list_link">
<!-- Loops through "demo-links" array -->
{% for link in data.demolinks %}

4
source/screens/demo/blank.njk
View file

@ -2,7 +2,7 @@
{% set pageId = "blank" %}
{% set pageClass = "height_full" %}
{% extends "demo/default.njk" %}
{% extends "demo/_default.njk" %}
{% block title %}Blank{% endblock %}
@ -10,6 +10,6 @@
{{ super() }}
{% endblock %}
{% block body_content %}
{% block body %}
{% endblock %}

8
source/screens/demo/elements.njk
View file

@ -2,19 +2,19 @@
{% set pageId = "elements" %}
{% set pageClass = "" %}
{% extends "demo/extended.njk" %}
{% extends "demo/_extended.njk" %}
{% block title %}Elements{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body_content %}
{% block main %}
<div class="temp_layer">
<!-- <div class="exp_overlay_btn exp_help_btn">
<span class="span_solo">?</span>
</div> -->
{% include "hippie/partials/nav-page-meta.njk" %}
{% include "hippie/partials/_body_nav.njk" %}
</div>
<div id="begin" class="">
<section class="sec_main_center">
@ -61,7 +61,7 @@
</article>
</section>
</div>
{% include "hippie/partials/footer.njk" %}
{% include "hippie/partials/_footer.njk" %}
{% endblock %}
{% block script %}

4
source/screens/demo/error/304.njk
View file

@ -2,14 +2,14 @@
{% set pageId = "304" %}
{% set pageClass = "body_status" %}
{% extends "demo/maintenance.njk" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body_content %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Umleitung</h3>

4
source/screens/demo/error/400.njk
View file

@ -2,14 +2,14 @@
{% set pageId = "400" %}
{% set pageClass = "body_status" %}
{% extends "demo/maintenance.njk" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body_content %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Client-Fehler</h3>

4
source/screens/demo/error/403.njk
View file

@ -2,14 +2,14 @@
{% set pageId = "403" %}
{% set pageClass = "body_status" %}
{% extends "demo/maintenance.njk" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body_content %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Client-Fehler</h3>

4
source/screens/demo/error/404.njk
View file

@ -2,14 +2,14 @@
{% set pageId = "404" %}
{% set pageClass = "body_status" %}
{% extends "demo/maintenance.njk" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body_content %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Client-Fehler</h3>

4
source/screens/demo/error/500.njk
View file

@ -2,14 +2,14 @@
{% set pageId = "500" %}
{% set pageClass = "body_status" %}
{% extends "demo/maintenance.njk" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body_content %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Server-Fehler</h3>

10
source/screens/demo/examples.njk
View file

@ -2,19 +2,19 @@
{% set pageId = "examples" %}
{% set pageClass = "" %}
{% extends "demo/extended.njk" %}
{% extends "demo/_extended.njk" %}
{% block title %}Examples{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body_content %}
{% block main %}
<div class="temp_layer">
<!-- <div class="exp_overlay_btn exp_help_btn">
<span class="span_solo">?</span>
</div> -->
{% include "hippie/partials/nav-page-meta.njk" %}
{% include "hippie/partials/_body_nav.njk" %}
</div>
<div id="begin" class="">
<section class="sec_main_center">
@ -111,7 +111,7 @@
</header>
<div class="pos_abs pin_bottom width_full">
<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
<footer id="js_demo_stop" class="demo__footer">
<footer id="js_demo_stop" class="demo_footer">
<nav class="nav_column nav_separate">
<ul>
<li><a href="" class="a_button_text">Alpha</a></li>
@ -224,7 +224,7 @@
</article>
</section>
</div>
{% include "hippie/partials/footer.njk" %}
{% include "hippie/partials/_footer.njk" %}
{% endblock %}
{% block script %}

11
source/screens/demo/intro.njk
View file

@ -2,17 +2,15 @@
{% set pageId = "intro" %}
{% set pageClass = "" %}
{% extends "demo/extended.njk" %}
{% extends "demo/_extended.njk" %}
{% block title %}Intro{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body_content %}
<div class="temp_layer">
{% include "hippie/partials/nav-page-meta.njk" %}
</div>
{% block main %}
{% include "hippie/partials/_body_nav.njk" %}
<div id="begin" class="demo__intro">
Dies ist einfach nur Text.<br>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.<br>Dies ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.<br><br>
@ -209,7 +207,7 @@
<li>إنسان آلي</li>
</ul>
</bdo>
<p>Neben den vielen speziellen Elmenten gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist das <code>&lt;span&gt;</code> Element.<br>Es dient dazu ganz individuelle Auszeichnungen zu ermöglichen die eher optische Auswirkungen haben und eben keine inhaltlichen. Mit den Attributen <code>id</code> oder <code>class</code> werden dazu eigene Typen des Elements definiert. Diese Möglichkeit der Definition von individuellen Elementen ist ein Grundprinzip der Auszeichnungssprache <abbr title="Hypertext Markup Language" >HTML</abbr>.</p>
<p>Neben den vielen speziellen Elementen gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist das <code>&lt;span&gt;</code> Element.<br>Es dient dazu ganz individuelle Auszeichnungen zu ermöglichen die eher optische Auswirkungen haben und eben keine inhaltlichen. Mit den Attributen <code>id</code> oder <code>class</code> werden dazu eigene Typen des Elements definiert. Diese Möglichkeit der Definition von individuellen Elementen ist ein Grundprinzip der Auszeichnungssprache <abbr title="Hypertext Markup Language" >HTML</abbr>.</p>
<p>Mit der Einführung von Absätzen wurde auch schon das <code>&lt;br&gt;</code> Element erwähnt und seitdem häufig benutzt. Es erzeugt einen Zeilenumbruch. Es wird dadurch kein neuer Absatz erstellt. Es dient auch nicht dazu optischen Abstand zu erzeugen, sondern innerhalb eines Absatzes den Text umzubrechen.</p>
<p>Eine besondere Form des Zeilenumbruchs kann mit <code>&lt;wbr&gt;</code> eingesetzt werden. Es stellt die Möglichkeit für einen Zeilenumbruch dar. Da das Format eines HTML-Dokumentes häufig nicht vorhersehbar ist, kann solch ein Element einen Umbruch erzeugen falls ein Wort zu lang für eine Textzeile sein sollte.</p>
<p>Und der Löwe brüllte "RRRR<wbr>rrrr<wbr>oooooooo<wbr>aaaa<wbr>AAAAAAAA<wbr>HHHH<wbr>hhhh<wbr>rrrrrrrrr"!</p>
@ -581,7 +579,6 @@
</article>
</section>
{% include "hippie/partials/footer.njk" %}
{% endblock %}
{% block script %}

4
source/screens/demo/maintenance.njk
View file

@ -2,7 +2,7 @@
{% set pageId = "blank" %}
{% set pageClass = "height_full" %}
{% extends "demo/maintenance.njk" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}Maintenance{% endblock %}
@ -10,7 +10,7 @@
{{ super() }}
{% endblock %}
{% block body_content %}
{% block main %}
<div id="root" class="overflow">
<h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
</div>

6
source/screens/demo/os.njk
View file

@ -2,15 +2,14 @@
{% set pageId = "os" %}
{% set pageClass = "" %}
{% extends "demo/extended.njk" %}
{% extends "demo/_extended.njk" %}
{% block title %}OS{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body_content %}
{# {% include "partials/page-hover.njk" %} #}
{% block main %}
<div class="height_full">
<div class="flex_wrap">
<button class="demo__button_32"></button>
@ -132,7 +131,6 @@
</div>
</div>
</div>
{% include "hippie/partials/footer.njk" %}
{% endblock %}
{% block script %}

8
source/screens/demo/tests.njk
View file

@ -2,7 +2,8 @@
{% set pageId = "tests" %}
{% set pageClass = "height_full" %}
{% extends "demo/default.njk" %}
{% extends "demo/_default.njk" %}
{% import "demo/macros/_nav.njk" as nav %}
{% block title %}Tests{% endblock %}
{% block head %}
@ -19,7 +20,7 @@
</style>
{% endblock %}
{% block body_content %}
{% block body %}
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
@ -28,8 +29,7 @@
</form>
<p>Navigation</p>
{% import "demo/macros/nav-macro.njk" as forms %}
{{ forms.active('Beispiel') }}
{{ nav.main(data.demoadditionallinks, 'Tests') }}
{% endblock %}
{% block script %}

1
source/style/hippie/elements/_grouping.scss
View file

@ -78,6 +78,7 @@ hr {
// -----------------------------------------------------------------------------
pre {
@extend %basic_mono;
white-space: pre-wrap;
}
.pre_code {

2
source/style/hippie/mixins/_all.scss
View file

@ -1,5 +1,5 @@
@import "media_query";
@import "sprites";
@import "sprite";
@import "flow";
@import "color";
@import "user_agent";

45
source/style/hippie/mixins/_sprites.scss → source/style/hippie/mixins/_sprite.scss
View file

@ -10,27 +10,27 @@
// At the bottom of this section, we provide information about the spritesheet itself
// $spritesheet: width height image $spritesheet-sprites;
$down-name: 'down';
$down-x: 32px;
$down-x: 64px;
$down-y: 0px;
$down-offset-x: -32px;
$down-offset-x: -64px;
$down-offset-y: 0px;
$down-width: 32px;
$down-height: 32px;
$down-total-width: 64px;
$down-total-width: 96px;
$down-total-height: 64px;
$down-image: '../art/sprites.png';
$down: (32px, 0px, -32px, 0px, 32px, 32px, 64px, 64px, '../art/sprites.png', 'down', );
$down-image: '../art/sprite.png';
$down: (64px, 0px, -64px, 0px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'down', );
$meta-name: 'meta';
$meta-x: 32px;
$meta-x: 64px;
$meta-y: 32px;
$meta-offset-x: -32px;
$meta-offset-x: -64px;
$meta-offset-y: -32px;
$meta-width: 32px;
$meta-height: 32px;
$meta-total-width: 64px;
$meta-total-width: 96px;
$meta-total-height: 64px;
$meta-image: '../art/sprites.png';
$meta: (32px, 32px, -32px, -32px, 32px, 32px, 64px, 64px, '../art/sprites.png', 'meta', );
$meta-image: '../art/sprite.png';
$meta: (64px, 32px, -64px, -32px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'meta', );
$up-name: 'up';
$up-x: 0px;
$up-y: 0px;
@ -38,15 +38,26 @@ $up-offset-x: 0px;
$up-offset-y: 0px;
$up-width: 32px;
$up-height: 64px;
$up-total-width: 64px;
$up-total-width: 96px;
$up-total-height: 64px;
$up-image: '../art/sprites.png';
$up: (0px, 0px, 0px, 0px, 32px, 64px, 64px, 64px, '../art/sprites.png', 'up', );
$spritesheet-width: 64px;
$up-image: '../art/sprite.png';
$up: (0px, 0px, 0px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up', );
$up2-name: 'up2';
$up2-x: 32px;
$up2-y: 0px;
$up2-offset-x: -32px;
$up2-offset-y: 0px;
$up2-width: 32px;
$up2-height: 64px;
$up2-total-width: 96px;
$up2-total-height: 64px;
$up2-image: '../art/sprite.png';
$up2: (32px, 0px, -32px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up2', );
$spritesheet-width: 96px;
$spritesheet-height: 64px;
$spritesheet-image: '../art/sprites.png';
$spritesheet-sprites: ($down, $meta, $up, );
$spritesheet: (64px, 64px, '../art/sprites.png', $spritesheet-sprites, );
$spritesheet-image: '../art/sprite.png';
$spritesheet-sprites: ($down, $meta, $up, $up2, );
$spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, );
// The provided mixins are intended to be used with the array-like variables
//

29
source/templates/demo/_default.njk Normal file
View file

@ -0,0 +1,29 @@
<!-- template-default.njk -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
{% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title>
{% include "demo/partials/_meta.njk" %}
{% block link %}{% endblock %}
<link rel="stylesheet" type="text/css" media="all" href="/css/demo.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/> -->
{% endblock %}
</head>
<body id="{{ pageId }}" class="{{ pageClass }}">
{% block body %}{% endblock %}
{% block script %}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>

49
source/templates/demo/_extended.njk Normal file
View file

@ -0,0 +1,49 @@
<!-- template-extended.njk -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
{% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title>
{% include "demo/partials/_meta.njk" %}
<!--[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!-->
{% block link %}{% endblock %}
<!-- <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="/css/demo.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/> -->
{% endblock %}
</head>
<body id="{{ pageId }}" class="{{ pageClass }}">
{% include "hippie/partials/_body_hover.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 %}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
{# <script src="bower_components/jquery/dist/jquery.js"></script> #}
{% endblock %}
</body>
</html>

4
source/templates/demo/maintenance.njk → source/templates/demo/_maintenance.njk
View file

@ -7,7 +7,7 @@
{% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title>
{% include "demo/partials/head-meta.njk" %}
{% include "demo/partials/_meta.njk" %}
<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH7SURBVDiNldM/aJNBGMfx71viH7TqIoLiIOoiSJRu0qE4uIiDm5OI4ODk4uYioqBuUkR0kKJNFC1mqUltlbZSqE3RYt+2SUyTppCmeU2bkiZ907z3vnfnUEU0NrXPeMd97p6H+xlaa02D0oDRYL+p4WEN9yZm8dT6dzQEQtkCuiIJxHKbBxZrLiNWmc8vRxn7lMGRanPAw0QW49Uwp8ODJEZmCCSt/wcGrCWavte44LRz7FyYnd+yxMZz2J7cGKh6kvczRUp3X9BnmFyLzHNVRpkeShNM1b+iDngUn2Oue4qLLV3cf+YST2tiLf3sj04wmypSEt76wFixwoJpcbKnh/ZMmuXK2vqdYJXLxyPMDiTpTOX/DbhK88bMMh4Y5sSZt3R2/+53aRkCzgT+oX4Kls2i49YDT+M5JkMmV+aj3BrII/+a15MuSevZEPl3UzxP5/8EMiurfO1L0hyNU27tZehL/c/zJNzsLXB+uoNySZBfFQD4tIbHHxJMfoxxu2pi7rK5fsm3FgL5MwXKQAPaMzh8JMbg61E6mn3c8B/CF5yx2L1tC/5TR4nsAS/RhlNzcR0P6TggFVoDGrYqyYMkLOybZ4fQZFZqGOHsgi4KF1tIakrhKIXj/WrBQAuJV3EQtsBbEQjbQVQEB/0HUHu3Y2wU5/XKVRqhFD8AgpYX2M9TNGcAAAAASUVORK5CYII=">
@ -18,7 +18,7 @@
</head>
<body id="{{ pageId }}" class="{{ pageClass }}">
{% block body_content %}
{% block main %}
{% import "hippie/macros/footer-status.njk" as status %}
{{ status.footer() }}

12
source/templates/demo/data.json
View file

@ -1,19 +1,23 @@
{
"demoadditionallinks": [
{
"href": "demo/intro.html",
"href": "/demo.html",
"text": "Index"
},
{
"href": "/demo/intro.html",
"text": "Intro"
},
{
"href": "demo/elements.html",
"href": "/demo/elements.html",
"text": "Elements"
},
{
"href": "demo/examples.html",
"href": "/demo/examples.html",
"text": "Examples"
},
{
"href": "demo/tests.html",
"href": "/demo/tests.html",
"text": "Tests"
}
],

35
source/templates/demo/default.njk
View file

@ -1,35 +0,0 @@
<!-- template-default.njk -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
{% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title>
{% include "demo/partials/head-meta.njk" %}
<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" type="image/x-icon" href="/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=">
{% block link %}{% endblock %}
<link rel="stylesheet" type="text/css" media="all" href="/css/demo.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/> -->
{% endblock %}
</head>
<body id="{{ pageId }}" class="{{ pageClass }}">
{% block body_content %}{% endblock %}
{% block script %}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
{# <script src="bower_components/jquery/dist/jquery.js"></script> #}
{% endblock %}
</body>
</html>

50
source/templates/demo/extended.njk
View file

@ -1,50 +0,0 @@
<!-- template-extended.njk -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
{% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title>
{% include "demo/partials/head-meta.njk" %}
<!--[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!-->
<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<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=">
{% block link %}{% endblock %}
<!-- <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="/css/demo.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/> -->
{% endblock %}
</head>
<body id="{{ pageId }}" class="{{ pageClass }}">
{% include "hippie/partials/page-hover.njk" %}
<div id="root">
<header id="js_head" class="header_site">
{% block body_header %}
<!-- super stuff -->
{% endblock %}
</header>
<main class="main_site">
{% block body_content %}{% endblock %}
</main>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
{# <script src="bower_components/jquery/dist/jquery.js"></script> #}
{% block script %}{% endblock %}
</body>
</html>

10
source/templates/demo/macros/_nav.njk Normal file
View file

@ -0,0 +1,10 @@
<!-- nav.main.macro -->
{% 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 %}

10
source/templates/demo/macros/nav-macro.njk
View file

@ -1,10 +0,0 @@
{% set item = [['one', 'filename'], ['two', 'filename']] %}
{% macro active(activePage='') %}<!-- nav.macro -->
<nav class="nav_site">
<ul class="nav_site_main">
{% for a, b in item -%}
<li{%if activePage == a %} class="active_txt"{% endif %}>{%if activePage == a %}{{ a }}{%else%}<a href="{{ b }}.html">{{ a }}</a>{% endif %}</li>
{% endfor -%}
</ul>
</nav>
{%- endmacro %}

13
source/templates/demo/partials/_meta.njk Normal file
View file

@ -0,0 +1,13 @@
<!-- meta.partial -->
<meta name="author" content="Interaktionsweise">
<meta name="description" content="hippie">
<meta name="generator" content="Notepad++, Atom">
<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;chrome=1" />
{# <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon"> #}
<link rel="shortcut icon" type="image/x-icon" href="/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/demo/partials/head-meta.njk
View file

@ -1,8 +0,0 @@
<!-- head-meta.partial -->
<meta name="author" content="Interaktionsweise">
<meta name="description" content="hippie">
<meta name="generator" content="Notepad++, Atom">
<meta name="robots" content="noindex">
<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;chrome=1" />

2
source/templates/hippie/partials/page-hover.njk → source/templates/hippie/partials/_body_hover.njk
View file

@ -1,2 +1,2 @@
<!-- page-hover.partial -->
<!-- body_hover.partial -->
<div id="js_tph" class="layer_hover"></div>

28
source/templates/hippie/partials/_body_nav.njk Normal file
View file

@ -0,0 +1,28 @@
<!-- body_nav.partial -->
<div class="pos_rel">
<nav class="nav_page_meta">
<ul>
<li class="magic">
<a href="#begin" class="js_scrolltop a_button_meta">
<div class="sprite_img demo__sprite_up"></div>
{# <img src="../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 meta"></div>
</a>
</li>
<li>
<a href="#end" class="js_scrolldown a_button_meta">
<div class="sprite_img demo__sprite_down"></div>
{# <img src="../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> #}

4
source/templates/hippie/partials/_footer.njk Normal file
View file

@ -0,0 +1,4 @@
<!-- footer.partial -->
<footer class="footer_site">
<div id="end"></div>
</footer>

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

@ -0,0 +1,3 @@
<!-- header.partial -->
<header class="header_site">
</header>

2
source/templates/hippie/partials/footer.njk
View file

@ -1,2 +0,0 @@
<!-- footer.partial -->
<div id="end"></div>

26
source/templates/hippie/partials/nav-page-meta.njk
View file

@ -1,26 +0,0 @@
<!-- nav-page-meta.partial -->
<nav class="nav_page_meta">
<ul>
<li class="magic">
<a href="#begin" class="js_scrolltop a_button_meta">
<div class="sprite_img demo__sprite_up"></div>
{# <img src="../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 meta"></div>
</a>
</li>
<li>
<a href="#end" class="js_scrolldown a_button_meta">
<div class="sprite_img demo__sprite_down"></div>
{# <img src="../art/down.png" alt="" width="32" height="32"> #}
</a>
</li>
</ul>
</nav>
{# <div class="exp_overlay_btn exp_help_btn">
<span class="span_solo">?</span>
</div> #}