feat: Replace layouts template
- Change nunjucks to liquid for layouts screen - Add shortcodes for placeholders to eleventy
This commit is contained in:
parent
b10379782f
commit
d64bf61a9c
4 changed files with 335 additions and 318 deletions
22
.eleventy.js
22
.eleventy.js
|
|
@ -28,10 +28,32 @@ module.exports = function (eleventyConfig) {
|
||||||
brand: 'hippie',
|
brand: 'hippie',
|
||||||
titlePrefix: '',
|
titlePrefix: '',
|
||||||
titlePostfix: ' - HIPPIE',
|
titlePostfix: ' - HIPPIE',
|
||||||
|
placeholders: {
|
||||||
|
name: 'Vorname Nachname',
|
||||||
|
address: 'Straße Nr., PLZ Ort',
|
||||||
|
phone: '+49 (0)101 1337 48',
|
||||||
|
mail: 'name@domain.tld'
|
||||||
|
},
|
||||||
debugMode: true,
|
debugMode: true,
|
||||||
legacyMode: false
|
legacyMode: false
|
||||||
});
|
});
|
||||||
|
|
||||||
|
eleventyConfig.addShortcode('text', function (text, attrId, attrClass) {
|
||||||
|
return `<span id="${attrId}" class="${attrClass}">${text}</span>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
eleventyConfig.addShortcode('link', function (target, text, attrId, attrClass) {
|
||||||
|
if (text === '') {
|
||||||
|
text = target;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (target.indexOf('@') !== -1) {
|
||||||
|
target = 'mailto:' + target;
|
||||||
|
}
|
||||||
|
|
||||||
|
return `<a id="${attrId}" class="${attrClass}" href="${target}">${text}</a>`;
|
||||||
|
});
|
||||||
|
|
||||||
eleventyConfig.addPassthroughCopy({'source/art/images': 'art'});
|
eleventyConfig.addPassthroughCopy({'source/art/images': 'art'});
|
||||||
|
|
||||||
eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'});
|
eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'});
|
||||||
|
|
|
||||||
311
source/screens/demo/layouts.liquid
Normal file
311
source/screens/demo/layouts.liquid
Normal file
|
|
@ -0,0 +1,311 @@
|
||||||
|
---
|
||||||
|
title: Layouts
|
||||||
|
tags:
|
||||||
|
- demoIndex
|
||||||
|
---
|
||||||
|
{% layout "hippie/page.liquid" %}
|
||||||
|
|
||||||
|
{% block title %}Gestaltungen{% endblock %}
|
||||||
|
|
||||||
|
{% block main %}
|
||||||
|
<section class="sec_main_center">
|
||||||
|
<header class="header_txt">
|
||||||
|
<h1>Sammlung formatierter Elemente</h1>
|
||||||
|
<p>Die Elemente werden fortlaufend komplexer</p>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>Bereiche (sections)</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">
|
||||||
|
{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '256', desc: 'Avatar' %}
|
||||||
|
</div>
|
||||||
|
<p>{% text hippie.placeholders.name %}<br>{% text hippie.placeholders.address %}</p>
|
||||||
|
<p>{% text hippie.placeholders.phone %}<br>{% link hippie.placeholders.mail, '', '', 'a_line' %}</p>
|
||||||
|
</section>
|
||||||
|
<h3>nav</h3>
|
||||||
|
<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>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_border">Stufe 1</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_border">Stufe 2</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_border">Stufe 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_border">Stufe 4</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4</code></pre>
|
||||||
|
<nav class="nav_horizontal">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Abschnitt 1</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Abschnitt 2</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Abschnitt 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Abschnitt 4</a>
|
||||||
|
</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>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Typ 1</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Typ 2</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Typ 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Typ 4</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</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>
|
||||||
|
<header class="header_page demo__header header_fancy">
|
||||||
|
<h1>Aufmacher</h1>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
|
||||||
|
<nav class="nav_separate_right">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Mensch</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Pflanze</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<nav class="nav_right">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Blau</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Gelb</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
|
||||||
|
<div class="box_space h_basic">
|
||||||
|
<header id="js_demo_fix" class="header_page demo__header header_fix">
|
||||||
|
<nav class="nav_right">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Eins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Zwei</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<div class="pos_abs pin_bottom width_full">
|
||||||
|
<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
|
||||||
|
<footer id="js_demo_stop" class="demo_footer">
|
||||||
|
<nav class="nav_column nav_separate">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_text">Alpha</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_text">Bravo</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_text">Charlie</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_text">Delta</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<p class="txt_center demo__credits">
|
||||||
|
<i class="i_bright">👨💻</i>
|
||||||
|
mit
|
||||||
|
<i class="i_bright">❤</i>
|
||||||
|
von
|
||||||
|
<a href="https://interaktionsweise.de">Interaktionsweise</a>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Interaktiv (interactive)</h2>
|
||||||
|
<h3>input</h3>
|
||||||
|
<div class="flex inline">
|
||||||
|
<input value="Undefiniert"/>
|
||||||
|
<input type="text" size="8" value="Text"/>
|
||||||
|
<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
|
||||||
|
<input type="button" value="Auswählen">
|
||||||
|
<input type="submit" value="Senden" disabled="disabled"/>
|
||||||
|
</div>
|
||||||
|
<h3>form</h3>
|
||||||
|
<form method="get">
|
||||||
|
<p>Show me a
|
||||||
|
<select name="F">
|
||||||
|
<option value="0">Plain list</option>
|
||||||
|
<option value="1" selected="selected">Fancy list</option>
|
||||||
|
<option value="2">Table list</option>
|
||||||
|
</select>
|
||||||
|
Sorted by
|
||||||
|
<select name="C">
|
||||||
|
<option value="N" selected="selected">Name</option>
|
||||||
|
<option value="M">Date Modified</option>
|
||||||
|
<option value="S">Size</option>
|
||||||
|
<option value="D">Description</option>
|
||||||
|
</select>
|
||||||
|
<select name="O">
|
||||||
|
<option value="A" selected="selected">Ascending</option>
|
||||||
|
<option value="D">Descending</option>
|
||||||
|
</select>
|
||||||
|
<select name="V">
|
||||||
|
<option value="0" selected="selected">in Normal order</option>
|
||||||
|
<option value="1">in Version order</option>
|
||||||
|
</select>
|
||||||
|
Matching
|
||||||
|
<input type="text" name="P" value="*"/>
|
||||||
|
<input type="submit" name="X" value="Go"/>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<h2>Gruppierung (grouping)</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.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>
|
||||||
|
<ul class="list_link">
|
||||||
|
<li>{% link hippie.placeholders.mail, '📧 name@domain.tld' %}</li>
|
||||||
|
<li>
|
||||||
|
<a href=""><img src="/art/bullet.gif" alt="">{% text hippie.placeholders.name %}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</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>
|
||||||
|
<pre class="pre_code"><code>table.table_link>thead>tr>th{&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>
|
||||||
|
<table class="table_link js_pop">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th> </th>
|
||||||
|
<th>Ab / Zy</th>
|
||||||
|
<th>Neu / Alt</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="cell_icon" rowspan="2">■</td>
|
||||||
|
<td class="cell_link">
|
||||||
|
<a href="" target="_blank">Name</a>
|
||||||
|
<a href="" target="_blank">URL</a>
|
||||||
|
</td>
|
||||||
|
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="cell_text">
|
||||||
|
<div class="shorten">Beschreibung</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="cell_icon" rowspan="2">■</td>
|
||||||
|
<td class="cell_link">
|
||||||
|
<a href="" target="_blank">Name</a>
|
||||||
|
<a href="" target="_blank">URL</a>
|
||||||
|
</td>
|
||||||
|
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="cell_text">
|
||||||
|
<div class="shorten">Beschreibung</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h2>Eingebettet</h2>
|
||||||
|
<div class="demo__flag">
|
||||||
|
{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<script src="/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||||
|
<script>
|
||||||
|
assetsLoaded = true;
|
||||||
|
logPerf('Assets loaded.', assetsLoaded);
|
||||||
|
// Page specific
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
$(document).ready(function () {
|
||||||
|
// jq-sticky-anything
|
||||||
|
$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
|
|
@ -1,317 +0,0 @@
|
||||||
---
|
|
||||||
title: Layouts
|
|
||||||
tags:
|
|
||||||
- demoIndex
|
|
||||||
---
|
|
||||||
{% set pageBase = "../" %}
|
|
||||||
{% set pageId = page.fileSlug %}
|
|
||||||
|
|
||||||
{% extends "demo/_main.njk" %}
|
|
||||||
{% import "hippie/macros/_placeholder.njk" as ph %}
|
|
||||||
|
|
||||||
{% block title %}Gestaltungen{% endblock %}
|
|
||||||
{% block head %}
|
|
||||||
{{ super() }}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block main %}
|
|
||||||
<!-- {{ page.fileSlug }}.page -->
|
|
||||||
<section class="sec_main_center">
|
|
||||||
<header class="header_txt">
|
|
||||||
<h1>Sammlung formatierter Elemente</h1>
|
|
||||||
<p>Die Elemente werden fortlaufend komplexer</p>
|
|
||||||
</header>
|
|
||||||
<article>
|
|
||||||
<h2>Bereiche (sections)</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">{{ ph.flag('img', '', '', 'Avatar', '256') }}</div>
|
|
||||||
<p>{{ ph.name() }}<br>{{ ph.address() }}</p>
|
|
||||||
<p>{{ ph.phone() }}<br>{{ ph.email('lineLink') }}</p>
|
|
||||||
</section>
|
|
||||||
<h3>nav</h3>
|
|
||||||
<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>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button_border">Stufe 1</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button_border">Stufe 2</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button_border">Stufe 3</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button_border">Stufe 4</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4</code></pre>
|
|
||||||
<nav class="nav_horizontal">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button">Abschnitt 1</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button">Abschnitt 2</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button">Abschnitt 3</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button">Abschnitt 4</a>
|
|
||||||
</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>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button">Typ 1</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button">Typ 2</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button">Typ 3</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button">Typ 4</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</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>
|
|
||||||
<header class="header_page demo__header header_fancy">
|
|
||||||
<h1>Aufmacher</h1>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
|
|
||||||
<nav class="nav_separate_right">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button">Mensch</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button">Pflanze</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<nav class="nav_right">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button">Blau</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button">Gelb</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
|
|
||||||
<div class="box_space h_basic">
|
|
||||||
<header id="js_demo_fix" class="header_page demo__header header_fix">
|
|
||||||
<nav class="nav_right">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button">Eins</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button">Zwei</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<div class="pos_abs pin_bottom width_full">
|
|
||||||
<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
|
|
||||||
<footer id="js_demo_stop" class="demo_footer">
|
|
||||||
<nav class="nav_column nav_separate">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button_text">Alpha</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button_text">Bravo</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button_text">Charlie</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button_text">Delta</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<p class="txt_center demo__credits">
|
|
||||||
<i class="i_bright">👨💻</i>
|
|
||||||
mit
|
|
||||||
<i class="i_bright">❤</i>
|
|
||||||
von
|
|
||||||
<a href="https://interaktionsweise.de">Interaktionsweise</a>
|
|
||||||
</p>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>Interaktiv (interactive)</h2>
|
|
||||||
<h3>input</h3>
|
|
||||||
<div class="flex inline">
|
|
||||||
<input value="Undefiniert"/>
|
|
||||||
<input type="text" size="8" value="Text"/>
|
|
||||||
<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
|
|
||||||
<input type="button" value="Auswählen">
|
|
||||||
<input type="submit" value="Senden" disabled="disabled"/>
|
|
||||||
</div>
|
|
||||||
<h3>form</h3>
|
|
||||||
<form method="get">
|
|
||||||
<p>Show me a
|
|
||||||
<select name="F">
|
|
||||||
<option value="0">Plain list</option>
|
|
||||||
<option value="1" selected="selected">Fancy list</option>
|
|
||||||
<option value="2">Table list</option>
|
|
||||||
</select>
|
|
||||||
Sorted by
|
|
||||||
<select name="C">
|
|
||||||
<option value="N" selected="selected">Name</option>
|
|
||||||
<option value="M">Date Modified</option>
|
|
||||||
<option value="S">Size</option>
|
|
||||||
<option value="D">Description</option>
|
|
||||||
</select>
|
|
||||||
<select name="O">
|
|
||||||
<option value="A" selected="selected">Ascending</option>
|
|
||||||
<option value="D">Descending</option>
|
|
||||||
</select>
|
|
||||||
<select name="V">
|
|
||||||
<option value="0" selected="selected">in Normal order</option>
|
|
||||||
<option value="1">in Version order</option>
|
|
||||||
</select>
|
|
||||||
Matching
|
|
||||||
<input type="text" name="P" value="*"/>
|
|
||||||
<input type="submit" name="X" value="Go"/>
|
|
||||||
</p>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<h2>Gruppierung (grouping)</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.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>
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<pre class="pre_code"><code>table.table_link>thead>tr>th{&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>
|
|
||||||
<table class="table_link js_pop">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th> </th>
|
|
||||||
<th>Ab / Zy</th>
|
|
||||||
<th>Neu / Alt</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td class="cell_icon" rowspan="2">■</td>
|
|
||||||
<td class="cell_link">
|
|
||||||
<a href="" target="_blank">Name</a>
|
|
||||||
<a href="" target="_blank">URL</a>
|
|
||||||
</td>
|
|
||||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td class="cell_text">
|
|
||||||
<div class="shorten">Beschreibung</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td class="cell_icon" rowspan="2">■</td>
|
|
||||||
<td class="cell_link">
|
|
||||||
<a href="" target="_blank">Name</a>
|
|
||||||
<a href="" target="_blank">URL</a>
|
|
||||||
</td>
|
|
||||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td class="cell_text">
|
|
||||||
<div class="shorten">Beschreibung</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<h2>Eingebettet</h2>
|
|
||||||
<div class="demo__flag">
|
|
||||||
{{ ph.flag() }}
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block script %}
|
|
||||||
{{ super() }}
|
|
||||||
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
|
||||||
{{ log.asset(true) }}
|
|
||||||
{{ log.log('Assets loaded.', assetsLoaded) }}
|
|
||||||
<script>
|
|
||||||
// Page specific
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
$(document).ready(function () {
|
|
||||||
// jq-sticky-anything
|
|
||||||
$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
{% assign height = width | divided_by: 1.6 %}
|
{% assign height = width | divided_by: 1.6 %}
|
||||||
|
|
||||||
{% if type == 'svg' or type == '' %}
|
{% if type == 'svg' or type == '' %}
|
||||||
<svg version="1.1" id="{{ id }}" 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">
|
<svg version="1.1" id="{{ id }}" 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">
|
||||||
{% comment %}<defs>
|
{% comment %}<defs>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue