Update everything

gulpjs
 * new spritesmith plugin
 * reworked exports
 * new nunjucks-render version fixing dependency issues!

File structure
New naming scheme for nunjucks files. Underscore used for files which 
are imported and not directly displayed.

Nunjucks blocks where renamed and are placed differently.

New macro for navigational elements.
This commit is contained in:
Stephan 2019-03-21 20:22:22 +01:00
parent 902016afff
commit 8dc9724a3e
35 changed files with 332 additions and 1250 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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