diff --git a/source/art/images/demo/bullet.gif b/source/art/images/demo/bullet.gif
new file mode 100644
index 0000000..55a84ab
Binary files /dev/null and b/source/art/images/demo/bullet.gif differ
diff --git a/source/art/images/demo/letter.gif b/source/art/images/demo/letter.gif
new file mode 100644
index 0000000..60aac08
Binary files /dev/null and b/source/art/images/demo/letter.gif differ
diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk
index 87c7a3c..5890112 100644
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@@ -80,7 +80,17 @@ tags:
Überschrift 6
Mit Absatz innerhalb von <hgroup>.
+ <header>
+
+ header.header_page
+ header.header_txt>h1
+
<footer>
+ Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.
+
{{ footer.pinned() }}
@@ -90,24 +100,81 @@ tags:
Elemente:
// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div
<p>
+ Ein Absatz. Ein code Element innerhalb wird besonders behandelt.
Varianten
- p.txt_center
- p.txt_right
p.column_2
+ Spalten können angegeben werden.
p.column_3.column_line
+ Spalten können angegeben werden.
+ <address>
+ Anschrift, mit bestimmtem, ##### Format.
<hr>
+
Varianten
- hr.hr_hidden
- hr.hr_dotted
- hr.space_even_half
- hr.hr_dotted.space_even_fourth
+ hr.hr_hidden+hr.hr_dotted+hr.hr_double
+
+
+
+ <pre>
+ Vorformatierter Text.
+ erhält Umbrüche und Einrückung.
+
+ pre.pre_code>code*2
+ let variable = true;
+()(){}
<blockquote>
- blockquote>p+p.quote_source
+ Ein Zitat ist eingerückt.
+ blockquote.quote_mark>p+p.quote_source
+
+ Zitat mit automatischen Anführungszeichen
+ und Quellenangabe.
+
+ <dl>, <ol>, <ul>
+
+ - Begriff
+ - Definition
+
+
+ - Eins
+ - Zwei
+
+
+ Varianten
+ ul.list_basic.list_dash>li*2
+
+ - Mehr Abstand und
+ - mit Unterstrichen.
+
+ ul.list_link>(li>a)*2
+
<figure>
figure>figcaption+{element}
+
+ Bezeichnung
+ Grafisches Element.
+
+ <main>
+ Hauptbereich
<div>
- div.div_info>p
Varianten
+ div.div_info>p
+
+
Absatz in Informationsbox.
+
div.box_space>div.box_cube>span
+
+ div.box_placeholder+hr+div.box_placeholder_bkg
+
+
+
Tabellen
diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk
index ab80554..a45a817 100644
--- a/source/screens/demo/layouts.njk
+++ b/source/screens/demo/layouts.njk
@@ -21,19 +21,9 @@ tags:
Die Elemente werden fortlaufend komplexer
- <h3>
- Beispiele
- h3.txt_color_dark+p
- Dunkle Überschrift
- Mit normalem Textabsatz
- <h4>
- Beispiele
- a>h4
-
- Überschrift als Block-Verweis
-
- <section>
- section>div.float_space_left>img^p+p
+ Bereiche
+ section
+ section.overflow>div.float_space_left>img^p+p>br+a.lineLink
Vorname Name
Straße 1, 01234 Stadt
@@ -41,13 +31,13 @@ tags:
name@domain.tld
- div.space_left_fourth
+ div.space_left_fourth>(hr+p+hr)
- nav>ul>(li>a.a_button{punkt $})*4nav>ul>(li>a.a_button_border{stufe $})*4
+ div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)
- nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{typ $})*4
+ nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4
+ div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4
+
Gruppierung
+ p
+ p.txt_right+p.txt_center+p.txt_left
+ Rechts
+ Mittig
+ Links
+ h*
+ h3.txt_color_dark+p.txt_tiny
+ Dunkle Überschrift
+ Mit winzigem Textabsatz
+ a>h4
+
+ Überschrift als Block-Verweis
+
+ Überschrift 1
+ Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.
+ Überschrift 2
+ kann das ebenso.
+
+ hr
+ hr.space_even_half
+
+ hr.hr_dotted.space_even_fourth
+
+ ul
ul.list_link>(li>a>img)*2+li>a
name@domain.tld
+ 
name@domain.tld
