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

feat: Change label styles and update layouts

Browse source 
- Update styles
- Update layouts screen and rearrange other examples
This commit is contained in:
sthag 2025-10-20 19:27:23 +02:00
parent 5f54ab6bbe
commit 41c5757790
2 changed files with 18 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -22,7 +22,7 @@ tags:
<p>Die Elemente werden fortlaufend komplexer</p> <p>Die Elemente werden fortlaufend komplexer</p>
</header> </header>
<article> <article>
<h2>Bereiche</h2> <h2>Bereiche (sections)</h2>
<h3>section</h3> <h3>section</h3>
<pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre> <pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre>
<section class="overflow"> <section class="overflow">
@ -30,12 +30,7 @@ tags:
<p>{{ ph.name() }}<br>{{ ph.address() }}</p> <p>{{ ph.name() }}<br>{{ ph.address() }}</p>
<p>{{ ph.phone() }}<br>{{ ph.email('lineLink') }}</p> <p>{{ ph.phone() }}<br>{{ ph.email('lineLink') }}</p>
</section> </section>
<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre> <h3>nav</h3>
<div class="space_left_fourth">
<hr/>
<p>Eingerückter Inhalt</p>
<hr/>
</div>
<pre class="pre_code"><code>div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)</code></pre> <pre class="pre_code"><code>div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)</code></pre>
<div class="overflow"> <div class="overflow">
<nav class="float_space_left"> <nav class="float_space_left">
@ -107,6 +102,7 @@ tags:
</ul> </ul>
</nav> </nav>
</div> </div>
<h3>header</h3>
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre> <pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
<header class="header_page demo__header header_fancy"> <header class="header_page demo__header header_fancy">
<h1>Aufmacher</h1> <h1>Aufmacher</h1>
@ -175,6 +171,9 @@ tags:
</footer> </footer>
</div> </div>
</div> </div>
<h2>Interaktiv (interactive)</h2>
<h3>input</h3>
<div class="flex inline"> <div class="flex inline">
<input value="Undefiniert"/> <input value="Undefiniert"/>
<input type="text" size="8" value="Text"/> <input type="text" size="8" value="Text"/>
@ -182,10 +181,9 @@ tags:
<input type="button" value="Auswählen"> <input type="button" value="Auswählen">
<input type="submit" value="Senden" disabled="disabled"/> <input type="submit" value="Senden" disabled="disabled"/>
</div> </div>
<h3>form</h3>
<form method="get"> <form method="get">
<p class="label"> <p>Show me a
Show me a
<select name="F"> <select name="F">
<option value="0">Plain list</option> <option value="0">Plain list</option>
<option value="1" selected="selected">Fancy list</option> <option value="1" selected="selected">Fancy list</option>
@ -212,7 +210,7 @@ tags:
</p> </p>
</form> </form>
<h2>Gruppierung</h2> <h2>Gruppierung (grouping)</h2>
<h3>p</h3> <h3>p</h3>
<pre class="pre_code"><code>p.txt_right+p.txt_center+p.txt_left</code></pre> <pre class="pre_code"><code>p.txt_right+p.txt_center+p.txt_left</code></pre>
<p class="txt_right">Rechts</p> <p class="txt_right">Rechts</p>
@ -230,14 +228,13 @@ tags:
<h1>Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.</h1> <h1>Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.</h1>
<h2>Überschrift 2</h2> <h2>Überschrift 2</h2>
<h2>kann das ebenso.</h2> <h2>kann das ebenso.</h2>
<h3>hr</h3> <h3>hr</h3>
<pre class="pre_code"><code>hr.space_even_half</code></pre> <pre class="pre_code"><code>hr.space_even_half</code></pre>
<hr class="space_even_half"> <hr class="space_even_half">
<pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre> <pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
<hr class="hr_dotted space_even_fourth"> <hr class="hr_dotted space_even_fourth">
<h3>ul</h3> <h3>ul</h3>
<pre class="pre_code"><code>ul.list_link>(li>a)+li>a>img+span</code></pre> <pre class="pre_code"><code>nav>ul.list_link>(li>a)+li>a>img+span</code></pre>
<nav> <nav>
<ul class="list_link"> <ul class="list_link">
<li>{{ ph.email('', '📧 name@domain.tld') }}</li> <li>{{ ph.email('', '📧 name@domain.tld') }}</li>
@ -246,6 +243,13 @@ tags:
</li> </li>
</ul> </ul>
</nav> </nav>
<h3>div</h3>
<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre>
<div class="space_left_fourth">
<hr/>
<p>Eingerückter Inhalt</p>
<hr/>
</div>
<h2>Tabellen</h2> <h2>Tabellen</h2>
<pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;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</code></pre> <pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;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</code></pre>

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit 54f1de579c3709db1f785997884a2e3e9861e0bc Subproject commit cf8fc6bd5dcb24ad654ca6093e6e47520b8b0093