0a78f526f5
* 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
69 lines
2.8 KiB
Text
69 lines
2.8 KiB
Text
<!-- 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 %}
|