demo.5
* removed double underscore (__) separators in class names * more LF CR to LF * new scss config variables * some little style changes
This commit is contained in:
Stephan
parent
0a78f526f5
commit
8b81ed92e1
30 changed files with 1288 additions and 1262 deletions
|
|
@ -1,69 +1,279 @@
|
|||
<!-- 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 %}
|
||||
<!-- 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="">
|
||||
<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>Sammlung formatierter Elemente</h1>
|
||||
<p>Die Elemente werden fortlaufend komplexer</p>
|
||||
</header>
|
||||
<article>
|
||||
<pre class="pre_code"><code>h3.txt_light_color+p</code></pre>
|
||||
<h3 class="txt_light_color">Helle Überschrift</h3>
|
||||
<p>Mit normalem Textabsatz</p>
|
||||
<pre class="pre_code"><code>a>h4</code></pre>
|
||||
<a href=""><h4>Überschrift als Block-Verweis</h4></a>
|
||||
<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/bullet.gif" width="256" height="256" alt="Avatar"></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.box_main_indent</code></pre>
|
||||
<div class="box_main_indent">
|
||||
<hr/>
|
||||
<p>Eingerückter Inhalt</p>
|
||||
<hr/>
|
||||
</div>
|
||||
<pre class="pre_code"><code>nav>ul>(li>a.a_button{Punkt $})*4nav>ul>(li>a.a_button_border{Stufe $})*4</code></pre>
|
||||
<div class="overflow">
|
||||
<nav class="float_space_left">
|
||||
<ul>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="" class="a_button_border">Stufe 1</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 2</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 3</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{Abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{Typ $})*4</code></pre>
|
||||
<nav class="nav_horizontal">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Abschnitt 1</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 2</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 3</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="overflow">
|
||||
<nav class="nav_center_old">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Typ 1</a></li>
|
||||
<li><a href="" class="a_button">Typ 2</a></li>
|
||||
<li><a href="" class="a_button">Typ 3</a></li>
|
||||
<li><a href="" class="a_button">Typ 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{Nav $})*4^+nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
|
||||
<header class="header_page demo__header header_fancy">
|
||||
<h1>Aufmacher</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
|
||||
<nav class="nav_separate_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Mensch</a></li>
|
||||
<li><a href="" class="a_button">Pflanze</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="nav_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Blau</a></li>
|
||||
<li><a href="" class="a_button">Gelb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
|
||||
<div class="box_space height_basic">
|
||||
<header id="js_demo_fix" class="header_page demo__header header_fix">
|
||||
<nav class="nav_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Eins</a></li>
|
||||
<li><a href="" class="a_button">Zwei</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</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">
|
||||
<nav class="nav_column nav_separate">
|
||||
<ul>
|
||||
<li><a href="" class="a_button_text">Alpha</a></li>
|
||||
<li><a href="" class="a_button_text">Bravo</a></li>
|
||||
<li><a href="" class="a_button_text">Charlie</a></li>
|
||||
<li><a href="" class="a_button_text">Delta</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="txt_center demo__credits"><i class="i_bright">👨💻</i> mit <i class="i_bright">❤</i> von <a href="https://interaktionsweise.de">Interaktionsweise</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
</div>
|
||||
<div class="flex_column_wrap">
|
||||
<div class="flex_column"><input value="Undefiniert"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled/></div>
|
||||
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
||||
<div class="flex_column"><input type="submit" value="Senden" disabled/></div>
|
||||
</div>
|
||||
|
||||
<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="./art/bullet.gif" alt="">Work</a></li>
|
||||
<li><a href="">Projects</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Tabellen</h2>
|
||||
<pre class="pre_code"><code>table.table_link>thead>tr>th{&nbsp;}+th{Ab / Zy}+th{Neu / Alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{Name}+a[target=_blank]{URL}^+td.cell_date[rowspan="2"]{YYY-MM-DD}^tr>td.cell_text>div.shorten{Beschreibung})*2</code></pre>
|
||||
<table class="table_link js_pop">
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th>Ab / Zy</th>
|
||||
<th>Neu / Alt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Eingebettet</h2>
|
||||
<div class="box_full_width demo__flag">
|
||||
<svg version="1.1" id="vector" 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">
|
||||
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
|
||||
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
|
||||
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
|
||||
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
|
||||
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
|
||||
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
|
||||
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<header class="sec_main_center header_txt">
|
||||
<h1>Autarke Seiten</h1>
|
||||
<p>Diese Elemente repräsentieren jeweils eine eigene Seite.</p>
|
||||
</header>
|
||||
<article>
|
||||
<section class="sec_main_status demo__status">
|
||||
<div class="wrap_center">
|
||||
<h1>404</h1>
|
||||
<p>Hier ist nichts.</p>
|
||||
<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>
|
||||
</div>
|
||||
{% include "hippie/partials/footer-status.njk" %}
|
||||
</section>
|
||||
<section class="sec_main_status demo__status">
|
||||
<div class="wrap_center">
|
||||
<h1>403</h1>
|
||||
<p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
|
||||
<blockquote>
|
||||
<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>
|
||||
</div>
|
||||
{% include "hippie/partials/footer-status.njk" %}
|
||||
</section>
|
||||
<section class="sec_main_status demo__status">
|
||||
<div class="wrap_center">
|
||||
<h1>400</h1>
|
||||
<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
|
||||
<blockquote>
|
||||
<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>
|
||||
</div>
|
||||
{% include "hippie/partials/footer-status.njk" %}
|
||||
</section>
|
||||
</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/all.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
console.log('HIPPIE');
|
||||
|
||||
// jq-sticky-anything
|
||||
$('#js_demo_fix').stickThis({
|
||||
pushup: '#js_demo_stop'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue