From 4d00d34d630d56d90edbedd14f30f06b023fb7ff Mon Sep 17 00:00:00 2001 From: sthag Date: Thu, 19 Jun 2025 12:36:56 +0200 Subject: [PATCH] feat: Add content for components page - New elements in sections part - Reindent --- source/screens/demo/basics.njk | 4 +- source/screens/demo/components.njk | 394 +++++++++++----------- source/screens/demo/layouts.njk | 515 ++++++++++++++--------------- 3 files changed, 461 insertions(+), 452 deletions(-) diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk index 3df91dd..d8cf064 100644 --- a/source/screens/demo/basics.njk +++ b/source/screens/demo/basics.njk @@ -15,7 +15,7 @@ tags: {% block main %} -
+
Dies ist einfach nur Text.
Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.
Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.

Es wirken nur die Eigenschaften des @@ -243,7 +243,7 @@ tags:

↥ (Zum Anfang des Abschnitts springen) - ⇫ + ⇫ (Zum Anfang der Seite springen)

+
+
+
+
+
+

Varianten

+
+
+ + + + Caps Lock is ON. +
+
+

<select>

+ - - + + + {% endblock %} {% block script %} @@ -243,7 +265,7 @@ tags: .visibility = 'hidden'; } } - + function capsDetect() { const body = document.getElementsByTagName('body')[0]; const capsWarning = document.getElementById('error'); diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk index 9672ea8..ab80554 100644 --- a/source/screens/demo/layouts.njk +++ b/source/screens/demo/layouts.njk @@ -15,304 +15,291 @@ tags: {% block main %} -
-
-
-

Sammlung formatierter Elemente

-

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
-
-
Fahne von interaktionsweise
-

Vorname Name
Straße 1, 01234 Stadt

-

+49 (0)123 1337 0000
- name@domain.tld -

-
- 
div.space_left_fourth
-
-
-

Eingerückter Inhalt

-
-
- 
nav>ul>(li>a.a_button{punkt $})*4nav>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
-
+

Tabellen

+ 
table.table_link>thead>tr>th{&nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16  height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Ab / ZyNeu / Alt
+ Name + URL + YYYY-MM-DD
+
Beschreibung
+
+ Name + URL + YYYY-MM-DD
+
Beschreibung
+
+

Eingebettet

+
+ + Background flag + + + + + + + + + + +
+ + {% endblock %} {% block script %}