feat: More content for components and layouts
- Update hippie styles - Add demo images - New components content - New layout structure and content
This commit is contained in:
parent
4d00d34d63
commit
7950d23b14
5 changed files with 112 additions and 28 deletions
|
|
@ -21,19 +21,9 @@ tags:
|
|||
<p>Die Elemente werden fortlaufend komplexer</p>
|
||||
</header>
|
||||
<article>
|
||||
<h2><h3></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><h4></h2>
|
||||
<h4>Beispiele</h4>
|
||||
<pre class="pre_code"><code>a>h4</code></pre>
|
||||
<a href="">
|
||||
<h4>Überschrift als Block-Verweis</h4>
|
||||
</a>
|
||||
<h2><section></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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue