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

Requirements updated and new nunjucks variables

Browse source 
Fixed problems with base paths.
This commit is contained in:
Stephan Hagedorn 2020-04-04 23:56:49 +02:00
parent 8567604ea6
commit b2ea5b01aa
26 changed files with 1404 additions and 1228 deletions
Download patch file Download diff file Expand all files Collapse all files

9
source/screens/demo.njk
View file

@ -1,4 +1,5 @@
<!-- index.screen -->
{% set pageBase = "./" %}
{% set pageId = "index" %}
{% set pageClass = "h_full_view" %}
@ -12,7 +13,7 @@
{% block body %}
<div class="wrap">
<div class="hello">
<h2>This is {{hippie.brand | upper}}</h2>
<h2>This is {{ hippie.brand | upper }}</h2>
<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 <code>/index.njk</code> inside the <i>source/screens</i> folder. You can also create a <code>data.json</code> file inside the <i>source/templates</i> 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 <code>blank.njk</code>. You can find it at <i>/source/screens/demo</i>.</p>
@ -25,7 +26,7 @@
<ul class="list_link">
<!-- Loops through "demoadditionallinks" array -->
{% for link in data.demoadditionallinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li>
<li><a href="{{ link.href }}">{{ link.text }}</a></li>
{% endfor %}
</ul>
</nav>
@ -33,7 +34,7 @@
<ul class="list_link">
<!-- Loops through "demo-links" array -->
{% for link in data.demolinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li>
<li><a href="{{ link.href }}">{{ link.text }}</a></li>
{% endfor %}
</ul>
</div>
@ -42,7 +43,7 @@
{% block script %}
{{ super() }}
<script src="./js/{{hippie.jsFile}}.min.js"></script>
<script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script>
<script>
// Page specific
// ------------------------------------------------------------------------------

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

@ -1,4 +1,5 @@
<!-- blank.page -->
{% set pageBase = "../" %}
{% set pageId = "blank" %}
{% set pageClass = "h_full_view" %}

96
source/screens/demo/card.njk Normal file
View file

@ -0,0 +1,96 @@
<!-- index.njk -->
{% set pageBase = "../" %}
{% set pageId = "card" %}
{% set pageClass = "html_card" %}
{% extends "demo/_default.njk" %}
{% block title %}Karte{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<div class="card_bkg">
<div id="dither"></div>
<svg version="1.1" id="flag" 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" alt="Background flag">
{# <defs>
<filter id="turb3">
<feColorMatrix type="saturate" values="1" /> </filter>
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
</filter>
<symbol id="triangle-5">
<rect y="0" fill="#273F8B" width="1920" height="1200"/>
</symbol>
</defs>
<g>
<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
</g> #}
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
</svg>
{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
</div>
<div class="card_box">
<div id="jsCardHover">
<p>Titel<br/>and description</p>
<h1>Prename Surname</h1>
<p><a class="card_address" href="">name@domain.tld</a><br/><a class="decent" href="http://">site.tld</a> &middot; <span class="decent">Street No., Postcode City</span></p>
</div>
</div>
{% endblock %}
{% block script %}
{{ super() }}
<script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', '');
var colors = new Array();
var position = 0;
for (var i = 1; i <= $("#flag").children().length; i++) {
colors.push($("#triangle-"+ i).attr("fill"));
}
$('#jsCardHover').on({
mouseenter: function() {
// $('#flag').addClass('effect');
// $('#flag').css('opacity', 0);
$('#flag').stop().fadeOut(10000);
this.iid = setInterval(function() {
for (var i = 1; i <= colors.length; i++) {
position++;
if (position >= colors.length) {
position = 0;
}
$("#triangle-"+ i).attr("fill", colors[position]);
}
position++;
if (position >= colors.length) {
position = 0;
}
}, 600);
},
mouseleave: function() {
// $('#flag').removeClass('effect');
// $('#flag').css('opacity', 1);
$('#flag').stop().fadeIn(1000);
this.iid && clearInterval(this.iid);
},
click: function() {
$("#dither").toggle();
}
});
});
</script>
{% endblock %}

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

@ -1,4 +1,5 @@
<!-- elements.page -->
{% set pageBase = "../" %}
{% set pageId = "elements" %}
{% extends "demo/_extended.njk" %}
@ -64,8 +65,8 @@
{% block script %}
{{ super() }}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------

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

@ -1,23 +1,24 @@
<!-- error-404.page -->
{% set pageId = "304" %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Umleitung</h3>
<p>Unverändert <dfn>Not Modified</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">
<p>Der Inhalt der angeforderten Ressource hat sich seit der letzten Abfrage des Clients nicht verändert und wird deshalb nicht übertragen. Zu den Einzelheiten siehe <a href="https://de.wikipedia.org/wiki/Browser-Cache#Versionsvergleich" title="Browser-Cache">Browser-Cache-Versionsvergleich</a>.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}
<!-- error-404.page -->
{% set pageBase = "../../" %}
{% set pageId = "304" %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Umleitung</h3>
<p>Unverändert <dfn>Not Modified</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">
<p>Der Inhalt der angeforderten Ressource hat sich seit der letzten Abfrage des Clients nicht verändert und wird deshalb nicht übertragen. Zu den Einzelheiten siehe <a href="https://de.wikipedia.org/wiki/Browser-Cache#Versionsvergleich" title="Browser-Cache">Browser-Cache-Versionsvergleich</a>.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}

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

@ -1,23 +1,24 @@
<!-- error-404.page -->
{% set pageId = "400" %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Client-Fehler</h3>
<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}
<!-- error-404.page -->
{% set pageBase = "../../" %}
{% set pageId = "400" %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Client-Fehler</h3>
<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}

24
source/screens/demo/error/401.njk Normal file
View file

@ -0,0 +1,24 @@
<!-- error-404.page -->
{% set pageBase = "../../" %}
{% set pageId = "401" %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Client-Fehler</h3>
<p>Nicht autorisiert! <dfn>Unauthorized</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die Anfrage kann nicht ohne gültige Authentifizierung durchgeführt werden. Wie die Authentifizierung durchgeführt werden soll, wird im „WWW-Authenticate“-Header-Feld der Antwort übermittelt.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}

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

@ -1,23 +1,24 @@
<!-- error-404.page -->
{% set pageId = "403" %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Client-Fehler</h3>
<p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}
<!-- error-404.page -->
{% set pageBase = "../../" %}
{% set pageId = "403" %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Client-Fehler</h3>
<p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}

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

@ -1,4 +1,5 @@
<!-- error-404.page -->
{% set pageBase = "../../" %}
{% set pageId = "404" %}
{% set bodyClass = "body_status" %}

24
source/screens/demo/error/408.njk Normal file
View file

@ -0,0 +1,24 @@
<!-- error-404.page -->
{% set pageBase = "../../" %}
{% set pageId = "408" %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Client-Fehler</h3>
<p>Zeitüberschreitung der Anforderung. <dfn>Request Timeout</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Innerhalb der vom Server erlaubten Zeitspanne wurde keine vollständige Anfrage des Clients empfangen.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}

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

@ -1,23 +1,24 @@
<!-- error-500.page -->
{% set pageId = "500" %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Server-Fehler</h3>
<p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
<p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p>
<p class="quote-author"><a class="line-link" href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}
<!-- error-500.page -->
{% set pageBase = "../../" %}
{% set pageId = "500" %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Server-Fehler</h3>
<p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
<p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p>
<p class="quote-author"><a class="line-link" href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}

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

@ -1,4 +1,5 @@
<!-- elements.page -->
{% set pageBase = "../" %}
{% set pageId = "examples" %}
{% extends "demo/_extended.njk" %}
@ -34,7 +35,7 @@
<h2>&lt;section&gt;</h2>
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
<section class="overflow">
<div class="float_space_left demo__avatar"><img src="../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>+49 (0)123 1337 0000<br><a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a></p>
</section>
<pre class="pre_code"><code>div.space_left_fourth</code></pre>
@ -166,7 +167,7 @@
<h2>Gruppierung</h2>
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
<ul class="list_link">
<li><a href=""><img src="../art/letter.gif" alt="">name@domain.tld</a></li>
<li><a href=""><img src="{{ pageBase }}art/letter.gif" alt="">name@domain.tld</a></li>
<li><a href="">Work</a></li>
<li><a href="">Projects</a></li>
</ul>
@ -228,8 +229,8 @@
{% block script %}
{{ super() }}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------

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

@ -1,4 +1,5 @@
<!-- intro.screen -->
{% set pageBase = "../" %}
{% set pageId = "intro" %}
{% extends "demo/_extended.njk" %}
@ -136,7 +137,7 @@
</nav>
<nav class="nav_center_old">
<ul>
<li><a href="../demo.html" class="a_button">Startseite</a></li>
<li><a href="{{ pageBase }}demo.html" class="a_button">Startseite</a></li>
<li><a href="" class="a_button a_internal">Hilfe</a></li>
<li><a href="" class="a_button">⌨</a></li>
<li><a href="" class="a_button">⋯</a></li>
@ -231,8 +232,8 @@
<p>Dies ist ein Bild. Es wird mit dem Element <code>&lt;img&gt;</code> eingebunden. Solch ein Bild hat üblicherweise die Attribute <code>width</code> und <code>height</code>. Mit ihnen werden die Abmessungen (Breite und Höhe) festgelegt. Außerdem sollte immer das Attribut <code>alt</code> für eine alternative Beschreibung in Textform verwendet werden.</p>
<p>Das Bild selbst liegt normalerweise als Datei vor. Die Quelle wird mit dem Attribut <code>src</code> angegeben. Es können einige Alternativen zur Angabe einer konkreten Datei eingesetzt werden. Zum Beispiel können mehrere Dateien in Abhängigkeit zur Darstellung oder dem unterstützen Format angegeben werden. Dafür können dann die Elemente <code>&lt;source&gt;</code> und <code>&lt;picture&gt;</code> in Kombination verwendet werden.</p>
<picture>
<source srcset="../art/demo/flag_websafe_128x80.webp" type="image/webp"/>
<img src="../art/demo/flag_websafe_128x80.gif" alt="" width="128" height="80"/>
<source srcset="{{ pageBase }}art/demo/flag_websafe_128x80.webp" type="image/webp"/>
<img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" alt="" width="128" height="80"/>
</picture>
</article>
<article>
@ -570,7 +571,7 @@
{% block script %}
{{ super() }}
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script>
// Page specific
// ------------------------------------------------------------------------------

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

@ -1,4 +1,5 @@
<!-- maintenance.page -->
{% set pageBase = "../" %}
{% set pageId = "blank" %}
{% set pageClass = "h_full_view" %}