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

feat: Change placeholder and usage

Browse source 
- Move files
- Remove demo folder for art
- Remove unused files
- Add placeholders
- Move flag to placeholder
- Replace content with placeholders
This commit is contained in:
sthag 2025-06-21 12:11:03 +02:00
parent 57dffa3502
commit 52daf0ca51
9 changed files with 99 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,6 +7,7 @@ tags:
{% set pageId = page.fileSlug %}
{% extends "demo/_main.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %}
{% block title %}Gestaltungen{% endblock %}
{% block head %}
@ -25,11 +26,9 @@ tags:
<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>
<p>+49 (0)123 1337 0000<br>
<a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a>
</p>
<div class="float_space_left demo__avatar">{{ ph.flag('img', '', '', 'Avatar', '256') }}</div>
<p>{{ ph.name() }}<br>{{ ph.address() }}</p>
<p>{{ ph.phone() }}<br>{{ ph.email('lineLink') }}</p>
</section>
<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre>
<div class="space_left_fourth">
@ -245,18 +244,15 @@ tags:
<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/demo/letter.gif" alt="">name@domain.tld</a>
</li>
<li>
<a href="">Work</a>
</li>
<li>
<a href="">Projects</a>
</li>
</ul>
<pre class="pre_code"><code>ul.list_link>(li>a)+li>a>img+span</code></pre>
<nav>
<ul class="list_link">
<li>{{ ph.email('', '📧 name@domain.tld') }}</li>
<li>
<a href=""><img src="{{ pageBase }}art/bullet.gif" alt="">{{ ph.name() }}</a>
</li>
</ul>
</nav>
<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>
@ -270,7 +266,7 @@ tags:
</thead>
<tbody>
<tr>
<td class="cell_icon" rowspan="2"><img src="/art/demo/bullet.gif" alt="" width="16" height="16"></td>
<td class="cell_icon" rowspan="2">■</td>
<td class="cell_link">
<a href="" target="_blank">Name</a>
<a href="" target="_blank">URL</a>
@ -285,7 +281,7 @@ tags:
</tbody>
<tbody>
<tr>
<td class="cell_icon" rowspan="2"><img src="/art/demo/bullet.gif" alt="" width="16" height="16"></td>
<td class="cell_icon" rowspan="2">■</td>
<td class="cell_link">
<a href="" target="_blank">Name</a>
<a href="" target="_blank">URL</a>
@ -302,18 +298,7 @@ tags:
<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">
<desc>Background flag</desc>
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
</svg>
{{ ph.flag() }}
</div>
</article>
</section>