style: Spaces to tabs
This commit is contained in:
parent
875041bacf
commit
8f15664d57
12 changed files with 1580 additions and 1577 deletions
|
|
@ -1,16 +1,16 @@
|
|||
let hippie = {
|
||||
brand: "|-| | |^ |^ | [- ",
|
||||
screen: {
|
||||
w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
|
||||
vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
|
||||
dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0),
|
||||
y: Math.min($(document).scrollTop(), document.documentElement.scrollTop)
|
||||
// hippie.screen.y: document.documentElement.scrollTop
|
||||
},
|
||||
body: {
|
||||
w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0),
|
||||
h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0),
|
||||
}
|
||||
brand: "|-| | |^ |^ | [- ",
|
||||
screen: {
|
||||
w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
|
||||
vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
|
||||
dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0),
|
||||
y: Math.min($(document).scrollTop(), document.documentElement.scrollTop)
|
||||
// hippie.screen.y: document.documentElement.scrollTop
|
||||
},
|
||||
body: {
|
||||
w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0),
|
||||
h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0),
|
||||
}
|
||||
};
|
||||
let viewHover = true;
|
||||
let basicEase = 600;
|
||||
|
|
@ -18,13 +18,13 @@ let basicEase = 600;
|
|||
const onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
|
||||
const onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";
|
||||
const flagColors = [
|
||||
'fad803',
|
||||
'f2af13',
|
||||
'd30a51',
|
||||
'8e1f68',
|
||||
'273f8b',
|
||||
'3c579a',
|
||||
'b7e0f0',
|
||||
'6bc7d9',
|
||||
'52bed1'
|
||||
'fad803',
|
||||
'f2af13',
|
||||
'd30a51',
|
||||
'8e1f68',
|
||||
'273f8b',
|
||||
'3c579a',
|
||||
'b7e0f0',
|
||||
'6bc7d9',
|
||||
'52bed1'
|
||||
]
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -10,185 +10,185 @@ tags:
|
|||
|
||||
{% block title %}Komponenten{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<!-- {{ page.fileSlug }}.page -->
|
||||
<div class="temp_layer">
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
|
||||
{% include "hippie/partials/_body_nav.njk" %}
|
||||
</div>
|
||||
<div id="begin" class="">
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Medienformat Abfragen</h1>
|
||||
</header>
|
||||
<article>
|
||||
<div class="demo__query_example">Umbruch bei </div>
|
||||
<div class="demo__queries">
|
||||
<p class="query_phoneUp">Telefone und größer</p>
|
||||
<p class="query_phoneOnly">Nur Telefone</p>
|
||||
<p class="query_tabletPortaitOnly">Nur Schreibtafeln hochkant</p>
|
||||
<p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
|
||||
<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
|
||||
<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
|
||||
<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
|
||||
<p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
|
||||
<p class="query_bigDesktopUp">Richtige Monitore und größer</p>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<!-- {{ page.fileSlug }}.page -->
|
||||
<div class="temp_layer">
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
|
||||
{% include "hippie/partials/_body_nav.njk" %}
|
||||
</div>
|
||||
<div id="begin" class="">
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Medienformat Abfragen</h1>
|
||||
</header>
|
||||
<article>
|
||||
<div class="demo__query_example">Umbruch bei </div>
|
||||
<div class="demo__queries">
|
||||
<p class="query_phoneUp">Telefone und größer</p>
|
||||
<p class="query_phoneOnly">Nur Telefone</p>
|
||||
<p class="query_tabletPortaitOnly">Nur Schreibtafeln hochkant</p>
|
||||
<p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
|
||||
<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
|
||||
<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
|
||||
<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
|
||||
<p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
|
||||
<p class="query_bigDesktopUp">Richtige Monitore und größer</p>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Übersicht aller Elemente</h1>
|
||||
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p>
|
||||
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
|
||||
</header>
|
||||
<pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h4{Varianten}</code></pre>
|
||||
<article>
|
||||
<h1 id="sections">Bereiche</h1>
|
||||
<p>Elemente:</p>
|
||||
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
|
||||
<h2><body></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h2><article></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h2><section></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h4>Varianten</h4>
|
||||
<pre class="pre_code"><code>section.sec_main_center</code></pre>
|
||||
<pre class="pre_code"><code>section.sec_main_status</code></pre>
|
||||
<h2><h3></h2>
|
||||
<h2><h4></h2>
|
||||
</article>
|
||||
<article>
|
||||
<h1 id="grouping">Gruppierung</h1>
|
||||
<p>Elemente:</p>
|
||||
<pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre>
|
||||
<h2><p></h2>
|
||||
<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>
|
||||
<pre class="pre_code"><code>p.column_3.column_line</code></pre>
|
||||
<h2><hr></h2>
|
||||
<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>
|
||||
<h2><blockquote></h2>
|
||||
<pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre>
|
||||
<h2><figure></h2>
|
||||
<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
|
||||
<h2><div></h2>
|
||||
<pre class="pre_code"><code>div.div_info>p</code></pre>
|
||||
<h4>Varianten</h4>
|
||||
</article>
|
||||
<article>
|
||||
<h1 id="tabularData">Tabellen</h1>
|
||||
<p>Elemente:</p>
|
||||
<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
|
||||
<h2><table></h2>
|
||||
<h4>Varianten</h4>
|
||||
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
|
||||
<table class="width_full table_fix js_pop">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="cell_pre" scope="col"></th>
|
||||
<th scope="col">Kopfzeile</th>
|
||||
<th scope="col">A</th>
|
||||
<th scope="col">B</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_pre">Vorspalte</td>
|
||||
<td>Eine</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_pre">1</td>
|
||||
<td></td>
|
||||
<td>erweiterte</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_pre">2</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Tabelle</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre>
|
||||
<table class="width_full table_stripe table_fix table_free">
|
||||
<tr>
|
||||
<td>Tabelle</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ohne</td>
|
||||
<td>Rahmen</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>jedoch</td>
|
||||
<td>mit</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Streifen</td>
|
||||
</tr>
|
||||
</table>
|
||||
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
|
||||
<table>
|
||||
<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Bezeichnung</th>
|
||||
<th scope="col">Menge</th>
|
||||
<th scope="col">Wert</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Alpha</td>
|
||||
<td>1</td>
|
||||
<td class="txt_right">8990</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bravo</td>
|
||||
<td>10</td>
|
||||
<td class="txt_right">1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charlie</td>
|
||||
<td>1</td>
|
||||
<td class="txt_right">1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="2" class="txt_right" scope="row">Summe</th>
|
||||
<td class="txt_right" title=">9000">9001</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Übersicht aller Elemente</h1>
|
||||
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p>
|
||||
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
|
||||
</header>
|
||||
<pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h4{Varianten}</code></pre>
|
||||
<article>
|
||||
<h1 id="sections">Bereiche</h1>
|
||||
<p>Elemente:</p>
|
||||
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
|
||||
<h2><body></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h2><article></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h2><section></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h4>Varianten</h4>
|
||||
<pre class="pre_code"><code>section.sec_main_center</code></pre>
|
||||
<pre class="pre_code"><code>section.sec_main_status</code></pre>
|
||||
<h2><h3></h2>
|
||||
<h2><h4></h2>
|
||||
</article>
|
||||
<article>
|
||||
<h1 id="grouping">Gruppierung</h1>
|
||||
<p>Elemente:</p>
|
||||
<pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre>
|
||||
<h2><p></h2>
|
||||
<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>
|
||||
<pre class="pre_code"><code>p.column_3.column_line</code></pre>
|
||||
<h2><hr></h2>
|
||||
<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>
|
||||
<h2><blockquote></h2>
|
||||
<pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre>
|
||||
<h2><figure></h2>
|
||||
<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
|
||||
<h2><div></h2>
|
||||
<pre class="pre_code"><code>div.div_info>p</code></pre>
|
||||
<h4>Varianten</h4>
|
||||
</article>
|
||||
<article>
|
||||
<h1 id="tabularData">Tabellen</h1>
|
||||
<p>Elemente:</p>
|
||||
<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
|
||||
<h2><table></h2>
|
||||
<h4>Varianten</h4>
|
||||
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
|
||||
<table class="width_full table_fix js_pop">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="cell_pre" scope="col"></th>
|
||||
<th scope="col">Kopfzeile</th>
|
||||
<th scope="col">A</th>
|
||||
<th scope="col">B</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_pre">Vorspalte</td>
|
||||
<td>Eine</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_pre">1</td>
|
||||
<td></td>
|
||||
<td>erweiterte</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_pre">2</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Tabelle</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre>
|
||||
<table class="width_full table_stripe table_fix table_free">
|
||||
<tr>
|
||||
<td>Tabelle</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ohne</td>
|
||||
<td>Rahmen</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>jedoch</td>
|
||||
<td>mit</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Streifen</td>
|
||||
</tr>
|
||||
</table>
|
||||
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
|
||||
<table>
|
||||
<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Bezeichnung</th>
|
||||
<th scope="col">Menge</th>
|
||||
<th scope="col">Wert</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Alpha</td>
|
||||
<td>1</td>
|
||||
<td class="txt_right">8990</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bravo</td>
|
||||
<td>10</td>
|
||||
<td class="txt_right">1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charlie</td>
|
||||
<td>1</td>
|
||||
<td class="txt_right">1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="2" class="txt_right" scope="row">Summe</th>
|
||||
<td class="txt_right" title=">9000">9001</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js"></script>
|
||||
{{ log.asset(true) }}
|
||||
{{ log.log('Assets loaded.', assetsLoaded) }}
|
||||
{{ super() }}
|
||||
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js"></script>
|
||||
{{ log.asset(true) }}
|
||||
{{ log.log('Assets loaded.', assetsLoaded) }}
|
||||
{% endblock %}
|
||||
|
|
@ -9,32 +9,33 @@ tags:
|
|||
{% extends "demo/_default.njk" %}
|
||||
{% import "hippie/macros/_gate.njk" as gate %}
|
||||
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
{% block title %}{{ title }}
|
||||
{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<!-- {{ page.fileSlug }}.page -->
|
||||
<div class="portal">
|
||||
{{ gate.list(
|
||||
'Tor mit Symbol und Liste',
|
||||
'../demo', {
|
||||
src: '/art/demo/flag_websafe_128x80.gif',
|
||||
alt: 'Flag of Interaktionsweise'
|
||||
}, [
|
||||
{
|
||||
name: '1',
|
||||
href: 'http://domain.tld',
|
||||
img: '../art/bullet.gif'
|
||||
}, {
|
||||
name: 'Zwei',
|
||||
href: 'http://domain.tld',
|
||||
img: '../art/bullet.gif'
|
||||
}
|
||||
]
|
||||
) }}
|
||||
{{ gate.simple('Tor', '../demo') }}
|
||||
</div>
|
||||
<!-- {{ page.fileSlug }}.page -->
|
||||
<div class="portal">
|
||||
{{ gate.list(
|
||||
'Tor mit Symbol und Liste',
|
||||
'../demo', {
|
||||
src: '/art/demo/flag_websafe_128x80.gif',
|
||||
alt: 'Flag of Interaktionsweise'
|
||||
}, [
|
||||
{
|
||||
name: '1',
|
||||
href: 'http://domain.tld',
|
||||
img: '../art/bullet.gif'
|
||||
}, {
|
||||
name: 'Zwei',
|
||||
href: 'http://domain.tld',
|
||||
img: '../art/bullet.gif'
|
||||
}
|
||||
]
|
||||
) }}
|
||||
{{ gate.simple('Tor', '../demo') }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -10,42 +10,43 @@ tags:
|
|||
{% import "hippie/macros/_placeholder.njk" as ph %}
|
||||
{% import "hippie/macros/_song.njk" as song %}
|
||||
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
{% block title %}{{ title }}
|
||||
{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<!-- {{ page.fileSlug }}.page -->
|
||||
<div class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Titel</h1>
|
||||
<p>Jahr</p>
|
||||
</header>
|
||||
<nav role="doc-toc">
|
||||
<h2>Inhaltsverzeichnis</h2>
|
||||
<ul>
|
||||
{%- for song in collections.song -%}
|
||||
<li>
|
||||
<a href="{{ song.page.url }}">{{ song.data.title }}</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</nav>
|
||||
<h2>Vorwort</h2>
|
||||
<p>Liederbuch für
|
||||
<em>Name</em>.</p>
|
||||
<p>Gibt es gebunden und hier
|
||||
{{ ph.link() }}.<br/>
|
||||
Bestellungen bitte an
|
||||
{{ ph.name() }}
|
||||
richten.</p>
|
||||
<hr class="hr_double hr_dotted">
|
||||
{%- for piece in collections.song -%}
|
||||
{{ song.simple(loop.index0, piece.data, piece.content) }}
|
||||
{%- endfor -%}
|
||||
<hr/>
|
||||
<address>{{ ph.name() }}</address>
|
||||
</div>
|
||||
<!-- {{ page.fileSlug }}.page -->
|
||||
<div class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Titel</h1>
|
||||
<p>Jahr</p>
|
||||
</header>
|
||||
<nav role="doc-toc">
|
||||
<h2>Inhaltsverzeichnis</h2>
|
||||
<ul>
|
||||
{%- for song in collections.song -%}
|
||||
<li>
|
||||
<a href="{{ song.page.url }}">{{ song.data.title }}</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</nav>
|
||||
<h2>Vorwort</h2>
|
||||
<p>Liederbuch für
|
||||
<em>Name</em>.</p>
|
||||
<p>Gibt es gebunden und hier
|
||||
{{ ph.link() }}.<br/>
|
||||
Bestellungen bitte an
|
||||
{{ ph.name() }}
|
||||
richten.</p>
|
||||
<hr class="hr_double hr_dotted">
|
||||
{%- for piece in collections.song -%}
|
||||
{{ song.simple(loop.index0, piece.data, piece.content) }}
|
||||
{%- endfor -%}
|
||||
<hr/>
|
||||
<address>{{ ph.name() }}</address>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -12,74 +12,74 @@ tags:
|
|||
|
||||
{% block title %}Index{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<!-- {{ page.fileSlug }}.page -->
|
||||
<div class="wrap">
|
||||
<div class="hello">
|
||||
<h2>This is
|
||||
{{ hippie.brand | upper }}</h2>
|
||||
<p>You can start using it by replacing this file with your own index page.</p>
|
||||
<p>To do this you need to create a file
|
||||
<code>/index.njk</code>
|
||||
inside the
|
||||
<i>source/screens</i>
|
||||
folder. You can also create a
|
||||
<code>data.json</code>
|
||||
file inside the
|
||||
<i>source/templates</i>
|
||||
folder as a data source for your nunjucks files.</p>
|
||||
<p>For a very basic start you can make a copy of the demo page
|
||||
<code>blank.njk</code>. You can find it at
|
||||
<i>/source/screens/demo</i>.</p>
|
||||
<p>The
|
||||
<i>source/demo</i>
|
||||
folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
|
||||
<div class="pos_rel">
|
||||
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>c(")(")</pre>
|
||||
<h3>Overview</h3>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="list_link">
|
||||
{% for link in collections.demoIndex %}
|
||||
<li>
|
||||
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
<h3>Page</h3>
|
||||
<ul class="list_link">
|
||||
{% for link in collections.demoPage | sort(false, false, 'data.title') %}
|
||||
<li>
|
||||
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<h3>Example</h3>
|
||||
<ul class="list_link">
|
||||
{% for link in collections.demoExample %}
|
||||
<li>
|
||||
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- {{ page.fileSlug }}.page -->
|
||||
<div class="wrap">
|
||||
<div class="hello">
|
||||
<h2>This is
|
||||
{{ hippie.brand | upper }}</h2>
|
||||
<p>You can start using it by replacing this file with your own index page.</p>
|
||||
<p>To do this you need to create a file
|
||||
<code>/index.njk</code>
|
||||
inside the
|
||||
<i>source/screens</i>
|
||||
folder. You can also create a
|
||||
<code>data.json</code>
|
||||
file inside the
|
||||
<i>source/templates</i>
|
||||
folder as a data source for your nunjucks files.</p>
|
||||
<p>For a very basic start you can make a copy of the demo page
|
||||
<code>blank.njk</code>. You can find it at
|
||||
<i>/source/screens/demo</i>.</p>
|
||||
<p>The
|
||||
<i>source/demo</i>
|
||||
folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
|
||||
<div class="pos_rel">
|
||||
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>c(")(")</pre>
|
||||
<h3>Overview</h3>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="list_link">
|
||||
{% for link in collections.demoIndex %}
|
||||
<li>
|
||||
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
<h3>Page</h3>
|
||||
<ul class="list_link">
|
||||
{% for link in collections.demoPage | sort(false, false, 'data.title') %}
|
||||
<li>
|
||||
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<h3>Example</h3>
|
||||
<ul class="list_link">
|
||||
{% for link in collections.demoExample %}
|
||||
<li>
|
||||
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script>
|
||||
assetsLoaded = true;
|
||||
logPerf('BODY :: Assets loaded, running page specific script...');
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$(document).ready(function () {
|
||||
logPerf('EVENT :: jQuery \'ready\' event fired.');
|
||||
});
|
||||
logPerf('Application ready... not.');
|
||||
</script>
|
||||
{{ super() }}
|
||||
<script>
|
||||
assetsLoaded = true;
|
||||
logPerf('BODY :: Assets loaded, running page specific script...');
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$(document).ready(function () {
|
||||
logPerf('EVENT :: jQuery \'ready\' event fired.');
|
||||
});
|
||||
logPerf('Application ready... not.');
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -10,48 +10,50 @@ tags:
|
|||
|
||||
{% block title %}Einführung{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<!-- {{ page.fileSlug }}.page -->
|
||||
{% include "hippie/partials/_body_nav.njk" %}
|
||||
<!-- {{ page.fileSlug }}.page -->
|
||||
{% include "hippie/partials/_body_nav.njk" %}
|
||||
|
||||
<section class="sec_main_center">
|
||||
<header>
|
||||
<hgroup>
|
||||
<h1>Introduction to HIPPIE</h1>
|
||||
<p>Hippie interweaves preeminent personal interface elements.</p>
|
||||
</hgroup>
|
||||
</header>
|
||||
<article>
|
||||
<p>…</p>
|
||||
<p>Contact: <a id="special" href=""></a></p>
|
||||
<p>More: <a class="general" href=""></a>, <a class="general" href=""></a></p>
|
||||
</article>
|
||||
</section>
|
||||
<section class="sec_main_center">
|
||||
<header>
|
||||
<hgroup>
|
||||
<h1>Introduction to HIPPIE</h1>
|
||||
<p>Hippie interweaves preeminent personal interface elements.</p>
|
||||
</hgroup>
|
||||
</header>
|
||||
<article>
|
||||
<p>…</p>
|
||||
<p>Contact: <a id="special" href=""></a>
|
||||
</p>
|
||||
<p>More: <a class="general" href=""></a>, <a class="general" href=""></a>
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script>
|
||||
assetsLoaded = true;
|
||||
logPerf('Assets loaded.', assetsLoaded);
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
// Create instance of object made by contructor function
|
||||
var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
|
||||
var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
|
||||
{{ super() }}
|
||||
<script>
|
||||
assetsLoaded = true;
|
||||
logPerf('Assets loaded.', assetsLoaded);
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
// Create instance of object made by contructor function
|
||||
var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
|
||||
var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
|
||||
|
||||
$(document).ready(function () {
|
||||
logPerf('JQ document ready event fired.');
|
||||
composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
|
||||
composeMail('.general', 'name', 'domain', 'tld', '', '')
|
||||
});
|
||||
$(document).ready(function () {
|
||||
logPerf('JQ document ready event fired.');
|
||||
composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
|
||||
composeMail('.general', 'name', 'domain', 'tld', '', '')
|
||||
});
|
||||
|
||||
$(document).scroll(function () {
|
||||
scrollUi.check();
|
||||
});
|
||||
logPerf('Application ready... not.');
|
||||
</script>
|
||||
$(document).scroll(function () {
|
||||
scrollUi.check();
|
||||
});
|
||||
logPerf('Application ready... not.');
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -10,326 +10,326 @@ tags:
|
|||
|
||||
{% block title %}Gestaltungen{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<!-- {{ page.fileSlug }}.page -->
|
||||
<div class="temp_layer">
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
|
||||
{% include "hippie/partials/_body_nav.njk" %}
|
||||
</div>
|
||||
<div id="begin" class="">
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Sammlung formatierter Elemente</h1>
|
||||
<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>
|
||||
<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>
|
||||
</section>
|
||||
<pre class="pre_code"><code>div.space_left_fourth</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>
|
||||
<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 $})*4nav.nav_center_old>ul>(li>a.a_button{typ $})*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>
|
||||
<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>
|
||||
<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>
|
||||
<div class="flex">
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
</div>
|
||||
<div class="flex_column_wrap">
|
||||
<div class="flex_column"><input value="Undefiniert"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
|
||||
<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
|
||||
<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>
|
||||
<!-- {{ page.fileSlug }}.page -->
|
||||
<div class="temp_layer">
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
|
||||
{% include "hippie/partials/_body_nav.njk" %}
|
||||
</div>
|
||||
<div id="begin" class="">
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Sammlung formatierter Elemente</h1>
|
||||
<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>
|
||||
<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>
|
||||
</section>
|
||||
<pre class="pre_code"><code>div.space_left_fourth</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>
|
||||
<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 $})*4nav.nav_center_old>ul>(li>a.a_button{typ $})*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>
|
||||
<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>
|
||||
<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>
|
||||
<div class="flex">
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
</div>
|
||||
<div class="flex_column_wrap">
|
||||
<div class="flex_column"><input value="Undefiniert"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
|
||||
<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
|
||||
<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</h2>
|
||||
<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>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Work</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Projects</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Gruppierung</h2>
|
||||
<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>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Work</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Projects</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<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"><img src="/art/bullet.gif" alt="" width="16" height="16"></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"><img src="/art/bullet.gif" alt="" width="16" height="16"></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">
|
||||
<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>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</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"><img src="/art/bullet.gif" alt="" width="16" height="16"></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"><img src="/art/bullet.gif" alt="" width="16" height="16"></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">
|
||||
<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>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
{% 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>
|
||||
{{ 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,31 +1,30 @@
|
|||
<!-- demo.app.template -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
{% block head %}
|
||||
<title>{{ hippie.titlePrefix }}
|
||||
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
|
||||
{% block head %}
|
||||
<title>{{ hippie.titlePrefix }}
|
||||
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
|
||||
|
||||
{% block meta %}
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
<base href="/">
|
||||
{% endblock %}
|
||||
{% block meta %}
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
<base href="/">
|
||||
{% endblock %}
|
||||
|
||||
{% block links %}
|
||||
{% endblock %}
|
||||
{% block links %}{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
</head>
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
<body class="{{ bodyClass }}">
|
||||
{% block body %}{% endblock %}
|
||||
<body class="{{ bodyClass }}">
|
||||
{% block body %}{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||
<script src="{{ pageBase }}js/variables.js"></script>
|
||||
{% endblock %}
|
||||
{% block script %}
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||
<script src="{{ pageBase }}js/variables.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,18 +2,18 @@
|
|||
{% extends "hippie/_default.njk" %}
|
||||
|
||||
{% block meta %}
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
<base href="/">
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
<base href="/">
|
||||
{% endblock %}
|
||||
|
||||
{% block links %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
|
||||
{# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
|
||||
{# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/> #}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
|
||||
{# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
|
||||
{# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/> #}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||
{{ super() }}
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||
{% endblock %}
|
||||
|
|
@ -2,20 +2,20 @@
|
|||
{% extends "hippie/_main.njk" %}
|
||||
|
||||
{% block meta %}
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
<base href="/">
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
<base href="/">
|
||||
{% endblock %}
|
||||
|
||||
{% block links %}
|
||||
{{ super() }}
|
||||
{% if hippie.legacyMode %}
|
||||
<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
|
||||
<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]-->
|
||||
<!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
|
||||
<!--Only use one of the above!-->
|
||||
{% endif %}
|
||||
{{ super() }}
|
||||
{% if hippie.legacyMode %}
|
||||
<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
|
||||
<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]-->
|
||||
<!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
|
||||
<!--Only use one of the above!-->
|
||||
{% endif %}
|
||||
|
||||
<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
|
||||
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
|
||||
<!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
|
||||
{% endblock %}
|
||||
<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
|
||||
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
|
||||
<!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
|
||||
{% endblock %}
|
||||
|
|
@ -2,11 +2,11 @@
|
|||
{% extends "hippie/_maintenance.njk" %}
|
||||
|
||||
{% block meta %}
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
<base href="/">
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
<base href="/">
|
||||
{% endblock %}
|
||||
|
||||
{% block links %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue