45f59f578b
- updated to 0.4.0 - corrected license for npm - update to gulp 4 - updated all dependencies - new and removed packages, see `package.json` - changed file structure, renamed `pages` to `screen` and new `data` folder - complete change of `gulpfile.js` with similar output
81 lines
3.3 KiB
Text
81 lines
3.3 KiB
Text
<!-- page-elements.njk -->
|
|
{% set pageId = "elements" %}
|
|
{% set pageClass = "" %}
|
|
|
|
{% extends "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="">
|
|
<section class="sec_main_center">
|
|
<header class="header_txt">
|
|
<h1>Medienformat Abfragen</h1>
|
|
</header>
|
|
<article>
|
|
<div class="demo__query_example">Umbruch bei </div>
|
|
<div class="demo__queries">
|
|
<p class="query_phoneUp">Telefone und größer</p>
|
|
<p class="query_phoneOnly">Nur Telefone</p>
|
|
<p class="query_tabletPortaitOnly"Nur >Schreibtafeln hochkant</p>
|
|
<p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
|
|
<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
|
|
<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
|
|
<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
|
|
<p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
|
|
<p class="query_bigDesktopUp">Richtige Monitore und größer</p>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="sec_main_center">
|
|
<header class="header_txt">
|
|
<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>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML Dokument als Emmet Syntax dargestellt.</p>
|
|
</header>
|
|
<article>
|
|
<h1>Bereiche</h1>
|
|
<p>Elemente:</p>
|
|
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
|
|
<h2><body></h2>
|
|
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
|
<h2><article></h2>
|
|
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
|
<h2><section></h2>
|
|
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
|
<h4>Varianten</h4>
|
|
<pre class="pre_code"><code>section.sec_main_center</code></pre>
|
|
<pre class="pre_code"><code>section.sec_main_status</code></pre>
|
|
<h2><h3></h2>
|
|
<h2><h4></h2>
|
|
</article>
|
|
</section>
|
|
</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/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
// Page specific
|
|
// ------------------------------------------------------------------------------
|
|
$( document ).ready(function() {
|
|
// jq-sticky-anything
|
|
$('#js_demo_fix').stickThis({
|
|
pushup: '#js_demo_stop'
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|