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

10 years later #1

Merged
sthag merged 374 commits from development into main 2026-03-07 00:18:59 +01:00
Conversation 0 Commits 374 Files changed 135 +1288 -1262
30 changed files with 1288 additions and 1262 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 8b81ed92e1 - Show all commits

9
gulpfile.js
View file

@ -114,13 +114,16 @@ gulp.task('nunjucks', function() {
// automagically reload browsers
gulp.task('syncreload', function() {
browsersync.init({
// ------------------------------------------------------------------------------
// comment out the line below to get rid of the demo index page.
// ------------------------------------------------------------------------------
index: "demo.html",
open: false,
server: 'build'
// online: false,
// logLevel: "info",
// proxy: "http://verser.vrt/virtual/",
// watch: true,
index: "demo.html",
open: false,
server: 'build'
});
});

6
source/pages/demo.njk
View file

@ -16,9 +16,11 @@
<div class="hello">
<h2>This is HIPPIE</h2>
<p>You can start using it by replacing this file with your own index page.</p>
<p>To do this you need to open the file <code>/gulpfile.js</code> and comment out the line <code>index: "demo.html",</code>. Then you need to place your index file (<code>index.njk</code>) into the folder <code>/source/pages</code>.</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 <code>/source/pages/demo</code>.</p>
<p>The folder <i>demo</i> contains examples and also an overview of definitions made.<br/>Follow the white rabbit.</p>
<h3>Overview about all the styles</h3>
<ul class="list__link">
<ul class="list_link">
<!-- Loops through "demoadditionallinks" array -->
{% for link in demoadditionallinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li>
@ -31,7 +33,7 @@
C(")(")</pre>
<h3>Demo Pages</h3>
</div>
<ul class="list__link">
<ul class="list_link">
<!-- Loops through "demo-links" array -->
{% for link in demolinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li>

348
source/pages/demo/elements.njk
View file

@ -1,69 +1,279 @@
<!-- page-elements.njk -->
{% set pageId = "elements" %}
{% set pageClass = "" %}
{% extends "hippie/demo-extended.njk" %}
{% block title %}Elements{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body_content %}
<div class="temp__layer">
<!-- <div class="exp_overlay_btn exp_help_btn">
<span class="span__solo">?</span>
</div> -->
{% include "hippie/partials/nav-page-meta.njk" %}
</div>
<div id="begin" class="">
<article>
<header>
<h1>Bereiche</h1>
<p>Um einleitenden Inhalt festzuhalten, wird das <code>&lt;header&gt;</code> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p>
<nav>
<p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
</nav>
</header>
<section>
<p>Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <code>&lt;article&gt;</code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.</p>
<p>Noch allgemeiner ist das <code>&lt;section&gt;</code> Element. Es schafft Bereiche um Inhalte zu strukturieren.</p>
<p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br>Folgende Bereiche sind vorgegeben:</p>
</section>
<div class="overflow">
<aside class="left">
<p>Ein Bereich, der seitlich zum hauptsächlichen Inhalt verläuft, wird mit <code>&lt;aside&gt;</code> markiert.</p>
</aside>
<section class="bside">
<header>
<p>Um einleitenden Inhalt festzuhalten, wird das <code>&lt;header&gt;</code> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p>
<nav>
<p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
</nav>
</header>
<footer>
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p>
</footer>
</section>
</div>
<footer>
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p>
</footer>
</article>
</div>
{% include "hippie/partials/footer.njk" %}
{% endblock %}
{% block script %}
{{ super() }}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/all.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
console.log('HIPPIE');
});
</script>
{% endblock %}
<!-- page-elements.njk -->
{% set pageId = "elements" %}
{% set pageClass = "" %}
{% extends "hippie/demo-extended.njk" %}
{% block title %}Elements{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body_content %}
<div class="temp_layer">
<!-- <div class="exp_overlay_btn exp_help_btn">
<span class="span_solo">?</span>
</div> -->
{% include "hippie/partials/nav-page-meta.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&nbsp;</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>Sammlung formatierter Elemente</h1>
<p>Die Elemente werden fortlaufend komplexer</p>
</header>
<article>
<pre class="pre_code"><code>h3.txt_light_color+p</code></pre>
<h3 class="txt_light_color">Helle Überschrift</h3>
<p>Mit normalem Textabsatz</p>
<pre class="pre_code"><code>a>h4</code></pre>
<a href=""><h4>Überschrift als Block-Verweis</h4></a>
<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="./art/bullet.gif" width="256" height="256" alt="Avatar"></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.box_main_indent</code></pre>
<div class="box_main_indent">
<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 height_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/></div>
<div class="flex_column"><input type="button" value="Auswählen"></div>
<div class="flex_column"><input type="submit" value="Senden" disabled/></div>
</div>
<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="./art/letter.gif" alt="">name@domain.tld</a></li>
<li><a href=""><img src="./art/bullet.gif" alt="">Work</a></li>
<li><a href="">Projects</a></li>
</ul>
<h2>Tabellen</h2>
<pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;nbsp;}+th{Ab / Zy}+th{Neu / Alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{Name}+a[target=_blank]{URL}^+td.cell_date[rowspan="2"]{YYY-MM-DD}^tr>td.cell_text>div.shorten{Beschreibung})*2</code></pre>
<table class="table_link js_pop">
<thead>
<tr>
<th>&nbsp;</th>
<th>Ab / Zy</th>
<th>Neu / Alt</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell_icon" rowspan="2"><img src="" 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="" 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="box_full_width 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" alt="Background flag">
<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>
<section>
<header class="sec_main_center header_txt">
<h1>Autarke Seiten</h1>
<p>Diese Elemente repräsentieren jeweils eine eigene Seite.</p>
</header>
<article>
<section class="sec_main_status demo__status">
<div class="wrap_center">
<h1>404</h1>
<p>Hier ist nichts.</p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</div>
{% include "hippie/partials/footer-status.njk" %}
</section>
<section class="sec_main_status demo__status">
<div class="wrap_center">
<h1>403</h1>
<p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
<blockquote>
<p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</div>
{% include "hippie/partials/footer-status.njk" %}
</section>
<section class="sec_main_status demo__status">
<div class="wrap_center">
<h1>400</h1>
<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
<blockquote>
<p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</div>
{% include "hippie/partials/footer-status.njk" %}
</section>
</article>
</section>
</div>
{% include "hippie/partials/footer.njk" %}
{% endblock %}
{% block script %}
{{ super() }}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/all.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
console.log('HIPPIE');
// jq-sticky-anything
$('#js_demo_fix').stickThis({
pushup: '#js_demo_stop'
});
});
</script>
{% endblock %}

50
source/pages/demo/error/404.njk
View file

@ -1,25 +1,25 @@
<!-- page-error-404.njk -->
{% set pageId = "404" %}
{% set pageClass = "body__status" %}
{% extends "hippie/demo-maintenance.njk" %}
{% block title %}404{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" type="text/css" media="all" href="../../css/demo_basic.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
{% endblock %}
{% block body_content %}
<main class="main__site">
<h1>404</h1>
<h3>Client-Fehler</h3>
<p>Hier ist nichts. <dfn>Not Found</dfn></br>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{% include "hippie/partials/footer-status.njk" %}
{% endblock %}
<!-- page-error-404.njk -->
{% set pageId = "404" %}
{% set pageClass = "body_status" %}
{% extends "hippie/demo-maintenance.njk" %}
{% block title %}404{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" type="text/css" media="all" href="../../css/demo_basic.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
{% endblock %}
{% block body_content %}
<main class="main_site">
<h1>404</h1>
<h3>Client-Fehler</h3>
<p>Hier ist nichts. <dfn>Not Found</dfn></br>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{% include "hippie/partials/footer-status.njk" %}
{% endblock %}

50
source/pages/demo/error/500.njk
View file

@ -1,25 +1,25 @@
<!-- page-error-500.njk -->
{% set pageId = "500" %}
{% set pageClass = "body__status" %}
{% extends "hippie/demo-maintenance.njk" %}
{% block title %}500{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" type="text/css" media="all" href="../../css/demo_basic.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
{% endblock %}
{% block body_content %}
<main class="main__site">
<h1>500</h1>
<h3>Server-Fehler</h3>
<p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
<p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p>
<p class="quote-author"><a class="line-link" href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{% include "hippie/partials/footer-status.njk" %}
{% endblock %}
<!-- page-error-500.njk -->
{% set pageId = "500" %}
{% set pageClass = "body_status" %}
{% extends "hippie/demo-maintenance.njk" %}
{% block title %}500{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" type="text/css" media="all" href="../../css/demo_basic.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
{% endblock %}
{% block body_content %}
<main class="main_site">
<h1>500</h1>
<h3>Server-Fehler</h3>
<p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
<p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p>
<p class="quote-author"><a class="line-link" href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{% include "hippie/partials/footer-status.njk" %}
{% endblock %}

1196
source/pages/demo/intro.njk
View file

File diff suppressed because it is too large Load diff

50
source/pages/demo/os.njk
View file

@ -12,7 +12,7 @@
{% block body_content %}
{# {% include "partials/page-hover.njk" %} #}
<div class="height_full">
<div class="flex__wrap">
<div class="flex_wrap">
<button class="demo__button_32"></button>
<button class="demo__button_32"></button>
<button class="demo__button_32"></button>
@ -21,10 +21,10 @@
<button class="demo__button_32"></button>
</div>
<div class="flex">
<div class="flex__child">
<!-- (nav>ul.list__data>(li>a>img+p{Punkt $})*6)*2 -->
<div class="flex_child">
<!-- (nav>ul.list_data>(li>a>img+p{Punkt $})*6)*2 -->
<nav>
<ul class="list__files">
<ul class="list_files">
<li><a href="">
<img src="" alt="">
<p>Punkt 1</p>
@ -52,7 +52,7 @@
</ul>
</nav>
<nav>
<ul class="list__files">
<ul class="list_files">
<li><a href="">
<img src="" alt="">
<p>Punkt 1</p>
@ -80,53 +80,53 @@
</ul>
</nav>
</div>
<div class="flex__child_one flex__row">
<!-- div.flex__child.box__file_wrp>(div.box__file_tile>img[src="./art/icon_default.svg"]^+p{Dateiname $}+p{Auszeichnung $})*4^+div.flex__child>table.table__file_simple>(tr>td>img^+td{Objektname $}+td.cell__file_path{Objektpfad $})*2 -->
<div class="flex__child box__file_wrp">
<div class="flex__wrap box__file_tile">
<div class="flex__child"><img src="./art/icon_default.svg" alt=""></div>
<div class="box__flex_one">
<div class="flex_child_one flex_row">
<!-- div.flex_child.box_file_wrp>(div.box_file_tile>img[src="./art/icon_default.svg"]^+p{Dateiname $}+p{Auszeichnung $})*4^+div.flex_child>table.table_file_simple>(tr>td>img^+td{Objektname $}+td.cell_file_path{Objektpfad $})*2 -->
<div class="flex_child box_file_wrp">
<div class="flex_wrap box_file_tile">
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
<div class="box_flex_one">
<p>Dateiname 1</p>
<p>Auszeichnung 1</p>
</div>
</div>
<div class="flex__wrap box__file_tile">
<div class="flex__child"><img src="./art/icon_default.svg" alt=""></div>
<div class="box__flex_one">
<div class="flex_wrap box_file_tile">
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
<div class="box_flex_one">
<p>Dateiname 2</p>
<p>Auszeichnung 2</p>
</div>
</div>
<div class="flex__wrap box__file_tile">
<div class="flex__child"><img src="./art/icon_default.svg" alt=""></div>
<div class="box__flex_one">
<div class="flex_wrap box_file_tile">
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
<div class="box_flex_one">
<p>Dateiname 3</p>
<p>Auszeichnung 3</p>
</div>
</div>
<div class="flex__wrap box__file_tile">
<div class="flex__child"><img src="./art/icon_default.svg" alt=""></div>
<div class="box__flex_one">
<div class="flex_wrap box_file_tile">
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
<div class="box_flex_one">
<p>Dateiname 4</p>
<p>Auszeichnung 4</p>
</div>
</div>
</div>
<div class="flex__child_one">
<table class="table__file_simple">
<div class="flex_child_one">
<table class="table_file_simple">
<tr>
<td><img src="" alt=""></td>
<td>Objektname 1</td>
<td class="cell__file_path">Objektpfad 1</td>
<td class="cell_file_path">Objektpfad 1</td>
</tr>
<tr>
<td><img src="" alt=""></td>
<td>Objektname 2</td>
<td class="cell__file_path">Objektpfad 2</td>
<td class="cell_file_path">Objektpfad 2</td>
</tr>
</table>
</div>
<div class="flex__child">
<div class="flex_child">
<p>Status</p>
</div>
</div>

55
source/style/hippie/elements/_grouping.scss
View file

@ -45,12 +45,12 @@ hr {
border-color: $darkest_color;
}
.hr__hidden {
.hr_hidden {
@extend hr;
border-color: transparent;
}
.hr__dotted {
.hr_dotted {
@extend hr;
border-style: dotted;
}
@ -60,8 +60,8 @@ pre {
@extend %basic_mono;
}
.pre__code {
// overflow-x: scroll;
.pre_code {
overflow-x: auto;
border-color: rgba($brightest_color,.1);
border-style: dotted;
border-width: 0 0 0 $border_width_4;
@ -80,14 +80,14 @@ blockquote {
padding-left: $basic_indent;
}
.quote__mark {
.quote_mark {
p::before {
content: "\201E \0020";
}
p::after {
content: "\201C \0020";
}
.quote__source {
.quote_source {
&::before, &::after {
content: "";
}
@ -107,7 +107,7 @@ li, dt, dd {
@extend %basic;
}
dd, .list__basic li {
dd, .list_basic li {
margin-bottom: $basic_space;
}
@ -144,7 +144,7 @@ div {
// General Classes
// ------------------------------------------------------------------------------
.list__dash {
.list_dash {
li {
list-style: none;
position: relative;
@ -157,7 +157,7 @@ div {
}
}
.list__link {
.list_link {
li {
margin-bottom: $tiny_space * 2;
text-transform: uppercase;
@ -180,52 +180,52 @@ div {
}
}
.list__horizontal {
.list_horizontal {
overflow: auto;
li {
@extend .float_space_left;
}
}
.box__info {
.box_info {
padding: $double_space $basic_indent;
border-right: $basic_space solid rgba($echo_color, 0.6);
background-color: rgba($echo_color, 0.1) !important;
}
.box__main_indent {
.box_main_indent {
margin-left: 25%;
}
.box__full_width {
.box_full_width {
// position: relative;
// overflow: hidden;
// width: 100%;
}
// Columns
.column__line {
.column_line {
column-rule: $basic_border;
}
.column__2, .column__3 {
.column_2, .column_3 {
@extend p;
}
.column__2 {
.column_2 {
column-count: 2;
column-gap: $space_3;
}
.column__3 {
.column_3 {
column-count: 3;
column-gap: $space_4;
}
// Space and placeholders
.box__space {
.box_space {
position: relative;
width: 100%;
}
.box__cube {
.box_cube {
float: left;
display: table;
width: $space_4;
@ -236,7 +236,7 @@ div {
}
}
.box__placeholder {
.box_placeholder {
width: 100%;
height: $space_4;
border: $border_width_4 solid rgba($alpha_color,.1);
@ -244,33 +244,34 @@ div {
background-color: rgba($alpha_color,.2);
}
.box__placeholder_bkg {
.box_placeholder_bkg {
width: 100%;
height: $space_4 * 2;
border: $border_width_4 solid rgba($brightest_color,.1);
border-radius: $basic_corner;
padding: $basic_space;
/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='#FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#FFF' stroke-width='.5'/></svg>") no-repeat;
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='%23FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='%23FFF' stroke-width='.5'/></svg>") no-repeat;
background-color: rgba($brightest_color,.1);
}
// Data
.box__file_tile {
.box_file_tile {
@extend .float_space_left;
}
// Flex
.flex__column_wrap {
.flex_column_wrap {
@extend .flex;
flex-wrap: wrap;
.flex__column {
@extend .flex__child;
.flex_column {
@extend .flex_child;
flex-grow: 1;
}
}
// Sprites
.sprite__img {
.sprite_img {
display: inline-block;
}

8
source/style/hippie/elements/_interactive.scss
View file

@ -105,7 +105,7 @@ legend {
}
label + input,
.input__label_right,
.input_label_right,
.label > input,
.label > select {
margin: 0 $basic_space;
@ -192,7 +192,7 @@ canvas {
line-height: 2.5;
}
.label__table {
.label_table {
display: table;
input {
@ -200,10 +200,10 @@ canvas {
}
}
.input__default {
.input_default {
label {
@extend .label__table;
@extend .label_table;
margin: $half_space 0;
input {

15
source/style/hippie/elements/_sections.scss
View file

@ -38,9 +38,10 @@ body {
}
&:hover {
.layer__hover {
background-color: transparent;
.layer_hover {
background-color: transparent !important;
transition: background-color $double_duration $basic_timing 0s !important;
}
}
}
@ -55,7 +56,7 @@ section {
}
.sec__main_center {
.sec_main_center {
width: $basic_width;
margin: 0 auto;
padding-top: $space_3;
@ -71,7 +72,7 @@ section {
}
}
.sec__main_status {
.sec_main_status {
border-top-width: $border_width_8;
border-top-style: solid;
border-color: $basic_border_color;
@ -161,11 +162,11 @@ header {
}
.header__page {
.header_page {
overflow: auto;
}
.header__txt {
.header_txt {
margin-bottom: $space_3;
border-bottom: $dotted_border;

10
source/style/hippie/elements/_tables.scss
View file

@ -80,7 +80,7 @@ td:last-child {
border-right: $basic_border;
}
.table__blank {
.table_blank {
border: $basic_border_width solid transparent;
th, td {
@ -88,11 +88,11 @@ td:last-child {
}
}
.table__free {
.table_free {
border: $basic_border_width solid transparent;
}
.table__stripe {
.table_stripe {
td {
border-top: 0;
border-bottom: 0;
@ -103,11 +103,11 @@ td:last-child {
}
}
.table__fix {
.table_fix {
table-layout: fixed;
}
// Data
.table__file_simple {
.table_file_simple {
@extend .width_full;
}

30
source/style/hippie/elements/_textlevel.scss
View file

@ -52,7 +52,7 @@ a {
}
}
.a__line {
.a_line {
border-bottom-width: $tiny_space;
border-bottom-style: dotted;
border-color: $basic_border_color;
@ -68,19 +68,19 @@ a {
}
}
.a__button {
.a_button {
@extend %default_button;
}
.a__button_text {
.a_button_text {
@extend %default_button;
padding: $wide_padding;
background-color: transparent;
color: $basic_font_color;
}
.a__button_border {
@extend .a__button_text;
.a_button_border {
@extend .a_button_text;
border: $cell_border;
}
@ -90,7 +90,7 @@ i, em {
font-style: italic;
}
.i__bright {
.i_bright {
font-style: normal;
color: $brightest_color;
}
@ -159,10 +159,10 @@ time {
// Code
code {
@extend %basic_mono;
color: lighten($basic_font_color, 12%);
color: lighten($basic_font_color, $basic_color_diff);
background-color: rgba($brightest_color,.1);
}
.code__solo {
.code_solo {
@extend %basic_mono;
padding: $tiny_space $half_space;
color: $basic_font_color;
@ -177,7 +177,15 @@ samp {
}
kbd {
@extend %basic_mono;
// font-size: .9em;
// font-weight: bold;
padding: 0 $half_space;
border-width: $basic_border_width;
border-style: solid;
border-color: darken($basic_back_color, $basic_color_diff);
border-radius: $basic_corner;
color: lighten($basic_font_color, $basic_color_diff);
}
sub, sup {
@ -192,7 +200,7 @@ u {
mark {
background-color: $alpha_color;
}
.mark__cursor {
.mark_cursor {
color: $basic_highlight_color;
background-color: $darkest_color;
}
@ -213,7 +221,7 @@ bdi, bdo {
span {
}
.span__solo {
.span_solo {
@extend %solo;
}

16
source/style/hippie/global/_common.scss
View file

@ -189,7 +189,7 @@
}
.hover_back_change {
background-color: darken($basic_back_color, 10%);
background-color: darken($basic_back_color, $basic_color_diff);
transition: background-color 0.2s ease-in-out;
&:hover {
@ -201,7 +201,7 @@
@extend %full_viewport;
z-index: $z_heaven;
background-color: transparentize($darkest_color, 0.5);
transition: background-color 0.2s ease-in-out;
transition: background-color $extended_duration $basic_timing $extended_duration;
pointer-events: none;
}
@ -209,27 +209,27 @@
display: flex;
}
.flex__wrap {
.flex_wrap {
@extend .flex;
flex-wrap: wrap;
}
.flex__row {
.flex_row {
@extend .flex;
flex-direction: column;
// align-items: flex-start;
justify-content: flex-start;
}
.flex__child {
.flex_child {
flex: 0 1 auto;
}
.flex__child_one {
.flex_child_one {
flex: 1;
}
.flex__child_end {
.flex_child_end {
align-self: flex-end;
}
@ -237,7 +237,7 @@
// Colors
// ------------------------------------------------------------------------------
.txt_light_color {
color: darken($basic_back_color, 10%);
color: darken($basic_back_color, $basic_color_diff);
}

17
source/style/hippie/global/_config.scss
View file

@ -101,13 +101,13 @@ $basic_link_color: $echo_color !default;
$basic_highlight_color: $brightest_color !default;
$basic_action_color: $foxtrot_color !default;
$basic_border_color: $basic_front_color !default;
// default shadow colors
// $shadow_color: fade-out($medium_color, 0.5);
$basic_color_diff: 12% !default;
$basic_color_list: ();
@each $key, $value in $color_palette {
@ -147,8 +147,9 @@ $io_margin: 0 $space_3 !default;
$basic_padding: calc(#{$basic_space} - 3px) $basic_space !default;
$wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2) !default;
$basic_corner: $tiny_space;
$basic_corner: $tiny_space * 2;
// Borders
$basic_border_width: $tiny_space !default;
$border_width_4: $tiny_space * 4;
$border_width_8: $tiny_space * 8;
@ -197,8 +198,8 @@ $basic_focus_list:
'textarea:not([disabled])',
'*[tabindex]';
$basic_io_font_color: lighten($basic_font_color, 10%);
$basic_io_back_color: darken($brightest_color, 10%);
$basic_io_font_color: lighten($basic_font_color, $basic_color_diff);
$basic_io_back_color: darken($brightest_color, $basic_color_diff);
$basic_io_border_color: $brightest_color;
$basic_io_border_width: $tiny_space * 2 !default;
@ -212,8 +213,10 @@ $basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $l
// ANIMATIONS
// ------------------------------------------------------------------------------
$basic_duration: 150ms;
$basic_timing: ease;
$basic_duration: 250ms;
$double_duration: 500ms;
$extended_duration: 2s;
$basic_timing: ease-out;
// HARDWARE BREAKPOINTS

124
source/style/hippie/global/_typography.scss
View file

@ -1,62 +1,62 @@
// Basic styles
// -----------------------------------------------------------------------------
%basic {
font-family: $primary_font_family;
font-size: $text_size_1;
line-height: $text_line_basic;
}
%basic_mono {
font-family: $monospace_font_family;
font-size: $text_size_1;
line-height: $text_line_mono;
}
%basic_print {
font-family: $print_font_family;
font-size: $text_size_1;
line-height: $text_line_basic;
}
%head_all {
color: $basic_head_color;
}
%head_1 {
font-family: $secondary_font_family;
font-size: $head_size_1;
font-weight: 300;
line-height: $head_line_basic;
}
%head_2 {
font-family: $secondary_font_family;
font-size: $head_size_2;
font-weight: 300;
line-height: $head_line_2;
}
%head_3 {
font-family: $secondary_font_family;
font-size: $head_size_3;
font-weight: 300;
line-height: $head_line_3;
}
%head_4 {
font-family: $secondary_font_family;
font-size: $head_size_4;
font-weight: 300;
line-height: $head_line_4;
}
%solo {
@extend %basic;
}
%short {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; // vendor
}
// Basic styles
// -----------------------------------------------------------------------------
%basic {
font-family: $primary_font_family;
font-size: $text_size_1;
line-height: $text_line_basic;
}
%basic_mono {
font-family: $monospace_font_family;
font-size: $text_size_1;
line-height: $text_line_mono;
}
%basic_print {
font-family: $print_font_family;
font-size: $text_size_1;
line-height: $text_line_basic;
}
%head_all {
color: $basic_head_color;
}
%head_1 {
font-family: $secondary_font_family;
font-size: $head_size_1;
font-weight: 300;
line-height: $head_line_basic;
}
%head_2 {
font-family: $secondary_font_family;
font-size: $head_size_2;
font-weight: 300;
line-height: $head_line_2;
}
%head_3 {
font-family: $secondary_font_family;
font-size: $head_size_3;
font-weight: 300;
line-height: $head_line_3;
}
%head_4 {
font-family: $secondary_font_family;
font-size: $head_size_4;
font-weight: 300;
line-height: $head_line_4;
}
%solo {
@extend %basic;
}
%short {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; // vendor
}

5
source/style/hippie/mixins/_media_query.scss
View file

@ -1,9 +1,12 @@
//Sections for Media Queries
@mixin forPhoneUp {
@media (min-width: #{$screen_tiny - 1}) { @content; } //599px
}
@mixin forPhoneOnly {
@media (max-width: #{$screen_tiny - 1}) { @content; } //599px
}
@mixin forTabletPortraitUp {
@media (min-width: $screen_tiny) { @content; } //600px
@media (min-width: $screen_small) { @content; } //600px
}
@mixin forTabletPortraitOnly {
@media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px

23
source/style/hippie/modules/breakpoint/_breakpoint_module.scss
View file

@ -1,46 +1,47 @@
.query__goingLarge {
.query_goingLarge {
@include goingLarge($screen_tiny) {};
}
.query__goingSmall {
.query_goingSmall {
@include goingSmall($screen_gigantic) {};
}
.query__phoneUp {
.query_phoneUp {
@include forPhoneUp {}
}
.query__phoneOnly {
.query_phoneOnly {
@include forPhoneOnly {}
}
.query__tabletPortaitOnly {
.query_tabletPortaitOnly {
@include forTabletPortraitOnly {
}
}
.query__tabletPortraitUp {
.query_tabletPortraitUp {
@include forTabletPortraitUp {
}
}
.query__tabletLandscapeOnly {
.query_tabletLandscapeOnly {
@include forTabletLandscapeOnly {}
}
.query__tabletLandscapeUp {
.query_tabletLandscapeUp {
@include forTabletLandscapeUp {}
}
.query__desktopOnly {
.query_desktopOnly {
@include forDesktopOnly {
}
}
.query__desktopUp {
.query_desktopUp {
@include forDesktopUp {
}
}
.query__bigDesktopUp {
.query_bigDesktopUp {
@include forBigDesktopUp {}
}

230
source/style/hippie/modules/explanation/_explanation_module.scss
View file

@ -1,115 +1,115 @@
// Custom extends and mixins
// ------------------------------------------------------------------------------
@import "mixins";
@import "extends";
// Explanation module styles
// ------------------------------------------------------------------------------
%expose_after {
&::after {
content: "";
display: block;
height: 48px;
background-color: rgba($delta_color, 0.1) !important;
}
}
%expose_before {
&::before {
content: "";
display: block;
height: 48px;
background-color: rgba($delta_color, 0.1) !important;
}
}
%expose {
&::before, &::after {
content: "";
display: block;
height: 48px;
background-color: rgba($delta_color, 0.1) !important;
}
}
%exp {
}
%exp_hidden {
display: none;
}
.exp_wrap {
position: relative;
}
.exp_pop {
@extend %exp_hidden !optional;
position: absolute;
z-index: 100;
top: $space_5;
left: $space_5;
padding: $half_space;
border: 4px solid $basic_back_color;
border-radius: 4px;
background-color: $basic_back_color;
pointer-events: none;
}
.exp_marker_pop {
position: absolute;
top: -$basic_size / 4 * 3;
right: -$basic_size / 2;
width: $basic_size;
height: $basic_size;
border: $tiny_space solid $basic_highlight_color;
border-radius: $basic_size;
color: $basic_highlight_color;
background-color: $darkest_color;
}
.exp_expose {
@extend %expose !optional;
}
.exp_expose_pre {
@extend %expose_after;
}
.exp_expose_post {
@extend %expose_before;
}
.exp_overlay_btn {
position: fixed;
width: 3em;
height: 2em;
// padding: $basic_space $basic_space * 2;
cursor: pointer;
}
.exp_help_btn {
display: table;
right: $double_space;
bottom: $double_space;
background-color: rgba($darkest_color, 0.4);
&:hover {
background-color: $brightest_color;
> .span__solo {
color: $darkest_color;
}
}
.span__solo {
display: table-cell;
color: rgba($brightest_color, 0.8);
font-family: $monospace_font_family;
font-size: 1.4em;
text-align: center;
vertical-align: middle;
}
}
.expose_height {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba($delta_color, 0.1) !important;
@include vendor-prefix(transition, height 0.5s ease);
}
// Custom extends and mixins
// ------------------------------------------------------------------------------
@import "mixins";
@import "extends";
// Explanation module styles
// ------------------------------------------------------------------------------
%expose_after {
&::after {
content: "";
display: block;
height: 48px;
background-color: rgba($delta_color, 0.1) !important;
}
}
%expose_before {
&::before {
content: "";
display: block;
height: 48px;
background-color: rgba($delta_color, 0.1) !important;
}
}
%expose {
&::before, &::after {
content: "";
display: block;
height: 48px;
background-color: rgba($delta_color, 0.1) !important;
}
}
%exp {
}
%exp_hidden {
display: none;
}
.exp_wrap {
position: relative;
}
.exp_pop {
@extend %exp_hidden !optional;
position: absolute;
z-index: 100;
top: $space_5;
left: $space_5;
padding: $half_space;
border: 4px solid $basic_back_color;
border-radius: 4px;
background-color: $basic_back_color;
pointer-events: none;
}
.exp_marker_pop {
position: absolute;
top: -$basic_size / 4 * 3;
right: -$basic_size / 2;
width: $basic_size;
height: $basic_size;
border: $tiny_space solid $basic_highlight_color;
border-radius: $basic_size;
color: $basic_highlight_color;
background-color: $darkest_color;
}
.exp_expose {
@extend %expose !optional;
}
.exp_expose_pre {
@extend %expose_after;
}
.exp_expose_post {
@extend %expose_before;
}
.exp_overlay_btn {
position: fixed;
width: 3em;
height: 2em;
// padding: $basic_space $basic_space * 2;
cursor: pointer;
}
.exp_help_btn {
display: table;
right: $double_space;
bottom: $double_space;
background-color: rgba($darkest_color, 0.4);
&:hover {
background-color: $brightest_color;
> .span_solo {
color: $darkest_color;
}
}
.span_solo {
display: table-cell;
color: rgba($brightest_color, 0.8);
font-family: $monospace_font_family;
font-size: 1.4em;
text-align: center;
vertical-align: middle;
}
}
.expose_height {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba($delta_color, 0.1) !important;
@include vendor-prefix(transition, height 0.5s ease);
}

38
source/style/hippie/modules/maintenance/_maintenance_module.scss
View file

@ -1,19 +1,19 @@
.body__status {
@extend .sec__main_status;
height: 100vh;
border-color: $foxtrot_color;
.main__site {
@extend .wrap_center;
& > h1:first-of-type {
margin-top: 0;
margin-bottom: 0;
font-weight: bold;
line-height: 1;
}
& > h1 + h3 {
margin-top: 0;
margin-bottom: $space_3;
}
}
}
.body_status {
@extend .sec_main_status;
height: 100vh;
border-color: $foxtrot_color;
.main_site {
@extend .wrap_center;
& > h1:first-of-type {
margin-top: 0;
margin-bottom: 0;
font-weight: bold;
line-height: 1;
}
& > h1 + h3 {
margin-top: 0;
margin-bottom: $space_3;
}
}
}

6
source/style/hippie/modules/media/_media_module.scss
View file

@ -1,3 +1,9 @@
.up {
@include sprite($up);
}
.down {
@include sprite($down);
}
.meta {
@include sprite($meta);
}

13
source/style/hippie/modules/media/_sprites.scss
View file

@ -20,6 +20,17 @@ $down-total-width: 64px;
$down-total-height: 64px;
$down-image: 'sprites.png';
$down: (32px, 0px, -32px, 0px, 32px, 32px, 64px, 64px, 'sprites.png', 'down', );
$meta-name: 'meta';
$meta-x: 32px;
$meta-y: 32px;
$meta-offset-x: -32px;
$meta-offset-y: -32px;
$meta-width: 32px;
$meta-height: 32px;
$meta-total-width: 64px;
$meta-total-height: 64px;
$meta-image: 'sprites.png';
$meta: (32px, 32px, -32px, -32px, 32px, 32px, 64px, 64px, 'sprites.png', 'meta', );
$up-name: 'up';
$up-x: 0px;
$up-y: 0px;
@ -34,7 +45,7 @@ $up: (0px, 0px, 0px, 0px, 32px, 64px, 64px, 64px, 'sprites.png', 'up', );
$spritesheet-width: 64px;
$spritesheet-height: 64px;
$spritesheet-image: 'sprites.png';
$spritesheet-sprites: ($down, $up, );
$spritesheet-sprites: ($down, $meta, $up, );
$spritesheet: (64px, 64px, 'sprites.png', $spritesheet-sprites, );
// The provided mixins are intended to be used with the array-like variables

28
source/style/hippie/modules/navigation/_nav_module.scss
View file

@ -10,7 +10,7 @@ nav {
}
}
.nav__horizontal {
.nav_horizontal {
ul {
@extend .overflow;
@ -30,7 +30,7 @@ nav {
}
}
.nav__right {
.nav_right {
float: right;
margin-left: $basic_space;
@ -39,7 +39,7 @@ nav {
}
}
.nav__separate {
.nav_separate {
li {
position: relative;
padding-left: $tiny_space;
@ -59,7 +59,7 @@ nav {
}
}
.nav__separate_right {
.nav_separate_right {
float: right;
li {
position: relative;
@ -81,8 +81,8 @@ nav {
}
}
.nav__center_old {
@extend .nav__horizontal;
.nav_center_old {
@extend .nav_horizontal;
float: right;
position: relative;
left: -50%;
@ -94,7 +94,7 @@ nav {
}
}
.nav__column {
.nav_column {
position: relative;
margin: $basic_space 0;
@ -103,7 +103,7 @@ nav {
margin: 0 $space_5;
li {
@extend .flex__child;
@extend .flex_child;
flex-grow: 1;
margin: 0;
text-align: center;
@ -115,7 +115,7 @@ nav {
}
}
.nav__page_meta {
.nav_page_meta {
position: fixed;
// display: table;
// width: 3em;
@ -128,13 +128,14 @@ nav {
li {
margin-bottom: 0;
line-height: 1;
}
button {
width: 32px;
margin-right: 0;
margin-left: 0;
}
.a__button_meta {
.a_button_meta {
// display: table-cell;
display: inline-block;
@ -147,12 +148,15 @@ nav {
background-color: $basic_action_color;
}
}
.sprite_img {
vertical-align: top;
}
}
.header__page {
.header_page {
nav {
@extend .nav__horizontal;
@extend .nav_horizontal;
a {

136
source/style/hippie/modules/tables/_tables_module.scss
View file

@ -1,68 +1,68 @@
.table__link {
width: 100%;
border: 0;
table-layout: auto;
tbody {
border-bottom: $cell_border;
&:hover {
background-color: $bright_color;
}
}
th, td {
border: 0;
}
.cell__icon {
width: 48px;
text-align: center;
img {
vertical-align: text-top;
}
}
.cell__link {
padding-right: $basic_space;
padding-left: $basic_space;
&:hover {
background-color: $foxtrot_color;
a:first-child {
display: none;
}
a:last-child {
display: block;
color: $basic_highlight_color;
}
}
a {
display: block;
}
a:last-child {
display: none;
}
}
th:last-child, .cell__date {
width: 16%;
text-align: center;
}
.cell__text {
padding-right: $basic_space;
padding-left: $basic_space;
div {
width: 100%;
}
.shorten {
@extend %short;
max-height: 44px;
}
}
}
.table_link {
width: 100%;
border: 0;
table-layout: auto;
tbody {
border-bottom: $cell_border;
&:hover {
background-color: $bright_color;
}
}
th, td {
border: 0;
}
.cell_icon {
width: 48px;
text-align: center;
img {
vertical-align: text-top;
}
}
.cell_link {
padding-right: $basic_space;
padding-left: $basic_space;
&:hover {
background-color: $foxtrot_color;
a:first-child {
display: none;
}
a:last-child {
display: block;
color: $basic_highlight_color;
}
}
a {
display: block;
}
a:last-child {
display: none;
}
}
th:last-child, .cell_date {
width: 16%;
text-align: center;
}
.cell_text {
padding-right: $basic_space;
padding-left: $basic_space;
div {
width: 100%;
}
.shorten {
@extend %short;
max-height: 44px;
}
}
}

38
source/style/modules/demo/_demo_module.scss
View file

@ -1,10 +1,10 @@
.demo__intro {
@extend .sec__main_center;
@extend .sec__main_status;
@extend .sec_main_center;
@extend .sec_main_status;
}
.demo__status {
@extend .sec__main_status;
@extend .sec_main_status;
position: relative;
min-height: 50vh;
border-color: $foxtrot_color;
@ -32,7 +32,7 @@
}
}
.header__fancy {
.header_fancy {
background-color: transparentize($bravo_color, 0.4);
nav {
@ -51,7 +51,7 @@
}
}
.header__fix {
.header_fix {
position: relative;
top: 0;
left: 0;
@ -101,6 +101,13 @@
background-position: 0 0;
}
.demo__sprite_meta {
width: 32px;
height: 32px;
background-image: url(../art/sprites.png);
background-position: -32px 32px;
}
.demo__avatar {
img {
@ -133,39 +140,39 @@
padding: $basic_padding;
}
.query__phoneUp {
background-color: rgba($basic_front_color, 0.2);
.query_phoneUp {
@include forPhoneUp {background-color: rgba($basic_front_color, 0.2)};
}
.query__phoneOnly {
.query_phoneOnly {
@include forPhoneOnly { background-color: rgba($basic_front_color, 0.2); }
}
.query__tabletPortaitOnly {
.query_tabletPortaitOnly {
@include forTabletPortraitOnly { background-color: rgba($basic_front_color, 0.2); }
}
.query__tabletPortraitUp {
.query_tabletPortraitUp {
@include forTabletPortraitUp { background-color: rgba($basic_front_color, 0.2); }
}
.query__tabletLandscapeOnly {
.query_tabletLandscapeOnly {
@include forTabletLandscapeOnly { background-color: rgba($basic_front_color, 0.2); }
}
.query__tabletLandscapeUp {
.query_tabletLandscapeUp {
@include forTabletLandscapeUp { background-color: rgba($basic_front_color, 0.2); }
}
.query__desktopOnly {
.query_desktopOnly {
@include forDesktopOnly { background-color: rgba($basic_front_color, 0.2); }
}
.query__desktopUp {
.query_desktopUp {
@include forDesktopUp { background-color: rgba($basic_front_color, 0.2); }
}
.query__bigDesktopUp {
.query_bigDesktopUp {
@include forBigDesktopUp { background-color: rgba($basic_front_color, 0.2); }
}
@ -200,6 +207,7 @@
content: '< 768px';
padding: $basic_padding;
border-radius: $basic_corner_radius;
color: $brightest_color;
background-color: rgba($basic_front_color, 0.2);
}
}

8
source/templates/hippie/demo-default.njk
View file

@ -7,13 +7,7 @@
{% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title>
<meta name="author" content="Interaktionsweise">
<meta name="description" content="hippie">
<meta name="generator" content="Notepad++, Atom">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
{% include "hippie/partials/head-meta.njk" %}
<link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />

10
source/templates/hippie/demo-extended.njk
View file

@ -16,13 +16,7 @@
<!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
<!--Only use one of the above!-->
<meta name="author" content="Interaktionsweise">
<meta name="description" content="hippie example">
<meta name="generator" content="Notepad++, Atom">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
{% include "hippie/partials/head-meta.njk" %}
<link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
@ -33,7 +27,7 @@
{% endblock %}
</head>
<body id="{{ pageId }}" class="body__demo">
<body id="{{ pageId }}" class="{{ pageClass }} body_demo">
{% include "hippie/partials/page-hover.njk" %}
<div id="root">
<header id="js_head" class="header_site">

8
source/templates/hippie/demo-maintenance.njk
View file

@ -7,13 +7,7 @@
{% block head %}
<title>{% block title %}{% endblock %}</title>
<meta name="author" content="Interaktionsweise">
<meta name="description" content="hippie http status">
<meta name="generator" content="Notepad++, Atom">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
{% include "hippie/partials/head-meta.njk" %}
<link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />

8
source/templates/hippie/partials/head-meta.njk Normal file
View file

@ -0,0 +1,8 @@
<!-- head-meta.partial -->
<meta name="author" content="Interaktionsweise">
<meta name="description" content="hippie">
<meta name="generator" content="Notepad++, Atom">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />

13
source/templates/hippie/partials/nav-page-meta.njk
View file

@ -1,16 +1,21 @@
<!-- nav-page-meta.partial -->
<nav class="nav__page_meta">
<nav class="nav_page_meta">
<ul>
<li class="magic">
<a href="#begin" id="js_scrolltop" class="a_button_meta">
<div class="sprite__img demo__sprite_up"></div>
<div class="sprite_img demo__sprite_up"></div>
{# <img src="../art/up.png" alt="" width="32" height="64"> #}
</a>
</li>
<li><button class="">Show Meta Information</button></li>
<li>
{# <button class="">Show Meta Information</button> #}
<a href="#meta" class="a_button_meta">
<div class="sprite_img demo__sprite_meta meta"></div>
</a>
</li>
<li>
<a href="#end" id="js_scrolldown" class="a_button_meta">
<div class="sprite__img demo__sprite_down"></div>
<div class="sprite_img demo__sprite_down"></div>
{# <img src="../art/down.png" alt="" width="32" height="32"> #}
</a>
</li>

2
source/templates/hippie/partials/page-hover.njk
View file

@ -1,2 +1,2 @@
<!-- page-hover.partial -->
<div id="js_tph" class="layer__hover"></div>
<div id="js_tph" class="layer_hover"></div>