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

Compare commits

base: interaktionsweise:63c899b789ba37f08b9a533ad61c17923633d140
Branches Tags
interaktionsweise:development
interaktionsweise:main
interaktionsweise:testing-clean-css
interaktionsweise:testing-gulp
interaktionsweise:testing-npm-scripts
interaktionsweise:v3
interaktionsweise:v2
interaktionsweise:v1
...
compare: interaktionsweise:5765207e51dfadafb9a79ddfb63078f33b8d8578
Branches Tags
interaktionsweise:development
interaktionsweise:main
interaktionsweise:testing-clean-css
interaktionsweise:testing-gulp
interaktionsweise:testing-npm-scripts
interaktionsweise:v3
interaktionsweise:v2
interaktionsweise:v1

8 commits
63c899b789 ... 5765207e51

Author SHA1 Message Date
sthag
5765207e51 feat: Change table classes 2026-02-21 14:09:10 +01:00
sthag
2d3c049d40 feat: Remove pageBase from liquid templates 
- Remove pageBase global from all liquid templates
- Change " to ' for all liquid tags
 2026-02-21 12:58:31 +01:00
sthag
d64bf61a9c feat: Replace layouts template 
- Change nunjucks to liquid for layouts screen
- Add shortcodes for placeholders to eleventy
 2026-02-21 12:16:34 +01:00
sthag
b10379782f feat: Add functionality to table screen 
- New templates for rows with different content
- Rows can now be repositioned
- Change of rows now causes a reindex
 2026-02-21 09:28:50 +01:00
sthag
fd5f3ba89f chore: Add possibility to deploy 
- New npm scripts
- New folder for deployment content
- Currently using a fixed --pathprefix option with hippie as value
- Add deploy to gitignore
 2026-02-19 20:43:52 +01:00
sthag
d04e0e3174 feat: Add content to table screen 2026-02-17 21:53:06 +01:00
sthag
6c5bf2e54d feat: Replace nunjucks with liquid for introduction screen 2026-02-17 21:01:00 +01:00
sthag
f28bed372c feat: Optimize components screen 
- Fix typos
- Format
- Rework shift and capslock detection
 2026-02-17 20:33:44 +01:00
45 changed files with 704 additions and 567 deletions
Download patch file Download diff file Expand all files Collapse all files

26
.eleventy.js
View file

@ -1,5 +1,7 @@
const {EleventyHtmlBasePlugin} = require("@11ty/eleventy");
module.exports = function (eleventyConfig) { module.exports = function (eleventyConfig) {
// eleventyConfig.addPlugin(EleventyHtmlBasePlugin); eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
eleventyConfig.setLiquidOptions({ eleventyConfig.setLiquidOptions({
// greedy: false, // greedy: false,
@ -26,10 +28,32 @@ module.exports = function (eleventyConfig) {
brand: 'hippie', brand: 'hippie',
titlePrefix: '', titlePrefix: '',
titlePostfix: ' - HIPPIE', titlePostfix: ' - HIPPIE',
placeholders: {
name: 'Vorname Nachname',
address: 'Straße Nr., PLZ Ort',
phone: '+49 (0)101 1337 48',
mail: 'name@domain.tld'
},
debugMode: true, debugMode: true,
legacyMode: false legacyMode: false
}); });
eleventyConfig.addShortcode('text', function (text, attrId, attrClass) {
return `<span id="${attrId}" class="${attrClass}">${text}</span>`;
});
eleventyConfig.addShortcode('link', function (target, text, attrId, attrClass) {
if (text === '') {
text = target;
}
if (target.indexOf('@') !== -1) {
target = 'mailto:' + target;
}
return `<a id="${attrId}" class="${attrClass}" href="${target}">${text}</a>`;
});
eleventyConfig.addPassthroughCopy({'source/art/images': 'art'}); eleventyConfig.addPassthroughCopy({'source/art/images': 'art'});
eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'}); eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'});

1
.gitignore vendored
View file

@ -1,6 +1,7 @@
# HIPPIE # HIPPIE
################### ###################
build/** build/**
deploy/**
reports/** reports/**
source/art/sprites/ source/art/sprites/
source/art/images/sprite.* source/art/images/sprite.*

2
package.json
View file

@ -24,9 +24,11 @@
"clean:report": "rm -rf report/*", "clean:report": "rm -rf report/*",
"clean:test": "rm -rf test/*", "clean:test": "rm -rf test/*",
"style:compile": "sass source/style:build/css --load-path=vendor", "style:compile": "sass source/style:build/css --load-path=vendor",
"style:deploy": "sass source/style:deploy/css --load-path=vendor",
"style:watch": "sass --watch source/style:build/css --load-path=vendor", "style:watch": "sass --watch source/style:build/css --load-path=vendor",
"build:new": "npm run clean:build && npx @11ty/eleventy && npm run style:compile", "build:new": "npm run clean:build && npx @11ty/eleventy && npm run style:compile",
"build": "npx @11ty/eleventy && npm run style:compile", "build": "npx @11ty/eleventy && npm run style:compile",
"deploy": "npm run clean:deploy && npx @11ty/eleventy --output=deploy --pathprefix=hippie && npm run style:deploy",
"serve": "npm run style:watch & npx @11ty/eleventy --serve" "serve": "npm run style:watch & npx @11ty/eleventy --serve"
}, },
"private": true, "private": true,

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

@ -3,8 +3,7 @@ title: Basics
tags: tags:
- demoIndex - demoIndex
--- ---
{% assign pageBase = "../" -%} {% layout 'hippie/page.liquid' %}
{% layout "hippie/page.liquid" %}
{% block title %}Grundlagen{% endblock %} {% block title %}Grundlagen{% endblock %}
@ -278,7 +277,7 @@ tags:
<nav class="nav_center_old"> <nav class="nav_center_old">
<ul> <ul>
<li> <li>
<a href="{{ pageBase }}demo.html" class="a_button">Startseite</a> <a href="/demo/examples/start.html" class="a_button">Startseite</a>
</li> </li>
<li> <li>
<a href="" class="a_button a_internal">Hilfe</a> <a href="" class="a_button a_internal">Hilfe</a>
@ -580,7 +579,7 @@ tags:
</article> </article>
<article> <article>
<h1 id="embedded">Eingebundene Inhalte</h1> <h1 id="embedded">Eingebundene Inhalte</h1>
{% render "hippie/partials/placeholder-flag.liquid", type: "img", width: "128", desc: "Fahne von Interaktionsweise" %} {% render 'hippie/partials/placeholder-flag.liquid', type: 'img', width: '128', desc: 'Fahne von Interaktionsweise' %}
<p>Dies ist ein Bild. Es wird mit dem Element <p>Dies ist ein Bild. Es wird mit dem Element
<code>&lt;img&gt;</code> <code>&lt;img&gt;</code>
eingebunden. Solch ein Bild hat üblicherweise die Attribute eingebunden. Solch ein Bild hat üblicherweise die Attribute
@ -599,7 +598,7 @@ tags:
und und
<code>&lt;picture&gt;</code> <code>&lt;picture&gt;</code>
in Kombination verwendet werden.</p> in Kombination verwendet werden.</p>
{% render "hippie/partials/placeholder-flag.liquid", type: "img", src: "file", width: "128", desc: "Fahne von Interaktionsweise" %} {% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '128', desc: 'Fahne von Interaktionsweise' %}
</article> </article>
<article> <article>
<h1>Tabellen</h1> <h1>Tabellen</h1>
@ -632,7 +631,7 @@ tags:
<div class="exp_pop"> <div class="exp_pop">
<code class="code_solo">table>tr>td*2^tr>td[colspan=2]</code> <code class="code_solo">table>tr>td*2^tr>td[colspan=2]</code>
</div> </div>
<table class="table_blank float_space_left js_pop"> <table class="blank float_space_left js_pop">
<tr> <tr>
<td>Mit</td> <td>Mit</td>
<td>ohne</td> <td>ohne</td>
@ -642,12 +641,12 @@ tags:
</tr> </tr>
</table> </table>
<div class="exp_pop"> <div class="exp_pop">
<code class="code_solo">table.table_blank>tr>td*2^tr>td[colspan=2]</code> <code class="code_solo">table.blank>tr>td*2^tr>td[colspan=2]</code>
</div> </div>
</div> </div>
<p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre <p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre
Zellverteilung:</p> Zellverteilung:</p>
<table class="width_full table_fix js_pop"> <table class="width_full fix js_pop">
<caption>Beschreibung bzw. Zusammenhang der Tabelle</caption> <caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
<thead> <thead>
<tr> <tr>
@ -685,7 +684,7 @@ tags:
</tfoot> </tfoot>
</table> </table>
<div class="exp_pop"> <div class="exp_pop">
<code class="code_solo">table.width_full.table_fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2</code> <code class="code_solo">table.width_full.fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2</code>
</div> </div>
<p>Viele weitere Formate sind möglich.</p> <p>Viele weitere Formate sind möglich.</p>
</article> </article>
@ -739,7 +738,7 @@ tags:
</p> </p>
<div class="overflow"> <div class="overflow">
<div class="float_left"> <div class="float_left">
<table class="table_fix table_blank"> <table class="fix blank">
<tr> <tr>
<td> <td>
<label for="demo__raw_a">Alpha:</label> <label for="demo__raw_a">Alpha:</label>

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

@ -3,7 +3,7 @@ title: Components
tags: tags:
- demoIndex - demoIndex
--- ---
{% layout "hippie/page.liquid" %} {% layout 'hippie/page.liquid' %}
{% block title %}Komponenten{% endblock %} {% block title %}Komponenten{% endblock %}
@ -31,8 +31,12 @@ tags:
<section class="sec_main_center"> <section class="sec_main_center">
<header class="header_txt"> <header class="header_txt">
<h1>Übersicht aller Elemente</h1> <h1>Übersicht aller Elemente</h1>
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://html.spec.whatwg.org/multipage/#toc-semantics">html.spec.whatwg.org/multipage/#toc-semantics</a>) verwendet.</p> <p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p> Gruppen eingeteilt, die auch das W3Consortium (<a
href="https://html.spec.whatwg.org/multipage/#toc-semantics">html.spec.whatwg.org/multipage/#toc-semantics</a>)
verwendet.</p>
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax
dargestellt.</p>
</header> </header>
<pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h2{&lt;tag&gt;}+h4{Varianten}</code></pre> <pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h2{&lt;tag&gt;}+h4{Varianten}</code></pre>
<article> <article>
@ -40,7 +44,8 @@ tags:
<p>Elemente:</p> <p>Elemente:</p>
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre> <pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
<h2>&lt;body&gt;</h2> <h2>&lt;body&gt;</h2>
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p> <p>Keine speziellen Attribute. Bekommt üblicherweise allgemeine Klassen zur Steuerung der Abmessungen
zugewiesen.</p>
<h2>&lt;article&gt;</h2> <h2>&lt;article&gt;</h2>
<article>Ein Artikel.</article> <article>Ein Artikel.</article>
<h2>&lt;section&gt;</h2> <h2>&lt;section&gt;</h2>
@ -85,10 +90,10 @@ tags:
<p>Innerhalb eines <code>&lt;header&gt;</code>.</p> <p>Innerhalb eines <code>&lt;header&gt;</code>.</p>
</header> </header>
<h2>&lt;footer&gt;</h2> <h2>&lt;footer&gt;</h2>
<p>Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p> <p>Bekommt üblicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
<footer>Fußbereich</footer> <footer>Fußbereich</footer>
<div style="position:relative;height:256px;background-color:#b7e0f0;"> <div style="position:relative;height:256px;background-color:#b7e0f0;">
{% render "hippie/partials/footer-pinned.liquid" %} {% render 'hippie/partials/footer-pinned.liquid' %}
</div> </div>
</article> </article>
<article> <article>
@ -167,12 +172,11 @@ tags:
<h4>Varianten</h4> <h4>Varianten</h4>
<pre class="pre_code"><code>div.div_info>p</code></pre> <pre class="pre_code"><code>div.div_info>p</code></pre>
<div class="div_info"> <div class="div_info">
<p>Absatz in Informationsbox.</p> <p>Absatz in einer Box mit dem Typ <i>Information</i>.</p>
</div> </div>
<pre class="pre_code"><code>div.box_space>div.box_cube>span</code></pre> <pre class="pre_code"><code>div.box_space>div.box_cube>span</code></pre>
<div class="box_space"> <div class="box_space">
<div class="box_cube"> <div class="box_cube"><span>Text</span></div>
<span>Text</span></div>
</div> </div>
<pre class="pre_code"><code>div.box_placeholder+hr+div.box_placeholder_bkg</code></pre> <pre class="pre_code"><code>div.box_placeholder+hr+div.box_placeholder_bkg</code></pre>
<div class="box_placeholder"></div> <div class="box_placeholder"></div>
@ -185,8 +189,8 @@ tags:
<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre> <pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
<h2>&lt;table&gt;</h2> <h2>&lt;table&gt;</h2>
<h4>Varianten</h4> <h4>Varianten</h4>
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre> <pre class="pre_code"><code>table.width_full.fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
<table class="width_full table_fix"> <table class="width_full fix">
<thead> <thead>
<tr> <tr>
<th class="cell_pre" scope="col"></th> <th class="cell_pre" scope="col"></th>
@ -216,8 +220,8 @@ tags:
</tr> </tr>
</tbody> </tbody>
</table> </table>
<pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre> <pre class="pre_code"><code>table.width_full.stripe.fix.free>tr>td*3</code></pre>
<table class="width_full table_stripe table_fix table_free"> <table class="width_full stripe fix free">
<tr> <tr>
<td>Tabelle</td> <td>Tabelle</td>
<td></td> <td></td>
@ -239,7 +243,7 @@ tags:
<td>Streifen</td> <td>Streifen</td>
</tr> </tr>
</table> </table>
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre> <pre class="pre_code"><code>table.width_full.fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
<table> <table>
<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption> <caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
<thead> <thead>
@ -299,20 +303,24 @@ tags:
</div> </div>
<div id="capsCheck"> <div id="capsCheck">
<form action=""> <form action="">
<input type="password" onkeypress="capLock(event)"/> <input id="inpPass" type="password"/>
<div id="hint" style="visibility:hidden">Caps Lock is on.</div> <span id="hintPass" style="visibility:hidden"><kbd>Shift</kbd> is pressed.</span>
<input type="text"/> <br>
<span id="error">Caps Lock is ON.</span> <input id ="inpText" type="text"/>
<span id="hintText"><kbd>CapsLock</kbd> is on.</span>
</form> </form>
</div> </div>
<h2>&lt;select&gt;</h2> <h2>&lt;select&gt;</h2>
<select name="F"> <select name="F">
<option value="0"> <option value="0">
Plain list</option> Plain list
</option>
<option value="1" selected="selected"> <option value="1" selected="selected">
Fancy list</option> Fancy list
</option>
<option value="2"> <option value="2">
Table list</option> Table list
</option>
</select> </select>
</article> </article>
</section> </section>
@ -321,79 +329,47 @@ tags:
{% block script %} {% block script %}
{{ block.super -}} {{ block.super -}}
<script> <script>
function capLock(e) { const capsHint = document.getElementById('hintPass');
console.log('capLock'); let isShiftPressed = false;
kc = e.keyCode
? e.keyCode
: e.which;
sk = e.shiftKey
? e.shiftKey
: (
(kc == 16)
? true
: false);
if (((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk)) { document.getElementById('inpPass').addEventListener('keydown', shiftDetect);
document
.getElementById('hint') function shiftDetect(event) {
.style if (event.getModifierState('Shift')) {
.visibility = 'visible'; isShiftPressed = true;
capsHint.style.visibility = 'visible';
} else { } else {
document isShiftPressed = false;
.getElementById('hint') capsHint.style.visibility = 'hidden';
.style
.visibility = 'hidden';
} }
console.log('Shift', isShiftPressed);
} }
document.getElementById('inpPass').addEventListener('keyup', (event) => {
if (event.key === 'Shift') {
isShiftPressed = false;
capsHint.style.visibility = 'hidden';
}
});
function capsDetect() { function capsDetect() {
const body = document.getElementsByTagName('body')[0]; const capsHint = document.getElementById('hintText');
const capsWarning = document.getElementById('error');
let isShiftPressed = false;
let isCapsOn = false; let isCapsOn = false;
console.log(body); document.getElementById('inpText').addEventListener('keyup', function (e) {
body.addEventListener('keydown', function (e) { if (event.getModifierState('CapsLock')) {
var keyCode = e.keyCode capsHint.style.display = 'inline';
? e.keyCode
: e.which;
if (keyCode === 16) {
isShiftPressed = true;
}
});
body.addEventListener('keyup', function (e) {
var keyCode = e.keyCode
? e.keyCode
: e.which;
if (keyCode === 16) {
isShiftPressed = false;
}
if (keyCode === 20) {
if (isCapsOn) {
isCapsOn = false;
capsWarning.style.display = 'none';
} else {
isCapsOn = true;
capsWarning.style.display = 'inline-block';
}
}
});
body.addEventListener('keypress', function (e) {
var keyCode = e.keyCode
? e.keyCode
: e.which;
if (keyCode <= 40)
return;
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
isCapsOn = true; isCapsOn = true;
capsWarning.style.display = 'inline-block';
} else { } else {
capsWarning.style.display = 'none'; capsHint.style.display = 'none';
isCapsOn = false;
} }
console.log('CapsLock', isCapsOn);
}); });
} }
// TODO: Beide Varianten lauffähig machen capsDetect();
// capsDetect();
</script> </script>
{% endblock %} {% endblock %}

2
source/screens/demo/examples/10print.liquid
View file

@ -3,7 +3,7 @@ title: 10print
tags: tags:
- demoExample - demoExample
--- ---
{% layout "hippie/simple.liquid" %} {% layout 'hippie/simple.liquid' %}
{% block head %} {% block head %}
{{ block.super -}} {{ block.super -}}

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

@ -3,8 +3,8 @@ title: Clock
tags: tags:
- demoExample - demoExample
--- ---
{% assign bodyClass = "body_clock" -%} {% assign bodyClass = 'body_clock' -%}
{% layout "hippie/simple.liquid" %} {% layout 'hippie/simple.liquid' %}
{% block body %} {% block body %}
<main> <main>

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

@ -4,8 +4,8 @@ tags:
- demoExample - demoExample
- gameExample - gameExample
--- ---
{% assign bodyClass = "body_game" -%} {% assign bodyClass = 'body_game' -%}
{% layout "hippie/simple.liquid" %} {% layout 'hippie/simple.liquid' %}
{% block body %} {% block body %}
<div class="sec_main_center"> <div class="sec_main_center">

5
source/screens/demo/examples/start.liquid
View file

@ -3,10 +3,9 @@ title: Start
tags: tags:
- demoExample - demoExample
--- ---
{% assign pageBase = "../../" -%}
{% assign pageId = page.fileSlug -%} {% assign pageId = page.fileSlug -%}
{% assign bodyClass = "body_start" -%} {% assign bodyClass = 'body_start' -%}
{% layout "hippie/simple.liquid" %} {% layout 'hippie/simple.liquid' %}
{% block body %} {% block body %}
<main> <main>

4
source/screens/demo/examples/ui/cli.liquid
View file

@ -3,8 +3,8 @@ title: CLI
tags: tags:
- ui - ui
--- ---
{% assign bodyClass = "body_cli" -%} {% assign bodyClass = 'body_cli' -%}
{% layout "hippie/app.liquid" %} {% layout 'hippie/app.liquid' %}
{% block body %} {% block body %}
<div id="cli"> <div id="cli">

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

@ -3,7 +3,7 @@ title: Drag
tags: tags:
- ui - ui
--- ---
{% layout "hippie/app.liquid" %} {% layout 'hippie/app.liquid' %}
{% block body %} {% block body %}
<header class="io pos_fix pin_top pin_right pin_left"> <header class="io pos_fix pin_top pin_right pin_left">
@ -22,8 +22,8 @@ tags:
{% endblock %} {% endblock %}
{%- block script %} {%- block script %}
<script src="{{ pageBase }}js/app.js"></script> <script src="/js/app.js"></script>
<script src="{{ pageBase }}js/drag.js"></script> <script src="/js/drag.js"></script>
<script> <script>
// Get the space element // Get the space element
const space = document.getElementById('space'); const space = document.getElementById('space');

4
source/screens/demo/examples/ui/explorer.liquid
View file

@ -3,8 +3,8 @@ title: Explorer
tags: tags:
- ui - ui
--- ---
{% assign bodyClass = "body_frame" -%} {% assign bodyClass = 'body_frame' -%}
{% layout "hippie/app.liquid" %} {% layout 'hippie/app.liquid' %}
{% block body %} {% block body %}
{% render 'hippie/partials/frame-header.liquid' %} {% render 'hippie/partials/frame-header.liquid' %}

4
source/screens/demo/examples/ui/form.liquid
View file

@ -3,8 +3,8 @@ title: Form
tags: tags:
- ui - ui
--- ---
{% assign bodyClass = "body_frame" -%} {% assign bodyClass = 'body_frame' -%}
{% layout "hippie/app.liquid" %} {% layout 'hippie/app.liquid' %}
{% block body %} {% block body %}
{% render 'hippie/partials/frame-header.liquid' %} {% render 'hippie/partials/frame-header.liquid' %}

4
source/screens/demo/examples/ui/gallery.liquid
View file

@ -3,8 +3,8 @@ title: Gallery
tags: tags:
- ui - ui
--- ---
{% assign bodyClass = "body_frame" -%} {% assign bodyClass = 'body_frame' -%}
{% layout "hippie/app.liquid" %} {% layout 'hippie/app.liquid' %}
{% block body %} {% block body %}
{% render 'hippie/partials/frame-header.liquid' %} {% render 'hippie/partials/frame-header.liquid' %}

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

@ -4,7 +4,7 @@ tags:
- demoExample - demoExample
- index - index
--- ---
{% layout "hippie/simple.liquid" %} {% layout 'hippie/simple.liquid' %}
{% block title %}{{ title }}{% endblock %} {% block title %}{{ title }}{% endblock %}

189
source/screens/demo/examples/ui/table.liquid
View file

@ -3,8 +3,8 @@ title: Table
tags: tags:
- ui - ui
--- ---
{% assign bodyClass = "body_frame" -%} {% assign bodyClass = 'body_frame' -%}
{% layout "hippie/app.liquid" %} {% layout 'hippie/app.liquid' %}
{% block body %} {% block body %}
{% render 'hippie/partials/frame-header.liquid' %} {% render 'hippie/partials/frame-header.liquid' %}
@ -19,6 +19,8 @@ tags:
<div class="group-input-wrap"><input id="setScroll" type="checkbox"></div> <div class="group-input-wrap"><input id="setScroll" type="checkbox"></div>
<label for="setScroll">Scroll to new entry</label> <label for="setScroll">Scroll to new entry</label>
</div> </div>
</nav>
<nav>
<button id="tglIndex" title="Toggle index column"> <button id="tglIndex" title="Toggle index column">
<i class="bi bi-hash"></i> <i class="bi bi-hash"></i>
</button> </button>
@ -31,10 +33,10 @@ tags:
</select> </select>
<button id="setPosNum" title="Set numbering" type="button"><i class="bi bi-list-ol"></i></button> <button id="setPosNum" title="Set numbering" type="button"><i class="bi bi-list-ol"></i></button>
</div> </div>
{% comment %}TODO: Auswahl für ziehbares Element hinzufügen{% endcomment %}
</nav> </nav>
<nav></nav>
</header> </header>
<table id="content"> <table id="content" class="draggable">
<thead> <thead>
<tr> <tr>
<th scope="col" title="Index">#</th> <th scope="col" title="Index">#</th>
@ -43,7 +45,10 @@ tags:
<th scope="col">Number</th> <th scope="col">Number</th>
<th scope="col">Name</th> <th scope="col">Name</th>
<th scope="col">Description</th> <th scope="col">Description</th>
<th scope="col">Amount</th>
<th scope="col">Unit</th>
<th scope="col">Price</th> <th scope="col">Price</th>
<th scope="col">Sum</th>
<th scope="col"></th> <th scope="col"></th>
</tr> </tr>
</thead> </thead>
@ -53,12 +58,11 @@ tags:
</section> </section>
</main> </main>
<template id="rowDefault"> <template id="rowDefault">
<tr> <tr draggable="true">
<th scope="row"></th> <th scope="row"></th>
<td class="io"> <td class="io">
<nav> <nav>
<button title="Drag"><i class="bi bi-grip-horizontal"></i></button> <span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
<button title="Expand"><i class="bi bi-arrows-expand"></i></button>
</nav> </nav>
</td> </td>
<td class="pos-num"></td> <td class="pos-num"></td>
@ -68,6 +72,15 @@ tags:
<td> <td>
<textarea class="fit" name="description" cols="64" rows="2"></textarea> <textarea class="fit" name="description" cols="64" rows="2"></textarea>
</td> </td>
<td><input name="amount" type="number"></td>
<td>
<select name="units">
<option value="">None</option>
<option value="piece">Piece(s)</option>
<option value="hour">Hour(s)</option>
</select>
</td>
<td class="unit"></td>
<td class="unit"></td> <td class="unit"></td>
<td class="io"> <td class="io">
<nav> <nav>
@ -78,6 +91,98 @@ tags:
</td> </td>
</tr> </tr>
</template> </template>
<template id="rowArticle">
<tr draggable="true">
<th scope="row"></th>
<td class="io">
<nav>
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
</nav>
</td>
<td class="pos-num"></td>
<td class="rigid"></td>
<td></td>
{% comment %}<td class="ellipsis"></td>{% endcomment %}
<td>
<textarea class="fit" name="description" cols="64" rows="2"></textarea>
</td>
<td><input name="amount" type="number"></td>
<td>
<select name="units">
<option value="">None</option>
<option value="piece">Piece(s)</option>
<option value="hour">Hour(s)</option>
</select>
</td>
<td class="unit"></td>
<td class="unit"></td>
<td class="io">
<nav>
<button title="Event"><i class="bi bi-calendar-event"></i></button>
<button title="Note"><i class="bi bi-journal"></i></button>
<button title="Delete"><i class="bi bi-trash"></i></button>
</nav>
</td>
</tr>
</template>
<template id="rowText">
<tr draggable="true">
<th scope="row"></th>
<td class="io">
<nav>
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
</nav>
</td>
<td class="pos-num"></td>
<td class="rigid"></td>
<td colspan="6">
<textarea class="fit" name="description" cols="64" rows="2"></textarea>
</td>
<td class="io">
<nav>
<button title="Event"><i class="bi bi-calendar-event"></i></button>
<button title="Note"><i class="bi bi-journal"></i></button>
<button title="Delete"><i class="bi bi-trash"></i></button>
</nav>
</td>
</tr>
</template>
<template id="rowGroup">
<tr draggable="true">
<th scope="row"></th>
<td class="io">
<nav>
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
<button title="Expand"><i class="bi bi-arrows-expand"></i></button>
</nav>
</td>
<td class="pos-num"></td>
<td class="rigid"></td>
<td></td>
{% comment %}<td class="ellipsis"></td>{% endcomment %}
<td>
<textarea class="fit" name="description" cols="64" rows="2"></textarea>
</td>
<td><input name="amount" type="number"></td>
<td>
<select name="units">
<option value="">None</option>
<option value="piece">Piece(s)</option>
<option value="hour">Hour(s)</option>
</select>
</td>
<td class="unit"></td>
<td class="unit"></td>
<td class="io">
<nav>
<button title="Event"><i class="bi bi-calendar-event"></i></button>
<button title="Note"><i class="bi bi-journal"></i></button>
<button title="Delete"><i class="bi bi-trash"></i></button>
</nav>
</td>
</tr>
</template>
{% render 'hippie/partials/frame-mode.liquid' %} {% render 'hippie/partials/frame-mode.liquid' %}
{% endblock %} {% endblock %}
@ -116,7 +221,6 @@ tags:
const currencyEuro = new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}); const currencyEuro = new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'});
const content = document.querySelector('main.io section > table'); const content = document.querySelector('main.io section > table');
// const content = document.getElementById('content');
const tbodyPosition = document.getElementById('positions'); const tbodyPosition = document.getElementById('positions');
tbodyPosition.addEventListener('click', (event) => { tbodyPosition.addEventListener('click', (event) => {
@ -140,6 +244,9 @@ tags:
const j = i % placeholderNames.length; const j = i % placeholderNames.length;
const k = randomIntFrom(0, placeholderContents.length - 1); const k = randomIntFrom(0, placeholderContents.length - 1);
const amount = randomIntFrom(1, 100);
const price = randomFloatFrom(1, 10000, 2);
const sum = amount * price;
tr.setAttribute('data-id', i); tr.setAttribute('data-id', i);
th.textContent = i + 1; th.textContent = i + 1;
@ -147,8 +254,10 @@ tags:
td[3].textContent = placeholderNames[j]; td[3].textContent = placeholderNames[j];
// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]); // td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
td[4].firstElementChild.textContent = placeholderContents[k]; td[4].firstElementChild.textContent = placeholderContents[k];
// td[5].textContent = randomIntFrom(1, i).toString(); td[5].firstElementChild.value = amount;
td[5].textContent = currencyEuro.format(randomFloatFrom(1, 1000000, 2)); td[5].firstElementChild.style.width = '4em';
td[7].textContent = currencyEuro.format(price);
td[8].textContent = currencyEuro.format(sum);
tbodyPosition.appendChild(clone); tbodyPosition.appendChild(clone);
} }
@ -217,7 +326,55 @@ tags:
elementNew.scrollIntoView({behavior: 'smooth', block: 'nearest'}); elementNew.scrollIntoView({behavior: 'smooth', block: 'nearest'});
} }
} }
// TODO: Neuen index bilden
reindexRows(tbodyPosition);
});
let draggedRow = null;
tbodyPosition.addEventListener('dragstart', (event) => {
const rowTarget = event.target.closest('tr[draggable="true"]');
if (rowTarget) {
draggedRow = rowTarget;
rowTarget.classList.add('dragging');
event.dataTransfer.effectAllowed = 'move';
console.debug('Drag', rowTarget);
}
});
tbodyPosition.addEventListener('dragend', () => {
if (draggedRow) {
draggedRow.classList.remove('dragging');
draggedRow = null;
}
});
tbodyPosition.addEventListener('dragover', (event) => {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
const rowTarget = event.target.closest('tr');
if (rowTarget && rowTarget !== draggedRow) {
const rows = [...tbodyPosition.querySelectorAll('tr')];
const draggedIndex = rows.indexOf(draggedRow);
const targetIndex = rows.indexOf(rowTarget);
if (draggedIndex < targetIndex) {
rowTarget.parentNode.insertBefore(draggedRow, rowTarget.nextSibling);
} else {
rowTarget.parentNode.insertBefore(draggedRow, rowTarget);
}
}
});
tbodyPosition.addEventListener('drop', (event) => {
event.preventDefault();
reindexRows(event.currentTarget);
console.debug('Drop');
}); });
function cloneRow(type = 'default') { function cloneRow(type = 'default') {
@ -228,5 +385,15 @@ tags:
return document.importNode(rowFragment, true); return document.importNode(rowFragment, true);
} }
function reindexRows(parent, selector = 'tr') {
const rows = parent.querySelectorAll(selector);
let th = undefined;
for (let i = 0; i < rows.length; i++) {
th = rows[i].querySelector('th');
th.textContent = i + 1;
}
}
</script> </script>
{% endblock %} {% endblock %}

4
source/screens/demo/examples/ui/tile.liquid
View file

@ -3,8 +3,8 @@ title: Tile
tags: tags:
- ui - ui
--- ---
{% assign bodyClass = "body_new" -%} {% assign bodyClass = 'body_new' -%}
{% layout "hippie/app.liquid" %} {% layout 'hippie/app.liquid' %}
{% block body %} {% block body %}
{% render 'hippie/partials/header-status', hippie: hippie, links: start %} {% render 'hippie/partials/header-status', hippie: hippie, links: start %}

4
source/screens/demo/examples/ui/tui.liquid
View file

@ -3,8 +3,8 @@ title: TUI
tags: tags:
- ui - ui
--- ---
{% assign bodyClass = "body_frame" -%} {% assign bodyClass = 'body_frame' -%}
{% layout "hippie/app.liquid" %} {% layout 'hippie/app.liquid' %}
{% block body %} {% block body %}
{% render 'hippie/partials/frame-header.liquid' %} {% render 'hippie/partials/frame-header.liquid' %}

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

@ -3,8 +3,8 @@ title: Windows
tags: tags:
- ui - ui
--- ---
{% assign bodyClass = "body_frame" -%} {% assign bodyClass = 'body_frame' -%}
{% layout "hippie/app.liquid" %} {% layout 'hippie/app.liquid' %}
{% block body %} {% block body %}
<div id="task-bar"> <div id="task-bar">
@ -50,10 +50,10 @@ tags:
{% endblock %} {% endblock %}
{%- block script %} {%- block script %}
{% comment %}<script src="{{ pageBase }}js/globals.js"></script>{% endcomment %} {% comment %}<script src="/js/globals.js"></script>{% endcomment %}
<script src="/vendor/hippie-script.js"></script> <script src="/vendor/hippie-script.js"></script>
<script src="{{ pageBase }}js/app.js"></script> <script src="/js/app.js"></script>
<script src="{{ pageBase }}js/windows.js"></script> <script src="/js/windows.js"></script>
<script> <script>
console.log(HIPPIE.brand); console.log(HIPPIE.brand);
// Get the space element // Get the space element

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

@ -4,10 +4,9 @@ title: Index
tags: tags:
- demoIndex - demoIndex
--- ---
{% assign pageBase = hippie.pageBase -%}
{% assign pageId = page.fileSlug -%} {% assign pageId = page.fileSlug -%}
{% assign pageClass = "h_full_view" -%} {% assign pageClass = 'h_full_view' -%}
{% layout "hippie/full.liquid" %} {% layout 'hippie/full.liquid' %}
{% block body %} {% block body %}
<div class="wrap"> <div class="wrap">

40
source/screens/demo/introduction.liquid Normal file
View file

@ -0,0 +1,40 @@
---
title: Introduction
tags:
- demoIndex
---
{% layout 'hippie/page.liquid' %}
{% block title %}Einführung{% endblock %}
{% block main %}
<section class="sec_main_center">
<header>
<hgroup>
<h1>Introduction to HIPPIE</h1>
<p>Hippie interweaves preeminent personal interface elements.</p>
</hgroup>
</header>
<article>
<p>&hellip;</p>
<p>Contact: <a id="special" href=""></a>
</p>
<p>More: <a class="general" href=""></a>, <a class="general" href=""></a>
</p>
</article>
</section>
{% endblock %}
{% 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 %}

47
source/screens/demo/introduction.njk
View file

@ -1,47 +0,0 @@
---
title: Introduction
tags:
- demoIndex
---
{% set pageBase = "../" %}
{% set pageId = "intro" %}
{% extends "demo/_main.njk" %}
{% block title %}Einführung{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<!-- {{ page.fileSlug }}.page -->
<section class="sec_main_center">
<header>
<hgroup>
<h1>Introduction to HIPPIE</h1>
<p>Hippie interweaves preeminent personal interface elements.</p>
</hgroup>
</header>
<article>
<p>&hellip;</p>
<p>Contact: <a id="special" href=""></a>
</p>
<p>More: <a class="general" href=""></a>, <a class="general" href=""></a>
</p>
</article>
</section>
{% endblock %}
{% block script %}
{{ 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 %}

314
source/screens/demo/layouts.liquid Normal file
View file

@ -0,0 +1,314 @@
---
title: Layouts
tags:
- demoIndex
---
{% layout 'hippie/page.liquid' %}
{% block title %}Gestaltungen{% endblock %}
{% block main %}
<section class="sec_main_center">
<header class="header_txt">
<h1>Sammlung formatierter Elemente</h1>
<p>Die Elemente werden fortlaufend komplexer</p>
</header>
<article>
<h2>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">
<div class="float_space_left demo__avatar">
{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '256', desc: 'Avatar' %}
</div>
<p>{% text hippie.placeholders.name %}<br>{% text hippie.placeholders.address %}</p>
<p>{% text hippie.placeholders.phone %}<br>{% link hippie.placeholders.mail, '', '', 'a_line' %}</p>
</section>
<h3>nav</h3>
<pre class="pre_code"><code>div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)</code></pre>
<div class="overflow">
<nav class="float_space_left">
<ul>
<li>
<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
</li>
<li>
<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
</li>
<li>
<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
</li>
<li>
<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
</li>
</ul>
</nav>
<nav>
<ul>
<li>
<a href="" class="a_button_border">Stufe 1</a>
</li>
<li>
<a href="" class="a_button_border">Stufe 2</a>
</li>
<li>
<a href="" class="a_button_border">Stufe 3</a>
</li>
<li>
<a href="" class="a_button_border">Stufe 4</a>
</li>
</ul>
</nav>
</div>
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4</code></pre>
<nav class="nav_horizontal">
<ul>
<li>
<a href="" class="a_button">Abschnitt 1</a>
</li>
<li>
<a href="" class="a_button">Abschnitt 2</a>
</li>
<li>
<a href="" class="a_button">Abschnitt 3</a>
</li>
<li>
<a href="" class="a_button">Abschnitt 4</a>
</li>
</ul>
</nav>
<pre class="pre_code"><code>div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
<div class="overflow">
<nav class="nav_center_old">
<ul>
<li>
<a href="" class="a_button">Typ 1</a>
</li>
<li>
<a href="" class="a_button">Typ 2</a>
</li>
<li>
<a href="" class="a_button">Typ 3</a>
</li>
<li>
<a href="" class="a_button">Typ 4</a>
</li>
</ul>
</nav>
</div>
<h3>header</h3>
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
<header class="header_page demo__header header_fancy">
<h1>Aufmacher</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio,
volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh
quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
<nav class="nav_separate_right">
<ul>
<li>
<a href="" class="a_button">Mensch</a>
</li>
<li>
<a href="" class="a_button">Pflanze</a>
</li>
</ul>
</nav>
<nav class="nav_right">
<ul>
<li>
<a href="" class="a_button">Blau</a>
</li>
<li>
<a href="" class="a_button">Gelb</a>
</li>
</ul>
</nav>
</header>
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
<div class="box_space h_basic">
<header id="js_demo_fix" class="header_page demo__header header_fix">
<nav class="nav_right">
<ul>
<li>
<a href="" class="a_button">Eins</a>
</li>
<li>
<a href="" class="a_button">Zwei</a>
</li>
</ul>
</nav>
</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">
<nav class="nav_column nav_separate">
<ul>
<li>
<a href="" class="a_button_text">Alpha</a>
</li>
<li>
<a href="" class="a_button_text">Bravo</a>
</li>
<li>
<a href="" class="a_button_text">Charlie</a>
</li>
<li>
<a href="" class="a_button_text">Delta</a>
</li>
</ul>
</nav>
<p class="txt_center demo__credits">
<i class="i_bright">👨‍💻</i>
mit
<i class="i_bright">❤</i>
von
<a href="https://interaktionsweise.de">Interaktionsweise</a>
</p>
</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>
<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>
<p class="txt_center">Mittig</p>
<p class="txt_left">Links</p>
<h3>h*</h3>
<pre class="pre_code"><code>h3.txt_color_dark+p.txt_tiny</code></pre>
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
<p class="txt_tiny">Mit winzigem Textabsatz</p>
<pre class="pre_code"><code>a>h4</code></pre>
<a href="">
<h4>Überschrift als Block-Verweis</h4>
</a>
<h1>Überschrift 1</h1>
<h1>Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.</h1>
<h2>Überschrift 2</h2>
<h2>kann das ebenso.</h2>
<h3>hr</h3>
<pre class="pre_code"><code>hr.space_even_half</code></pre>
<hr class="space_even_half">
<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>
<nav>
<ul class="list_link">
<li>{% link hippie.placeholders.mail, '📧 name@domain.tld' %}</li>
<li>
<a href=""><img src="/art/bullet.gif" alt="">{% text hippie.placeholders.name %}</a>
</li>
</ul>
</nav>
<h3>div</h3>
<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre>
<div class="space_left_fourth">
<hr/>
<p>Eingerückter Inhalt</p>
<hr/>
</div>
<h2>Tabellen</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>
<tr>
<th>&nbsp;</th>
<th>Ab / Zy</th>
<th>Neu / Alt</th>
</tr>
</thead>
<tbody>
<tr>
<td class="icon" rowspan="2">■</td>
<td class="link">
<span>Name</span>
<a href="" target="_blank">URL</a>
</td>
<td rowspan="2">YYYY-MM-DD</td>
</tr>
<tr>
<td class="text">
<div class="shorten">Beschreibung</div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="icon" rowspan="2">■</td>
<td class="link">
<span>Name</span>
<a href="" target="_blank">URL</a>
</td>
<td rowspan="2">YYYY-MM-DD</td>
</tr>
<tr>
<td class="text">
<div class="shorten">Beschreibung</div>
</td>
</tr>
</tbody>
</table>
<h2>Eingebettet</h2>
<div class="demo__flag">
{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
</div>
</article>
</section>
{% 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'});
});
</script>
{% endblock %}

317
source/screens/demo/layouts.njk
View file

@ -1,317 +0,0 @@
---
title: Layouts
tags:
- demoIndex
---
{% set pageBase = "../" %}
{% set pageId = page.fileSlug %}
{% extends "demo/_main.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %}
{% block title %}Gestaltungen{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<!-- {{ page.fileSlug }}.page -->
<section class="sec_main_center">
<header class="header_txt">
<h1>Sammlung formatierter Elemente</h1>
<p>Die Elemente werden fortlaufend komplexer</p>
</header>
<article>
<h2>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">
<div class="float_space_left demo__avatar">{{ ph.flag('img', '', '', 'Avatar', '256') }}</div>
<p>{{ ph.name() }}<br>{{ ph.address() }}</p>
<p>{{ ph.phone() }}<br>{{ ph.email('lineLink') }}</p>
</section>
<h3>nav</h3>
<pre class="pre_code"><code>div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)</code></pre>
<div class="overflow">
<nav class="float_space_left">
<ul>
<li>
<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
</li>
<li>
<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
</li>
<li>
<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
</li>
<li>
<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
</li>
</ul>
</nav>
<nav>
<ul>
<li>
<a href="" class="a_button_border">Stufe 1</a>
</li>
<li>
<a href="" class="a_button_border">Stufe 2</a>
</li>
<li>
<a href="" class="a_button_border">Stufe 3</a>
</li>
<li>
<a href="" class="a_button_border">Stufe 4</a>
</li>
</ul>
</nav>
</div>
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4</code></pre>
<nav class="nav_horizontal">
<ul>
<li>
<a href="" class="a_button">Abschnitt 1</a>
</li>
<li>
<a href="" class="a_button">Abschnitt 2</a>
</li>
<li>
<a href="" class="a_button">Abschnitt 3</a>
</li>
<li>
<a href="" class="a_button">Abschnitt 4</a>
</li>
</ul>
</nav>
<pre class="pre_code"><code>div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
<div class="overflow">
<nav class="nav_center_old">
<ul>
<li>
<a href="" class="a_button">Typ 1</a>
</li>
<li>
<a href="" class="a_button">Typ 2</a>
</li>
<li>
<a href="" class="a_button">Typ 3</a>
</li>
<li>
<a href="" class="a_button">Typ 4</a>
</li>
</ul>
</nav>
</div>
<h3>header</h3>
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
<header class="header_page demo__header header_fancy">
<h1>Aufmacher</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
<nav class="nav_separate_right">
<ul>
<li>
<a href="" class="a_button">Mensch</a>
</li>
<li>
<a href="" class="a_button">Pflanze</a>
</li>
</ul>
</nav>
<nav class="nav_right">
<ul>
<li>
<a href="" class="a_button">Blau</a>
</li>
<li>
<a href="" class="a_button">Gelb</a>
</li>
</ul>
</nav>
</header>
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
<div class="box_space h_basic">
<header id="js_demo_fix" class="header_page demo__header header_fix">
<nav class="nav_right">
<ul>
<li>
<a href="" class="a_button">Eins</a>
</li>
<li>
<a href="" class="a_button">Zwei</a>
</li>
</ul>
</nav>
</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">
<nav class="nav_column nav_separate">
<ul>
<li>
<a href="" class="a_button_text">Alpha</a>
</li>
<li>
<a href="" class="a_button_text">Bravo</a>
</li>
<li>
<a href="" class="a_button_text">Charlie</a>
</li>
<li>
<a href="" class="a_button_text">Delta</a>
</li>
</ul>
</nav>
<p class="txt_center demo__credits">
<i class="i_bright">👨‍💻</i>
mit
<i class="i_bright">❤</i>
von
<a href="https://interaktionsweise.de">Interaktionsweise</a>
</p>
</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>
<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>
<p class="txt_center">Mittig</p>
<p class="txt_left">Links</p>
<h3>h*</h3>
<pre class="pre_code"><code>h3.txt_color_dark+p.txt_tiny</code></pre>
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
<p class="txt_tiny">Mit winzigem Textabsatz</p>
<pre class="pre_code"><code>a>h4</code></pre>
<a href="">
<h4>Überschrift als Block-Verweis</h4>
</a>
<h1>Überschrift 1</h1>
<h1>Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.</h1>
<h2>Überschrift 2</h2>
<h2>kann das ebenso.</h2>
<h3>hr</h3>
<pre class="pre_code"><code>hr.space_even_half</code></pre>
<hr class="space_even_half">
<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>
<nav>
<ul class="list_link">
<li>{{ ph.email('', '📧 name@domain.tld') }}</li>
<li>
<a href=""><img src="{{ pageBase }}art/bullet.gif" alt="">{{ ph.name() }}</a>
</li>
</ul>
</nav>
<h3>div</h3>
<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre>
<div class="space_left_fourth">
<hr/>
<p>Eingerückter Inhalt</p>
<hr/>
</div>
<h2>Tabellen</h2>
<pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2</code></pre>
<table class="table_link js_pop">
<thead>
<tr>
<th>&nbsp;</th>
<th>Ab / Zy</th>
<th>Neu / Alt</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell_icon" rowspan="2">■</td>
<td class="cell_link">
<a href="" target="_blank">Name</a>
<a href="" target="_blank">URL</a>
</td>
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
</tr>
<tr>
<td class="cell_text">
<div class="shorten">Beschreibung</div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="cell_icon" rowspan="2">■</td>
<td class="cell_link">
<a href="" target="_blank">Name</a>
<a href="" target="_blank">URL</a>
</td>
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
</tr>
<tr>
<td class="cell_text">
<div class="shorten">Beschreibung</div>
</td>
</tr>
</tbody>
</table>
<h2>Eingebettet</h2>
<div class="demo__flag">
{{ ph.flag() }}
</div>
</article>
</section>
{% endblock %}
{% block script %}
{{ super() }}
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
{{ log.asset(true) }}
{{ log.log('Assets loaded.', assetsLoaded) }}
<script>
// Page specific
// ------------------------------------------------------------------------------
$(document).ready(function () {
// jq-sticky-anything
$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
});
</script>
{% endblock %}

7
source/screens/demo/pages/blank.liquid
View file

@ -1,10 +1,5 @@
--- ---
title: Blank title: Blank
--- ---
{% assign pageBase = "../../" -%}
{% assign pageId = page.fileSlug -%} {% assign pageId = page.fileSlug -%}
{% layout "hippie/simple.liquid" %} {% layout 'hippie/simple.liquid' %}
{% block body %}
<!-- {{ title }} -->
{% endblock %}

16
source/screens/demo/pages/default.liquid
View file

@ -1,17 +1,13 @@
--- ---
title: Default title: Default
--- ---
{% assign pageBase = "../" -%}
{% assign pageId = page.fileSlug -%} {% assign pageId = page.fileSlug -%}
{% assign pageClass = "default" -%} {% assign pageClass = 'default' -%}
{% assign bodyClass = "default" -%} {% assign bodyClass = 'default' -%}
{% layout "hippie/default.liquid" %} {% layout 'hippie/default.liquid' %}
{% block title %}{{ title }}{% endblock %} {% block title %}{{ title }}{% endblock %}
{% block script %} {% block body %}
<script> <!-- {{ title }} body -->
// Page script {% endblock %}
console.log("pageBase is: {{ pageBase }}");
</script>
{% endblock %}

5
source/screens/demo/pages/error/304.liquid
View file

@ -1,9 +1,8 @@
--- ---
title: 304 title: 304
--- ---
{% assign pageBase = "../../../" -%} {% assign bodyClass = 'body_status' %}
{% assign bodyClass = "body_status" %} {% layout 'hippie/status.liquid' %}
{% layout "hippie/status.liquid" %}
{% block main %} {% block main %}
{{ block.super -}} {{ block.super -}}

5
source/screens/demo/pages/error/400.liquid
View file

@ -1,9 +1,8 @@
--- ---
title: 400 title: 400
--- ---
{% assign pageBase = "../../../" -%} {% assign bodyClass = 'body_status' %}
{% assign bodyClass = "body_status" %} {% layout 'hippie/status.liquid' %}
{% layout "hippie/status.liquid" %}
{% block main %} {% block main %}
{{ block.super -}} {{ block.super -}}

5
source/screens/demo/pages/error/401.liquid
View file

@ -1,9 +1,8 @@
--- ---
title: 401 title: 401
--- ---
{% assign pageBase = "../../../" -%} {% assign bodyClass = 'body_status' %}
{% assign bodyClass = "body_status" %} {% layout 'hippie/status.liquid' %}
{% layout "hippie/status.liquid" %}
{% block main %} {% block main %}
{{ block.super -}} {{ block.super -}}

5
source/screens/demo/pages/error/403.liquid
View file

@ -1,9 +1,8 @@
--- ---
title: 403 title: 403
--- ---
{% assign pageBase = "../../../" -%} {% assign bodyClass = 'body_status' %}
{% assign bodyClass = "body_status" %} {% layout 'hippie/status.liquid' %}
{% layout "hippie/status.liquid" %}
{% block main %} {% block main %}
{{ block.super -}} {{ block.super -}}

5
source/screens/demo/pages/error/404.liquid
View file

@ -1,9 +1,8 @@
--- ---
title: 404 title: 404
--- ---
{% assign pageBase = "../../../" -%} {% assign bodyClass = 'body_status' %}
{% assign bodyClass = "body_status" %} {% layout 'hippie/status.liquid' %}
{% layout "hippie/status.liquid" %}
{% block main %} {% block main %}
{{ block.super -}} {{ block.super -}}

5
source/screens/demo/pages/error/408.liquid
View file

@ -1,9 +1,8 @@
--- ---
title: 408 title: 408
--- ---
{% assign pageBase = "../../../" -%} {% assign bodyClass = 'body_status' %}
{% assign bodyClass = "body_status" %} {% layout 'hippie/status.liquid' %}
{% layout "hippie/status.liquid" %}
{% block main %} {% block main %}
{{ block.super -}} {{ block.super -}}

5
source/screens/demo/pages/error/500.liquid
View file

@ -1,9 +1,8 @@
--- ---
title: 500 title: 500
--- ---
{% assign pageBase = "../../../" -%} {% assign bodyClass = 'body_status' %}
{% assign bodyClass = "body_status" %} {% layout 'hippie/status.liquid' %}
{% layout "hippie/status.liquid" %}
{% block main %} {% block main %}
{{ block.super -}} {{ block.super -}}

5
source/screens/demo/pages/error/503.liquid
View file

@ -1,9 +1,8 @@
--- ---
title: 503 title: 503
--- ---
{% assign pageBase = "../../../" -%} {% assign bodyClass = 'body_status' %}
{% assign bodyClass = "body_status" %} {% layout 'hippie/status.liquid' %}
{% layout "hippie/status.liquid" %}
{% block main %} {% block main %}
{{ block.super -}} {{ block.super -}}

5
source/screens/demo/pages/maintenance.liquid
View file

@ -1,9 +1,8 @@
--- ---
title: Maintenance title: Maintenance
--- ---
{% assign pageBase = "../../" -%} {% assign pageClass = 'h_full_view' -%}
{% assign pageClass = "h_full_view" -%} {% layout 'hippie/status.liquid' %}
{% layout "hippie/status.liquid" %}
{% block body %} {% block body %}
<hgroup id="root" class="txt_center"> <hgroup id="root" class="txt_center">

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit 91d136f1c310c6276ecb2f4318f468f842099816 Subproject commit 69535d87ac38cbe210ed40f6c2b9952b67b8ce5f

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

@ -1,7 +1,6 @@
{% assign pageBase = "../../../" -%}
{% assign pageId = page.fileSlug -%} {% assign pageId = page.fileSlug -%}
{% assign pageClass = "html_ui" -%} {% assign pageClass = 'html_ui' -%}
{% layout "hippie/default.liquid" %} {% layout 'hippie/default.liquid' %}
{% block title %}{{ title }}{% endblock %} {% block title %}{{ title }}{% endblock %}

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

@ -18,10 +18,10 @@
{{ hippie.titlePostfix -}} {{ hippie.titlePostfix -}}
</title> </title>
{% block meta -%} {% block meta -%}
{% render "hippie/partials/meta.liquid" %} {% render 'hippie/partials/meta.liquid' %}
{% endblock -%} {% endblock -%}
{% block links -%} {% block links -%}
{% render "hippie/partials/links.liquid" %} {% render 'hippie/partials/links.liquid' %}
{% endblock -%} {% endblock -%}
{% endblock -%} {% endblock -%}
</head> </head>
@ -29,7 +29,7 @@
<body{{ bodyClassAttr }}> <body{{ bodyClassAttr }}>
{%- block body %}{% endblock -%} {%- block body %}{% endblock -%}
<script> <script>
// Default script // {{ title }} script
</script> </script>
{%- block script %}{% endblock -%} {%- block script %}{% endblock -%}
</body> </body>

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

@ -18,19 +18,17 @@
{{ hippie.titlePostfix -}} {{ hippie.titlePostfix -}}
</title> </title>
{% block meta -%} {% block meta -%}
{% render "hippie/partials/meta.liquid", author: "Interaktionsweise", desc: "Hippie interweaves preeminent personal interface elements" %} {% render 'hippie/partials/meta.liquid', author: 'Interaktionsweise', desc: 'Hippie interweaves preeminent personal interface elements' %}
{% comment %}<base href="/">{% endcomment %} {% comment %}<base href="/">{% endcomment %}
{% endblock -%} {% endblock -%}
{% render "hippie/partials/script-log.liquid" %} {% render 'hippie/partials/script-log.liquid' %}
{% render "hippie/partials/log-setup", hippie: hippie, state: true -%} {% render 'hippie/partials/log-setup', hippie: hippie, state: true -%}
{% render "hippie/partials/log-start" -%} {% render 'hippie/partials/log-start' -%}
{% block links -%} {% block links -%}
{% render "hippie/partials/links.liquid" %} {% render 'hippie/partials/links.liquid' %}
{% comment %}<link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/>{% endcomment %}
{% comment %}<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/>{% endcomment %}
<link rel="stylesheet" media="all" href="/css/demo.css" type="text/css"/> <link rel="stylesheet" media="all" href="/css/demo.css" type="text/css"/>
{% endblock -%} {% endblock -%}
{% render "hippie/partials/log-log" with "HEAD end :: Links parsed, starting to load." as msg -%} {% render 'hippie/partials/log-log' with 'HEAD end :: Links parsed, starting to load.' as msg -%}
{% endblock -%} {% endblock -%}
</head> </head>

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

@ -1,5 +1,5 @@
{% assign pageId = page.fileSlug -%} {% assign pageId = page.fileSlug -%}
{% layout "hippie/full.liquid" %} {% layout 'hippie/full.liquid' %}
{% block meta %} {% block meta %}
{{ block.super -}} {{ block.super -}}
@ -22,15 +22,15 @@
{% block body %} {% block body %}
{{ block.super -}} {{ block.super -}}
{% render "hippie/partials/nav-page.liquid" %} {% render 'hippie/partials/nav-page.liquid' %}
<div id="root"> <div id="root">
{% render "hippie/partials/header-page.liquid" %} {% render 'hippie/partials/header-page.liquid' %}
<main class="main_site"> <main class="main_site">
{% block main %}{% endblock %} {% block main %}{% endblock %}
</main> </main>
{% render "hippie/partials/footer-page.liquid" %} {% render 'hippie/partials/footer-page.liquid' %}
</div> </div>
{% endblock %} {% endblock %}

2
source/templates/hippie/partials/links.liquid
View file

@ -1,3 +1,3 @@
{% comment %}<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">{% endcomment %} {% comment %}<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">{% endcomment %}
<link rel="shortcut icon" type="image/x-icon" href="{{ pageBase }}favicon.ico"> <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="> <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=">

4
source/templates/hippie/partials/nav-page.liquid
View file

@ -4,7 +4,7 @@
<li class="js_scrolltop di_none"> <li class="js_scrolltop di_none">
<a href="#begin" class="a_button_meta"> <a href="#begin" class="a_button_meta">
<div class="sprite_img demo__sprite_up"></div> <div class="sprite_img demo__sprite_up"></div>
{% comment %}<img src="{{ pageBase }}art/up.png" alt="" width="32" height="64">{% endcomment %} {% comment %}<img src="/art/up.png" alt="" width="32" height="64">{% endcomment %}
</a> </a>
</li> </li>
<li> <li>
@ -22,7 +22,7 @@
<li class="js_scrolldown"> <li class="js_scrolldown">
<a href="#end" class="a_button_meta"> <a href="#end" class="a_button_meta">
<div class="sprite_img demo__sprite_down"></div> <div class="sprite_img demo__sprite_down"></div>
{% comment %}<img src="{{ pageBase }}art/down.png" alt="" width="32" height="32">{% endcomment %} {% comment %}<img src="/art/down.png" alt="" width="32" height="32">{% endcomment %}
</a> </a>
</li> </li>
</ul> </ul>

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

@ -1,4 +1,5 @@
{% assign height = width | divided_by: 1.6 %} {% assign height = width | divided_by: 1.6 %}
{% if type == 'svg' or type == '' %} {% 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"> <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">
{% comment %}<defs> {% comment %}<defs>

2
source/templates/hippie/simple.liquid
View file

@ -1,5 +1,5 @@
{% assign pageId = page.fileSlug -%} {% assign pageId = page.fileSlug -%}
{% layout "hippie/default.liquid" %} {% layout 'hippie/default.liquid' %}
{% block title %}{{ title }}{% endblock %} {% block title %}{{ title }}{% endblock %}

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

@ -15,12 +15,12 @@
{{ hippie.titlePostfix -}} {{ hippie.titlePostfix -}}
</title> </title>
{% block meta -%} {% block meta -%}
{% render "hippie/partials/meta.liquid" %} {% render 'hippie/partials/meta.liquid' %}
{% endblock -%} {% endblock -%}
{% block links -%} {% block links -%}
<link rel="shortcut icon" type="image/x-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="> 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=">
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/> <link rel="stylesheet" type="text/css" media="all" href="/css/demo_basic.css"/>
{% endblock -%} {% endblock -%}
{% endblock -%} {% endblock -%}
</head> </head>