interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

new status sections

Browse source
This commit is contained in:
Stephan Hagedorn 2017-09-28 01:12:52 +02:00
parent 42e0ccee4e
commit 212b41f4a3
4 changed files with 65 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

45
demo-index.html
View file

@ -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

14
source/style/elements/_sections.scss
View file

@ -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 {

2
source/style/global/_common.scss
View file

@ -123,7 +123,7 @@
position: fixed;
}
.pos_bottom {
.pin_bottom {
bottom: 0;
}

12
source/style/modules/demo/_demo_module.scss
View file

@ -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 {