From 212b41f4a3f873c791881b973e82bd318bd27d06 Mon Sep 17 00:00:00 2001
From: Stephan Hagedorn <klarsichtweise@gmail.com>
Date: Thu, 28 Sep 2017 01:12:52 +0200
Subject: [PATCH] new status sections

---
 demo-index.html                             | 45 ++++++++++++++++++++-
 source/style/elements/_sections.scss        | 14 +++++++
 source/style/global/_common.scss            |  2 +-
 source/style/modules/demo/_demo_module.scss | 12 +++---
 4 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/demo-index.html b/demo-index.html
index d536a94..c63f09f 100644
--- a/demo-index.html
+++ b/demo-index.html
@@ -536,8 +536,8 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
 						</ul>
 					</nav>
 				</header>
-				<div class="pos_abs pos_bottom width_full">
-					<pre class="pre__code"><code>footer.pos_abs.pos_bottom>nav.nav__column>ul>(li>a.a__button_text)*4</code></pre>
+				<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>
@@ -627,6 +627,47 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
 
 		</article>
 	</section>
+	<section>
+		<header class="sec__main_center">
+			<h1>Autarke Seiten</h1>
+			<p>Diese Elemente repräsentieren jeweils eine eigene Seite.</p>
+		</header>
+		<article>
+			<section class="sec_main_status demo__status">
+				<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 class="pos_abs pin_bottom width_full">
+					<p class="txt_center">domain.tld * <a class="lineLink" href="mailto:admin@domain.tld">admin@domain.tld</a></p>
+				</div>
+			</section>
+			<section class="sec_main_status demo__status">
+				<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 class="pos_abs pin_bottom width_full">
+					<p class="txt_center">domain.tld * <a class="lineLink" href="mailto:admin@domain.tld">admin@domain.tld</a></p>
+				</div>
+			</section>
+			<section class="sec_main_status demo__status">
+				<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 class="pos_abs pin_bottom width_full">
+					<p class="txt_center">domain.tld * <a class="lineLink" href="mailto:admin@domain.tld">admin@domain.tld</a></p>
+				</div>
+			</section>
+		</article>
+	</section>
 	<div id="end"></div>
 
 	<script
diff --git a/source/style/elements/_sections.scss b/source/style/elements/_sections.scss
index 66a8a0b..346c188 100644
--- a/source/style/elements/_sections.scss
+++ b/source/style/elements/_sections.scss
@@ -58,6 +58,20 @@ section {
 	}
 }
 
+.sec__main_status {
+	@extend .sec__main_center;
+	position: relative;
+	border-top-width: $border_width_8;
+	border-top-style: solid;
+	border-color: $basic_border_color;
+	padding-top: $space_3;
+
+	h1:first-of-type {
+		margin-top: 0;
+		font-weight: bold;
+	}
+}
+
 aside {
 
 	&.right + section {
diff --git a/source/style/global/_common.scss b/source/style/global/_common.scss
index 43e82d3..b8dac75 100644
--- a/source/style/global/_common.scss
+++ b/source/style/global/_common.scss
@@ -123,7 +123,7 @@
 	position: fixed;
 }
 
-.pos_bottom {
+.pin_bottom {
 	bottom: 0;
 }
 
diff --git a/source/style/modules/demo/_demo_module.scss b/source/style/modules/demo/_demo_module.scss
index e699dae..45556f7 100644
--- a/source/style/modules/demo/_demo_module.scss
+++ b/source/style/modules/demo/_demo_module.scss
@@ -1,9 +1,11 @@
 .demo__intro {
-	@extend .sec__main_center;
-	border-top-width: $border_width_8;
-	border-top-style: solid;
-	border-color: $basic_border_color;
-	padding-top: $space_3;
+	@extend .sec__main_status;
+}
+
+.demo__status {
+	@extend .sec__main_status;
+	min-height: 50vh;
+	border-color: $foxtrot_color;
 }
 
 .demo__header {