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

demo.5

Browse source 
* removed double underscore (__) separators in class names
* more LF CR to LF
* new scss config variables
* some little style changes
This commit is contained in:
Stephan 2018-10-01 21:10:58 +02:00
parent 0a78f526f5
commit 8b81ed92e1
30 changed files with 1288 additions and 1262 deletions
Download patch file Download diff file Expand all files Collapse all files

9
gulpfile.js
View file

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

6
source/pages/demo.njk
View file

@ -16,9 +16,11 @@
<div class="hello"> <div class="hello">
<h2>This is HIPPIE</h2> <h2>This is HIPPIE</h2>
<p>You can start using it by replacing this file with your own index page.</p> <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> <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> <h3>Overview about all the styles</h3>
<ul class="list__link"> <ul class="list_link">
<!-- Loops through "demoadditionallinks" array --> <!-- Loops through "demoadditionallinks" array -->
{% for link in demoadditionallinks %} {% for link in demoadditionallinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li> <li><a href="{{link.href}}">{{link.text}}</a></li>
@ -31,7 +33,7 @@
C(")(")</pre> C(")(")</pre>
<h3>Demo Pages</h3> <h3>Demo Pages</h3>
</div> </div>
<ul class="list__link"> <ul class="list_link">
<!-- Loops through "demo-links" array --> <!-- Loops through "demo-links" array -->
{% for link in demolinks %} {% for link in demolinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li> <li><a href="{{link.href}}">{{link.text}}</a></li>

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

@ -1,69 +1,279 @@
<!-- page-elements.njk --> <!-- page-elements.njk -->
{% set pageId = "elements" %} {% set pageId = "elements" %}
{% set pageClass = "" %} {% set pageClass = "" %}
{% extends "hippie/demo-extended.njk" %} {% extends "hippie/demo-extended.njk" %}
{% block title %}Elements{% endblock %} {% block title %}Elements{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block body_content %} {% block body_content %}
<div class="temp__layer"> <div class="temp_layer">
<!-- <div class="exp_overlay_btn exp_help_btn"> <!-- <div class="exp_overlay_btn exp_help_btn">
<span class="span__solo">?</span> <span class="span_solo">?</span>
</div> --> </div> -->
{% include "hippie/partials/nav-page-meta.njk" %} {% include "hippie/partials/nav-page-meta.njk" %}
</div> </div>
<div id="begin" class=""> <div id="begin" class="">
<article> <section class="sec_main_center">
<header> <header class="header_txt">
<h1>Bereiche</h1> <h1>Medienformat Abfragen</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> </header>
<nav> <article>
<p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p> <div class="demo__query_example">Umbruch bei&nbsp;</div>
</nav> <div class="demo__queries">
</header> <p class="query_phoneUp">Telefone und größer</p>
<section> <p class="query_phoneOnly">Nur Telefone</p>
<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 class="query_tabletPortaitOnly"Nur >Schreibtafeln hochkant</p>
<p>Noch allgemeiner ist das <code>&lt;section&gt;</code> Element. Es schafft Bereiche um Inhalte zu strukturieren.</p> <p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
<p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br>Folgende Bereiche sind vorgegeben:</p> <p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
</section> <p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
<div class="overflow"> <p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
<aside class="left"> <p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
<p>Ein Bereich, der seitlich zum hauptsächlichen Inhalt verläuft, wird mit <code>&lt;aside&gt;</code> markiert.</p> <p class="query_bigDesktopUp">Richtige Monitore und größer</p>
</aside> </div>
<section class="bside"> </article>
<header> </section>
<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> <section class="sec_main_center">
<p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p> <header class="header_txt">
</nav> <h1>Sammlung formatierter Elemente</h1>
</header> <p>Die Elemente werden fortlaufend komplexer</p>
<footer> </header>
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p> <article>
</footer> <pre class="pre_code"><code>h3.txt_light_color+p</code></pre>
</section> <h3 class="txt_light_color">Helle Überschrift</h3>
</div> <p>Mit normalem Textabsatz</p>
<footer> <pre class="pre_code"><code>a>h4</code></pre>
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p> <a href=""><h4>Überschrift als Block-Verweis</h4></a>
</footer> <pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
</article> <section class="overflow">
</div> <div class="float_space_left demo__avatar"><img src="./art/bullet.gif" width="256" height="256" alt="Avatar"></div>
{% include "hippie/partials/footer.njk" %} <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>
{% endblock %} </section>
<pre class="pre_code"><code>div.box_main_indent</code></pre>
{% block script %} <div class="box_main_indent">
{{ super() }} <hr/>
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script> <p>Eingerückter Inhalt</p>
<script src="../js/all.min.js" type="text/javascript"></script> <hr/>
<script type="text/javascript"> </div>
// Page specific <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">
$( document ).ready(function() { <nav class="float_space_left">
console.log('HIPPIE'); <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>
</script> <li><a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a></li>
{% endblock %} <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 --> <!-- page-error-404.njk -->
{% set pageId = "404" %} {% set pageId = "404" %}
{% set pageClass = "body__status" %} {% set pageClass = "body_status" %}
{% extends "hippie/demo-maintenance.njk" %} {% extends "hippie/demo-maintenance.njk" %}
{% block title %}404{% endblock %} {% block title %}404{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
<link rel="stylesheet" type="text/css" media="all" href="../../css/demo_basic.css"/> <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"/> --> <!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
{% endblock %} {% endblock %}
{% block body_content %} {% block body_content %}
<main class="main__site"> <main class="main_site">
<h1>404</h1> <h1>404</h1>
<h3>Client-Fehler</h3> <h3>Client-Fehler</h3>
<p>Hier ist nichts. <dfn>Not Found</dfn></br> <p>Hier ist nichts. <dfn>Not Found</dfn></br>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler"> <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>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> <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote> </blockquote>
</main> </main>
{% include "hippie/partials/footer-status.njk" %} {% include "hippie/partials/footer-status.njk" %}
{% endblock %} {% endblock %}

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

@ -1,25 +1,25 @@
<!-- page-error-500.njk --> <!-- page-error-500.njk -->
{% set pageId = "500" %} {% set pageId = "500" %}
{% set pageClass = "body__status" %} {% set pageClass = "body_status" %}
{% extends "hippie/demo-maintenance.njk" %} {% extends "hippie/demo-maintenance.njk" %}
{% block title %}500{% endblock %} {% block title %}500{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
<link rel="stylesheet" type="text/css" media="all" href="../../css/demo_basic.css"/> <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"/> --> <!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
{% endblock %} {% endblock %}
{% block body_content %} {% block body_content %}
<main class="main__site"> <main class="main_site">
<h1>500</h1> <h1>500</h1>
<h3>Server-Fehler</h3> <h3>Server-Fehler</h3>
<p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p> <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"> <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>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> <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> </blockquote>
</main> </main>
{% include "hippie/partials/footer-status.njk" %} {% include "hippie/partials/footer-status.njk" %}
{% endblock %} {% 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 %} {% block body_content %}
{# {% include "partials/page-hover.njk" %} #} {# {% include "partials/page-hover.njk" %} #}
<div class="height_full"> <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> <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> <button class="demo__button_32"></button>
</div> </div>
<div class="flex"> <div class="flex">
<div class="flex__child"> <div class="flex_child">
<!-- (nav>ul.list__data>(li>a>img+p{Punkt $})*6)*2 --> <!-- (nav>ul.list_data>(li>a>img+p{Punkt $})*6)*2 -->
<nav> <nav>
<ul class="list__files"> <ul class="list_files">
<li><a href=""> <li><a href="">
<img src="" alt=""> <img src="" alt="">
<p>Punkt 1</p> <p>Punkt 1</p>
@ -52,7 +52,7 @@
</ul> </ul>
</nav> </nav>
<nav> <nav>
<ul class="list__files"> <ul class="list_files">
<li><a href=""> <li><a href="">
<img src="" alt=""> <img src="" alt="">
<p>Punkt 1</p> <p>Punkt 1</p>
@ -80,53 +80,53 @@
</ul> </ul>
</nav> </nav>
</div> </div>
<div class="flex__child_one flex__row"> <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.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_child box_file_wrp">
<div class="flex__wrap box__file_tile"> <div class="flex_wrap box_file_tile">
<div class="flex__child"><img src="./art/icon_default.svg" alt=""></div> <div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
<div class="box__flex_one"> <div class="box_flex_one">
<p>Dateiname 1</p> <p>Dateiname 1</p>
<p>Auszeichnung 1</p> <p>Auszeichnung 1</p>
</div> </div>
</div> </div>
<div class="flex__wrap box__file_tile"> <div class="flex_wrap box_file_tile">
<div class="flex__child"><img src="./art/icon_default.svg" alt=""></div> <div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
<div class="box__flex_one"> <div class="box_flex_one">
<p>Dateiname 2</p> <p>Dateiname 2</p>
<p>Auszeichnung 2</p> <p>Auszeichnung 2</p>
</div> </div>
</div> </div>
<div class="flex__wrap box__file_tile"> <div class="flex_wrap box_file_tile">
<div class="flex__child"><img src="./art/icon_default.svg" alt=""></div> <div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
<div class="box__flex_one"> <div class="box_flex_one">
<p>Dateiname 3</p> <p>Dateiname 3</p>
<p>Auszeichnung 3</p> <p>Auszeichnung 3</p>
</div> </div>
</div> </div>
<div class="flex__wrap box__file_tile"> <div class="flex_wrap box_file_tile">
<div class="flex__child"><img src="./art/icon_default.svg" alt=""></div> <div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
<div class="box__flex_one"> <div class="box_flex_one">
<p>Dateiname 4</p> <p>Dateiname 4</p>
<p>Auszeichnung 4</p> <p>Auszeichnung 4</p>
</div> </div>
</div> </div>
</div> </div>
<div class="flex__child_one"> <div class="flex_child_one">
<table class="table__file_simple"> <table class="table_file_simple">
<tr> <tr>
<td><img src="" alt=""></td> <td><img src="" alt=""></td>
<td>Objektname 1</td> <td>Objektname 1</td>
<td class="cell__file_path">Objektpfad 1</td> <td class="cell_file_path">Objektpfad 1</td>
</tr> </tr>
<tr> <tr>
<td><img src="" alt=""></td> <td><img src="" alt=""></td>
<td>Objektname 2</td> <td>Objektname 2</td>
<td class="cell__file_path">Objektpfad 2</td> <td class="cell_file_path">Objektpfad 2</td>
</tr> </tr>
</table> </table>
</div> </div>
<div class="flex__child"> <div class="flex_child">
<p>Status</p> <p>Status</p>
</div> </div>
</div> </div>

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

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

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

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

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

@ -38,9 +38,10 @@ body {
} }
&:hover { &:hover {
.layer__hover { .layer_hover {
background-color: transparent; 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; width: $basic_width;
margin: 0 auto; margin: 0 auto;
padding-top: $space_3; padding-top: $space_3;
@ -71,7 +72,7 @@ section {
} }
} }
.sec__main_status { .sec_main_status {
border-top-width: $border_width_8; border-top-width: $border_width_8;
border-top-style: solid; border-top-style: solid;
border-color: $basic_border_color; border-color: $basic_border_color;
@ -161,11 +162,11 @@ header {
} }
.header__page { .header_page {
overflow: auto; overflow: auto;
} }
.header__txt { .header_txt {
margin-bottom: $space_3; margin-bottom: $space_3;
border-bottom: $dotted_border; border-bottom: $dotted_border;

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

@ -80,7 +80,7 @@ td:last-child {
border-right: $basic_border; border-right: $basic_border;
} }
.table__blank { .table_blank {
border: $basic_border_width solid transparent; border: $basic_border_width solid transparent;
th, td { th, td {
@ -88,11 +88,11 @@ td:last-child {
} }
} }
.table__free { .table_free {
border: $basic_border_width solid transparent; border: $basic_border_width solid transparent;
} }
.table__stripe { .table_stripe {
td { td {
border-top: 0; border-top: 0;
border-bottom: 0; border-bottom: 0;
@ -103,11 +103,11 @@ td:last-child {
} }
} }
.table__fix { .table_fix {
table-layout: fixed; table-layout: fixed;
} }
// Data // Data
.table__file_simple { .table_file_simple {
@extend .width_full; @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-width: $tiny_space;
border-bottom-style: dotted; border-bottom-style: dotted;
border-color: $basic_border_color; border-color: $basic_border_color;
@ -68,19 +68,19 @@ a {
} }
} }
.a__button { .a_button {
@extend %default_button; @extend %default_button;
} }
.a__button_text { .a_button_text {
@extend %default_button; @extend %default_button;
padding: $wide_padding; padding: $wide_padding;
background-color: transparent; background-color: transparent;
color: $basic_font_color; color: $basic_font_color;
} }
.a__button_border { .a_button_border {
@extend .a__button_text; @extend .a_button_text;
border: $cell_border; border: $cell_border;
} }
@ -90,7 +90,7 @@ i, em {
font-style: italic; font-style: italic;
} }
.i__bright { .i_bright {
font-style: normal; font-style: normal;
color: $brightest_color; color: $brightest_color;
} }
@ -159,10 +159,10 @@ time {
// Code // Code
code { code {
@extend %basic_mono; @extend %basic_mono;
color: lighten($basic_font_color, 12%); color: lighten($basic_font_color, $basic_color_diff);
background-color: rgba($brightest_color,.1); background-color: rgba($brightest_color,.1);
} }
.code__solo { .code_solo {
@extend %basic_mono; @extend %basic_mono;
padding: $tiny_space $half_space; padding: $tiny_space $half_space;
color: $basic_font_color; color: $basic_font_color;
@ -177,7 +177,15 @@ samp {
} }
kbd { 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 { sub, sup {
@ -192,7 +200,7 @@ u {
mark { mark {
background-color: $alpha_color; background-color: $alpha_color;
} }
.mark__cursor { .mark_cursor {
color: $basic_highlight_color; color: $basic_highlight_color;
background-color: $darkest_color; background-color: $darkest_color;
} }
@ -213,7 +221,7 @@ bdi, bdo {
span { span {
} }
.span__solo { .span_solo {
@extend %solo; @extend %solo;
} }

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

@ -189,7 +189,7 @@
} }
.hover_back_change { .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; transition: background-color 0.2s ease-in-out;
&:hover { &:hover {
@ -201,7 +201,7 @@
@extend %full_viewport; @extend %full_viewport;
z-index: $z_heaven; z-index: $z_heaven;
background-color: transparentize($darkest_color, 0.5); 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; pointer-events: none;
} }
@ -209,27 +209,27 @@
display: flex; display: flex;
} }
.flex__wrap { .flex_wrap {
@extend .flex; @extend .flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.flex__row { .flex_row {
@extend .flex; @extend .flex;
flex-direction: column; flex-direction: column;
// align-items: flex-start; // align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
} }
.flex__child { .flex_child {
flex: 0 1 auto; flex: 0 1 auto;
} }
.flex__child_one { .flex_child_one {
flex: 1; flex: 1;
} }
.flex__child_end { .flex_child_end {
align-self: flex-end; align-self: flex-end;
} }
@ -237,7 +237,7 @@
// Colors // Colors
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
.txt_light_color { .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_highlight_color: $brightest_color !default;
$basic_action_color: $foxtrot_color !default; $basic_action_color: $foxtrot_color !default;
$basic_border_color: $basic_front_color !default; $basic_border_color: $basic_front_color !default;
// default shadow colors // default shadow colors
// $shadow_color: fade-out($medium_color, 0.5); // $shadow_color: fade-out($medium_color, 0.5);
$basic_color_diff: 12% !default;
$basic_color_list: (); $basic_color_list: ();
@each $key, $value in $color_palette { @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; $basic_padding: calc(#{$basic_space} - 3px) $basic_space !default;
$wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2) !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; $basic_border_width: $tiny_space !default;
$border_width_4: $tiny_space * 4; $border_width_4: $tiny_space * 4;
$border_width_8: $tiny_space * 8; $border_width_8: $tiny_space * 8;
@ -197,8 +198,8 @@ $basic_focus_list:
'textarea:not([disabled])', 'textarea:not([disabled])',
'*[tabindex]'; '*[tabindex]';
$basic_io_font_color: lighten($basic_font_color, 10%); $basic_io_font_color: lighten($basic_font_color, $basic_color_diff);
$basic_io_back_color: darken($brightest_color, 10%); $basic_io_back_color: darken($brightest_color, $basic_color_diff);
$basic_io_border_color: $brightest_color; $basic_io_border_color: $brightest_color;
$basic_io_border_width: $tiny_space * 2 !default; $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 // ANIMATIONS
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$basic_duration: 150ms; $basic_duration: 250ms;
$basic_timing: ease; $double_duration: 500ms;
$extended_duration: 2s;
$basic_timing: ease-out;
// HARDWARE BREAKPOINTS // HARDWARE BREAKPOINTS

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

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

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

@ -1,9 +1,12 @@
//Sections for Media Queries //Sections for Media Queries
@mixin forPhoneUp {
@media (min-width: #{$screen_tiny - 1}) { @content; } //599px
}
@mixin forPhoneOnly { @mixin forPhoneOnly {
@media (max-width: #{$screen_tiny - 1}) { @content; } //599px @media (max-width: #{$screen_tiny - 1}) { @content; } //599px
} }
@mixin forTabletPortraitUp { @mixin forTabletPortraitUp {
@media (min-width: $screen_tiny) { @content; } //600px @media (min-width: $screen_small) { @content; } //600px
} }
@mixin forTabletPortraitOnly { @mixin forTabletPortraitOnly {
@media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px @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) {}; @include goingLarge($screen_tiny) {};
} }
.query__goingSmall { .query_goingSmall {
@include goingSmall($screen_gigantic) {}; @include goingSmall($screen_gigantic) {};
} }
.query__phoneUp { .query_phoneUp {
@include forPhoneUp {}
} }
.query__phoneOnly { .query_phoneOnly {
@include forPhoneOnly {} @include forPhoneOnly {}
} }
.query__tabletPortaitOnly { .query_tabletPortaitOnly {
@include forTabletPortraitOnly { @include forTabletPortraitOnly {
} }
} }
.query__tabletPortraitUp { .query_tabletPortraitUp {
@include forTabletPortraitUp { @include forTabletPortraitUp {
} }
} }
.query__tabletLandscapeOnly { .query_tabletLandscapeOnly {
@include forTabletLandscapeOnly {} @include forTabletLandscapeOnly {}
} }
.query__tabletLandscapeUp { .query_tabletLandscapeUp {
@include forTabletLandscapeUp {} @include forTabletLandscapeUp {}
} }
.query__desktopOnly { .query_desktopOnly {
@include forDesktopOnly { @include forDesktopOnly {
} }
} }
.query__desktopUp { .query_desktopUp {
@include forDesktopUp { @include forDesktopUp {
} }
} }
.query__bigDesktopUp { .query_bigDesktopUp {
@include forBigDesktopUp {} @include forBigDesktopUp {}
} }

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

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

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

@ -1,3 +1,9 @@
.up { .up {
@include sprite($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-total-height: 64px;
$down-image: 'sprites.png'; $down-image: 'sprites.png';
$down: (32px, 0px, -32px, 0px, 32px, 32px, 64px, 64px, 'sprites.png', 'down', ); $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-name: 'up';
$up-x: 0px; $up-x: 0px;
$up-y: 0px; $up-y: 0px;
@ -34,7 +45,7 @@ $up: (0px, 0px, 0px, 0px, 32px, 64px, 64px, 64px, 'sprites.png', 'up', );
$spritesheet-width: 64px; $spritesheet-width: 64px;
$spritesheet-height: 64px; $spritesheet-height: 64px;
$spritesheet-image: 'sprites.png'; $spritesheet-image: 'sprites.png';
$spritesheet-sprites: ($down, $up, ); $spritesheet-sprites: ($down, $meta, $up, );
$spritesheet: (64px, 64px, 'sprites.png', $spritesheet-sprites, ); $spritesheet: (64px, 64px, 'sprites.png', $spritesheet-sprites, );
// The provided mixins are intended to be used with the array-like variables // 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 { ul {
@extend .overflow; @extend .overflow;
@ -30,7 +30,7 @@ nav {
} }
} }
.nav__right { .nav_right {
float: right; float: right;
margin-left: $basic_space; margin-left: $basic_space;
@ -39,7 +39,7 @@ nav {
} }
} }
.nav__separate { .nav_separate {
li { li {
position: relative; position: relative;
padding-left: $tiny_space; padding-left: $tiny_space;
@ -59,7 +59,7 @@ nav {
} }
} }
.nav__separate_right { .nav_separate_right {
float: right; float: right;
li { li {
position: relative; position: relative;
@ -81,8 +81,8 @@ nav {
} }
} }
.nav__center_old { .nav_center_old {
@extend .nav__horizontal; @extend .nav_horizontal;
float: right; float: right;
position: relative; position: relative;
left: -50%; left: -50%;
@ -94,7 +94,7 @@ nav {
} }
} }
.nav__column { .nav_column {
position: relative; position: relative;
margin: $basic_space 0; margin: $basic_space 0;
@ -103,7 +103,7 @@ nav {
margin: 0 $space_5; margin: 0 $space_5;
li { li {
@extend .flex__child; @extend .flex_child;
flex-grow: 1; flex-grow: 1;
margin: 0; margin: 0;
text-align: center; text-align: center;
@ -115,7 +115,7 @@ nav {
} }
} }
.nav__page_meta { .nav_page_meta {
position: fixed; position: fixed;
// display: table; // display: table;
// width: 3em; // width: 3em;
@ -128,13 +128,14 @@ nav {
li { li {
margin-bottom: 0; margin-bottom: 0;
line-height: 1;
} }
button { button {
width: 32px; width: 32px;
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
} }
.a__button_meta { .a_button_meta {
// display: table-cell; // display: table-cell;
display: inline-block; display: inline-block;
@ -147,12 +148,15 @@ nav {
background-color: $basic_action_color; background-color: $basic_action_color;
} }
} }
.sprite_img {
vertical-align: top;
}
} }
.header__page { .header_page {
nav { nav {
@extend .nav__horizontal; @extend .nav_horizontal;
a { a {

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

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

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

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

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

@ -7,13 +7,7 @@
{% block head %} {% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title> <title>{% block title %}{% endblock %} - HIPPIE</title>
<meta name="author" content="Interaktionsweise"> {% include "hippie/partials/head-meta.njk" %}
<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" />
<link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon"> <link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" /> <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>--> <!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
<!--Only use one of the above!--> <!--Only use one of the above!-->
<meta name="author" content="Interaktionsweise"> {% include "hippie/partials/head-meta.njk" %}
<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" />
<link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon"> <link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" /> <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
@ -33,7 +27,7 @@
{% endblock %} {% endblock %}
</head> </head>
<body id="{{ pageId }}" class="body__demo"> <body id="{{ pageId }}" class="{{ pageClass }} body_demo">
{% include "hippie/partials/page-hover.njk" %} {% include "hippie/partials/page-hover.njk" %}
<div id="root"> <div id="root">
<header id="js_head" class="header_site"> <header id="js_head" class="header_site">

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

@ -7,13 +7,7 @@
{% block head %} {% block head %}
<title>{% block title %}{% endblock %}</title> <title>{% block title %}{% endblock %}</title>
<meta name="author" content="Interaktionsweise"> {% include "hippie/partials/head-meta.njk" %}
<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" />
<link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon"> <link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" /> <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-page-meta.partial -->
<nav class="nav__page_meta"> <nav class="nav_page_meta">
<ul> <ul>
<li class="magic"> <li class="magic">
<a href="#begin" id="js_scrolltop" class="a_button_meta"> <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"> #} {# <img src="../art/up.png" alt="" width="32" height="64"> #}
</a> </a>
</li> </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> <li>
<a href="#end" id="js_scrolldown" class="a_button_meta"> <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"> #} {# <img src="../art/down.png" alt="" width="32" height="32"> #}
</a> </a>
</li> </li>

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

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