feat: More content for components and layouts

- Update hippie styles
- Add demo images
- New components content
- New layout structure and content

source/screens/demo/components.njk

@@ -80,7 +80,17 @@ tags:
 				<h6>Überschrift 6</h6>
 				<p>Mit Absatz innerhalb von <code>&lt;hgroup&gt;</code>.</p>
 			</hgroup>
+			<h2>&lt;header&gt;</h2>
+			<header>Kopfbereich</header>
+			<pre class="pre_code"><code>header.header_page</code></pre>
+			<pre class="pre_code"><code>header.header_txt>h1</code></pre>
+			<header class="header_txt">
+				<h1>Überschrift 1</h1>
+				<p>Innerhalb eines <code>&lt;header&gt;</code>.</p>
+			</header>
 			<h2>&lt;footer&gt;</h2>
+			<p>Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
+			<footer>Fußbereich</footer>
 			<div style="position:relative;height:256px;background-color:#b7e0f0;">
 				{{ footer.pinned() }}
 			</div>
@@ -90,24 +100,81 @@ tags:
 			<p>Elemente:</p>
 			<pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre>
 			<h2>&lt;p&gt;</h2>
+			<p>Ein Absatz. Ein <code>code</code> Element innerhalb wird besonders behandelt.</p>
 			<h4>Varianten</h4>
-			<pre class="pre_code"><code>p.txt_center</code></pre>
-			<pre class="pre_code"><code>p.txt_right</code></pre>
 			<pre class="pre_code"><code>p.column_2</code></pre>
+			<p class="column_2">Spalten können angegeben werden.</p>
 			<pre class="pre_code"><code>p.column_3.column_line</code></pre>
+			<p class="column_3 column_line">Spalten können angegeben werden.</p>
+			<h2>&lt;address&gt;</h2>
+			<address>Anschrift, mit bestimmtem, ##### Format.</address>
 			<h2>&lt;hr&gt;</h2>
+			<hr>
 			<h4>Varianten</h4>
-			<pre class="pre_code"><code>hr.hr_hidden</code></pre>
-			<pre class="pre_code"><code>hr.hr_dotted</code></pre>
-			<pre class="pre_code"><code>hr.space_even_half</code></pre>
-			<pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
+			<pre class="pre_code"><code>hr.hr_hidden+hr.hr_dotted+hr.hr_double</code></pre>
+			<hr class="hr_hidden">
+			<hr class="hr_dotted">
+			<hr class="hr_double">
+			<h2>&lt;pre&gt;</h2>
+			<pre>Vorformatierter Text.
+	erhält Umbrüche und Einrückung.
+			</pre>
+			<pre class="pre_code"><code>pre.pre_code>code*2</code></pre>
+			<pre class="pre_code"><code>let variable = true;</code>
+<code>()(){}</code></pre>
 			<h2>&lt;blockquote&gt;</h2>
-			<pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre>
+			<blockquote>Ein Zitat ist eingerückt.</blockquote>
+			<pre class="pre_code"><code>blockquote.quote_mark>p+p.quote_source</code></pre>
+			<blockquote class="quote_mark">
+				<p>Zitat mit automatischen Anführungszeichen</p>
+				<p class="quote_source">und Quellenangabe.</p>
+			</blockquote>
+			<h2>&lt;dl&gt;, &lt;ol&gt;, &lt;ul&gt;</h2>
+			<dl>
+				<dt>Begriff</dt>
+				<dd>Definition</dd>
+			</dl>
+			<ol>
+				<li>Eins</li>
+				<li>Zwei</li>
+			</ol>
+			<ul class="horizontal">
+				<li>Obst</li>
+				<li>Gemüse</li>
+			</ul>
+			<h4>Varianten</h4>
+			<pre class="pre_code"><code>ul.list_basic.list_dash>li*2</code></pre>
+			<ul class="list_basic list_dash">
+				<li>Mehr Abstand und</li>
+				<li>mit Unterstrichen.</li>
+			</ul>
+			<pre class="pre_code"><code>ul.list_link>(li>a)*2</code></pre>
+			<ul class="list_link">
+				<li><a href="">Mit</a></li>
+				<li><a href="">Verweisen</a></li>
+			</ul>
 			<h2>&lt;figure&gt;</h2>
 			<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
+			<figure>
+				<figcaption>Bezeichnung</figcaption>
+				Grafisches Element.
+			</figure>
+			<h2>&lt;main&gt;</h2>
+			<main>Hauptbereich</main>
 			<h2>&lt;div&gt;</h2>
-			<pre class="pre_code"><code>div.div_info>p</code></pre>
 			<h4>Varianten</h4>
+			<pre class="pre_code"><code>div.div_info>p</code></pre>
+			<div class="div_info">
+				<p>Absatz in Informationsbox.</p>
+			</div>
+			<pre class="pre_code"><code>div.box_space>div.box_cube>span</code></pre>
+			<div class="box_space">
+				<div class="box_cube"><span>Text</span></div>
+			</div>
+			<pre class="pre_code"><code>div.box_placeholder+hr+div.box_placeholder_bkg</code></pre>
+			<div class="box_placeholder"></div>
+			<hr>
+			<div class="box_placeholder_bkg"></div>
 		</article>
 		<article>
 			<h1 id="tabularData">Tabellen</h1>