feat: Add content for components page

- New elements in sections part
- Reindent

source/screens/demo/basics.njk

@@ -15,7 +15,7 @@ tags:
 
 {% block main %}
 	<!-- {{ page.fileSlug }}.page -->
-	<div id="begin" class="demo__intro">
+	<div class="demo__intro">
 		Dies ist einfach nur Text.<br>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.<br>Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.<br><br>
 		<article>
 			<p>Es wirken nur die Eigenschaften des
@@ -243,7 +243,7 @@ tags:
 				<p>
 					<a class="a_button_text" href="#textlevel">↥</a>
 					(Zum Anfang des Abschnitts springen)
-					<a class="a_button_text" href="#begin">⇫</a>
+					<a class="a_button_text" href="#">⇫</a>
 					(Zum Anfang der Seite springen)</p>
 			</nav>
 			<nav class="nav_center_old">

source/screens/demo/components.njk

@@ -50,14 +50,36 @@ tags:
 			<h2>&lt;body&gt;</h2>
 			<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
 			<h2>&lt;article&gt;</h2>
-				<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
+			<article>Ein Artikel.</article>
 			<h2>&lt;section&gt;</h2>
-				<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
+			<section>Ein Bereich.</section>
 			<h4>Varianten</h4>
 			<pre class="pre_code"><code>section.sec_main_center</code></pre>
+			<section class="sec_main_center">
+				<p class="float_right">Ende.</p>
+				<p>Zentrierter Bereich.</p>
+			</section>
 			<pre class="pre_code"><code>section.sec_main_status</code></pre>
-				<h2>&lt;h3&gt;</h2>
-				<h2>&lt;h4&gt;</h2>
+			<section class="sec_main_status">Status-Bereich</section>
+			<h2>&lt;nav&gt;</h2>
+			<nav>Navigation</nav>
+			<h2>&lt;aside&gt;</h2>
+			<p>Fließt um andere Inhalte. Klassen zur Positionierung und Kombination mit <code>.bside</code>.</p>
+			<pre class="pre_code"><code>aside.right+div.bside</code></pre>
+			<section>
+				<aside class="right">Seitenbereich, recht ausgerichtet.</aside>
+				<div class="bside">Hauptbereich</div>
+			</section>
+			<h2>&lt;h*&gt;</h2>
+			<h1>Überschrift 1</h1>
+			<h2>Überschrift 2</h2>
+			<h3>Überschrift 3</h3>
+			<h4>Überschrift 4</h4>
+			<h5>Überschrift 5</h5>
+			<hgroup>
+				<h6>Überschrift 6</h6>
+				<p>Mit Absatz innerhalb von <code>&lt;hgroup&gt;</code>.</p>
+			</hgroup>
 			<h2>&lt;footer&gt;</h2>
 			<div style="position:relative;height:256px;background-color:#b7e0f0;">
 				{{ footer.pinned() }}

source/screens/demo/layouts.njk

@@ -15,7 +15,6 @@ tags:
 
 {% block main %}
 	<!-- {{ page.fileSlug }}.page -->
-	<div id="begin" class="">
 	<section class="sec_main_center">
 		<header class="header_txt">
 			<h1>Sammlung formatierter Elemente</h1>
@@ -204,35 +203,24 @@ tags:
 				<p class="label">
 					Show me a
 					<select name="F">
-							<option value="0">
-								Plain list</option>
-							<option value="1" selected="selected">
-								Fancy list</option>
-							<option value="2">
-								Table list</option>
+						<option value="0">Plain list</option>
+						<option value="1" selected="selected">Fancy list</option>
+						<option value="2">Table list</option>
 					</select>
 					Sorted by
 					<select name="C">
-							<option value="N" selected="selected">
-								Name</option>
-							<option value="M">
-								Date Modified</option>
-							<option value="S">
-								Size</option>
-							<option value="D">
-								Description</option>
+						<option value="N" selected="selected">Name</option>
+						<option value="M">Date Modified</option>
+						<option value="S">Size</option>
+						<option value="D">Description</option>
 					</select>
 					<select name="O">
-							<option value="A" selected="selected">
-								Ascending</option>
-							<option value="D">
-								Descending</option>
+						<option value="A" selected="selected">Ascending</option>
+						<option value="D">Descending</option>
 					</select>
 					<select name="V">
-							<option value="0" selected="selected">
-								in Normal order</option>
-							<option value="1">
-								in Version order</option>
+						<option value="0" selected="selected">in Normal order</option>
+						<option value="1">in Version order</option>
 					</select>
 					Matching
 					<input type="text" name="P" value="*"/>
@@ -312,7 +300,6 @@ tags:
 			</div>
 		</article>
 	</section>
-	</div>
 {% endblock %}
 
 {% block script %}