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

feat: More content for components and layouts

Browse source 
- Update hippie styles
- Add demo images
- New components content
- New layout structure and content
This commit is contained in:
sthag 2025-06-19 14:20:56 +02:00
parent 4d00d34d63
commit 7950d23b14
5 changed files with 112 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
source/art/images/demo/bullet.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 67 B

BIN
source/art/images/demo/letter.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 77 B

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

@ -80,7 +80,17 @@ tags:
<h6>Überschrift 6</h6>
<p>Mit Absatz innerhalb von <code>&lt;hgroup&gt;</code>.</p>
</hgroup>
<h2>&lt;header&gt;</h2>
<header>Kopfbereich</header>
<pre class="pre_code"><code>header.header_page</code></pre>
<pre class="pre_code"><code>header.header_txt>h1</code></pre>
<header class="header_txt">
<h1>Überschrift 1</h1>
<p>Innerhalb eines <code>&lt;header&gt;</code>.</p>
</header>
<h2>&lt;footer&gt;</h2>
<p>Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
<footer>Fußbereich</footer>
<div style="position:relative;height:256px;background-color:#b7e0f0;">
{{ footer.pinned() }}
</div>
@ -90,24 +100,81 @@ tags:
<p>Elemente:</p>
<pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre>
<h2>&lt;p&gt;</h2>
<p>Ein Absatz. Ein <code>code</code> Element innerhalb wird besonders behandelt.</p>
<h4>Varianten</h4>
<pre class="pre_code"><code>p.txt_center</code></pre>
<pre class="pre_code"><code>p.txt_right</code></pre>
<pre class="pre_code"><code>p.column_2</code></pre>
<p class="column_2">Spalten können angegeben werden.</p>
<pre class="pre_code"><code>p.column_3.column_line</code></pre>
<p class="column_3 column_line">Spalten können angegeben werden.</p>
<h2>&lt;address&gt;</h2>
<address>Anschrift, mit bestimmtem, ##### Format.</address>
<h2>&lt;hr&gt;</h2>
<hr>
<h4>Varianten</h4>
<pre class="pre_code"><code>hr.hr_hidden</code></pre>
<pre class="pre_code"><code>hr.hr_dotted</code></pre>
<pre class="pre_code"><code>hr.space_even_half</code></pre>
<pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
<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">
<h2>&lt;pre&gt;</h2>
<pre>Vorformatierter Text.
erhält Umbrüche und Einrückung.
</pre>
<pre class="pre_code"><code>pre.pre_code>code*2</code></pre>
<pre class="pre_code"><code>let variable = true;</code>
<code>()(){}</code></pre>
<h2>&lt;blockquote&gt;</h2>
<pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre>
<blockquote>Ein Zitat ist eingerückt.</blockquote>
<pre class="pre_code"><code>blockquote.quote_mark>p+p.quote_source</code></pre>
<blockquote class="quote_mark">
<p>Zitat mit automatischen Anführungszeichen</p>
<p class="quote_source">und Quellenangabe.</p>
</blockquote>
<h2>&lt;dl&gt;, &lt;ol&gt;, &lt;ul&gt;</h2>
<dl>
<dt>Begriff</dt>
<dd>Definition</dd>
</dl>
<ol>
<li>Eins</li>
<li>Zwei</li>
</ol>
<ul class="horizontal">
<li>Obst</li>
<li>Gemüse</li>
</ul>
<h4>Varianten</h4>
<pre class="pre_code"><code>ul.list_basic.list_dash>li*2</code></pre>
<ul class="list_basic list_dash">
<li>Mehr Abstand und</li>
<li>mit Unterstrichen.</li>
</ul>
<pre class="pre_code"><code>ul.list_link>(li>a)*2</code></pre>
<ul class="list_link">
<li><a href="">Mit</a></li>
<li><a href="">Verweisen</a></li>
</ul>
<h2>&lt;figure&gt;</h2>
<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
<figure>
<figcaption>Bezeichnung</figcaption>
Grafisches Element.
</figure>
<h2>&lt;main&gt;</h2>
<main>Hauptbereich</main>
<h2>&lt;div&gt;</h2>
<pre class="pre_code"><code>div.div_info>p</code></pre>
<h4>Varianten</h4>
<pre class="pre_code"><code>div.div_info>p</code></pre>
<div class="div_info">
<p>Absatz in Informationsbox.</p>
</div>
<pre class="pre_code"><code>div.box_space>div.box_cube>span</code></pre>
<div class="box_space">
<div class="box_cube"><span>Text</span></div>
</div>
<pre class="pre_code"><code>div.box_placeholder+hr+div.box_placeholder_bkg</code></pre>
<div class="box_placeholder"></div>
<hr>
<div class="box_placeholder_bkg"></div>
</article>
<article>
<h1 id="tabularData">Tabellen</h1>

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

@ -21,19 +21,9 @@ tags:
<p>Die Elemente werden fortlaufend komplexer</p>
</header>
<article>
<h2>&lt;h3&gt;</h2>
<h4>Beispiele</h4>
<pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
<p>Mit normalem Textabsatz</p>
<h2>&lt;h4&gt;</h2>
<h4>Beispiele</h4>
<pre class="pre_code"><code>a>h4</code></pre>
<a href="">
<h4>Überschrift als Block-Verweis</h4>
</a>
<h2>&lt;section&gt;</h2>
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
<h2>Bereiche</h2>
<h3>section</h3>
<pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre>
<section class="overflow">
<div class="float_space_left demo__avatar"><img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div>
<p>Vorname Name<br>Straße 1, 01234 Stadt</p>
@ -41,13 +31,13 @@ tags:
<a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a>
</p>
</section>
<pre class="pre_code"><code>div.space_left_fourth</code></pre>
<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>
<pre class="pre_code"><code>nav>ul>(li>a.a_button{punkt $})*4nav>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">
<nav class="float_space_left">
<ul>
@ -82,7 +72,7 @@ tags:
</ul>
</nav>
</div>
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4</code></pre>
<nav class="nav_horizontal">
<ul>
<li>
@ -99,6 +89,7 @@ tags:
</li>
</ul>
</nav>
<pre class="pre_code"><code>div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
<div class="overflow">
<nav class="nav_center_old">
<ul>
@ -199,6 +190,7 @@ tags:
<div class="flex_column"><input type="button" value="Auswählen"></div>
<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
</div>
<form method="get">
<p class="label">
Show me a
@ -229,10 +221,34 @@ tags:
</form>
<h2>Gruppierung</h2>
<h3>p</h3>
<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_center">Mittig</p>
<p class="txt_left">Links</p>
<h3>h*</h3>
<pre class="pre_code"><code>h3.txt_color_dark+p.txt_tiny</code></pre>
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
<p class="txt_tiny">Mit winzigem Textabsatz</p>
<pre class="pre_code"><code>a>h4</code></pre>
<a href="">
<h4>Überschrift als Block-Verweis</h4>
</a>
<h1>Überschrift 1</h1>
<h1>Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.</h1>
<h2>Überschrift 2</h2>
<h2>kann das ebenso.</h2>
<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">
<h3>ul</h3>
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
<ul class="list_link">
<li>
<a href=""><img src="{{ pageBase }}art/letter.gif" alt="">name@domain.tld</a>
<a href=""><img src="{{ pageBase }}art/demo/letter.gif" alt="">name@domain.tld</a>
</li>
<li>
<a href="">Work</a>
@ -254,7 +270,7 @@ tags:
</thead>
<tbody>
<tr>
<td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
<td class="cell_icon" rowspan="2"><img src="/art/demo/bullet.gif" alt="" width="16" height="16"></td>
<td class="cell_link">
<a href="" target="_blank">Name</a>
<a href="" target="_blank">URL</a>
@ -269,7 +285,7 @@ tags:
</tbody>
<tbody>
<tr>
<td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
<td class="cell_icon" rowspan="2"><img src="/art/demo/bullet.gif" alt="" width="16" height="16"></td>
<td class="cell_link">
<a href="" target="_blank">Name</a>
<a href="" target="_blank">URL</a>
@ -283,6 +299,7 @@ tags:
</tr>
</tbody>
</table>
<h2>Eingebettet</h2>
<div class="demo__flag">
<svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit d17f9667943a2f525707b1dc77d2d9bf95814e71
Subproject commit a1a4bd408bedaa11f5e1aacca630d0b1bbbe7aa2