demo.4
* restructure of all templates and pages * fixed gulp reloading of pages * restructured style elements accroding to HTML5.2 doc * changed basic line-height * added positional styles * added demo_module styles
This commit is contained in:
Stephan
parent
a810ec2770
commit
0a78f526f5
34 changed files with 1454 additions and 1208 deletions
|
|
@ -1,11 +0,0 @@
|
|||
<!-- blank.njk -->
|
||||
{% set pageId = "blank" %}
|
||||
{% set pageClass = "height_full" %}
|
||||
|
||||
{% extends "default.njk" %}
|
||||
|
||||
{% block title %}blank{% endblock %}
|
||||
|
||||
{% block body_content %}
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
<!-- index.njk -->
|
||||
<!-- page-index.njk -->
|
||||
{% set pageId = "index" %}
|
||||
{% set pageClass = "height_full" %}
|
||||
|
||||
{% extends "default.njk" %}
|
||||
{% extends "hippie/demo-default.njk" %}
|
||||
|
||||
{% block title %}index{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/>
|
||||
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
|
||||
{% endblock %}
|
||||
|
||||
{% block body_content %}
|
||||
|
|
@ -15,18 +17,6 @@
|
|||
<h2>This is HIPPIE</h2>
|
||||
<p>You can start using it by replacing this file with your own index page.</p>
|
||||
<p>The folder <i>demo</i> contains examples and also an overview of definitions made.<br/>Follow the white rabbit.</p>
|
||||
|
||||
<h3>Demo Pages</h3>
|
||||
<ul class="list__link">
|
||||
<!-- Loops through "demo-links" array -->
|
||||
{% for link in demolinks %}
|
||||
<li><a href="{{link.href}}">{{link.text}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<pre class="txt-tiny txt_white">
|
||||
()()
|
||||
(..)
|
||||
C(")(")</pre>
|
||||
<h3>Overview about all the styles</h3>
|
||||
<ul class="list__link">
|
||||
<!-- Loops through "demoadditionallinks" array -->
|
||||
|
|
@ -34,11 +24,26 @@ C(")(")</pre>
|
|||
<li><a href="{{link.href}}">{{link.text}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="pos_rel">
|
||||
<pre class="txt_tiny txt_white pos_abs pin_down pin_right">
|
||||
()()
|
||||
(..)
|
||||
C(")(")</pre>
|
||||
<h3>Demo Pages</h3>
|
||||
</div>
|
||||
<ul class="list__link">
|
||||
<!-- Loops through "demo-links" array -->
|
||||
{% for link in demolinks %}
|
||||
<li><a href="{{link.href}}">{{link.text}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="./js/all.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
|
|
|
|||
17
source/pages/demo/blank.njk
Normal file
17
source/pages/demo/blank.njk
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<!-- page-blank.njk -->
|
||||
{% set pageId = "blank" %}
|
||||
{% set pageClass = "height_full" %}
|
||||
|
||||
{% extends "hippie/demo-default.njk" %}
|
||||
|
||||
{% block title %}blank{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" type="text/css" media="all" href="../css/demo.css"/>
|
||||
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
|
||||
{% endblock %}
|
||||
|
||||
{% block body_content %}
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -1,72 +1,69 @@
|
|||
<!-- demo.njk -->
|
||||
{% set pageId = "elements" %}
|
||||
{% set pageClass = "" %}
|
||||
|
||||
{% extends "demo.njk" %}
|
||||
|
||||
{% block title %}Elements{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body_content %}
|
||||
<div class="temp__layer">
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn">
|
||||
<span class="span__solo">?</span>
|
||||
</div> -->
|
||||
<nav class="nav__page_meta">
|
||||
<ul>
|
||||
<li class="magic"><a href="#begin" id="js_scrolltop" class="a_button_meta"><img src="./art/up.png" alt="" width="32" height="64"></a></li>
|
||||
<li><button class="a_button_meta">Show Meta Information</button></li>
|
||||
<li><a href="#end" id="js_scrolldown" class="a_button_meta"><img src="./art/down.png" alt="" width="32" height="32"></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div id="begin" class="">
|
||||
<article>
|
||||
<header>
|
||||
<h1>Bereiche</h1>
|
||||
<p>Um einleitenden Inhalt festzuhalten, wird das <code><header></code> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p>
|
||||
<nav>
|
||||
<p>Das Element <code><nav></code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<p>Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <code><article></code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.</p>
|
||||
<p>Noch allgemeiner ist das <code><section></code> Element. Es schafft Bereiche um Inhalte zu strukturieren.</p>
|
||||
<p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br>Folgende Bereiche sind vorgegeben:</p>
|
||||
</section>
|
||||
<div class="overflow">
|
||||
<aside class="left">
|
||||
<p>Ein Bereich, der seitlich zum hauptsächlichen Inhalt verläuft, wird mit <code><aside></code> markiert.</p>
|
||||
</aside>
|
||||
<section class="bside">
|
||||
<header>
|
||||
<p>Um einleitenden Inhalt festzuhalten, wird das <code><header></code> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p>
|
||||
<nav>
|
||||
<p>Das Element <code><nav></code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
|
||||
</nav>
|
||||
</header>
|
||||
<footer>
|
||||
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code><footer></code> eingesetzt.</p>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
<footer>
|
||||
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code><footer></code> eingesetzt.</p>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
{% include "partials/footer.njk" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
console.log('HIPPIE');
|
||||
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
<!-- page-elements.njk -->
|
||||
{% set pageId = "elements" %}
|
||||
{% set pageClass = "" %}
|
||||
|
||||
{% extends "hippie/demo-extended.njk" %}
|
||||
|
||||
{% block title %}Elements{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body_content %}
|
||||
<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" %}
|
||||
</div>
|
||||
<div id="begin" class="">
|
||||
<article>
|
||||
<header>
|
||||
<h1>Bereiche</h1>
|
||||
<p>Um einleitenden Inhalt festzuhalten, wird das <code><header></code> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p>
|
||||
<nav>
|
||||
<p>Das Element <code><nav></code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<p>Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <code><article></code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.</p>
|
||||
<p>Noch allgemeiner ist das <code><section></code> Element. Es schafft Bereiche um Inhalte zu strukturieren.</p>
|
||||
<p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br>Folgende Bereiche sind vorgegeben:</p>
|
||||
</section>
|
||||
<div class="overflow">
|
||||
<aside class="left">
|
||||
<p>Ein Bereich, der seitlich zum hauptsächlichen Inhalt verläuft, wird mit <code><aside></code> markiert.</p>
|
||||
</aside>
|
||||
<section class="bside">
|
||||
<header>
|
||||
<p>Um einleitenden Inhalt festzuhalten, wird das <code><header></code> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p>
|
||||
<nav>
|
||||
<p>Das Element <code><nav></code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
|
||||
</nav>
|
||||
</header>
|
||||
<footer>
|
||||
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code><footer></code> eingesetzt.</p>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
<footer>
|
||||
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code><footer></code> eingesetzt.</p>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
{% include "hippie/partials/footer.njk" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||
<script src="../js/all.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
console.log('HIPPIE');
|
||||
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,25 @@
|
|||
<!-- index.njk -->
|
||||
{% set pageId = "404" %}
|
||||
{% set pageClass = "body__status" %}
|
||||
|
||||
{% extends "maintenance.njk" %}
|
||||
|
||||
{% block title %}404{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body_content %}
|
||||
<main class="main__site">
|
||||
<h1>404</h1>
|
||||
<h3>Client-Fehler</h3>
|
||||
<p>Hier ist nichts. <dfn>Not Found</dfn></br>
|
||||
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
||||
<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</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>
|
||||
{% include "partials/footer-status.njk" %}
|
||||
{% endblock %}
|
||||
<!-- page-error-404.njk -->
|
||||
{% set pageId = "404" %}
|
||||
{% set pageClass = "body__status" %}
|
||||
|
||||
{% extends "hippie/demo-maintenance.njk" %}
|
||||
|
||||
{% block title %}404{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" type="text/css" media="all" href="../../css/demo_basic.css"/>
|
||||
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
|
||||
{% endblock %}
|
||||
|
||||
{% block body_content %}
|
||||
<main class="main__site">
|
||||
<h1>404</h1>
|
||||
<h3>Client-Fehler</h3>
|
||||
<p>Hier ist nichts. <dfn>Not Found</dfn></br>
|
||||
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
||||
<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</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>
|
||||
{% include "hippie/partials/footer-status.njk" %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,25 @@
|
|||
<!-- index.njk -->
|
||||
{% set pageId = "500" %}
|
||||
{% set pageClass = "body__status" %}
|
||||
|
||||
{% extends "maintenance.njk" %}
|
||||
|
||||
{% block title %}500{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body_content %}
|
||||
<main class="main__site">
|
||||
<h1>500</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>
|
||||
{% include "partials/footer-status.njk" %}
|
||||
{% endblock %}
|
||||
<!-- page-error-500.njk -->
|
||||
{% set pageId = "500" %}
|
||||
{% set pageClass = "body__status" %}
|
||||
|
||||
{% extends "hippie/demo-maintenance.njk" %}
|
||||
|
||||
{% block title %}500{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" type="text/css" media="all" href="../../css/demo_basic.css"/>
|
||||
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
|
||||
{% endblock %}
|
||||
|
||||
{% block body_content %}
|
||||
<main class="main__site">
|
||||
<h1>500</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>
|
||||
{% include "hippie/partials/footer-status.njk" %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
19
source/pages/demo/maintenance.njk
Normal file
19
source/pages/demo/maintenance.njk
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<!-- page-maintenance.njk -->
|
||||
{% set pageId = "blank" %}
|
||||
{% set pageClass = "height_full" %}
|
||||
|
||||
{% extends "hippie/demo-maintenance.njk" %}
|
||||
|
||||
{% block title %}Wartung{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" type="text/css" media="all" href="../css/demo.css"/>
|
||||
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
|
||||
{% endblock %}
|
||||
|
||||
{% block body_content %}
|
||||
<div id="root" class="overflow">
|
||||
<h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<!-- demo.njk -->
|
||||
<!-- page-os.njk -->
|
||||
{% set pageId = "os" %}
|
||||
{% set pageClass = "" %}
|
||||
|
||||
{% extends "demo.njk" %}
|
||||
{% extends "hippie/demo-extended.njk" %}
|
||||
|
||||
{% block title %}demo{% endblock %}
|
||||
{% block head %}
|
||||
|
|
@ -132,10 +132,13 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "partials/footer.njk" %}
|
||||
{% include "hippie/partials/footer.njk" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||
<script src="../js/all.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<!-- blank.njk -->
|
||||
<!-- page-tests.njk -->
|
||||
{% set pageId = "blank" %}
|
||||
{% set pageClass = "height_full" %}
|
||||
|
||||
{% extends "default.njk" %}
|
||||
{% extends "hippie/demo-default.njk" %}
|
||||
|
||||
{% block title %}blank{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" type="text/css" media="all" href="../css/demo.css"/>
|
||||
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
|
||||
<style>
|
||||
#error {
|
||||
border: 1px solid #FFFF66;
|
||||
|
|
@ -27,11 +29,13 @@
|
|||
<input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span>
|
||||
</form>
|
||||
|
||||
{% import "macros/nav-macro.njk" as forms %}
|
||||
{% import "hippie/macros/nav-macro.njk" as forms %}
|
||||
{{ forms.active('zubereitung') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="../js/all.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<!-- blank.njk -->
|
||||
{% set pageId = "blank" %}
|
||||
{% set pageClass = "height_full" %}
|
||||
|
||||
{% extends "maintenance.njk" %}
|
||||
|
||||
{% block title %}Wartung{% endblock %}
|
||||
|
||||
{% block body_content %}
|
||||
<div id="root" class="overflow">
|
||||
<h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue