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

style: Spaces to tabs

Browse source
This commit is contained in:
sthag 2025-05-18 13:08:58 +02:00
parent 875041bacf
commit 8f15664d57
12 changed files with 1580 additions and 1577 deletions
Download patch file Download diff file Expand all files Collapse all files

42
source/code/hippie/variables.js
View file

@ -1,16 +1,16 @@
let hippie = { let hippie = {
brand: "|-| | |^ |^ | [- ", brand: "|-| | |^ |^ | [- ",
screen: { screen: {
w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0), w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0), vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0), dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0),
y: Math.min($(document).scrollTop(), document.documentElement.scrollTop) y: Math.min($(document).scrollTop(), document.documentElement.scrollTop)
// hippie.screen.y: document.documentElement.scrollTop // hippie.screen.y: document.documentElement.scrollTop
}, },
body: { body: {
w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0), w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0),
h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0), h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0),
} }
}; };
let viewHover = true; let viewHover = true;
let basicEase = 600; let basicEase = 600;
@ -18,13 +18,13 @@ let basicEase = 600;
const onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ "; const onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
const onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) "; const onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";
const flagColors = [ const flagColors = [
'fad803', 'fad803',
'f2af13', 'f2af13',
'd30a51', 'd30a51',
'8e1f68', '8e1f68',
'273f8b', '273f8b',
'3c579a', '3c579a',
'b7e0f0', 'b7e0f0',
'6bc7d9', '6bc7d9',
'52bed1' '52bed1'
] ]

1736
source/screens/demo/basics.njk
View file

File diff suppressed because it is too large Load diff

348
source/screens/demo/components.njk
View file

@ -10,185 +10,185 @@ tags:
{% block title %}Komponenten{% endblock %} {% block title %}Komponenten{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block main %} {% block main %}
<!-- {{ page.fileSlug }}.page --> <!-- {{ page.fileSlug }}.page -->
<div class="temp_layer"> <div class="temp_layer">
<!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> --> <!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
{% include "hippie/partials/_body_nav.njk" %} {% include "hippie/partials/_body_nav.njk" %}
</div> </div>
<div id="begin" class=""> <div id="begin" class="">
<section class="sec_main_center"> <section class="sec_main_center">
<header class="header_txt"> <header class="header_txt">
<h1>Medienformat Abfragen</h1> <h1>Medienformat Abfragen</h1>
</header> </header>
<article> <article>
<div class="demo__query_example">Umbruch bei&nbsp;</div> <div class="demo__query_example">Umbruch bei&nbsp;</div>
<div class="demo__queries"> <div class="demo__queries">
<p class="query_phoneUp">Telefone und größer</p> <p class="query_phoneUp">Telefone und größer</p>
<p class="query_phoneOnly">Nur Telefone</p> <p class="query_phoneOnly">Nur Telefone</p>
<p class="query_tabletPortaitOnly">Nur Schreibtafeln hochkant</p> <p class="query_tabletPortaitOnly">Nur Schreibtafeln hochkant</p>
<p class="query_tabletPortraitUp">Schreibtafeln und größer</p> <p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p> <p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p> <p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p> <p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
<p class="query_desktopUp">Arbeitsplatzrechner und größer</p> <p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
<p class="query_bigDesktopUp">Richtige Monitore und größer</p> <p class="query_bigDesktopUp">Richtige Monitore und größer</p>
</div> </div>
</article> </article>
</section> </section>
<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://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p> <p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p>
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</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+h4{Varianten}</code></pre> <pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h4{Varianten}</code></pre>
<article> <article>
<h1 id="sections">Bereiche</h1> <h1 id="sections">Bereiche</h1>
<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 überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
<h2>&lt;article&gt;</h2> <h2>&lt;article&gt;</h2>
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p> <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
<h2>&lt;section&gt;</h2> <h2>&lt;section&gt;</h2>
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p> <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
<h4>Varianten</h4> <h4>Varianten</h4>
<pre class="pre_code"><code>section.sec_main_center</code></pre> <pre class="pre_code"><code>section.sec_main_center</code></pre>
<pre class="pre_code"><code>section.sec_main_status</code></pre> <pre class="pre_code"><code>section.sec_main_status</code></pre>
<h2>&lt;h3&gt;</h2> <h2>&lt;h3&gt;</h2>
<h2>&lt;h4&gt;</h2> <h2>&lt;h4&gt;</h2>
</article> </article>
<article> <article>
<h1 id="grouping">Gruppierung</h1> <h1 id="grouping">Gruppierung</h1>
<p>Elemente:</p> <p>Elemente:</p>
<pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre> <pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre>
<h2>&lt;p&gt;</h2> <h2>&lt;p&gt;</h2>
<h4>Varianten</h4> <h4>Varianten</h4>
<pre class="pre_code"><code>p.txt_center</code></pre> <pre class="pre_code"><code>p.txt_center</code></pre>
<pre class="pre_code"><code>p.txt_right</code></pre> <pre class="pre_code"><code>p.txt_right</code></pre>
<pre class="pre_code"><code>p.column_2</code></pre> <pre class="pre_code"><code>p.column_2</code></pre>
<pre class="pre_code"><code>p.column_3.column_line</code></pre> <pre class="pre_code"><code>p.column_3.column_line</code></pre>
<h2>&lt;hr&gt;</h2> <h2>&lt;hr&gt;</h2>
<h4>Varianten</h4> <h4>Varianten</h4>
<pre class="pre_code"><code>hr.hr_hidden</code></pre> <pre class="pre_code"><code>hr.hr_hidden</code></pre>
<pre class="pre_code"><code>hr.hr_dotted</code></pre> <pre class="pre_code"><code>hr.hr_dotted</code></pre>
<pre class="pre_code"><code>hr.space_even_half</code></pre> <pre class="pre_code"><code>hr.space_even_half</code></pre>
<pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre> <pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
<h2>&lt;blockquote&gt;</h2> <h2>&lt;blockquote&gt;</h2>
<pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre> <pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre>
<h2>&lt;figure&gt;</h2> <h2>&lt;figure&gt;</h2>
<pre class="pre_code"><code>figure>figcaption+{element}</code></pre> <pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
<h2>&lt;div&gt;</h2> <h2>&lt;div&gt;</h2>
<pre class="pre_code"><code>div.div_info>p</code></pre> <pre class="pre_code"><code>div.div_info>p</code></pre>
<h4>Varianten</h4> <h4>Varianten</h4>
</article> </article>
<article> <article>
<h1 id="tabularData">Tabellen</h1> <h1 id="tabularData">Tabellen</h1>
<p>Elemente:</p> <p>Elemente:</p>
<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.table_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 js_pop"> <table class="width_full table_fix js_pop">
<thead> <thead>
<tr> <tr>
<th class="cell_pre" scope="col"></th> <th class="cell_pre" scope="col"></th>
<th scope="col">Kopfzeile</th> <th scope="col">Kopfzeile</th>
<th scope="col">A</th> <th scope="col">A</th>
<th scope="col">B</th> <th scope="col">B</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td class="cell_pre">Vorspalte</td> <td class="cell_pre">Vorspalte</td>
<td>Eine</td> <td>Eine</td>
<td></td> <td></td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td class="cell_pre">1</td> <td class="cell_pre">1</td>
<td></td> <td></td>
<td>erweiterte</td> <td>erweiterte</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td class="cell_pre">2</td> <td class="cell_pre">2</td>
<td></td> <td></td>
<td></td> <td></td>
<td>Tabelle</td> <td>Tabelle</td>
</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.table_stripe.table_fix.table_free>tr>td*3</code></pre>
<table class="width_full table_stripe table_fix table_free"> <table class="width_full table_stripe table_fix table_free">
<tr> <tr>
<td>Tabelle</td> <td>Tabelle</td>
<td></td> <td></td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>ohne</td> <td>ohne</td>
<td>Rahmen</td> <td>Rahmen</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td></td> <td></td>
<td>jedoch</td> <td>jedoch</td>
<td>mit</td> <td>mit</td>
</tr> </tr>
<tr> <tr>
<td></td> <td></td>
<td></td> <td></td>
<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.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>
<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>
<tr> <tr>
<th scope="col">Bezeichnung</th> <th scope="col">Bezeichnung</th>
<th scope="col">Menge</th> <th scope="col">Menge</th>
<th scope="col">Wert</th> <th scope="col">Wert</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>Alpha</td> <td>Alpha</td>
<td>1</td> <td>1</td>
<td class="txt_right">8990</td> <td class="txt_right">8990</td>
</tr> </tr>
<tr> <tr>
<td>Bravo</td> <td>Bravo</td>
<td>10</td> <td>10</td>
<td class="txt_right">1</td> <td class="txt_right">1</td>
</tr> </tr>
<tr> <tr>
<td>Charlie</td> <td>Charlie</td>
<td>1</td> <td>1</td>
<td class="txt_right">1</td> <td class="txt_right">1</td>
</tr> </tr>
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<th colspan="2" class="txt_right" scope="row">Summe</th> <th colspan="2" class="txt_right" scope="row">Summe</th>
<td class="txt_right" title=">9000">9001</td> <td class="txt_right" title=">9000">9001</td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</article> </article>
</section> </section>
</div> </div>
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js"></script> <script src="{{ pageBase }}vendor/jq-sticky-anything.min.js"></script>
{{ log.asset(true) }} {{ log.asset(true) }}
{{ log.log('Assets loaded.', assetsLoaded) }} {{ log.log('Assets loaded.', assetsLoaded) }}
{% endblock %} {% endblock %}

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

@ -9,32 +9,33 @@ tags:
{% extends "demo/_default.njk" %} {% extends "demo/_default.njk" %}
{% import "hippie/macros/_gate.njk" as gate %} {% import "hippie/macros/_gate.njk" as gate %}
{% block title %}{{ title }}{% endblock %} {% block title %}{{ title }}
{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<!-- {{ page.fileSlug }}.page --> <!-- {{ page.fileSlug }}.page -->
<div class="portal"> <div class="portal">
{{ gate.list( {{ gate.list(
'Tor mit Symbol und Liste', 'Tor mit Symbol und Liste',
'../demo', { '../demo', {
src: '/art/demo/flag_websafe_128x80.gif', src: '/art/demo/flag_websafe_128x80.gif',
alt: 'Flag of Interaktionsweise' alt: 'Flag of Interaktionsweise'
}, [ }, [
{ {
name: '1', name: '1',
href: 'http://domain.tld', href: 'http://domain.tld',
img: '../art/bullet.gif' img: '../art/bullet.gif'
}, { }, {
name: 'Zwei', name: 'Zwei',
href: 'http://domain.tld', href: 'http://domain.tld',
img: '../art/bullet.gif' img: '../art/bullet.gif'
} }
] ]
) }} ) }}
{{ gate.simple('Tor', '../demo') }} {{ gate.simple('Tor', '../demo') }}
</div> </div>
{% endblock %} {% endblock %}

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

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

128
source/screens/demo/index.njk
View file

@ -12,74 +12,74 @@ tags:
{% block title %}Index{% endblock %} {% block title %}Index{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<!-- {{ page.fileSlug }}.page --> <!-- {{ page.fileSlug }}.page -->
<div class="wrap"> <div class="wrap">
<div class="hello"> <div class="hello">
<h2>This is <h2>This is
{{ hippie.brand | upper }}</h2> {{ hippie.brand | upper }}</h2>
<p>You can start using it by replacing this file with your own index page.</p> <p>You can start using it by replacing this file with your own index page.</p>
<p>To do this you need to create a file <p>To do this you need to create a file
<code>/index.njk</code> <code>/index.njk</code>
inside the inside the
<i>source/screens</i> <i>source/screens</i>
folder. You can also create a folder. You can also create a
<code>data.json</code> <code>data.json</code>
file inside the file inside the
<i>source/templates</i> <i>source/templates</i>
folder as a data source for your nunjucks files.</p> folder as a data source for your nunjucks files.</p>
<p>For a very basic start you can make a copy of the demo page <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>blank.njk</code>. You can find it at
<i>/source/screens/demo</i>.</p> <i>/source/screens/demo</i>.</p>
<p>The <p>The
<i>source/demo</i> <i>source/demo</i>
folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p> folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
<div class="pos_rel"> <div class="pos_rel">
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>c(")(")</pre> <pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>c(")(")</pre>
<h3>Overview</h3> <h3>Overview</h3>
</div> </div>
<nav> <nav>
<ul class="list_link"> <ul class="list_link">
{% for link in collections.demoIndex %} {% for link in collections.demoIndex %}
<li> <li>
<a href="{{ link.page.url }}">{{ link.data.title }}</a> <a href="{{ link.page.url }}">{{ link.data.title }}</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</nav> </nav>
<h3>Page</h3> <h3>Page</h3>
<ul class="list_link"> <ul class="list_link">
{% for link in collections.demoPage | sort(false, false, 'data.title') %} {% for link in collections.demoPage | sort(false, false, 'data.title') %}
<li> <li>
<a href="{{ link.page.url }}">{{ link.data.title }}</a> <a href="{{ link.page.url }}">{{ link.data.title }}</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
<h3>Example</h3> <h3>Example</h3>
<ul class="list_link"> <ul class="list_link">
{% for link in collections.demoExample %} {% for link in collections.demoExample %}
<li> <li>
<a href="{{ link.page.url }}">{{ link.data.title }}</a> <a href="{{ link.page.url }}">{{ link.data.title }}</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script> <script>
assetsLoaded = true; assetsLoaded = true;
logPerf('BODY :: Assets loaded, running page specific script...'); logPerf('BODY :: Assets loaded, running page specific script...');
// Page specific // Page specific
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$(document).ready(function () { $(document).ready(function () {
logPerf('EVENT :: jQuery \'ready\' event fired.'); logPerf('EVENT :: jQuery \'ready\' event fired.');
}); });
logPerf('Application ready... not.'); logPerf('Application ready... not.');
</script> </script>
{% endblock %} {% endblock %}

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

@ -10,48 +10,50 @@ tags:
{% block title %}Einführung{% endblock %} {% block title %}Einführung{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block main %} {% block main %}
<!-- {{ page.fileSlug }}.page --> <!-- {{ page.fileSlug }}.page -->
{% include "hippie/partials/_body_nav.njk" %} {% include "hippie/partials/_body_nav.njk" %}
<section class="sec_main_center"> <section class="sec_main_center">
<header> <header>
<hgroup> <hgroup>
<h1>Introduction to HIPPIE</h1> <h1>Introduction to HIPPIE</h1>
<p>Hippie interweaves preeminent personal interface elements.</p> <p>Hippie interweaves preeminent personal interface elements.</p>
</hgroup> </hgroup>
</header> </header>
<article> <article>
<p>&hellip;</p> <p>&hellip;</p>
<p>Contact: <a id="special" href=""></a></p> <p>Contact: <a id="special" href=""></a>
<p>More: <a class="general" href=""></a>, <a class="general" href=""></a></p> </p>
</article> <p>More: <a class="general" href=""></a>, <a class="general" href=""></a>
</section> </p>
</article>
</section>
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script> <script>
assetsLoaded = true; assetsLoaded = true;
logPerf('Assets loaded.', assetsLoaded); logPerf('Assets loaded.', assetsLoaded);
// Page specific // Page specific
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
// Create instance of object made by contructor function // Create instance of object made by contructor function
var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown')); var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop')); var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
$(document).ready(function () { $(document).ready(function () {
logPerf('JQ document ready event fired.'); logPerf('JQ document ready event fired.');
composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE') composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
composeMail('.general', 'name', 'domain', 'tld', '', '') composeMail('.general', 'name', 'domain', 'tld', '', '')
}); });
$(document).scroll(function () { $(document).scroll(function () {
scrollUi.check(); scrollUi.check();
}); });
logPerf('Application ready... not.'); logPerf('Application ready... not.');
</script> </script>
{% endblock %} {% endblock %}

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

@ -10,326 +10,326 @@ tags:
{% block title %}Gestaltungen{% endblock %} {% block title %}Gestaltungen{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block main %} {% block main %}
<!-- {{ page.fileSlug }}.page --> <!-- {{ page.fileSlug }}.page -->
<div class="temp_layer"> <div class="temp_layer">
<!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> --> <!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
{% include "hippie/partials/_body_nav.njk" %} {% include "hippie/partials/_body_nav.njk" %}
</div> </div>
<div id="begin" class=""> <div id="begin" class="">
<section class="sec_main_center"> <section class="sec_main_center">
<header class="header_txt"> <header class="header_txt">
<h1>Sammlung formatierter Elemente</h1> <h1>Sammlung formatierter Elemente</h1>
<p>Die Elemente werden fortlaufend komplexer</p> <p>Die Elemente werden fortlaufend komplexer</p>
</header> </header>
<article> <article>
<h2>&lt;h3&gt;</h2> <h2>&lt;h3&gt;</h2>
<h4>Beispiele</h4> <h4>Beispiele</h4>
<pre class="pre_code"><code>h3.txt_color_dark+p</code></pre> <pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
<h3 class="txt_color_dark">Dunkle Überschrift</h3> <h3 class="txt_color_dark">Dunkle Überschrift</h3>
<p>Mit normalem Textabsatz</p> <p>Mit normalem Textabsatz</p>
<h2>&lt;h4&gt;</h2> <h2>&lt;h4&gt;</h2>
<h4>Beispiele</h4> <h4>Beispiele</h4>
<pre class="pre_code"><code>a>h4</code></pre> <pre class="pre_code"><code>a>h4</code></pre>
<a href=""> <a href="">
<h4>Überschrift als Block-Verweis</h4> <h4>Überschrift als Block-Verweis</h4>
</a> </a>
<h2>&lt;section&gt;</h2> <h2>&lt;section&gt;</h2>
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre> <pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
<section class="overflow"> <section class="overflow">
<div class="float_space_left demo__avatar"><img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div> <div class="float_space_left demo__avatar"><img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div>
<p>Vorname Name<br>Straße 1, 01234 Stadt</p> <p>Vorname Name<br>Straße 1, 01234 Stadt</p>
<p>+49 (0)123 1337 0000<br> <p>+49 (0)123 1337 0000<br>
<a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a> <a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a>
</p> </p>
</section> </section>
<pre class="pre_code"><code>div.space_left_fourth</code></pre> <pre class="pre_code"><code>div.space_left_fourth</code></pre>
<div class="space_left_fourth"> <div class="space_left_fourth">
<hr/> <hr/>
<p>Eingerückter Inhalt</p> <p>Eingerückter Inhalt</p>
<hr/> <hr/>
</div> </div>
<pre class="pre_code"><code>nav>ul>(li>a.a_button{punkt $})*4nav>ul>(li>a.a_button_border{stufe $})*4</code></pre> <pre class="pre_code"><code>nav>ul>(li>a.a_button{punkt $})*4nav>ul>(li>a.a_button_border{stufe $})*4</code></pre>
<div class="overflow"> <div class="overflow">
<nav class="float_space_left"> <nav class="float_space_left">
<ul> <ul>
<li> <li>
<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a> <a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
</li> </li>
<li> <li>
<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a> <a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
</li> </li>
<li> <li>
<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a> <a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
</li> </li>
<li> <li>
<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a> <a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
</li> </li>
</ul> </ul>
</nav> </nav>
<nav> <nav>
<ul> <ul>
<li> <li>
<a href="" class="a_button_border">Stufe 1</a> <a href="" class="a_button_border">Stufe 1</a>
</li> </li>
<li> <li>
<a href="" class="a_button_border">Stufe 2</a> <a href="" class="a_button_border">Stufe 2</a>
</li> </li>
<li> <li>
<a href="" class="a_button_border">Stufe 3</a> <a href="" class="a_button_border">Stufe 3</a>
</li> </li>
<li> <li>
<a href="" class="a_button_border">Stufe 4</a> <a href="" class="a_button_border">Stufe 4</a>
</li> </li>
</ul> </ul>
</nav> </nav>
</div> </div>
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre> <pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
<nav class="nav_horizontal"> <nav class="nav_horizontal">
<ul> <ul>
<li> <li>
<a href="" class="a_button">Abschnitt 1</a> <a href="" class="a_button">Abschnitt 1</a>
</li> </li>
<li> <li>
<a href="" class="a_button">Abschnitt 2</a> <a href="" class="a_button">Abschnitt 2</a>
</li> </li>
<li> <li>
<a href="" class="a_button">Abschnitt 3</a> <a href="" class="a_button">Abschnitt 3</a>
</li> </li>
<li> <li>
<a href="" class="a_button">Abschnitt 4</a> <a href="" class="a_button">Abschnitt 4</a>
</li> </li>
</ul> </ul>
</nav> </nav>
<div class="overflow"> <div class="overflow">
<nav class="nav_center_old"> <nav class="nav_center_old">
<ul> <ul>
<li> <li>
<a href="" class="a_button">Typ 1</a> <a href="" class="a_button">Typ 1</a>
</li> </li>
<li> <li>
<a href="" class="a_button">Typ 2</a> <a href="" class="a_button">Typ 2</a>
</li> </li>
<li> <li>
<a href="" class="a_button">Typ 3</a> <a href="" class="a_button">Typ 3</a>
</li> </li>
<li> <li>
<a href="" class="a_button">Typ 4</a> <a href="" class="a_button">Typ 4</a>
</li> </li>
</ul> </ul>
</nav> </nav>
</div> </div>
<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> <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"> <header class="header_page demo__header header_fancy">
<h1>Aufmacher</h1> <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> <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"> <nav class="nav_separate_right">
<ul> <ul>
<li> <li>
<a href="" class="a_button">Mensch</a> <a href="" class="a_button">Mensch</a>
</li> </li>
<li> <li>
<a href="" class="a_button">Pflanze</a> <a href="" class="a_button">Pflanze</a>
</li> </li>
</ul> </ul>
</nav> </nav>
<nav class="nav_right"> <nav class="nav_right">
<ul> <ul>
<li> <li>
<a href="" class="a_button">Blau</a> <a href="" class="a_button">Blau</a>
</li> </li>
<li> <li>
<a href="" class="a_button">Gelb</a> <a href="" class="a_button">Gelb</a>
</li> </li>
</ul> </ul>
</nav> </nav>
</header> </header>
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre> <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"> <div class="box_space h_basic">
<header id="js_demo_fix" class="header_page demo__header header_fix"> <header id="js_demo_fix" class="header_page demo__header header_fix">
<nav class="nav_right"> <nav class="nav_right">
<ul> <ul>
<li> <li>
<a href="" class="a_button">Eins</a> <a href="" class="a_button">Eins</a>
</li> </li>
<li> <li>
<a href="" class="a_button">Zwei</a> <a href="" class="a_button">Zwei</a>
</li> </li>
</ul> </ul>
</nav> </nav>
</header> </header>
<div class="pos_abs pin_bottom width_full"> <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> <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"> <nav class="nav_column nav_separate">
<ul> <ul>
<li> <li>
<a href="" class="a_button_text">Alpha</a> <a href="" class="a_button_text">Alpha</a>
</li> </li>
<li> <li>
<a href="" class="a_button_text">Bravo</a> <a href="" class="a_button_text">Bravo</a>
</li> </li>
<li> <li>
<a href="" class="a_button_text">Charlie</a> <a href="" class="a_button_text">Charlie</a>
</li> </li>
<li> <li>
<a href="" class="a_button_text">Delta</a> <a href="" class="a_button_text">Delta</a>
</li> </li>
</ul> </ul>
</nav> </nav>
<p class="txt_center demo__credits"> <p class="txt_center demo__credits">
<i class="i_bright">👨‍💻</i> <i class="i_bright">👨‍💻</i>
mit mit
<i class="i_bright">❤</i> <i class="i_bright">❤</i>
von von
<a href="https://interaktionsweise.de">Interaktionsweise</a> <a href="https://interaktionsweise.de">Interaktionsweise</a>
</p> </p>
</footer> </footer>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">
<div class="flex_child"></div> <div class="flex_child"></div>
<div class="flex_child"></div> <div class="flex_child"></div>
<div class="flex_child"></div> <div class="flex_child"></div>
<div class="flex_child"></div> <div class="flex_child"></div>
<div class="flex_child"></div> <div class="flex_child"></div>
</div> </div>
<div class="flex_column_wrap"> <div class="flex_column_wrap">
<div class="flex_column"><input value="Undefiniert"/></div> <div class="flex_column"><input value="Undefiniert"/></div>
<div class="flex_column"><input type="text" size="8" value="Text"/></div> <div class="flex_column"><input type="text" size="8" value="Text"/></div>
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div> <div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
<div class="flex_column"><input type="button" value="Auswählen"></div> <div class="flex_column"><input type="button" value="Auswählen"></div>
<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div> <div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
</div> </div>
<form method="get"> <form method="get">
<p class="label"> <p class="label">
Show me a Show me a
<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>
Sorted by Sorted by
<select name="C"> <select name="C">
<option value="N" selected="selected"> <option value="N" selected="selected">
Name</option> Name</option>
<option value="M"> <option value="M">
Date Modified</option> Date Modified</option>
<option value="S"> <option value="S">
Size</option> Size</option>
<option value="D"> <option value="D">
Description</option> Description</option>
</select> </select>
<select name="O"> <select name="O">
<option value="A" selected="selected"> <option value="A" selected="selected">
Ascending</option> Ascending</option>
<option value="D"> <option value="D">
Descending</option> Descending</option>
</select> </select>
<select name="V"> <select name="V">
<option value="0" selected="selected"> <option value="0" selected="selected">
in Normal order</option> in Normal order</option>
<option value="1"> <option value="1">
in Version order</option> in Version order</option>
</select> </select>
Matching Matching
<input type="text" name="P" value="*"/> <input type="text" name="P" value="*"/>
<input type="submit" name="X" value="Go"/> <input type="submit" name="X" value="Go"/>
</p> </p>
</form> </form>
<h2>Gruppierung</h2> <h2>Gruppierung</h2>
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre> <pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
<ul class="list_link"> <ul class="list_link">
<li> <li>
<a href=""><img src="{{ pageBase }}art/letter.gif" alt="">name@domain.tld</a> <a href=""><img src="{{ pageBase }}art/letter.gif" alt="">name@domain.tld</a>
</li> </li>
<li> <li>
<a href="">Work</a> <a href="">Work</a>
</li> </li>
<li> <li>
<a href="">Projects</a> <a href="">Projects</a>
</li> </li>
</ul> </ul>
<h2>Tabellen</h2> <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> <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"> <table class="table_link js_pop">
<thead> <thead>
<tr> <tr>
<th>&nbsp;</th> <th>&nbsp;</th>
<th>Ab / Zy</th> <th>Ab / Zy</th>
<th>Neu / Alt</th> <th>Neu / Alt</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td> <td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
<td class="cell_link"> <td class="cell_link">
<a href="" target="_blank">Name</a> <a href="" target="_blank">Name</a>
<a href="" target="_blank">URL</a> <a href="" target="_blank">URL</a>
</td> </td>
<td class="cell_date" rowspan="2">YYYY-MM-DD</td> <td class="cell_date" rowspan="2">YYYY-MM-DD</td>
</tr> </tr>
<tr> <tr>
<td class="cell_text"> <td class="cell_text">
<div class="shorten">Beschreibung</div> <div class="shorten">Beschreibung</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody> <tbody>
<tr> <tr>
<td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td> <td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
<td class="cell_link"> <td class="cell_link">
<a href="" target="_blank">Name</a> <a href="" target="_blank">Name</a>
<a href="" target="_blank">URL</a> <a href="" target="_blank">URL</a>
</td> </td>
<td class="cell_date" rowspan="2">YYYY-MM-DD</td> <td class="cell_date" rowspan="2">YYYY-MM-DD</td>
</tr> </tr>
<tr> <tr>
<td class="cell_text"> <td class="cell_text">
<div class="shorten">Beschreibung</div> <div class="shorten">Beschreibung</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h2>Eingebettet</h2> <h2>Eingebettet</h2>
<div class="demo__flag"> <div class="demo__flag">
<svg version="1.1" id="vector" 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="vector" 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">
<desc>Background flag</desc> <desc>Background flag</desc>
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect> <rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon> <polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon> <polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon> <polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon> <polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon> <polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon> <polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon> <polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon> <polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
</svg> </svg>
</div> </div>
</article> </article>
</section> </section>
</div> </div>
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script> <script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
{{ log.asset(true) }} {{ log.asset(true) }}
{{ log.log('Assets loaded.', assetsLoaded) }} {{ log.log('Assets loaded.', assetsLoaded) }}
<script> <script>
// Page specific // Page specific
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$(document).ready(function () { $(document).ready(function () {
// jq-sticky-anything // jq-sticky-anything
$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'}); $('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
}); });
</script> </script>
{% endblock %} {% endblock %}

39
source/templates/demo/_app.njk
View file

@ -1,31 +1,30 @@
<!-- demo.app.template --> <!-- demo.app.template -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}"> <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
{% block head %} {% block head %}
<title>{{ hippie.titlePrefix }} <title>{{ hippie.titlePrefix }}
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title> {%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
{% block meta %} {% block meta %}
{% include "demo/partials/_meta.njk" %} {% include "demo/partials/_meta.njk" %}
<base href="/"> <base href="/">
{% endblock %} {% endblock %}
{% block links %} {% block links %}{% endblock %}
{% endblock %}
{% endblock %} {% endblock %}
</head> </head>
<body class="{{ bodyClass }}"> <body class="{{ bodyClass }}">
{% block body %}{% endblock %} {% block body %}{% endblock %}
{% block script %} {% block script %}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="{{ pageBase }}js/variables.js"></script> <script src="{{ pageBase }}js/variables.js"></script>
{% endblock %} {% endblock %}
</body> </body>
</html> </html>

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

@ -2,18 +2,18 @@
{% extends "hippie/_default.njk" %} {% extends "hippie/_default.njk" %}
{% block meta %} {% block meta %}
{% include "demo/partials/_meta.njk" %} {% include "demo/partials/_meta.njk" %}
<base href="/"> <base href="/">
{% endblock %} {% endblock %}
{% block links %} {% block links %}
{{ super() }} {{ super() }}
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/> <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
{# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #} {# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
{# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/> #} {# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/> #}
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
{% endblock %} {% endblock %}

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

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

8
source/templates/demo/_maintenance.njk
View file

@ -2,11 +2,11 @@
{% extends "hippie/_maintenance.njk" %} {% extends "hippie/_maintenance.njk" %}
{% block meta %} {% block meta %}
{% include "demo/partials/_meta.njk" %} {% include "demo/partials/_meta.njk" %}
<base href="/"> <base href="/">
{% endblock %} {% endblock %}
{% block links %} {% block links %}
{{ super() }} {{ super() }}
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/> <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
{% endblock %} {% endblock %}