From aa4c0968ae1a8ac79c323b9d94d2bc0044bbdd33 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 14 Feb 2026 20:45:30 +0100 Subject: [PATCH] feat: Reflect new hr styles --- source/screens/demo/basics.njk | 27 +++++++++++------------ source/screens/demo/components.njk | 8 +++---- source/screens/demo/examples/blog.njk | 2 +- source/screens/demo/examples/songbook.njk | 2 +- source/screens/demo/layouts.njk | 4 ++-- source/style/hippie-style | 2 +- 6 files changed, 22 insertions(+), 23 deletions(-) diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk index 088d90d..ce628fe 100644 --- a/source/screens/demo/basics.njk +++ b/source/screens/demo/basics.njk @@ -100,25 +100,24 @@ tags: Elemente verwendet. Die horizontale Linie ist die Ausgangsformatierung, daher auch der abgekürzte Name des Elements. Eine Linie ist schwarz und durchgezogen.

Es ist auch eine unsichtbare Unterteilung möglich:

-
+
- hr.hr_hidden + hr.hidden
-

Die Linie darf auch gepunkted sein. Zudem sind verschiedene Längen möglich. Diese sind immer ein Prozentwert der verfügbaren Breite. Hier in gleicher Reihenfolge 100%, 50% und 25%:

-
+

Die Linie darf auch gepunktet sein. Zudem sind verschiedene Längen möglich. Diese sind immer ein Prozentwert der verfügbaren Breite. Hier in gleicher Reihenfolge 100%, 50% und 25%:

+
- hr.hr_dotted + hr.dotted
-
hr.space_even_half
-
+
- hr.hr_dotted.space_even_fourth + hr.dotted.space_even_fourth
-

Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.

+

Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilenanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.

p.column_2
@@ -202,7 +201,7 @@ tags:
figure>figcaption+{element}
-
+

Eine sehr klar definierte Gruppierung stellt das Element <main> dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.

@@ -342,7 +341,7 @@ tags:
Alternative bei fehlender Unterstützung
-
+
Basis @@ -382,7 +381,7 @@ tags: .
-
+

Wikipedia erklärt dies ausführlicher unter Ruby Annotation.

Es gibt auch mehrere besondere Elemente um Maschinensprache oder Programmiersprache zu bezeichnen. Dabei wird unterschieden, ob der Inhalt nur für Menschen ausgezeichnet wird oder auch maschinen-lesbar sein soll. Die Elemente @@ -839,14 +838,14 @@ tags:

Struktur

-
+
-
+
diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk index f327b4c..4d4ba16 100644 --- a/source/screens/demo/components.njk +++ b/source/screens/demo/components.njk @@ -115,10 +115,10 @@ tags:

<hr>

Varianten

- 
hr.hr_hidden+hr.hr_dotted+hr.hr_double
-
-
-
+ 
hr.hidden+hr.dotted+hr.double
+ +
+ 
hr.vertical

<pre>

diff --git a/source/screens/demo/examples/blog.njk b/source/screens/demo/examples/blog.njk index 0ffe2e8..9573419 100644 --- a/source/screens/demo/examples/blog.njk +++ b/source/screens/demo/examples/blog.njk @@ -41,7 +41,7 @@ tags: Bestellungen bitte an {{ ph.name() }} richten.

-
+
{%- for post in collections.article -%} {{ post.content }} {%- endfor -%} diff --git a/source/screens/demo/examples/songbook.njk b/source/screens/demo/examples/songbook.njk index 69f26b9..78a9939 100755 --- a/source/screens/demo/examples/songbook.njk +++ b/source/screens/demo/examples/songbook.njk @@ -42,7 +42,7 @@ tags: Bestellungen bitte an {{ ph.name() }} richten.

-
+
{%- for piece in collections.song -%} {{ song.simple(loop.index0, piece.data, piece.content) }} {%- endfor -%} diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk index 2aeeeb1..a35cfff 100644 --- a/source/screens/demo/layouts.njk +++ b/source/screens/demo/layouts.njk @@ -231,8 +231,8 @@ tags:

hr

hr.space_even_half
- 
hr.hr_dotted.space_even_fourth
-
+ 
hr.dotted.space_even_fourth
+

ul

nav>ul.list_link>(li>a)+li>a>img+span