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

feat: Reflect new hr styles

Browse source
This commit is contained in:
sthag 2026-02-14 20:45:30 +01:00
parent 9d98b69e31
commit aa4c0968ae
6 changed files with 22 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

27
source/screens/demo/basics.njk
View file

@ -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.</p>
<hr/>
<p>Es ist auch eine unsichtbare Unterteilung möglich:</p>
<hr class="hr_hidden js_pop"/>
<hr class="hidden js_pop"/>
<div class="exp_pop">
<code class="code_solo">hr.hr_hidden</code>
<code class="code_solo">hr.hidden</code>
</div>
<p>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%:</p>
<hr class="hr_dotted js_pop"/>
<p>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%:</p>
<hr class="dotted js_pop"/>
<div class="exp_pop">
<code class="code_solo">hr.hr_dotted</code>
<code class="code_solo">hr.dotted</code>
</div>
<!--hr.hr_dotted-->
<hr class="space_even_half js_pop"/>
<div class="exp_pop">
<code class="code_solo">hr.space_even_half</code>
</div>
<hr class="hr_dotted space_even_fourth js_pop"/>
<hr class="dotted space_even_fourth js_pop"/>
<div class="exp_pop">
<code class="code_solo">hr.hr_dotted.space_even_fourth</code>
<code class="code_solo">hr.dotted.space_even_fourth</code>
</div>
<p class="column_2 js_pop">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.</p>
<p class="column_2 js_pop">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>
<div class="exp_pop">
<code class="code_solo">p.column_2</code>
</div>
@ -202,7 +201,7 @@ tags:
<div class="exp_pop">
<code class="code_solo">figure>figcaption+{element}</code>
</div>
<hr class="hr_hidden">
<hr class="hidden">
<p>Eine sehr klar definierte Gruppierung stellt das Element
<code>&lt;main&gt;</code>
dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.</p>
@ -342,7 +341,7 @@ tags:
</dt>
<dd>Alternative bei fehlender Unterstützung</dd>
</dl>
<hr class="hr_dotted space_even_half">
<hr class="dotted space_even_half">
<div class="txt_center">
<ruby class="space_right_small">
<rb>Basis</rb>
@ -382,7 +381,7 @@ tags:
<rp>.</rp>
</ruby>
</div>
<hr class="hr_dotted space_even_half">
<hr class="dotted space_even_half">
<p>Wikipedia erklärt dies ausführlicher unter
<a href="https://de.wikipedia.org/wiki/Ruby_Annotation">Ruby Annotation</a>.</p>
<p>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:
<article>
<h1>Struktur</h1>
<div class="box_placeholder"></div>
<hr class="hr_hidden"/>
<hr class="hidden"/>
<div class="box_placeholder">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%">
<line x1='0' y1='0' x2='100%' y2='100%' stroke='#000' stroke-width='.5'/>
<line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/>
</svg>
</div>
<hr class="hr_hidden"/>
<hr class="hidden"/>
<div class="box_placeholder_bkg"></div>
</article>
<article>

8
source/screens/demo/components.njk
View file

@ -115,10 +115,10 @@ tags:
<h2>&lt;hr&gt;</h2>
<hr>
<h4>Varianten</h4>
<pre class="pre_code"><code>hr.hr_hidden+hr.hr_dotted+hr.hr_double</code></pre>
<hr class="hr_hidden">
<hr class="hr_dotted">
<hr class="hr_double">
<pre class="pre_code"><code>hr.hidden+hr.dotted+hr.double</code></pre>
<hr class="hidden">
<hr class="dotted">
<hr class="double">
<pre class="pre_code"><code>hr.vertical</code></pre>
<hr class="vertical">
<h2>&lt;pre&gt;</h2>

2
source/screens/demo/examples/blog.njk
View file

@ -41,7 +41,7 @@ tags:
Bestellungen bitte an
{{ ph.name() }}
richten.</p>
<hr class="hr_double hr_dotted">
<hr class="double dotted">
{%- for post in collections.article -%}
{{ post.content }}
{%- endfor -%}

2
source/screens/demo/examples/songbook.njk
View file

@ -42,7 +42,7 @@ tags:
Bestellungen bitte an
{{ ph.name() }}
richten.</p>
<hr class="hr_double hr_dotted">
<hr class="double dotted">
{%- for piece in collections.song -%}
{{ song.simple(loop.index0, piece.data, piece.content) }}
{%- endfor -%}

4
source/screens/demo/layouts.njk
View file

@ -231,8 +231,8 @@ tags:
<h3>hr</h3>
<pre class="pre_code"><code>hr.space_even_half</code></pre>
<hr class="space_even_half">
<pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
<hr class="hr_dotted space_even_fourth">
<pre class="pre_code"><code>hr.dotted.space_even_fourth</code></pre>
<hr class="dotted space_even_fourth">
<h3>ul</h3>
<pre class="pre_code"><code>nav>ul.list_link>(li>a)+li>a>img+span</code></pre>
<nav>

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit 530748663f02ac15597c78843a12cd1f9973c4c9
Subproject commit 0e6aa4bb02a5323a3eadd92715e03e38e80858cb