Compare commits
2 commits
78a761f9cf
...
63c899b789
| Author | SHA1 | Date | |
|---|---|---|---|
| 63c899b789 | |||
| 0daf19bd87 |
13 changed files with 417 additions and 427 deletions
|
|
@ -9,7 +9,6 @@ tags:
|
|||
{% block title %}Grundlagen{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<!-- {{ page.fileSlug }}.page -->
|
||||
<div class="demo__intro">
|
||||
Dies ist einfach nur Text.<br>Weniger wäre nichts, denn dieser Text ist nicht durch ein spezifisches Element
|
||||
umschlossen.<br>Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung
|
||||
|
|
|
|||
399
source/screens/demo/components.liquid
Normal file
399
source/screens/demo/components.liquid
Normal file
|
|
@ -0,0 +1,399 @@
|
|||
---
|
||||
title: Components
|
||||
tags:
|
||||
- demoIndex
|
||||
---
|
||||
{% layout "hippie/page.liquid" %}
|
||||
|
||||
{% block title %}Komponenten{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<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_tabletPortraitOnly">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://html.spec.whatwg.org/multipage/#toc-semantics">html.spec.whatwg.org/multipage/#toc-semantics</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+h2{<tag>}+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>
|
||||
<article>Ein Artikel.</article>
|
||||
<h2><section></h2>
|
||||
<section>Ein Bereich.</section>
|
||||
<h4>Varianten</h4>
|
||||
<pre class="pre_code"><code>section.sec_main_center</code></pre>
|
||||
<section class="sec_main_center">
|
||||
<p class="float_right">Ende.</p>
|
||||
<p>Zentrierter Bereich.</p>
|
||||
</section>
|
||||
<pre class="pre_code"><code>section.sec_main_status</code></pre>
|
||||
<section class="sec_main_status">Status-Bereich</section>
|
||||
<h2><nav></h2>
|
||||
<nav>Navigation</nav>
|
||||
<h2><aside></h2>
|
||||
<p>Fließt um andere Inhalte. Klassen zur Positionierung und Kombination mit <code>.bside</code>.</p>
|
||||
<pre class="pre_code"><code>aside.right+div.bside</code></pre>
|
||||
<section>
|
||||
<aside class="right">Seitenbereich, recht ausgerichtet.</aside>
|
||||
<div class="bside">Hauptbereich</div>
|
||||
</section>
|
||||
<h2><h*></h2>
|
||||
<h1>Überschrift 1</h1>
|
||||
<h2>Überschrift 2</h2>
|
||||
<h3>Überschrift 3</h3>
|
||||
<h4>Überschrift 4</h4>
|
||||
<h5>Überschrift 5</h5>
|
||||
<hgroup>
|
||||
<h6>Überschrift 6</h6>
|
||||
<p>Mit Absatz innerhalb von <code><hgroup></code>.</p>
|
||||
</hgroup>
|
||||
<hgroup>
|
||||
<h2>Überschrift 1 oder 2</h2>
|
||||
<p>Mit Absatz innerhalb von <code><hgroup></code>.</p>
|
||||
</hgroup>
|
||||
<h2><header></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><header></code>.</p>
|
||||
</header>
|
||||
<h2><footer></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;">
|
||||
{% render "hippie/partials/footer-pinned.liquid" %}
|
||||
</div>
|
||||
</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>
|
||||
<p>Ein Absatz. Ein <code>code</code> Element innerhalb wird besonders behandelt.</p>
|
||||
<h4>Varianten</h4>
|
||||
<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><address></h2>
|
||||
<address>Anschrift, mit bestimmtem, ##### Format.</address>
|
||||
<h2><hr></h2>
|
||||
<hr>
|
||||
<h4>Varianten</h4>
|
||||
<pre class="pre_code"><code>hr.hidden+hr.dotted+hr.double</code></pre>
|
||||
<hr class="hidden">
|
||||
<hr class="dotted">
|
||||
<hr class="double">
|
||||
<pre class="pre_code"><code>hr.vertical</code></pre>
|
||||
<hr class="vertical">
|
||||
<h2><pre></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><blockquote></h2>
|
||||
<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><dl>, <ol>, <ul></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><figure></h2>
|
||||
<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
|
||||
<figure>
|
||||
<figcaption>Bezeichnung</figcaption>
|
||||
Grafisches Element.
|
||||
</figure>
|
||||
<h2><main></h2>
|
||||
<main>Hauptbereich</main>
|
||||
<h2><div></h2>
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
<article>
|
||||
<h1 id="forms">Formulare</h1>
|
||||
<p>Elemente:</p>
|
||||
<pre>// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend</pre>
|
||||
<h2><input></h2>
|
||||
<div class="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>
|
||||
<h4>Varianten</h4>
|
||||
<pre class="pre_code"><code>input.button_io+button.button_io</code></pre>
|
||||
<div class="inline">
|
||||
<input class="button_io" type="button" value="Input type button">
|
||||
<button class="button_io">Button</button>
|
||||
</div>
|
||||
<div class="inline">
|
||||
<input class="input_io" type="text" value="Nur lesbare Eingabe" readonly="readonly">
|
||||
<input class="input_io" type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
|
||||
<button class="button_io" disabled="disabled">Deaktivierte Schaltfläche</button>
|
||||
</div>
|
||||
<div id="capsCheck">
|
||||
<form action="">
|
||||
<input type="password" onkeypress="capLock(event)"/>
|
||||
<div id="hint" style="visibility:hidden">Caps Lock is on.</div>
|
||||
<input type="text"/>
|
||||
<span id="error">Caps Lock is ON.</span>
|
||||
</form>
|
||||
</div>
|
||||
<h2><select></h2>
|
||||
<select name="F">
|
||||
<option value="0">
|
||||
Plain list</option>
|
||||
<option value="1" selected="selected">
|
||||
Fancy list</option>
|
||||
<option value="2">
|
||||
Table list</option>
|
||||
</select>
|
||||
</article>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ block.super -}}
|
||||
<script>
|
||||
function capLock(e) {
|
||||
console.log('capLock');
|
||||
kc = e.keyCode
|
||||
? e.keyCode
|
||||
: e.which;
|
||||
sk = e.shiftKey
|
||||
? e.shiftKey
|
||||
: (
|
||||
(kc == 16)
|
||||
? true
|
||||
: false);
|
||||
|
||||
if (((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk)) {
|
||||
document
|
||||
.getElementById('hint')
|
||||
.style
|
||||
.visibility = 'visible';
|
||||
} else {
|
||||
document
|
||||
.getElementById('hint')
|
||||
.style
|
||||
.visibility = 'hidden';
|
||||
}
|
||||
}
|
||||
|
||||
function capsDetect() {
|
||||
const body = document.getElementsByTagName('body')[0];
|
||||
const capsWarning = document.getElementById('error');
|
||||
let isShiftPressed = false;
|
||||
let isCapsOn = false;
|
||||
|
||||
console.log(body);
|
||||
body.addEventListener('keydown', function (e) {
|
||||
var keyCode = e.keyCode
|
||||
? e.keyCode
|
||||
: e.which;
|
||||
if (keyCode === 16) {
|
||||
isShiftPressed = true;
|
||||
}
|
||||
});
|
||||
body.addEventListener('keyup', function (e) {
|
||||
var keyCode = e.keyCode
|
||||
? e.keyCode
|
||||
: e.which;
|
||||
if (keyCode === 16) {
|
||||
isShiftPressed = false;
|
||||
}
|
||||
if (keyCode === 20) {
|
||||
if (isCapsOn) {
|
||||
isCapsOn = false;
|
||||
capsWarning.style.display = 'none';
|
||||
} else {
|
||||
isCapsOn = true;
|
||||
capsWarning.style.display = 'inline-block';
|
||||
}
|
||||
}
|
||||
});
|
||||
body.addEventListener('keypress', function (e) {
|
||||
var keyCode = e.keyCode
|
||||
? e.keyCode
|
||||
: e.which;
|
||||
if (keyCode <= 40)
|
||||
return;
|
||||
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
|
||||
isCapsOn = true;
|
||||
capsWarning.style.display = 'inline-block';
|
||||
} else {
|
||||
capsWarning.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// TODO: Beide Varianten lauffähig machen
|
||||
// capsDetect();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -1,407 +0,0 @@
|
|||
---
|
||||
title: Components
|
||||
tags:
|
||||
- demoIndex
|
||||
---
|
||||
{% set pageBase = "../" %}
|
||||
{% set pageId = page.fileSlug %}
|
||||
|
||||
{% extends "demo/_main.njk" %}
|
||||
{% import "hippie/macros/_footer.njk" as footer %}
|
||||
|
||||
{% block title %}Komponenten{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<!-- {{ page.fileSlug }}.page -->
|
||||
<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_tabletPortraitOnly">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://html.spec.whatwg.org/multipage/#toc-semantics">html.spec.whatwg.org/multipage/#toc-semantics</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+h2{<tag>}+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>
|
||||
<article>Ein Artikel.</article>
|
||||
<h2><section></h2>
|
||||
<section>Ein Bereich.</section>
|
||||
<h4>Varianten</h4>
|
||||
<pre class="pre_code"><code>section.sec_main_center</code></pre>
|
||||
<section class="sec_main_center">
|
||||
<p class="float_right">Ende.</p>
|
||||
<p>Zentrierter Bereich.</p>
|
||||
</section>
|
||||
<pre class="pre_code"><code>section.sec_main_status</code></pre>
|
||||
<section class="sec_main_status">Status-Bereich</section>
|
||||
<h2><nav></h2>
|
||||
<nav>Navigation</nav>
|
||||
<h2><aside></h2>
|
||||
<p>Fließt um andere Inhalte. Klassen zur Positionierung und Kombination mit <code>.bside</code>.</p>
|
||||
<pre class="pre_code"><code>aside.right+div.bside</code></pre>
|
||||
<section>
|
||||
<aside class="right">Seitenbereich, recht ausgerichtet.</aside>
|
||||
<div class="bside">Hauptbereich</div>
|
||||
</section>
|
||||
<h2><h*></h2>
|
||||
<h1>Überschrift 1</h1>
|
||||
<h2>Überschrift 2</h2>
|
||||
<h3>Überschrift 3</h3>
|
||||
<h4>Überschrift 4</h4>
|
||||
<h5>Überschrift 5</h5>
|
||||
<hgroup>
|
||||
<h6>Überschrift 6</h6>
|
||||
<p>Mit Absatz innerhalb von <code><hgroup></code>.</p>
|
||||
</hgroup>
|
||||
<hgroup>
|
||||
<h2>Überschrift 1 oder 2</h2>
|
||||
<p>Mit Absatz innerhalb von <code><hgroup></code>.</p>
|
||||
</hgroup>
|
||||
<h2><header></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><header></code>.</p>
|
||||
</header>
|
||||
<h2><footer></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>
|
||||
</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>
|
||||
<p>Ein Absatz. Ein <code>code</code> Element innerhalb wird besonders behandelt.</p>
|
||||
<h4>Varianten</h4>
|
||||
<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><address></h2>
|
||||
<address>Anschrift, mit bestimmtem, ##### Format.</address>
|
||||
<h2><hr></h2>
|
||||
<hr>
|
||||
<h4>Varianten</h4>
|
||||
<pre class="pre_code"><code>hr.hidden+hr.dotted+hr.double</code></pre>
|
||||
<hr class="hidden">
|
||||
<hr class="dotted">
|
||||
<hr class="double">
|
||||
<pre class="pre_code"><code>hr.vertical</code></pre>
|
||||
<hr class="vertical">
|
||||
<h2><pre></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><blockquote></h2>
|
||||
<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><dl>, <ol>, <ul></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><figure></h2>
|
||||
<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
|
||||
<figure>
|
||||
<figcaption>Bezeichnung</figcaption>
|
||||
Grafisches Element.
|
||||
</figure>
|
||||
<h2><main></h2>
|
||||
<main>Hauptbereich</main>
|
||||
<h2><div></h2>
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
<article>
|
||||
<h1 id="forms">Formulare</h1>
|
||||
<p>Elemente:</p>
|
||||
<pre>// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend</pre>
|
||||
<h2><input></h2>
|
||||
<div class="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>
|
||||
<h4>Varianten</h4>
|
||||
<pre class="pre_code"><code>input.button_io+button.button_io</code></pre>
|
||||
<div class="inline">
|
||||
<input class="button_io" type="button" value="Input type button">
|
||||
<button class="button_io">Button</button>
|
||||
</div>
|
||||
<div class="inline">
|
||||
<input class="input_io" type="text" value="Nur lesbare Eingabe" readonly="readonly">
|
||||
<input class="input_io" type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
|
||||
<button class="button_io" disabled="disabled">Deaktivierte Schaltfläche</button>
|
||||
</div>
|
||||
<div id="capsCheck">
|
||||
<form action="">
|
||||
<input type="password" onkeypress="capLock(event)"/>
|
||||
<div id="hint" style="visibility:hidden">Caps Lock is on.</div>
|
||||
<input type="text"/>
|
||||
<span id="error">Caps Lock is ON.</span>
|
||||
</form>
|
||||
</div>
|
||||
<h2><select></h2>
|
||||
<select name="F">
|
||||
<option value="0">
|
||||
Plain list</option>
|
||||
<option value="1" selected="selected">
|
||||
Fancy list</option>
|
||||
<option value="2">
|
||||
Table list</option>
|
||||
</select>
|
||||
</article>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script>
|
||||
function capLock(e) {
|
||||
console.log('capLock');
|
||||
kc = e.keyCode
|
||||
? e.keyCode
|
||||
: e.which;
|
||||
sk = e.shiftKey
|
||||
? e.shiftKey
|
||||
: (
|
||||
(kc == 16)
|
||||
? true
|
||||
: false);
|
||||
|
||||
if (((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk)) {
|
||||
document
|
||||
.getElementById('hint')
|
||||
.style
|
||||
.visibility = 'visible';
|
||||
} else {
|
||||
document
|
||||
.getElementById('hint')
|
||||
.style
|
||||
.visibility = 'hidden';
|
||||
}
|
||||
}
|
||||
|
||||
function capsDetect() {
|
||||
const body = document.getElementsByTagName('body')[0];
|
||||
const capsWarning = document.getElementById('error');
|
||||
let isShiftPressed = false;
|
||||
let isCapsOn = false;
|
||||
|
||||
console.log(body);
|
||||
body.addEventListener('keydown', function (e) {
|
||||
var keyCode = e.keyCode
|
||||
? e.keyCode
|
||||
: e.which;
|
||||
if (keyCode === 16) {
|
||||
isShiftPressed = true;
|
||||
}
|
||||
});
|
||||
body.addEventListener('keyup', function (e) {
|
||||
var keyCode = e.keyCode
|
||||
? e.keyCode
|
||||
: e.which;
|
||||
if (keyCode === 16) {
|
||||
isShiftPressed = false;
|
||||
}
|
||||
if (keyCode === 20) {
|
||||
if (isCapsOn) {
|
||||
isCapsOn = false;
|
||||
capsWarning.style.display = 'none';
|
||||
} else {
|
||||
isCapsOn = true;
|
||||
capsWarning.style.display = 'inline-block';
|
||||
}
|
||||
}
|
||||
});
|
||||
body.addEventListener('keypress', function (e) {
|
||||
var keyCode = e.keyCode
|
||||
? e.keyCode
|
||||
: e.which;
|
||||
if (keyCode <= 40)
|
||||
return;
|
||||
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
|
||||
isCapsOn = true;
|
||||
capsWarning.style.display = 'inline-block';
|
||||
} else {
|
||||
capsWarning.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// TODO: Beide Varianten lauffähig machen
|
||||
// capsDetect();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -3,13 +3,12 @@ title: Clock
|
|||
tags:
|
||||
- demoExample
|
||||
---
|
||||
{% assign pageBase = "../../" -%}
|
||||
{% assign bodyClass = "body_clock" -%}
|
||||
{% layout "hippie/full.liquid" %}
|
||||
{% layout "hippie/simple.liquid" %}
|
||||
|
||||
{% block body %}
|
||||
<main>
|
||||
<canvas id="clock" width="512" height="512"></canvas>
|
||||
<canvas id="rings" width="512" height="512"></canvas>
|
||||
<p>
|
||||
<button id="tglFormat">12-Stunden-Format</button>
|
||||
</p>
|
||||
|
|
@ -17,10 +16,9 @@ tags:
|
|||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ block.super -}}
|
||||
<script>
|
||||
// Page script
|
||||
const canvas = document.getElementById('clock');
|
||||
const canvas = document.getElementById('rings');
|
||||
const ctx = canvas.getContext('2d');
|
||||
let is24HourFormat = true;
|
||||
const colorDayOfWeek = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim();
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ tags:
|
|||
{% assign pageBase = "../../" -%}
|
||||
{% assign pageId = page.fileSlug -%}
|
||||
{% assign bodyClass = "body_start" -%}
|
||||
{% layout "hippie/full.liquid" %}
|
||||
{% layout "hippie/simple.liquid" %}
|
||||
|
||||
{% block body %}
|
||||
<main>
|
||||
|
|
@ -35,7 +35,6 @@ tags:
|
|||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ block.super -}}
|
||||
<script>
|
||||
// Page script
|
||||
// NOTE: https://duckduckgo.com/duckduckgo-help-pages/settings/params
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: Blank
|
|||
---
|
||||
{% assign pageBase = "../../" -%}
|
||||
{% assign pageId = page.fileSlug -%}
|
||||
{% layout "hippie/full.liquid" %}
|
||||
{% layout "hippie/simple.liquid" %}
|
||||
|
||||
{% block body %}
|
||||
<!-- {{ title }} -->
|
||||
|
|
|
|||
|
|
@ -8,14 +8,14 @@
|
|||
{% block links %}
|
||||
{{ block.super -}}
|
||||
<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
||||
<link href="/css/ui.css" media="all" rel="stylesheet"/>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script src="/vendor/jquery.min.js"></script>
|
||||
<script src="/vendor/hippie-script.js"></script>
|
||||
<script src="{{ pageBase }}js/globals.js"></script>
|
||||
<script src="{{ pageBase }}js/app.js"></script>
|
||||
<script src="/js/globals.js"></script>
|
||||
<script src="/js/app.js"></script>
|
||||
|
||||
<script>
|
||||
const frameHeader = document.querySelector('body > header.io');
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
{% render "hippie/partials/links.liquid" %}
|
||||
{% comment %}<link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/>{% endcomment %}
|
||||
{% comment %}<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/>{% endcomment %}
|
||||
<link rel="stylesheet" media="all" href="{{ pageBase }}css/demo.css" type="text/css"/>
|
||||
<link rel="stylesheet" media="all" href="/css/demo.css" type="text/css"/>
|
||||
{% endblock -%}
|
||||
{% render "hippie/partials/log-log" with "HEAD end :: Links parsed, starting to load." as msg -%}
|
||||
{% endblock -%}
|
||||
|
|
|
|||
|
|
@ -17,29 +17,28 @@
|
|||
{% endif %}
|
||||
|
||||
{% comment %}<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'>{% endcomment %}
|
||||
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
|
||||
{% comment %}<link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/>{% endcomment %}
|
||||
{% comment %}<link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/>{% endcomment %}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
{{ block.super -}}
|
||||
{% render "hippie/partials/page-nav.liquid" %}
|
||||
{% render "hippie/partials/nav-page.liquid" %}
|
||||
<div id="root">
|
||||
{% render "hippie/partials/page-header.liquid" %}
|
||||
{% render "hippie/partials/header-page.liquid" %}
|
||||
|
||||
<main class="main_site">
|
||||
{% block main %}{% endblock %}
|
||||
</main>
|
||||
|
||||
{% render "hippie/partials/page-footer.liquid" %}
|
||||
{% render "hippie/partials/footer-page.liquid" %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script src="/vendor/jquery.min.js"></script>
|
||||
<script src="/vendor/hippie-script.js"></script>
|
||||
<script src="{{ pageBase }}js/globals.js"></script>
|
||||
<script src="{{ pageBase }}js/app.js"></script>
|
||||
<script src="/js/globals.js"></script>
|
||||
<script src="/js/app.js"></script>
|
||||
<script>
|
||||
// Setup global things for all screens
|
||||
setup();
|
||||
|
|
|
|||
3
source/templates/hippie/partials/footer-pinned.liquid
Normal file
3
source/templates/hippie/partials/footer-pinned.liquid
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<footer class="pos_abs pin_{{ pos | default: 'bottom' }} pin_right pin_left">
|
||||
<p class="txt_center">Unten fixiert</p>
|
||||
</footer>
|
||||
Loading…
Add table
Add a link
Reference in a new issue