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

NOTE test commit from wsl

Browse source 
Discrepancy from atom git status
This commit is contained in:
Stephan Hagedorn 2019-03-21 20:39:53 +01:00
parent 891b4be9dc
commit cd870b1bfe
75 changed files with 15649 additions and 15649 deletions
Download patch file Download diff file Expand all files Collapse all files

120
source/code/hippie/functions.js
View file

@ -1,60 +1,60 @@
"use strict";
function setup() {
console.log('\n', hippie_brand, '\n\n');
console.info('Debug information:\n\nHTML height is', html_height, '\nBODY height is', body_height, '\nVIEW height is', view_height);
if($('#js_tph').length && full_view_hover) {
// $('body').prepend("<div id=\"js_tph\" class=\"layer__hover hover_full_view_change\"></div>");
$('#js_tph').addClass("hover_full_view_change");
}
}
// get document coordinates of the element
// function getCoords(elem) {
// let box = elem.getBoundingClientRect();
//
// return {
// top: box.top + pageYOffset,
// left: box.left + pageXOffset
// };
// }
// https://stackoverflow.com/a/488073/1444149
function Utils() {}
Utils.prototype = {
constructor: Utils,
isElementInView: function (element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
// TEST
function scrollNav() {
$('.nav a').click(function(){
//Toggle Class
$(".active").removeClass("active");
$(this).closest('li').addClass("active");
var theClass = $(this).attr("class");
$('.'+theClass).parent('li').addClass('active');
//Animate
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top - 160
}, 400);
return false;
});
$('.scrollTop a').scrollTop();
}
"use strict";
function setup() {
console.log('\n', hippie_brand, '\n\n');
console.info('Debug information:\n\nHTML height is', html_height, '\nBODY height is', body_height, '\nVIEW height is', view_height);
if($('#js_tph').length && full_view_hover) {
// $('body').prepend("<div id=\"js_tph\" class=\"layer__hover hover_full_view_change\"></div>");
$('#js_tph').addClass("hover_full_view_change");
}
}
// get document coordinates of the element
// function getCoords(elem) {
// let box = elem.getBoundingClientRect();
//
// return {
// top: box.top + pageYOffset,
// left: box.left + pageXOffset
// };
// }
// https://stackoverflow.com/a/488073/1444149
function Utils() {}
Utils.prototype = {
constructor: Utils,
isElementInView: function (element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
// TEST
function scrollNav() {
$('.nav a').click(function(){
//Toggle Class
$(".active").removeClass("active");
$(this).closest('li').addClass("active");
var theClass = $(this).attr("class");
$('.'+theClass).parent('li').addClass('active');
//Animate
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top - 160
}, 400);
return false;
});
$('.scrollTop a').scrollTop();
}

310
source/code/hippie/global.js
View file

@ -1,155 +1,155 @@
"use strict";
// DOM ready
// ------------------------------------------------------------------------------
$( document ).ready(function() {
// Setup
// ------------------------------------------------------------------------------
setup();
// Modules
// ------------------------------------------------------------------------------
// Explanation module scripts
var exp_mode = false;
// Displays explanation popup
$(".js_pop").hover(
function() {
var $this = $(this);
// if($(this).attr("emmet")){
//
// }
$(this).next(".exp_pop").show();
}, function() {
$(this).next(".exp_pop").hide();
}
).mousemove(
function(ev) {
$(this).next(".exp_pop").css({
"top": ev.pageY - $(this).next(".exp_pop").outerHeight() - 4,
"left": ev.pageX + 8
// "left": ev.pageX - $(this).offset().left + 8
});
// TODO - needs more love
// console.log(ev.pageX);
}
);
// WIP Activates layer with explanation elements
// Besser ::after oder ::before benutzen
$(".js_showmeta").click(function(e){
var $wrap, $pop;
if(exp_mode !== true){
exp_mode = true;
$(".js_pop").each(function(i, e){
if($(this).css("position") === "static") {
$(this).addClass("js_changed_pos");
$(this).css("position", "relative");
}
$pop = $(this).next(".exp_pop").detach();
$wrap = $(this).wrap("<span class=\"exp_wrap\"></span>").parent().prepend("<span class=\"exp_marker_pop\"></span>");
$wrap.after($pop);
});
} else {
$(".js_pop").each(function(i, e){
$wrap = $(this).parent(".exp_wrap");
$pop = $wrap.next(".exp_pop").detach();
$wrap.find(".exp_marker_pop").remove();
$(this).unwrap(".exp_wrap");
$(this).after($pop);
if($(this).hasClass("js_changed_pos")){
$(this).css("position", "");
if($(this).attr("style") === "") {
$(this).removeAttr("style");
}
$(this).removeClass("js_changed_pos");
}
});
exp_mode = false;
}
console.log("Explanation mode", exp_mode);
});
// WIP Scroll to top
$('.js_scrolltop').click(function(event) {
event.preventDefault();
console.log('scroll to the top');
document.documentElement.scrollTop = document.body.scrollTop = 0;
// var body = document.querySelector('body');
// // get scroll position in px
// console.log(body.scrollTop);
// // set scroll position in px
// body.scrollTop = 0;
// $('body')[0].scrollTop = 0;
// $('body').animate({scrollTop: 0}, basic_ease, function() {
// console.log('arrived at top');
// });
});
$('.js_scrolldown').click(function(event) {
event.preventDefault();
var pos = Math.max(html_height, body_height) - view_height;
console.log('scroll down to', pos);
document.documentElement.scrollTop = pos;
});
$( "#gameIcon" ).click(function(event) {
event.preventDefault();
$( this ).clone().appendTo( "#gameDetail" );
$( this ).siblings().clone().appendTo( "#gameDetail" );
$( "#gameDetail" ).removeClass( "magic" );
});
var i = 0;
$( ".pass-def dd" ).each(function() {
$( this ).find( "li" ).each(function( index ) {
if ( 0 === $( this ).children( "ul" ).length ) {
//console.log(index, ":", $( this ).text());
var tempContent = $( this ).html();
//$( this ).html( "<span class=\"list-count\"></span>" );
$( this ).html(tempContent + "<span class=\"list-count\">" + i + "</span>");
i++;
}
});
});
});
// Scroll
// ------------------------------------------------------------------------------
$( document ).scroll(function() {
// Toggle navigation elements
doc_pos_y = $( document ).scrollTop();
// console.log(doc_pos_y);
// var demo_margin = $('.header__fix');
if (doc_pos_y > scroll_y_margin) {
$('.js_scrolltop').parent().removeClass('magic');
} else {
$('.js_scrolltop').parent().addClass('magic');
}
});
"use strict";
// DOM ready
// ------------------------------------------------------------------------------
$( document ).ready(function() {
// Setup
// ------------------------------------------------------------------------------
setup();
// Modules
// ------------------------------------------------------------------------------
// Explanation module scripts
var exp_mode = false;
// Displays explanation popup
$(".js_pop").hover(
function() {
var $this = $(this);
// if($(this).attr("emmet")){
//
// }
$(this).next(".exp_pop").show();
}, function() {
$(this).next(".exp_pop").hide();
}
).mousemove(
function(ev) {
$(this).next(".exp_pop").css({
"top": ev.pageY - $(this).next(".exp_pop").outerHeight() - 4,
"left": ev.pageX + 8
// "left": ev.pageX - $(this).offset().left + 8
});
// TODO - needs more love
// console.log(ev.pageX);
}
);
// WIP Activates layer with explanation elements
// Besser ::after oder ::before benutzen
$(".js_showmeta").click(function(e){
var $wrap, $pop;
if(exp_mode !== true){
exp_mode = true;
$(".js_pop").each(function(i, e){
if($(this).css("position") === "static") {
$(this).addClass("js_changed_pos");
$(this).css("position", "relative");
}
$pop = $(this).next(".exp_pop").detach();
$wrap = $(this).wrap("<span class=\"exp_wrap\"></span>").parent().prepend("<span class=\"exp_marker_pop\"></span>");
$wrap.after($pop);
});
} else {
$(".js_pop").each(function(i, e){
$wrap = $(this).parent(".exp_wrap");
$pop = $wrap.next(".exp_pop").detach();
$wrap.find(".exp_marker_pop").remove();
$(this).unwrap(".exp_wrap");
$(this).after($pop);
if($(this).hasClass("js_changed_pos")){
$(this).css("position", "");
if($(this).attr("style") === "") {
$(this).removeAttr("style");
}
$(this).removeClass("js_changed_pos");
}
});
exp_mode = false;
}
console.log("Explanation mode", exp_mode);
});
// WIP Scroll to top
$('.js_scrolltop').click(function(event) {
event.preventDefault();
console.log('scroll to the top');
document.documentElement.scrollTop = document.body.scrollTop = 0;
// var body = document.querySelector('body');
// // get scroll position in px
// console.log(body.scrollTop);
// // set scroll position in px
// body.scrollTop = 0;
// $('body')[0].scrollTop = 0;
// $('body').animate({scrollTop: 0}, basic_ease, function() {
// console.log('arrived at top');
// });
});
$('.js_scrolldown').click(function(event) {
event.preventDefault();
var pos = Math.max(html_height, body_height) - view_height;
console.log('scroll down to', pos);
document.documentElement.scrollTop = pos;
});
$( "#gameIcon" ).click(function(event) {
event.preventDefault();
$( this ).clone().appendTo( "#gameDetail" );
$( this ).siblings().clone().appendTo( "#gameDetail" );
$( "#gameDetail" ).removeClass( "magic" );
});
var i = 0;
$( ".pass-def dd" ).each(function() {
$( this ).find( "li" ).each(function( index ) {
if ( 0 === $( this ).children( "ul" ).length ) {
//console.log(index, ":", $( this ).text());
var tempContent = $( this ).html();
//$( this ).html( "<span class=\"list-count\"></span>" );
$( this ).html(tempContent + "<span class=\"list-count\">" + i + "</span>");
i++;
}
});
});
});
// Scroll
// ------------------------------------------------------------------------------
$( document ).scroll(function() {
// Toggle navigation elements
doc_pos_y = $( document ).scrollTop();
// console.log(doc_pos_y);
// var demo_margin = $('.header__fix');
if (doc_pos_y > scroll_y_margin) {
$('.js_scrolltop').parent().removeClass('magic');
} else {
$('.js_scrolltop').parent().addClass('magic');
}
});

32
source/code/hippie/variables.js
View file

@ -1,16 +1,16 @@
var hippie_brand = "|-| | |^ |^ | [- ";
var view_width = Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0);
var view_height = Math.max(document.documentElement.clientHeight, window.innerHeight, 0);
var html_height = Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0);
var body_height = Math.max(document.body.offsetHeight, document.body.clientHeight, 0);
var body_width = Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0);
var full_view_hover = true;
var doc_pos_y = 0;
var basic_ease = 600;
var scroll_y_margin = view_height;
var onerow_alphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
var onerow_digits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";
var hippie_brand = "|-| | |^ |^ | [- ";
var view_width = Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0);
var view_height = Math.max(document.documentElement.clientHeight, window.innerHeight, 0);
var html_height = Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0);
var body_height = Math.max(document.body.offsetHeight, document.body.clientHeight, 0);
var body_width = Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0);
var full_view_hover = true;
var doc_pos_y = 0;
var basic_ease = 600;
var scroll_y_margin = view_height;
var onerow_alphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
var onerow_digits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";

44
source/data/demo.json
View file

@ -1,22 +1,22 @@
{
"demo": [
{
"demo1": "1",
"demo2": "2"
},
{
"demo1": "1",
"demo2": "2"
},
{
"demo1": "1",
"demo2": "2"
}
],
"test": [
{
"test1": "3",
"test2": "4"
}
]
}
{
"demo": [
{
"demo1": "1",
"demo2": "2"
},
{
"demo1": "1",
"demo2": "2"
},
{
"demo1": "1",
"demo2": "2"
}
],
"test": [
{
"test1": "3",
"test2": "4"
}
]
}

104
source/screens/demo.njk
View file

@ -1,52 +1,52 @@
<!-- page-index.njk -->
{% set pageId = "index" %}
{% set pageClass = "height_full" %}
{% extends "demo/_default.njk" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<div class="wrap">
<div class="hello">
<h2>This is {{hippie.brand | upper}}</h2>
<p>You can start using it by replacing this file with your own index page.</p>
<p>To do this you need to 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 <i>demo</i> folder contains an overview of all elements and also examples for style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
<h3>Overview</h3>
<nav>
<ul class="list_link">
<!-- Loops through "demoadditionallinks" array -->
{% for link in data.demoadditionallinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %}
</ul>
</nav>
<div class="pos_rel">
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>C(")(")</pre>
<h3>Demo Pages</h3>
</div>
<ul class="list_link">
<!-- Loops through "demo-links" array -->
{% for link in data.demolinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %}
</ul>
</div>
</div>
{% endblock %}
{% block script %}
{{ super() }}
<script src="./js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
});
</script>
{% endblock %}
<!-- page-index.njk -->
{% set pageId = "index" %}
{% set pageClass = "height_full" %}
{% extends "demo/_default.njk" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<div class="wrap">
<div class="hello">
<h2>This is {{hippie.brand | upper}}</h2>
<p>You can start using it by replacing this file with your own index page.</p>
<p>To do this you need to 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 <i>demo</i> folder contains an overview of all elements and also examples for style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
<h3>Overview</h3>
<nav>
<ul class="list_link">
<!-- Loops through "demoadditionallinks" array -->
{% for link in data.demoadditionallinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %}
</ul>
</nav>
<div class="pos_rel">
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>C(")(")</pre>
<h3>Demo Pages</h3>
</div>
<ul class="list_link">
<!-- Loops through "demo-links" array -->
{% for link in data.demolinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %}
</ul>
</div>
</div>
{% endblock %}
{% block script %}
{{ super() }}
<script src="./js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
});
</script>
{% endblock %}

30
source/screens/demo/blank.njk
View file

@ -1,15 +1,15 @@
<!-- page-blank.njk -->
{% set pageId = "blank" %}
{% set pageClass = "height_full" %}
{% extends "demo/_default.njk" %}
{% block title %}Blank{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
{% endblock %}
<!-- page-blank.njk -->
{% set pageId = "blank" %}
{% set pageClass = "height_full" %}
{% extends "demo/_default.njk" %}
{% block title %}Blank{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
{% endblock %}

162
source/screens/demo/elements.njk
View file

@ -1,81 +1,81 @@
<!-- page-elements.njk -->
{% set pageId = "elements" %}
{% set pageClass = "" %}
{% extends "demo/_extended.njk" %}
{% block title %}Elements{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<div class="temp_layer">
<!-- <div class="exp_overlay_btn exp_help_btn">
<span class="span_solo">?</span>
</div> -->
{% include "hippie/partials/_body_nav.njk" %}
</div>
<div id="begin" class="">
<section class="sec_main_center">
<header class="header_txt">
<h1>Medienformat Abfragen</h1>
</header>
<article>
<div class="demo__query_example">Umbruch bei&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>Übersicht aller Elemente</h1>
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p>
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML Dokument als Emmet Syntax dargestellt.</p>
</header>
<article>
<h1>Bereiche</h1>
<p>Elemente:</p>
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
<h2>&lt;body&gt;</h2>
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
<h2>&lt;article&gt;</h2>
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
<h2>&lt;section&gt;</h2>
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
<h4>Varianten</h4>
<pre class="pre_code"><code>section.sec_main_center</code></pre>
<pre class="pre_code"><code>section.sec_main_status</code></pre>
<h2>&lt;h3&gt;</h2>
<h2>&lt;h4&gt;</h2>
</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/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
// jq-sticky-anything
$('#js_demo_fix').stickThis({
pushup: '#js_demo_stop'
});
});
</script>
{% endblock %}
<!-- page-elements.njk -->
{% set pageId = "elements" %}
{% set pageClass = "" %}
{% extends "demo/_extended.njk" %}
{% block title %}Elements{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<div class="temp_layer">
<!-- <div class="exp_overlay_btn exp_help_btn">
<span class="span_solo">?</span>
</div> -->
{% include "hippie/partials/_body_nav.njk" %}
</div>
<div id="begin" class="">
<section class="sec_main_center">
<header class="header_txt">
<h1>Medienformat Abfragen</h1>
</header>
<article>
<div class="demo__query_example">Umbruch bei&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>Übersicht aller Elemente</h1>
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p>
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML Dokument als Emmet Syntax dargestellt.</p>
</header>
<article>
<h1>Bereiche</h1>
<p>Elemente:</p>
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
<h2>&lt;body&gt;</h2>
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
<h2>&lt;article&gt;</h2>
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
<h2>&lt;section&gt;</h2>
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
<h4>Varianten</h4>
<pre class="pre_code"><code>section.sec_main_center</code></pre>
<pre class="pre_code"><code>section.sec_main_status</code></pre>
<h2>&lt;h3&gt;</h2>
<h2>&lt;h4&gt;</h2>
</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/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
// jq-sticky-anything
$('#js_demo_fix').stickThis({
pushup: '#js_demo_stop'
});
});
</script>
{% endblock %}

46
source/screens/demo/error/304.njk
View file

@ -1,23 +1,23 @@
<!-- page-error-404.njk -->
{% set pageId = "304" %}
{% set pageClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Umleitung</h3>
<p>Unverändert <dfn>Not Modified</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">
<p>Der Inhalt der angeforderten Ressource hat sich seit der letzten Abfrage des Clients nicht verändert und wird deshalb nicht übertragen. Zu den Einzelheiten siehe <a href="https://de.wikipedia.org/wiki/Browser-Cache#Versionsvergleich" title="Browser-Cache">Browser-Cache-Versionsvergleich</a>.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}
<!-- page-error-404.njk -->
{% set pageId = "304" %}
{% set pageClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Umleitung</h3>
<p>Unverändert <dfn>Not Modified</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">
<p>Der Inhalt der angeforderten Ressource hat sich seit der letzten Abfrage des Clients nicht verändert und wird deshalb nicht übertragen. Zu den Einzelheiten siehe <a href="https://de.wikipedia.org/wiki/Browser-Cache#Versionsvergleich" title="Browser-Cache">Browser-Cache-Versionsvergleich</a>.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}

46
source/screens/demo/error/400.njk
View file

@ -1,23 +1,23 @@
<!-- page-error-404.njk -->
{% set pageId = "400" %}
{% set pageClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Client-Fehler</h3>
<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<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>
</main>
{{ super() }}
{% endblock %}
<!-- page-error-404.njk -->
{% set pageId = "400" %}
{% set pageClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Client-Fehler</h3>
<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<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>
</main>
{{ super() }}
{% endblock %}

46
source/screens/demo/error/403.njk
View file

@ -1,23 +1,23 @@
<!-- page-error-404.njk -->
{% set pageId = "403" %}
{% set pageClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Client-Fehler</h3>
<p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<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>
</main>
{{ super() }}
{% endblock %}
<!-- page-error-404.njk -->
{% set pageId = "403" %}
{% set pageClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</h1>
<h3>Client-Fehler</h3>
<p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<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>
</main>
{{ super() }}
{% endblock %}

46
source/screens/demo/error/404.njk
View file

@ -1,23 +1,23 @@
<!-- page-error-404.njk -->
{% set pageId = "404" %}
{% set pageClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</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>
{{ super() }}
{% endblock %}
<!-- page-error-404.njk -->
{% set pageId = "404" %}
{% set pageClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</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>
{{ super() }}
{% endblock %}

46
source/screens/demo/error/500.njk
View file

@ -1,23 +1,23 @@
<!-- page-error-500.njk -->
{% set pageId = "500" %}
{% set pageClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</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>
{{ super() }}
{% endblock %}
<!-- page-error-500.njk -->
{% set pageId = "500" %}
{% set pageClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<main class="main_site">
<h1>{{ pageId }}</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>
{{ super() }}
{% endblock %}

488
source/screens/demo/examples.njk
View file

@ -1,244 +1,244 @@
<!-- page-elements.njk -->
{% set pageId = "examples" %}
{% set pageClass = "" %}
{% extends "demo/_extended.njk" %}
{% block title %}Examples{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<div class="temp_layer">
<!-- <div class="exp_overlay_btn exp_help_btn">
<span class="span_solo">?</span>
</div> -->
{% include "hippie/partials/_body_nav.njk" %}
</div>
<div id="begin" class="">
<section class="sec_main_center">
<header class="header_txt">
<h1>Sammlung formatierter Elemente</h1>
<p>Die Elemente werden fortlaufend komplexer</p>
</header>
<article>
<h2>&lt;h3&gt;</h2>
<h4>Beispiele</h4>
<pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
<p>Mit normalem Textabsatz</p>
<h2>&lt;h4&gt;</h2>
<h4>Beispiele</h4>
<pre class="pre_code"><code>a>h4</code></pre>
<a href=""><h4>Überschrift als Block-Verweis</h4></a>
<h2>&lt;section&gt;</h2>
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
<section class="overflow">
<div class="float_space_left demo__avatar"><img src="../art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div>
<p>Vorname Name<br>Straße 1, 01234 Stadt</p><p>+49 (0)123 1337 0000<br><a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a></p>
</section>
<pre class="pre_code"><code>div.space_left_fourth</code></pre>
<div class="space_left_fourth">
<hr/>
<p>Eingerückter Inhalt</p>
<hr/>
</div>
<pre class="pre_code"><code>nav>ul>(li>a.a_button{Punkt $})*4nav>ul>(li>a.a_button_border{Stufe $})*4</code></pre>
<div class="overflow">
<nav class="float_space_left">
<ul>
<li><a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a></li>
<li><a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a></li>
<li><a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a></li>
<li><a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a></li>
</ul>
</nav>
<nav>
<ul>
<li><a href="" class="a_button_border">Stufe 1</a></li>
<li><a href="" class="a_button_border">Stufe 2</a></li>
<li><a href="" class="a_button_border">Stufe 3</a></li>
<li><a href="" class="a_button_border">Stufe 4</a></li>
</ul>
</nav>
</div>
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{Abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{Typ $})*4</code></pre>
<nav class="nav_horizontal">
<ul>
<li><a href="" class="a_button">Abschnitt 1</a></li>
<li><a href="" class="a_button">Abschnitt 2</a></li>
<li><a href="" class="a_button">Abschnitt 3</a></li>
<li><a href="" class="a_button">Abschnitt 4</a></li>
</ul>
</nav>
<div class="overflow">
<nav class="nav_center_old">
<ul>
<li><a href="" class="a_button">Typ 1</a></li>
<li><a href="" class="a_button">Typ 2</a></li>
<li><a href="" class="a_button">Typ 3</a></li>
<li><a href="" class="a_button">Typ 4</a></li>
</ul>
</nav>
</div>
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{Nav $})*4^+nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
<header class="header_page demo__header header_fancy">
<h1>Aufmacher</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
<nav class="nav_separate_right">
<ul>
<li><a href="" class="a_button">Mensch</a></li>
<li><a href="" class="a_button">Pflanze</a></li>
</ul>
</nav>
<nav class="nav_right">
<ul>
<li><a href="" class="a_button">Blau</a></li>
<li><a href="" class="a_button">Gelb</a></li>
</ul>
</nav>
</header>
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
<div class="box_space 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>
<form action="" method="get">
<p class="label">
Show me a <select name="F">
<option value="0"> Plain list</option>
<option value="1" selected="selected"> Fancy list</option>
<option value="2"> Table list</option>
</select>
Sorted by <select name="C">
<option value="N" selected="selected"> Name</option>
<option value="M"> Date Modified</option>
<option value="S"> Size</option>
<option value="D"> Description</option>
</select>
<select name="O">
<option value="A" selected="selected"> Ascending</option>
<option value="D"> Descending</option>
</select>
<select name="V">
<option value="0" selected="selected"> in Normal order</option>
<option value="1"> in Version order</option>
</select>
Matching <input type="text" name="P" value="*" />
<input type="submit" name="X" value="Go" />
</p>
</form>
<h2>Gruppierung</h2>
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
<ul class="list_link">
<li><a href=""><img src="../art/letter.gif" alt="">name@domain.tld</a></li>
<li><a href="">Work</a></li>
<li><a href="">Projects</a></li>
</ul>
<h2>Tabellen</h2>
<pre class="pre_code"><code>table.table_link>thead>tr>th{&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="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>
</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/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
// jq-sticky-anything
$('#js_demo_fix').stickThis({
pushup: '#js_demo_stop'
});
});
</script>
{% endblock %}
<!-- page-elements.njk -->
{% set pageId = "examples" %}
{% set pageClass = "" %}
{% extends "demo/_extended.njk" %}
{% block title %}Examples{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<div class="temp_layer">
<!-- <div class="exp_overlay_btn exp_help_btn">
<span class="span_solo">?</span>
</div> -->
{% include "hippie/partials/_body_nav.njk" %}
</div>
<div id="begin" class="">
<section class="sec_main_center">
<header class="header_txt">
<h1>Sammlung formatierter Elemente</h1>
<p>Die Elemente werden fortlaufend komplexer</p>
</header>
<article>
<h2>&lt;h3&gt;</h2>
<h4>Beispiele</h4>
<pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
<p>Mit normalem Textabsatz</p>
<h2>&lt;h4&gt;</h2>
<h4>Beispiele</h4>
<pre class="pre_code"><code>a>h4</code></pre>
<a href=""><h4>Überschrift als Block-Verweis</h4></a>
<h2>&lt;section&gt;</h2>
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
<section class="overflow">
<div class="float_space_left demo__avatar"><img src="../art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div>
<p>Vorname Name<br>Straße 1, 01234 Stadt</p><p>+49 (0)123 1337 0000<br><a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a></p>
</section>
<pre class="pre_code"><code>div.space_left_fourth</code></pre>
<div class="space_left_fourth">
<hr/>
<p>Eingerückter Inhalt</p>
<hr/>
</div>
<pre class="pre_code"><code>nav>ul>(li>a.a_button{Punkt $})*4nav>ul>(li>a.a_button_border{Stufe $})*4</code></pre>
<div class="overflow">
<nav class="float_space_left">
<ul>
<li><a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a></li>
<li><a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a></li>
<li><a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a></li>
<li><a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a></li>
</ul>
</nav>
<nav>
<ul>
<li><a href="" class="a_button_border">Stufe 1</a></li>
<li><a href="" class="a_button_border">Stufe 2</a></li>
<li><a href="" class="a_button_border">Stufe 3</a></li>
<li><a href="" class="a_button_border">Stufe 4</a></li>
</ul>
</nav>
</div>
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{Abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{Typ $})*4</code></pre>
<nav class="nav_horizontal">
<ul>
<li><a href="" class="a_button">Abschnitt 1</a></li>
<li><a href="" class="a_button">Abschnitt 2</a></li>
<li><a href="" class="a_button">Abschnitt 3</a></li>
<li><a href="" class="a_button">Abschnitt 4</a></li>
</ul>
</nav>
<div class="overflow">
<nav class="nav_center_old">
<ul>
<li><a href="" class="a_button">Typ 1</a></li>
<li><a href="" class="a_button">Typ 2</a></li>
<li><a href="" class="a_button">Typ 3</a></li>
<li><a href="" class="a_button">Typ 4</a></li>
</ul>
</nav>
</div>
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{Nav $})*4^+nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
<header class="header_page demo__header header_fancy">
<h1>Aufmacher</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
<nav class="nav_separate_right">
<ul>
<li><a href="" class="a_button">Mensch</a></li>
<li><a href="" class="a_button">Pflanze</a></li>
</ul>
</nav>
<nav class="nav_right">
<ul>
<li><a href="" class="a_button">Blau</a></li>
<li><a href="" class="a_button">Gelb</a></li>
</ul>
</nav>
</header>
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
<div class="box_space 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>
<form action="" method="get">
<p class="label">
Show me a <select name="F">
<option value="0"> Plain list</option>
<option value="1" selected="selected"> Fancy list</option>
<option value="2"> Table list</option>
</select>
Sorted by <select name="C">
<option value="N" selected="selected"> Name</option>
<option value="M"> Date Modified</option>
<option value="S"> Size</option>
<option value="D"> Description</option>
</select>
<select name="O">
<option value="A" selected="selected"> Ascending</option>
<option value="D"> Descending</option>
</select>
<select name="V">
<option value="0" selected="selected"> in Normal order</option>
<option value="1"> in Version order</option>
</select>
Matching <input type="text" name="P" value="*" />
<input type="submit" name="X" value="Go" />
</p>
</form>
<h2>Gruppierung</h2>
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
<ul class="list_link">
<li><a href=""><img src="../art/letter.gif" alt="">name@domain.tld</a></li>
<li><a href="">Work</a></li>
<li><a href="">Projects</a></li>
</ul>
<h2>Tabellen</h2>
<pre class="pre_code"><code>table.table_link>thead>tr>th{&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="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>
</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/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
// jq-sticky-anything
$('#js_demo_fix').stickThis({
pushup: '#js_demo_stop'
});
});
</script>
{% endblock %}

1186
source/screens/demo/intro.njk
View file

File diff suppressed because it is too large Load diff

34
source/screens/demo/maintenance.njk
View file

@ -1,17 +1,17 @@
<!-- page-maintenance.njk -->
{% set pageId = "blank" %}
{% set pageClass = "height_full" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}Maintenance{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<div id="root" class="overflow">
<h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
</div>
{% endblock %}
<!-- page-maintenance.njk -->
{% set pageId = "blank" %}
{% set pageClass = "height_full" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}Maintenance{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<div id="root" class="overflow">
<h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
</div>
{% endblock %}

292
source/screens/demo/os.njk
View file

@ -1,146 +1,146 @@
<!-- page-os.njk -->
{% set pageId = "os" %}
{% set pageClass = "" %}
{% extends "demo/_extended.njk" %}
{% block title %}OS{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<div class="height_full">
<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>
</div>
<div class="flex">
<div class="flex_child">
<!-- (nav>ul.list_data>(li>a>img+p{Punkt $})*6)*2 -->
<nav>
<ul class="list_files">
<li><a href="">
<img src="" alt="">
<p>Punkt 1</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 2</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 3</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 4</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 5</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 6</p>
</a></li>
</ul>
</nav>
<nav>
<ul class="list_files">
<li><a href="">
<img src="" alt="">
<p>Punkt 1</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 2</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 3</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 4</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 5</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 6</p>
</a></li>
</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">
<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">
<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">
<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">
<p>Dateiname 4</p>
<p>Auszeichnung 4</p>
</div>
</div>
</div>
<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>
</tr>
<tr>
<td><img src="" alt=""></td>
<td>Objektname 2</td>
<td class="cell_file_path">Objektpfad 2</td>
</tr>
</table>
</div>
<div class="flex_child">
<p>Status</p>
</div>
</div>
</div>
</div>
{% endblock %}
{% block script %}
{{ super() }}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
});
</script>
{% endblock %}
<!-- page-os.njk -->
{% set pageId = "os" %}
{% set pageClass = "" %}
{% extends "demo/_extended.njk" %}
{% block title %}OS{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block main %}
<div class="height_full">
<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>
</div>
<div class="flex">
<div class="flex_child">
<!-- (nav>ul.list_data>(li>a>img+p{Punkt $})*6)*2 -->
<nav>
<ul class="list_files">
<li><a href="">
<img src="" alt="">
<p>Punkt 1</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 2</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 3</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 4</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 5</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 6</p>
</a></li>
</ul>
</nav>
<nav>
<ul class="list_files">
<li><a href="">
<img src="" alt="">
<p>Punkt 1</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 2</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 3</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 4</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 5</p>
</a></li>
<li><a href="">
<img src="" alt="">
<p>Punkt 6</p>
</a></li>
</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">
<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">
<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">
<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">
<p>Dateiname 4</p>
<p>Auszeichnung 4</p>
</div>
</div>
</div>
<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>
</tr>
<tr>
<td><img src="" alt=""></td>
<td>Objektname 2</td>
<td class="cell_file_path">Objektpfad 2</td>
</tr>
</table>
</div>
<div class="flex_child">
<p>Status</p>
</div>
</div>
</div>
</div>
{% endblock %}
{% block script %}
{{ super() }}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
});
</script>
{% endblock %}

188
source/screens/demo/tests.njk
View file

@ -1,94 +1,94 @@
<!-- page-tests.njk -->
{% set pageId = "tests" %}
{% set pageClass = "height_full" %}
{% extends "demo/_default.njk" %}
{% import "demo/macros/_nav.njk" as nav %}
{% block title %}Tests{% endblock %}
{% block head %}
{{ super() }}
<style>
#error {
border: 1px solid #FFFF66;
background-color: #FFFFCC;
display: inline-block;
margin-left: 10px;
padding: 3px;
display: none;
}
</style>
{% endblock %}
{% block body %}
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
<form action="">
<input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span>
</form>
<p>Navigation</p>
{{ nav.main(data.demoadditionallinks, 'Tests') }}
{% endblock %}
{% block script %}
{{ super() }}
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
console.log('HIPPIE Tests');
});
function capLock(e){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
document.getElementById('divMayus').style.visibility = 'visible';
else
document.getElementById('divMayus').style.visibility = 'hidden';
}
function capsDetect() {
var body = document.getElementsByTagName('body')[0];
var isShiftPressed = false;
var isCapsOn = false;
var capsWarning = document.getElementById('error');
body.addEventListener('keydown', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode === 16) {
isShiftPressed = true;
}
});
body.addEventListener('keyup', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode === 16) {
isShiftPressed = false;
}
if (keyCode === 20) {
if (isCapsOn) {
isCapsOn = false;
capsWarning.style.display = 'none';
} else {
isCapsOn = true;
capsWarning.style.display = 'inline-block';
}
}
});
body.addEventListener('keypress', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode <= 40)
return;
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
isCapsOn = true;
capsWarning.style.display = 'inline-block';
} else {
capsWarning.style.display = 'none';
}
});
}
capsDetect();
</script>
{% endblock %}
<!-- page-tests.njk -->
{% set pageId = "tests" %}
{% set pageClass = "height_full" %}
{% extends "demo/_default.njk" %}
{% import "demo/macros/_nav.njk" as nav %}
{% block title %}Tests{% endblock %}
{% block head %}
{{ super() }}
<style>
#error {
border: 1px solid #FFFF66;
background-color: #FFFFCC;
display: inline-block;
margin-left: 10px;
padding: 3px;
display: none;
}
</style>
{% endblock %}
{% block body %}
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
<form action="">
<input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span>
</form>
<p>Navigation</p>
{{ nav.main(data.demoadditionallinks, 'Tests') }}
{% endblock %}
{% block script %}
{{ super() }}
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
console.log('HIPPIE Tests');
});
function capLock(e){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
document.getElementById('divMayus').style.visibility = 'visible';
else
document.getElementById('divMayus').style.visibility = 'hidden';
}
function capsDetect() {
var body = document.getElementsByTagName('body')[0];
var isShiftPressed = false;
var isCapsOn = false;
var capsWarning = document.getElementById('error');
body.addEventListener('keydown', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode === 16) {
isShiftPressed = true;
}
});
body.addEventListener('keyup', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode === 16) {
isShiftPressed = false;
}
if (keyCode === 20) {
if (isCapsOn) {
isCapsOn = false;
capsWarning.style.display = 'none';
} else {
isCapsOn = true;
capsWarning.style.display = 'inline-block';
}
}
});
body.addEventListener('keypress', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode <= 40)
return;
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
isCapsOn = true;
capsWarning.style.display = 'inline-block';
} else {
capsWarning.style.display = 'none';
}
});
}
capsDetect();
</script>
{% endblock %}

12
source/style/_demo_config.scss
View file

@ -1,6 +1,6 @@
// Override for configuration file
// All variables setup with !default in global/_config.scss can be used
// ------------------------------------------------------------------------------
// $color_back_basic: beige;
// $color_link_basic: crimson;
// Override for configuration file
// All variables setup with !default in global/_config.scss can be used
// ------------------------------------------------------------------------------
// $color_back_basic: beige;
// $color_link_basic: crimson;

28
source/style/demo.scss
View file

@ -1,14 +1,14 @@
// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss
// Then import your config and hippie
// NOTE // No css rules allowed in here
// ------------------------------------------------------------------------------
@import "demo_config";
@import "hippie/hippie";
// Additional Modules and variables
// in dependency to other basic styles
// could be defined here
// -----------------------------------------------------------------------------
@import "modules/demo/demo_module";
// @import "modules/YOUR-MODULE/YOUR-FILES";
// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss
// Then import your config and hippie
// NOTE // No css rules allowed in here
// ------------------------------------------------------------------------------
@import "demo_config";
@import "hippie/hippie";
// Additional Modules and variables
// in dependency to other basic styles
// could be defined here
// -----------------------------------------------------------------------------
@import "modules/demo/demo_module";
// @import "modules/YOUR-MODULE/YOUR-FILES";

28
source/style/demo_basic.scss
View file

@ -1,14 +1,14 @@
// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss
// Then import your config and hippie
// NOTE // No css rules allowed in here
// ------------------------------------------------------------------------------
@import "demo_config";
@import "hippie/basic";
// Additional Modules and variables
// in dependency to other basic styles
// could be defined here
// -----------------------------------------------------------------------------
@import "modules/demo/demo_module";
// @import "modules/YOUR-MODULE/YOUR-FILES";
// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss
// Then import your config and hippie
// NOTE // No css rules allowed in here
// ------------------------------------------------------------------------------
@import "demo_config";
@import "hippie/basic";
// Additional Modules and variables
// in dependency to other basic styles
// could be defined here
// -----------------------------------------------------------------------------
@import "modules/demo/demo_module";
// @import "modules/YOUR-MODULE/YOUR-FILES";

46
source/style/hippie/_abovethefold.scss
View file

@ -1,23 +1,23 @@
/*
* # TABLE OF CONTENTS
*
* - Reset
* - Priority CSS Rules
*
*/
// Reset
// Use a file outside of hippie i.e. vendor/normalize.css
// -----------------------------------------------------------------------------
// @import "vendor/normalize.css";
/*
* # NOTE
*
* CSS rules for content which is presented immediately
* to the screen and needs priority loading
*
*/
/*
* # TABLE OF CONTENTS
*
* - Reset
* - Priority CSS Rules
*
*/
// Reset
// Use a file outside of hippie i.e. vendor/normalize.css
// -----------------------------------------------------------------------------
// @import "vendor/normalize.css";
/*
* # NOTE
*
* CSS rules for content which is presented immediately
* to the screen and needs priority loading
*
*/

66
source/style/hippie/_hippie.scss
View file

@ -1,33 +1,33 @@
/*
* # TABLE OF CONTENTS
*
* - Reset
* - Global functions and mixins
* - Configuration
* - Special modules
* - Basic styles
* - Common
* - Typography
*
* - Sections
* - Grouping
* - Textlevel
* - Embedded
* - Tables
* - Interactive
* - Modules
- Breakpoint
- Tables
- Maintenance
*
*/
@import "basic";
// Additional Modules and variables
// in dependency to other basic styles
// -----------------------------------------------------------------------------
@import "modules/navigation/nav_module";
@import "modules/card/card_module";
@import "modules/editor/editor_module";
@import "modules/explanation/explanation_module";
@import "modules/print/print_module";
/*
* # TABLE OF CONTENTS
*
* - Reset
* - Global functions and mixins
* - Configuration
* - Special modules
* - Basic styles
* - Common
* - Typography
*
* - Sections
* - Grouping
* - Textlevel
* - Embedded
* - Tables
* - Interactive
* - Modules
- Breakpoint
- Tables
- Maintenance
*
*/
@import "basic";
// Additional Modules and variables
// in dependency to other basic styles
// -----------------------------------------------------------------------------
@import "modules/navigation/nav_module";
@import "modules/card/card_module";
@import "modules/editor/editor_module";
@import "modules/explanation/explanation_module";
@import "modules/print/print_module";

128
source/style/hippie/elements/_embedded.scss
View file

@ -1,64 +1,64 @@
// Embedded content
// -----------------------------------------------------------------------------
// picture
// source
// img
// iframe
// embed
// object
// param
// video
// audio
// track
// map
// area
picture {
}
source {
}
img {
vertical-align: top;
}
iframe {
}
embed {
}
object {
}
param {
}
video {
}
audio {
}
track {
}
map {
}
area {
}
// Embedded content
// -----------------------------------------------------------------------------
// picture
// source
// img
// iframe
// embed
// object
// param
// video
// audio
// track
// map
// area
picture {
}
source {
}
img {
vertical-align: top;
}
iframe {
}
embed {
}
object {
}
param {
}
video {
}
audio {
}
track {
}
map {
}
area {
}

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

@ -1,330 +1,330 @@
// Grouping content
// -----------------------------------------------------------------------------
// p
// address
// hr
// pre
// blockquote
// ol
// ul
// li
// dl
// dt
// dd
// figure
// figcaption
// main
// div
// Paragraph
// -----------------------------------------------------------------------------
p {
@extend %basic;
margin-top: $space_basic;
margin-bottom: $space_basic;
code {
padding: $space_tiny $space_half;
font-size: 1em;
line-height: 1;
}
}
.column_line {
column-rule: $border_basic;
}
.column_2, .column_3 {
@extend p;
}
.column_2 {
column-count: 2;
column-gap: $space_small;
}
.column_3 {
column-count: 3;
column-gap: $space_medium;
}
// Address
// -----------------------------------------------------------------------------
address {
// @extend %basic;
margin-top: $space_double;
margin-bottom: $space_double;
}
// Line
// -----------------------------------------------------------------------------
hr {
margin-top: $space_small;
margin-bottom: $space_small;
border-width: $width_border_basic 0 0;
border-style: solid;
border-color: $color_border_basic;
}
.hr_hidden {
@extend hr;
border-color: transparent;
}
.hr_dotted {
@extend hr;
border-style: dotted;
}
// Preformat
// -----------------------------------------------------------------------------
pre {
@extend %basic_mono;
white-space: pre-wrap;
}
.pre_code {
overflow-x: auto;
border-color: darken($color_back_basic, $color_diff_tiny);
border-style: dotted;
border-width: 0 0 0 $width_border_4;
border-radius: $radius_basic;
padding: $space_basic;
background-color: lighten($color_back_basic, $color_diff_tiny);
code {
background-color: transparent;
}
}
// Quote
// -----------------------------------------------------------------------------
blockquote {
margin: $space_basic 0;
padding-right: $indent_basic;
padding-left: $indent_basic;
}
.quote_mark {
p::before {
content: "\201E \0020";
}
p::after {
content: "\0020 \201C";
}
.quote_source {
&::before, &::after {
content: "";
}
}
}
// List
// -----------------------------------------------------------------------------
dl, ul, ol {
margin: $space_double 0;
}
ul, ol {
padding-left: $indent_basic;
}
dl {
margin-left: $indent_basic;
}
li, dt, dd {
@extend %basic;
}
dd, .list_basic li {
margin-bottom: $space_basic;
}
dd {
margin-left: $indent_basic;
}
ul {
li {
list-style: square;
}
}
.list_dash {
li {
list-style: none;
position: relative;
&::before {
content: "_";
position: absolute;
left: -1em;
}
}
}
.list_link {
li {
margin-bottom: $space_tiny * 2;
text-transform: uppercase;
a {
display: block;
padding: $padding_basic;
color: $color_text_basic;
img {
margin-right: $space_basic;
padding-bottom: 0.2em;
vertical-align: text-bottom;
}
&:active,
&:focus,
&:hover {
background-color: $color_action_basic;
color: $color_highlight_basic;
}
}
}
}
.list_horizontal {
overflow: auto;
li {
@extend .float_space_left;
}
}
// Embedded
// -----------------------------------------------------------------------------
figure {
margin: $space_double $indent_basic;
}
figcaption {
@extend %basic;
color: $color_darker;
}
// Main content
// -----------------------------------------------------------------------------
main {
}
// Div
// -----------------------------------------------------------------------------
div {
}
.div_info {
padding: $space_double $indent_basic;
border-right: $space_basic solid rgba($echo_color, 0.6);
background-color: rgba($echo_color, 0.1) !important;
}
.box_space {
position: relative;
width: 100%;
}
.box_cube {
float: left;
display: table;
width: $space_medium;
text-align: center;
vertical-align: middle;
span {
display: table-cell;
}
}
.box_placeholder {
width: 100%;
height: $space_medium;
border: $width_border_4 solid transparentize($alpha_color, 0.1);
border-radius: $radius_basic;
background-color: transparentize($alpha_color, 0.2);
}
.box_placeholder_bkg {
width: 100%;
height: $space_medium * 2;
border: $width_border_4 solid transparentize($color_front_basic, 0.1);
border-radius: $radius_basic;
padding: $space_basic;
/*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='%23FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='%23FFF' stroke-width='.5'/></svg>") no-repeat;
background-color: transparentize($color_front_basic, 0.1);
}
.box_file_tile {
@extend .float_space_left;
}
// Flex
.flex {
display: flex;
}
.flex_wrap {
@extend .flex;
flex-wrap: wrap;
}
.flex_row {
@extend .flex;
flex-direction: column;
// align-items: flex-start;
justify-content: flex-start;
}
.flex_child {
flex: 0 1 auto;
}
.flex_child_one {
flex: 1;
}
.flex_child_end {
align-self: flex-end;
}
.flex_column_wrap {
@extend .flex_wrap;
.flex_column {
@extend .flex_child;
flex-grow: 1;
}
}
// Grid
.grid {
display: grid;
grid-gap: $space_basic;
& > input,
& > select,
& > textarea {
margin: 0;
}
& > label {
margin: $width_border_io;
padding: $space_half;
}
}
.grid_column_2 {
grid-template-columns: max-content max-content;
}
.grid_column_4 {
grid-template-columns: max-content max-content max-content max-content;
}
// Sprites
.sprite_img {
display: inline-block;
}
// Grouping content
// -----------------------------------------------------------------------------
// p
// address
// hr
// pre
// blockquote
// ol
// ul
// li
// dl
// dt
// dd
// figure
// figcaption
// main
// div
// Paragraph
// -----------------------------------------------------------------------------
p {
@extend %basic;
margin-top: $space_basic;
margin-bottom: $space_basic;
code {
padding: $space_tiny $space_half;
font-size: 1em;
line-height: 1;
}
}
.column_line {
column-rule: $border_basic;
}
.column_2, .column_3 {
@extend p;
}
.column_2 {
column-count: 2;
column-gap: $space_small;
}
.column_3 {
column-count: 3;
column-gap: $space_medium;
}
// Address
// -----------------------------------------------------------------------------
address {
// @extend %basic;
margin-top: $space_double;
margin-bottom: $space_double;
}
// Line
// -----------------------------------------------------------------------------
hr {
margin-top: $space_small;
margin-bottom: $space_small;
border-width: $width_border_basic 0 0;
border-style: solid;
border-color: $color_border_basic;
}
.hr_hidden {
@extend hr;
border-color: transparent;
}
.hr_dotted {
@extend hr;
border-style: dotted;
}
// Preformat
// -----------------------------------------------------------------------------
pre {
@extend %basic_mono;
white-space: pre-wrap;
}
.pre_code {
overflow-x: auto;
border-color: darken($color_back_basic, $color_diff_tiny);
border-style: dotted;
border-width: 0 0 0 $width_border_4;
border-radius: $radius_basic;
padding: $space_basic;
background-color: lighten($color_back_basic, $color_diff_tiny);
code {
background-color: transparent;
}
}
// Quote
// -----------------------------------------------------------------------------
blockquote {
margin: $space_basic 0;
padding-right: $indent_basic;
padding-left: $indent_basic;
}
.quote_mark {
p::before {
content: "\201E \0020";
}
p::after {
content: "\0020 \201C";
}
.quote_source {
&::before, &::after {
content: "";
}
}
}
// List
// -----------------------------------------------------------------------------
dl, ul, ol {
margin: $space_double 0;
}
ul, ol {
padding-left: $indent_basic;
}
dl {
margin-left: $indent_basic;
}
li, dt, dd {
@extend %basic;
}
dd, .list_basic li {
margin-bottom: $space_basic;
}
dd {
margin-left: $indent_basic;
}
ul {
li {
list-style: square;
}
}
.list_dash {
li {
list-style: none;
position: relative;
&::before {
content: "_";
position: absolute;
left: -1em;
}
}
}
.list_link {
li {
margin-bottom: $space_tiny * 2;
text-transform: uppercase;
a {
display: block;
padding: $padding_basic;
color: $color_text_basic;
img {
margin-right: $space_basic;
padding-bottom: 0.2em;
vertical-align: text-bottom;
}
&:active,
&:focus,
&:hover {
background-color: $color_action_basic;
color: $color_highlight_basic;
}
}
}
}
.list_horizontal {
overflow: auto;
li {
@extend .float_space_left;
}
}
// Embedded
// -----------------------------------------------------------------------------
figure {
margin: $space_double $indent_basic;
}
figcaption {
@extend %basic;
color: $color_darker;
}
// Main content
// -----------------------------------------------------------------------------
main {
}
// Div
// -----------------------------------------------------------------------------
div {
}
.div_info {
padding: $space_double $indent_basic;
border-right: $space_basic solid rgba($echo_color, 0.6);
background-color: rgba($echo_color, 0.1) !important;
}
.box_space {
position: relative;
width: 100%;
}
.box_cube {
float: left;
display: table;
width: $space_medium;
text-align: center;
vertical-align: middle;
span {
display: table-cell;
}
}
.box_placeholder {
width: 100%;
height: $space_medium;
border: $width_border_4 solid transparentize($alpha_color, 0.1);
border-radius: $radius_basic;
background-color: transparentize($alpha_color, 0.2);
}
.box_placeholder_bkg {
width: 100%;
height: $space_medium * 2;
border: $width_border_4 solid transparentize($color_front_basic, 0.1);
border-radius: $radius_basic;
padding: $space_basic;
/*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='%23FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='%23FFF' stroke-width='.5'/></svg>") no-repeat;
background-color: transparentize($color_front_basic, 0.1);
}
.box_file_tile {
@extend .float_space_left;
}
// Flex
.flex {
display: flex;
}
.flex_wrap {
@extend .flex;
flex-wrap: wrap;
}
.flex_row {
@extend .flex;
flex-direction: column;
// align-items: flex-start;
justify-content: flex-start;
}
.flex_child {
flex: 0 1 auto;
}
.flex_child_one {
flex: 1;
}
.flex_child_end {
align-self: flex-end;
}
.flex_column_wrap {
@extend .flex_wrap;
.flex_column {
@extend .flex_child;
flex-grow: 1;
}
}
// Grid
.grid {
display: grid;
grid-gap: $space_basic;
& > input,
& > select,
& > textarea {
margin: 0;
}
& > label {
margin: $width_border_io;
padding: $space_half;
}
}
.grid_column_2 {
grid-template-columns: max-content max-content;
}
.grid_column_4 {
grid-template-columns: max-content max-content max-content max-content;
}
// Sprites
.sprite_img {
display: inline-block;
}

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

@ -1,259 +1,259 @@
// Forms
// -----------------------------------------------------------------------------
// form
// label
// input
// button
// select
// datalist
// optgroup
// option
// textarea
// output
// progress
// meter
// fieldset
// legend
// Form
// -----------------------------------------------------------------------------
form {
}
// Label
// -----------------------------------------------------------------------------
label {
@extend %basic;
input, button, textarea, select {
margin-left: $space_basic;
}
}
input + label {
margin-left: $space_basic;
}
.label {
line-height: 2.5;
}
.label > input,
.label > textarea,
.label > select {
margin: 0 $space_basic;
}
// Input
// -----------------------------------------------------------------------------
input {
}
label + input {
margin-left: $space_basic;
}
input, button, textarea, select {
margin: $margin_io;
&[disabled="disabled"],
&[disabled] {
cursor: not-allowed;
}
}
td > input,
td > button,
td > select,
td > textarea {
margin: 0;
}
@each $input in $io_input_list, textarea, select {
#{$input} {
@extend %basic_mono;
line-height: 1;
}
}
.io_input, .io_textarea, .io_select {
padding: $space_half;
color: $color_text_io;
background-color: $color_back_io;
&:hover {
background-color: $color_highlight_basic;
}
&[readonly="readonly"],
&[readonly] {
background-color: darken($color_back_io, $color_diff_double);
}
&[disabled="disabled"],
&[disabled] {
&:hover {
background-color: $color_back_io;
}
}
}
@each $input in $io_date_list {
#{$input} {
padding-top: 0;
padding-bottom: 0;
}
}
@each $input in $io_input_list, textarea {
#{$input} {
// border: $border_io;
}
}
.io_input, .io_textarea {
border: $border_io;
&[readonly="readonly"],
&[readonly] {
border-color: darken($color_border_io, $color_diff_double);
}
&[disabled="disabled"],
&[disabled] {
border-color: transparent;
}
}
// Fieldset
// -----------------------------------------------------------------------------
fieldset {
margin: $margin_double;
padding: $space_basic;
border: $border_basic;
}
// Legend
// -----------------------------------------------------------------------------
legend {
@extend %basic;
padding: 0 $space_half;
}
// Button
// -----------------------------------------------------------------------------
button {
}
.io_button {
@extend %basic_button;
border: $width_border_io solid $color_border_button;
padding: $padding_basic;
color: $color_text_button;
background-color: $color_back_button;
&:hover {
// border-color: #0059F6;
border-color: transparent;
color: white;
background-color: $foxtrot_color;
}
&[disabled="disabled"],
&[disabled] {
border-color: transparent;
color: lighten($color_text_button, $color_diff_double);
&:hover {
background-color: $color_back_button;
}
}
}
// Selection
// -----------------------------------------------------------------------------
select {
border: none;
}
// Datalist
// -----------------------------------------------------------------------------
datalist {
}
// Options
// -----------------------------------------------------------------------------
optgroup {
}
option {
}
// Textarea
// -----------------------------------------------------------------------------
textarea {
}
.io_textarea {
line-height: 1.2;
}
// Output
// -----------------------------------------------------------------------------
output {
}
// Progress
// -----------------------------------------------------------------------------
progress {
}
meter {
}
// Interactive elements
// -----------------------------------------------------------------------------
// details
// summary
// dialog
details {
}
summary {
}
dialog {
}
// Scripting
// -----------------------------------------------------------------------------
// script
// noscript
// template
// canvas
canvas {
}
// Forms
// -----------------------------------------------------------------------------
// form
// label
// input
// button
// select
// datalist
// optgroup
// option
// textarea
// output
// progress
// meter
// fieldset
// legend
// Form
// -----------------------------------------------------------------------------
form {
}
// Label
// -----------------------------------------------------------------------------
label {
@extend %basic;
input, button, textarea, select {
margin-left: $space_basic;
}
}
input + label {
margin-left: $space_basic;
}
.label {
line-height: 2.5;
}
.label > input,
.label > textarea,
.label > select {
margin: 0 $space_basic;
}
// Input
// -----------------------------------------------------------------------------
input {
}
label + input {
margin-left: $space_basic;
}
input, button, textarea, select {
margin: $margin_io;
&[disabled="disabled"],
&[disabled] {
cursor: not-allowed;
}
}
td > input,
td > button,
td > select,
td > textarea {
margin: 0;
}
@each $input in $io_input_list, textarea, select {
#{$input} {
@extend %basic_mono;
line-height: 1;
}
}
.io_input, .io_textarea, .io_select {
padding: $space_half;
color: $color_text_io;
background-color: $color_back_io;
&:hover {
background-color: $color_highlight_basic;
}
&[readonly="readonly"],
&[readonly] {
background-color: darken($color_back_io, $color_diff_double);
}
&[disabled="disabled"],
&[disabled] {
&:hover {
background-color: $color_back_io;
}
}
}
@each $input in $io_date_list {
#{$input} {
padding-top: 0;
padding-bottom: 0;
}
}
@each $input in $io_input_list, textarea {
#{$input} {
// border: $border_io;
}
}
.io_input, .io_textarea {
border: $border_io;
&[readonly="readonly"],
&[readonly] {
border-color: darken($color_border_io, $color_diff_double);
}
&[disabled="disabled"],
&[disabled] {
border-color: transparent;
}
}
// Fieldset
// -----------------------------------------------------------------------------
fieldset {
margin: $margin_double;
padding: $space_basic;
border: $border_basic;
}
// Legend
// -----------------------------------------------------------------------------
legend {
@extend %basic;
padding: 0 $space_half;
}
// Button
// -----------------------------------------------------------------------------
button {
}
.io_button {
@extend %basic_button;
border: $width_border_io solid $color_border_button;
padding: $padding_basic;
color: $color_text_button;
background-color: $color_back_button;
&:hover {
// border-color: #0059F6;
border-color: transparent;
color: white;
background-color: $foxtrot_color;
}
&[disabled="disabled"],
&[disabled] {
border-color: transparent;
color: lighten($color_text_button, $color_diff_double);
&:hover {
background-color: $color_back_button;
}
}
}
// Selection
// -----------------------------------------------------------------------------
select {
border: none;
}
// Datalist
// -----------------------------------------------------------------------------
datalist {
}
// Options
// -----------------------------------------------------------------------------
optgroup {
}
option {
}
// Textarea
// -----------------------------------------------------------------------------
textarea {
}
.io_textarea {
line-height: 1.2;
}
// Output
// -----------------------------------------------------------------------------
output {
}
// Progress
// -----------------------------------------------------------------------------
progress {
}
meter {
}
// Interactive elements
// -----------------------------------------------------------------------------
// details
// summary
// dialog
details {
}
summary {
}
dialog {
}
// Scripting
// -----------------------------------------------------------------------------
// script
// noscript
// template
// canvas
canvas {
}

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

@ -1,189 +1,189 @@
// Root
// -----------------------------------------------------------------------------
html {
// height: 100%;
}
// Sections
// -----------------------------------------------------------------------------
// body
// article
// section
// nav
// aside
// h1-h6
// header
// footer
// Body
// -----------------------------------------------------------------------------
body {
position: relative;
box-sizing: $box_sizing;
margin: 0;
font-family: $family_text_basic;
font-size: $size_text_basic;
line-height: $line_basic;
line-height: $line_text_basic;
color: $color_text_basic;
background-color: $color_back_basic;
*,
::before,
::after {
box-sizing: inherit;
}
&:hover {
.layer_hover {
background-color: transparent !important;
transition: background-color $duration_double $timing_basic 0s !important;
}
}
}
// Article
// -----------------------------------------------------------------------------
article {
}
// Section
// -----------------------------------------------------------------------------
section {
}
.sec_main_center {
width: $width_basic;
margin: 0 auto;
padding-top: $space_small;
@include forTabletPortraitUp {
width: $width_small;
}
@include forTabletLandscapeUp {
width: $width_medium;
}
@include forBigDesktopUp {
width: $width_large;
}
}
.sec_main_status {
border-top-width: $width_border_8;
border-top-style: solid;
border-color: $color_border_basic;
padding-top: $space_small;
}
// Navigation
// -----------------------------------------------------------------------------
nav {
}
// Aside element
// -----------------------------------------------------------------------------
aside {
width: $width_aside_basic;
&.right + .bside {
margin-right: calc(#{$width_aside_basic} + #{$space_basic});
}
&.left + .bside {
margin-left: calc(#{$width_aside_basic} + #{$space_basic});
}
&.right {
float: right;
}
&.left {
float: left;
}
*:first-child {
margin-top: 0;
}
}
// Headings
// -----------------------------------------------------------------------------
h1, h2, h3, h4, h5, h6 {
@extend %head_all;
}
h1 {
@extend %head_1;
margin: $space_large 0 $space_small;
}
h1 + h1 {
margin-top: 0;
}
h2 {
@extend %head_2;
margin: $space_medium 0 $space_small;
}
h2 + h2 {
margin-top: 0;
}
h3 {
@extend %head_3;
margin: $space_double 0;
text-transform: uppercase;
}
h4 {
@extend %head_3;
margin: $space_double 0;
text-transform: none;
}
h5 {
@extend %head_4;
margin: $space_double 0 $space_basic;
text-transform: none;
}
h6 {
@extend %basic;
margin: $space_basic 0;
text-transform: none;
font-weight: bold;
}
// Header
// -----------------------------------------------------------------------------
header {
}
.header_page {
overflow: auto;
}
.header_txt {
margin-bottom: $space_small;
border-bottom: $border_dotted;
h1 {
border-top: $border_basic;
}
}
// Footer
// -----------------------------------------------------------------------------
footer {
}
// Root
// -----------------------------------------------------------------------------
html {
// height: 100%;
}
// Sections
// -----------------------------------------------------------------------------
// body
// article
// section
// nav
// aside
// h1-h6
// header
// footer
// Body
// -----------------------------------------------------------------------------
body {
position: relative;
box-sizing: $box_sizing;
margin: 0;
font-family: $family_text_basic;
font-size: $size_text_basic;
line-height: $line_basic;
line-height: $line_text_basic;
color: $color_text_basic;
background-color: $color_back_basic;
*,
::before,
::after {
box-sizing: inherit;
}
&:hover {
.layer_hover {
background-color: transparent !important;
transition: background-color $duration_double $timing_basic 0s !important;
}
}
}
// Article
// -----------------------------------------------------------------------------
article {
}
// Section
// -----------------------------------------------------------------------------
section {
}
.sec_main_center {
width: $width_basic;
margin: 0 auto;
padding-top: $space_small;
@include forTabletPortraitUp {
width: $width_small;
}
@include forTabletLandscapeUp {
width: $width_medium;
}
@include forBigDesktopUp {
width: $width_large;
}
}
.sec_main_status {
border-top-width: $width_border_8;
border-top-style: solid;
border-color: $color_border_basic;
padding-top: $space_small;
}
// Navigation
// -----------------------------------------------------------------------------
nav {
}
// Aside element
// -----------------------------------------------------------------------------
aside {
width: $width_aside_basic;
&.right + .bside {
margin-right: calc(#{$width_aside_basic} + #{$space_basic});
}
&.left + .bside {
margin-left: calc(#{$width_aside_basic} + #{$space_basic});
}
&.right {
float: right;
}
&.left {
float: left;
}
*:first-child {
margin-top: 0;
}
}
// Headings
// -----------------------------------------------------------------------------
h1, h2, h3, h4, h5, h6 {
@extend %head_all;
}
h1 {
@extend %head_1;
margin: $space_large 0 $space_small;
}
h1 + h1 {
margin-top: 0;
}
h2 {
@extend %head_2;
margin: $space_medium 0 $space_small;
}
h2 + h2 {
margin-top: 0;
}
h3 {
@extend %head_3;
margin: $space_double 0;
text-transform: uppercase;
}
h4 {
@extend %head_3;
margin: $space_double 0;
text-transform: none;
}
h5 {
@extend %head_4;
margin: $space_double 0 $space_basic;
text-transform: none;
}
h6 {
@extend %basic;
margin: $space_basic 0;
text-transform: none;
font-weight: bold;
}
// Header
// -----------------------------------------------------------------------------
header {
}
.header_page {
overflow: auto;
}
.header_txt {
margin-bottom: $space_small;
border-bottom: $border_dotted;
h1 {
border-top: $border_basic;
}
}
// Footer
// -----------------------------------------------------------------------------
footer {
}

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

@ -1,130 +1,130 @@
// Tabular data
// -----------------------------------------------------------------------------
// table
// caption
// colgroup
// col
// tbody
// thead
// tfoot
// tr
// td
// th
// Table
// -----------------------------------------------------------------------------
table {
margin: $margin_double;
border: $border_basic;
border-collapse: collapse;
}
.table_blank {
border: $width_border_basic solid transparent;
th, td {
border: $width_border_basic solid transparent;
}
}
.table_free {
border: $width_border_basic solid transparent;
}
.table_stripe {
td {
border-top: 0;
border-bottom: 0;
}
tr:nth-child(even) td {
background-color: lighten($color_back_basic, $color_diff_tiny);
}
}
.table_fix {
table-layout: fixed;
}
.table_file_simple {
@extend .width_full;
}
// Caption
// -----------------------------------------------------------------------------
caption {
@extend p;
padding: $space_half 0;
border: $border_dotted;
text-align: center;
}
// Columns
// -----------------------------------------------------------------------------
colgroup {
}
col {
}
// Table body
// -----------------------------------------------------------------------------
tbody {
}
// Table head
// -----------------------------------------------------------------------------
thead {
}
// Table foot
// -----------------------------------------------------------------------------
tfoot {
tr:first-child td {
border-top: $border_basic;
}
}
// Row
// -----------------------------------------------------------------------------
tr {
}
// Cells
// -----------------------------------------------------------------------------
th, td {
@extend %basic;
padding: $space_half;
}
th {
border: $border_basic;
text-align: left;
}
td {
border-right: $border_basic;
border-bottom: $border_basic;
}
td:last-child {
border-right: 0;
td {
border-bottom: 0;
}
}
.cell_pre {
// border-right-width: $width_border_4;
// border-right-color: lighten($color_back_basic, $color_diff_basic);
background-color: lighten($color_back_basic, $color_diff_tiny);
}
// Tabular data
// -----------------------------------------------------------------------------
// table
// caption
// colgroup
// col
// tbody
// thead
// tfoot
// tr
// td
// th
// Table
// -----------------------------------------------------------------------------
table {
margin: $margin_double;
border: $border_basic;
border-collapse: collapse;
}
.table_blank {
border: $width_border_basic solid transparent;
th, td {
border: $width_border_basic solid transparent;
}
}
.table_free {
border: $width_border_basic solid transparent;
}
.table_stripe {
td {
border-top: 0;
border-bottom: 0;
}
tr:nth-child(even) td {
background-color: lighten($color_back_basic, $color_diff_tiny);
}
}
.table_fix {
table-layout: fixed;
}
.table_file_simple {
@extend .width_full;
}
// Caption
// -----------------------------------------------------------------------------
caption {
@extend p;
padding: $space_half 0;
border: $border_dotted;
text-align: center;
}
// Columns
// -----------------------------------------------------------------------------
colgroup {
}
col {
}
// Table body
// -----------------------------------------------------------------------------
tbody {
}
// Table head
// -----------------------------------------------------------------------------
thead {
}
// Table foot
// -----------------------------------------------------------------------------
tfoot {
tr:first-child td {
border-top: $border_basic;
}
}
// Row
// -----------------------------------------------------------------------------
tr {
}
// Cells
// -----------------------------------------------------------------------------
th, td {
@extend %basic;
padding: $space_half;
}
th {
border: $border_basic;
text-align: left;
}
td {
border-right: $border_basic;
border-bottom: $border_basic;
}
td:last-child {
border-right: 0;
td {
border-bottom: 0;
}
}
.cell_pre {
// border-right-width: $width_border_4;
// border-right-color: lighten($color_back_basic, $color_diff_basic);
background-color: lighten($color_back_basic, $color_diff_tiny);
}

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

@ -1,303 +1,303 @@
// Text-Level semantics
// -----------------------------------------------------------------------------
// a
// em
// strong
// small
// s
// cite
// q
// dfn
// abbr
// ruby
// rb
// rt
// rtc
// rp
// data
// time
// code
// var
// samp
// kbd
// sub
// sup
// i
// b
// u
// mark
// bdi
// bdo
// span
// br
// wbr
// Links
// -----------------------------------------------------------------------------
a {
color: $color_link_basic;
// color: lighten($color_action_basic, 20%);
text-decoration: none;
&:active,
&:focus,
&:hover {
color: $color_highlight_basic;
}
}
.a_internal {
color: $charlie_color;
}
.a_external {
color: $delta_color;
}
.a_line {
border-bottom-width: $space_tiny;
border-bottom-style: dotted;
border-color: $color_border_basic;
color: $color_text_basic;
background-color: transparent;
transition: color $duration_basic $timing_basic;
&:active,
&:focus,
&:hover {
color: $color_highlight_basic;
background-color: $color_action_basic;
}
}
.a_button {
display: inline-block;
padding: $padding_basic;
border-radius: $radius_basic;
background-color: transparentize($color_link_basic, 0.8);
&:active,
&:focus,
&:hover {
border-color: transparent;
background-color: transparentize($color_highlight_basic, 0.8);
}
}
.a_button_text {
@extend .a_button;
padding: $padding_link;
color: $color_text_basic;
background-color: transparent;
}
.a_button_border {
@extend .a_button_text;
border: $border_basic;
}
// Italic, Emphasis
// -----------------------------------------------------------------------------
i, em {
font-style: italic;
}
.i_bright {
color: $color_highlight_basic;
font-style: normal;
}
// Bold, Strong
// -----------------------------------------------------------------------------
b, strong {
font-weight: 500; // TODO maybe bolder
}
// Small
// -----------------------------------------------------------------------------
small {
}
// No longer accurate or no longer relevant
// -----------------------------------------------------------------------------
s {
}
// Citation
// -----------------------------------------------------------------------------
cite {
font-style: italic;
}
// Phrasing content, quoted
// -----------------------------------------------------------------------------
q {
}
// Definition
// -----------------------------------------------------------------------------
dfn {
}
// Abbreviation
// -----------------------------------------------------------------------------
abbr {
}
// Ruby annotations
// -----------------------------------------------------------------------------
ruby {
}
rb {
}
rt {
}
rtc {
}
rp {
}
// Machine readable data
// -----------------------------------------------------------------------------
data {
}
// Machine readable time
// -----------------------------------------------------------------------------
time {
}
// Code
// -----------------------------------------------------------------------------
code {
@extend %basic_mono;
color: lighten($color_text_basic, $color_diff_basic);
background-color: lighten($color_back_basic, $color_diff_tiny);
}
.code_solo {
@extend %basic_mono;
padding: $space_tiny $space_half;
color: $color_text_basic;
}
// Variable
// -----------------------------------------------------------------------------
var {
}
// Sample
// -----------------------------------------------------------------------------
samp {
@extend %basic_mono;
}
// Keyboard input
// -----------------------------------------------------------------------------
kbd {
@extend %basic_mono;
// font-size: .9em;
// font-weight: bold;
padding: 0 $space_half;
border-width: $width_border_basic;
border-style: solid;
border-color: $color_darker;
border-radius: $radius_basic;
color: lighten($color_text_basic, $color_diff_basic);
}
// Sub- and superscript
// -----------------------------------------------------------------------------
sub, sup {
}
// Unarticulated, non-textual annotation
// -----------------------------------------------------------------------------
u {
}
// Marks
// -----------------------------------------------------------------------------
mark {
background-color: $alpha_color;
}
.mark_cursor {
color: invert($color_text_basic);
background-color: $color_text_basic;
}
::-moz-selection {
color: invert($color_text_basic);
background-color: $color_text_basic;
}
::selection {
color: invert($color_text_basic);
background-color: $color_text_basic;
}
// Text direction
// -----------------------------------------------------------------------------
bdi, bdo {
}
// Span
// -----------------------------------------------------------------------------
span {
}
.span_solo {
@extend %solo;
}
// Linebreaks
// -----------------------------------------------------------------------------
br {
}
wbr {
}
// Edits
// -----------------------------------------------------------------------------
// ins
// del
ins {
}
del {
}
// Text-Level semantics
// -----------------------------------------------------------------------------
// a
// em
// strong
// small
// s
// cite
// q
// dfn
// abbr
// ruby
// rb
// rt
// rtc
// rp
// data
// time
// code
// var
// samp
// kbd
// sub
// sup
// i
// b
// u
// mark
// bdi
// bdo
// span
// br
// wbr
// Links
// -----------------------------------------------------------------------------
a {
color: $color_link_basic;
// color: lighten($color_action_basic, 20%);
text-decoration: none;
&:active,
&:focus,
&:hover {
color: $color_highlight_basic;
}
}
.a_internal {
color: $charlie_color;
}
.a_external {
color: $delta_color;
}
.a_line {
border-bottom-width: $space_tiny;
border-bottom-style: dotted;
border-color: $color_border_basic;
color: $color_text_basic;
background-color: transparent;
transition: color $duration_basic $timing_basic;
&:active,
&:focus,
&:hover {
color: $color_highlight_basic;
background-color: $color_action_basic;
}
}
.a_button {
display: inline-block;
padding: $padding_basic;
border-radius: $radius_basic;
background-color: transparentize($color_link_basic, 0.8);
&:active,
&:focus,
&:hover {
border-color: transparent;
background-color: transparentize($color_highlight_basic, 0.8);
}
}
.a_button_text {
@extend .a_button;
padding: $padding_link;
color: $color_text_basic;
background-color: transparent;
}
.a_button_border {
@extend .a_button_text;
border: $border_basic;
}
// Italic, Emphasis
// -----------------------------------------------------------------------------
i, em {
font-style: italic;
}
.i_bright {
color: $color_highlight_basic;
font-style: normal;
}
// Bold, Strong
// -----------------------------------------------------------------------------
b, strong {
font-weight: 500; // TODO maybe bolder
}
// Small
// -----------------------------------------------------------------------------
small {
}
// No longer accurate or no longer relevant
// -----------------------------------------------------------------------------
s {
}
// Citation
// -----------------------------------------------------------------------------
cite {
font-style: italic;
}
// Phrasing content, quoted
// -----------------------------------------------------------------------------
q {
}
// Definition
// -----------------------------------------------------------------------------
dfn {
}
// Abbreviation
// -----------------------------------------------------------------------------
abbr {
}
// Ruby annotations
// -----------------------------------------------------------------------------
ruby {
}
rb {
}
rt {
}
rtc {
}
rp {
}
// Machine readable data
// -----------------------------------------------------------------------------
data {
}
// Machine readable time
// -----------------------------------------------------------------------------
time {
}
// Code
// -----------------------------------------------------------------------------
code {
@extend %basic_mono;
color: lighten($color_text_basic, $color_diff_basic);
background-color: lighten($color_back_basic, $color_diff_tiny);
}
.code_solo {
@extend %basic_mono;
padding: $space_tiny $space_half;
color: $color_text_basic;
}
// Variable
// -----------------------------------------------------------------------------
var {
}
// Sample
// -----------------------------------------------------------------------------
samp {
@extend %basic_mono;
}
// Keyboard input
// -----------------------------------------------------------------------------
kbd {
@extend %basic_mono;
// font-size: .9em;
// font-weight: bold;
padding: 0 $space_half;
border-width: $width_border_basic;
border-style: solid;
border-color: $color_darker;
border-radius: $radius_basic;
color: lighten($color_text_basic, $color_diff_basic);
}
// Sub- and superscript
// -----------------------------------------------------------------------------
sub, sup {
}
// Unarticulated, non-textual annotation
// -----------------------------------------------------------------------------
u {
}
// Marks
// -----------------------------------------------------------------------------
mark {
background-color: $alpha_color;
}
.mark_cursor {
color: invert($color_text_basic);
background-color: $color_text_basic;
}
::-moz-selection {
color: invert($color_text_basic);
background-color: $color_text_basic;
}
::selection {
color: invert($color_text_basic);
background-color: $color_text_basic;
}
// Text direction
// -----------------------------------------------------------------------------
bdi, bdo {
}
// Span
// -----------------------------------------------------------------------------
span {
}
.span_solo {
@extend %solo;
}
// Linebreaks
// -----------------------------------------------------------------------------
br {
}
wbr {
}
// Edits
// -----------------------------------------------------------------------------
// ins
// del
ins {
}
del {
}

6
source/style/hippie/functions/_all.scss
View file

@ -1,3 +1,3 @@
@import "color";
@import "shade";
@import "tint";
@import "color";
@import "shade";
@import "tint";

26
source/style/hippie/functions/_color.scss
View file

@ -1,13 +1,13 @@
@function createColorMap($color, $percentage, $opacity) {
$map: (
base: $color,
light: lighten($color, $percentage),
dark: darken($color, $percentage),
trans: transparentize($color, $opacity)
);
@return $map;
}
@function basic_color($key: 'alpha') {
@return map-get($color_palette, $key);
}
@function createColorMap($color, $percentage, $opacity) {
$map: (
base: $color,
light: lighten($color, $percentage),
dark: darken($color, $percentage),
trans: transparentize($color, $opacity)
);
@return $map;
}
@function basic_color($key: 'alpha') {
@return map-get($color_palette, $key);
}

48
source/style/hippie/functions/_shade.scss
View file

@ -1,24 +1,24 @@
@charset "UTF-8";
// Mixes a color with black.
//
// @param {Color} $color
//
// @param {Number (Percentage)} $percent
// The amount of black to be mixed in.
//
// @example scss - Usage
// .element {
// background-color: shade(#0c85ff, 60%);
// }
//
// @example css - CSS Output
// .element {
// background-color: #074f99;
// }
//
// @return {Color}
@function shade($color, $percent) {
@return mix(#000, $color, $percent);
}
@charset "UTF-8";
// Mixes a color with black.
//
// @param {Color} $color
//
// @param {Number (Percentage)} $percent
// The amount of black to be mixed in.
//
// @example scss - Usage
// .element {
// background-color: shade(#0c85ff, 60%);
// }
//
// @example css - CSS Output
// .element {
// background-color: #074f99;
// }
//
// @return {Color}
@function shade($color, $percent) {
@return mix(#000, $color, $percent);
}

48
source/style/hippie/functions/_tint.scss
View file

@ -1,24 +1,24 @@
@charset "UTF-8";
// Mixes a color with white.
//
// @param {Color} $color
//
// @param {Number (Percentage)} $percent
// The amount of white to be mixed in.
//
// @example scss - Usage
// .element {
// background-color: tint(#0c85ff, 40%);
// }
//
// @example css - CSS Output
// .element {
// background-color: #9dceff;
// }
//
// @return {Color}
@function tint($color, $percent) {
@return mix(#fff, $color, $percent);
}
@charset "UTF-8";
// Mixes a color with white.
//
// @param {Color} $color
//
// @param {Number (Percentage)} $percent
// The amount of white to be mixed in.
//
// @example scss - Usage
// .element {
// background-color: tint(#0c85ff, 40%);
// }
//
// @example css - CSS Output
// .element {
// background-color: #9dceff;
// }
//
// @return {Color}
@function tint($color, $percent) {
@return mix(#fff, $color, $percent);
}

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

@ -1,304 +1,304 @@
// General classes
// -----------------------------------------------------------------------------
%size_content {
box-sizing: content-box;
}
%size_content_solo {
@extend %size_content;
*,
::before,
::after {
box-sizing: $box_sizing;
}
}
%hidden {
display: none;
}
.magic {
@extend %hidden;
}
.space_even_auto {
margin-right: auto;
margin-left: auto;
}
.space_even_half {
margin-right: 25%;
margin-left: 25%;
}
.space_even_fourth {
margin-right: 37.5%;
margin-left: 37.5%;
}
@each $size, $variable in (basic, #{$space_basic}),
(small, #{$space_small}),
(medium, #{$space_medium}),
(large, #{$space_large}) {
.space_top_#{$size} {
margin-top: $variable;
}
.space_right_#{$size} {
margin-right: $variable;
}
.space_bottom_#{$size} {
margin-bottom: $variable;
}
.space_left_#{$size} {
margin-left: $variable;
}
}
.space_left_fourth {
margin-left: 25%;
}
.width_full {
width: 100%;
margin-right: 0;
margin-left: 0;
}
.width_half {
width: 50%;
margin-right: 0;
margin-left: 0;
}
.width_third {
width: 33.3%;
margin-right: 0;
margin-left: 0;
}
.height_basic {
height: 1024px;
}
.height_full {
height: 100vh;
}
.wrap_center {
& > * {
margin-right: (100% - $width_basic) / 2;
margin-left: (100% - $width_basic) / 2;
@include forTabletPortraitUp {
margin-right: (100% - $width_small) / 2;
margin-left: (100% - $width_small) / 2;
}
@include forTabletLandscapeUp {
margin-right: (100% - $width_medium) / 2;
margin-left: (100% - $width_medium) / 2;
}
@include forBigDesktopUp {
margin-right: (100% - $width_large) / 2;
margin-left: (100% - $width_large) / 2;
}
}
}
// Clearing and floating
// -----------------------------------------------------------------------------
.clear {
clear: both;
&::before,
&::after {
clear: both;
}
}
.overflow {
overflow: auto;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.float_space_left {
@extend .float_left;
margin-right: $space_small;
}
.float_half_size {
float: left;
width: 50%;
}
.x_long {
overflow-x: scroll;
}
// Inlining
// -----------------------------------------------------------------------------
.inline {
display: inline-block;
}
// Positioned elements
// -----------------------------------------------------------------------------
%full_viewport {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
%full_parent {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
// width: 100%;
// height: 100%;
}
.pos_abs {
position: absolute;
}
.pos_rel {
position: relative;
}
.pos_fix {
position: fixed;
}
.pin_top {
top: 0;
}
.pin_right {
right: 0;
}
.pin_bottom {
bottom: 0;
}
.pin_left {
left: 0;
}
.pos_full_view {
@extend %full_viewport;
background-color: rgba($alpha_color, 0.5);
}
.pos_full_page {
@extend %full_parent;
background-color: rgba($charlie_color, 0.25);
}
.hover_back_change {
background-color: $color_darker;
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: $color_back_basic;
}
}
.hover_full_view_change {
@extend %full_viewport;
z-index: $z_heaven;
background-color: transparentize($color_darkest, 0.5);
transition: background-color $duration_long $timing_basic $duration_long;
pointer-events: none;
}
// Colors
// -----------------------------------------------------------------------------
.txt_color_light {
color: $color_brighter;
}
.txt_color_dark {
color: $color_darker;
}
// Text
// -----------------------------------------------------------------------------
.txt_tiny {
font-size: .5em !important;
}
.txt_smaller {
font-size: .75em !important;
}
.txt_larger {
font-size: 1.2em !important;
}
.txt_huge {
font-size: 3em !important;
}
.txt_hero {
font-size: $size_hero;
}
.txt_center {
text-align: center !important;
}
.txt_right {
text-align: right !important;
}
.txt_left {
text-align: left !important;
}
.txt_top {
vertical-align: top !important;
}
.txt_bottom {
vertical-align: bottom !important;
}
.txt_white {
color: white;
}
.txt_black {
color: black;
}
.txt_gradient {
background: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
// General classes
// -----------------------------------------------------------------------------
%size_content {
box-sizing: content-box;
}
%size_content_solo {
@extend %size_content;
*,
::before,
::after {
box-sizing: $box_sizing;
}
}
%hidden {
display: none;
}
.magic {
@extend %hidden;
}
.space_even_auto {
margin-right: auto;
margin-left: auto;
}
.space_even_half {
margin-right: 25%;
margin-left: 25%;
}
.space_even_fourth {
margin-right: 37.5%;
margin-left: 37.5%;
}
@each $size, $variable in (basic, #{$space_basic}),
(small, #{$space_small}),
(medium, #{$space_medium}),
(large, #{$space_large}) {
.space_top_#{$size} {
margin-top: $variable;
}
.space_right_#{$size} {
margin-right: $variable;
}
.space_bottom_#{$size} {
margin-bottom: $variable;
}
.space_left_#{$size} {
margin-left: $variable;
}
}
.space_left_fourth {
margin-left: 25%;
}
.width_full {
width: 100%;
margin-right: 0;
margin-left: 0;
}
.width_half {
width: 50%;
margin-right: 0;
margin-left: 0;
}
.width_third {
width: 33.3%;
margin-right: 0;
margin-left: 0;
}
.height_basic {
height: 1024px;
}
.height_full {
height: 100vh;
}
.wrap_center {
& > * {
margin-right: (100% - $width_basic) / 2;
margin-left: (100% - $width_basic) / 2;
@include forTabletPortraitUp {
margin-right: (100% - $width_small) / 2;
margin-left: (100% - $width_small) / 2;
}
@include forTabletLandscapeUp {
margin-right: (100% - $width_medium) / 2;
margin-left: (100% - $width_medium) / 2;
}
@include forBigDesktopUp {
margin-right: (100% - $width_large) / 2;
margin-left: (100% - $width_large) / 2;
}
}
}
// Clearing and floating
// -----------------------------------------------------------------------------
.clear {
clear: both;
&::before,
&::after {
clear: both;
}
}
.overflow {
overflow: auto;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.float_space_left {
@extend .float_left;
margin-right: $space_small;
}
.float_half_size {
float: left;
width: 50%;
}
.x_long {
overflow-x: scroll;
}
// Inlining
// -----------------------------------------------------------------------------
.inline {
display: inline-block;
}
// Positioned elements
// -----------------------------------------------------------------------------
%full_viewport {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
%full_parent {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
// width: 100%;
// height: 100%;
}
.pos_abs {
position: absolute;
}
.pos_rel {
position: relative;
}
.pos_fix {
position: fixed;
}
.pin_top {
top: 0;
}
.pin_right {
right: 0;
}
.pin_bottom {
bottom: 0;
}
.pin_left {
left: 0;
}
.pos_full_view {
@extend %full_viewport;
background-color: rgba($alpha_color, 0.5);
}
.pos_full_page {
@extend %full_parent;
background-color: rgba($charlie_color, 0.25);
}
.hover_back_change {
background-color: $color_darker;
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: $color_back_basic;
}
}
.hover_full_view_change {
@extend %full_viewport;
z-index: $z_heaven;
background-color: transparentize($color_darkest, 0.5);
transition: background-color $duration_long $timing_basic $duration_long;
pointer-events: none;
}
// Colors
// -----------------------------------------------------------------------------
.txt_color_light {
color: $color_brighter;
}
.txt_color_dark {
color: $color_darker;
}
// Text
// -----------------------------------------------------------------------------
.txt_tiny {
font-size: .5em !important;
}
.txt_smaller {
font-size: .75em !important;
}
.txt_larger {
font-size: 1.2em !important;
}
.txt_huge {
font-size: 3em !important;
}
.txt_hero {
font-size: $size_hero;
}
.txt_center {
text-align: center !important;
}
.txt_right {
text-align: right !important;
}
.txt_left {
text-align: left !important;
}
.txt_top {
vertical-align: top !important;
}
.txt_bottom {
vertical-align: bottom !important;
}
.txt_white {
color: white;
}
.txt_black {
color: black;
}
.txt_gradient {
background: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

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

@ -1,271 +1,271 @@
// Default configuration
// ------------------------------------------------------------------------------
// TEXT
// ------------------------------------------------------------------------------
$size_text_basic: 17px !default;
$size_text_print: 10pt !default;
$line_basic: 1;
// $i: 1;
// @while $i < 7 {
// %head_#{$i} { width: 2em * $i; }
// $i: $i + 1;
// }
// $head_sizes: (h1: 3.1em, h2: 2.5em, h3: 1.8em, h4: 1.35em);
//
// @each $head, $size in $head_sizes {
// #{$head} {
// font-size: $size;
// }
// }
// $head_sizes: (
// basic: (
// 'h1': ('font-size': 24),
// 'h2': ('font-size': 20),
// 'h3': ('font-size': 19),
// 'h4': ('font-size': 18),
// 'h5': ('font-size': 17),
// 'h6': ('font-size': 16),
// ),
// print: (
// 'h1': ('font-size': 48),
// 'h2': ('font-size': 40),
// 'h3': ('font-size': 31),
// 'h4': ('font-size': 25),
// 'h5': ('font-size': 20),
// 'h6': ('font-size': 16),
// ),
// );
$size_head_1: 3.1em !default;
$size_head_2: 2.5em !default;
$size_head_3: 1.8em !default;
$size_head_4: 1.35em !default;
$size_text_1: 1em;
$size_text_2: 20;
$size_hero: $size_head_1 * 3;
$line_text_basic: 1.28 !default;
$line_text_mono: 1.1 !default;
$line_head_basic: $line_text_basic !default;
$family_text_basic: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default;
$family_text_print: #{'Times New Roman', times} !default;
$family_text_mono: #{'Courier New', monospace} !default;
$family_head_basic: $family_text_basic !default;
// COLORS
// ------------------------------------------------------------------------------
$color_palette: (
alpha: #fad803,
bravo: #d30a51,
charlie: #273f8b,
delta: #b7e0f0,
echo: #52bed1,
foxtrot: #0c85ff
) !default;
@include addDefaultColors;
$color_diff_basic: 12% !default;
$color_diff_tiny: 4% !default;
$color_diff_double: $color_diff_basic * 2;
$color_darkest: black !default;
$color_brightest: white !default;
$color_text_basic: black !default;
$color_back_basic: #808080 !default;
$color_border_basic: lighten($color_text_basic, $color_diff_basic) !default;
$color_front_basic: white !default;
$color_medium: lighten($color_darkest, 50%);
$color_dark: lighten($color_darkest, $color_diff_double);
$color_darker: darken($color_back_basic, $color_diff_basic);
$color_brighter: lighten($color_back_basic, $color_diff_basic);
$color_bright: darken($color_brightest, $color_diff_double);
$color_head_basic: $color_text_basic !default;
$color_link_basic: $delta_color !default;
$color_highlight_basic: $color_front_basic !default;
$color_action_basic: $foxtrot_color !default;
// default shadow colors
// $shadow_color: fade-out($color_medium, 0.5);
$color_list: ();
@each $key, $value in $color_palette {
$map: ();
$map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)) );
$color_list: map-merge($color_list, $map);
}
// LAYOUT
// ------------------------------------------------------------------------------
$box_sizing: border-box !default;
$z_heaven: 100 !default;
$z_top: 10 !default;
$z_basic: 1 !default;
$z_earth: -100 !default;
$width_basic: 96% !default;
$width_small: 80% !default;
$width_medium: 60% !default;
$width_large: 48% !default;
$width_aside_basic: 20% !default;
$space_tiny: 1px !default;
$space_basic: $space_tiny * 8 !default;
$space_half: $space_basic / 2;
$space_double: $space_basic * 2;
$space_small: $space_basic * 4;
$space_medium: $space_basic * 8;
$space_large: $space_basic * 16;
$margin_basic: $space_basic 0 !default;
$margin_double: $space_double 0 !default;
$margin_io: 0 $space_small 0 0 !default;
$padding_basic: calc(#{$space_basic} - 3px) $space_basic !default;
$padding_link: calc(#{$space_basic} - 1px) calc(#{$space_basic} * 2) !default;
$indent_basic: 2em !default;
$border_basic: $space_tiny solid $color_border_basic;
$border_dotted: $space_tiny dotted $color_border_basic;
$width_border_basic: $space_tiny !default;
$width_border_4: $width_border_basic * 4;
$width_border_8: $width_border_basic * 8;
$radius_basic: $space_tiny * 2 !default;
// IO
// ------------------------------------------------------------------------------
$io_input_list:
'input[type="text"]',
'input[type="number"]',
'input[type="color"]',
'input[type="range"]',
'input[type="date"]',
'input[type="time"]',
'input[type="datetime-local"]',
'input[type="month"]',
'input[type="week"]',
'input[type="email"]',
'input[type="password"]',
'input[type="tel"]',
'input[type="url"]',
'input[type="search"]',
'input:not([type])';
$io_date_list:
'.io_input[type="date"]',
'.io_input[type="time"]',
'.io_input[type="datetime-local"]',
'.io_input[type="month"]',
'.io_input[type="week"]';
$io_button_list:
'button',
'input[type="button"]',
// 'input[type="file"]',
'input[type="reset"]',
'input[type="image"]',
'input[type="submit"]';
$io_focus_list:
'a[href]',
'area[href]',
'button:not([disabled])',
'input:not([disabled])',
'select:not([disabled])',
'textarea:not([disabled])',
'*[tabindex]';
$color_text_io: lighten($color_text_basic, $color_diff_basic) !default;
$color_text_button: $color_text_basic !default;
$color_back_io: darken($color_front_basic, $color_diff_basic) !default;
$color_back_button: $color_darker !default;
$color_border_io: $color_front_basic !default;
$color_border_button: $color_dark !default;
$width_border_io: $space_tiny * 2 !default;
$border_io: $width_border_io solid $color_border_io;
$border_io_dotted: $width_border_io dotted $color_border_io;
$shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06);
$shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightness: -5%, $alpha: -0.3);
// ANIMATIONS
// ------------------------------------------------------------------------------
$duration_basic: 250ms !default;
$duration_double: $duration_basic * 2;
$duration_long: 2s !default;
$timing_basic: ease-out !default;
// HARDWARE BREAKPOINTS
// ------------------------------------------------------------------------------
$screen_tiny: 768px;
$screen_small: 1024px;
$screen_medium: 1280px;
$screen_large: 1440px;
$screen_huge: 1680px;
$screen_gigantic: 1920px;
// VENDOR PREFIX
// ------------------------------------------------------------------------------
$prefix_defaults: -moz- -webkit- -o- -ms- '';
$webkit_support: -webkit- '';
$moz_support: -moz- '';
$ms_support: -ms- '';
$moz_webkit_support: -moz- -webkit- '';
$moz_ms_support: -moz- -ms- '';
$webkit_ms_support: -webkit- -ms- '';
// SYMBOLS
// ------------------------------------------------------------------------------
$icons: (
glass: "\f000",
music: "\f001",
search: "\f002",
envelope-o: "\f003",
heart: "\f004"
);
@each $name, $icon in $icons {
.sym_#{$name}::before {
content: $icon;
}
}
// USER AGENT
// ------------------------------------------------------------------------------
$no_agent_focus: true;
@include overrideUserAgent;
// Default configuration
// ------------------------------------------------------------------------------
// TEXT
// ------------------------------------------------------------------------------
$size_text_basic: 17px !default;
$size_text_print: 10pt !default;
$line_basic: 1;
// $i: 1;
// @while $i < 7 {
// %head_#{$i} { width: 2em * $i; }
// $i: $i + 1;
// }
// $head_sizes: (h1: 3.1em, h2: 2.5em, h3: 1.8em, h4: 1.35em);
//
// @each $head, $size in $head_sizes {
// #{$head} {
// font-size: $size;
// }
// }
// $head_sizes: (
// basic: (
// 'h1': ('font-size': 24),
// 'h2': ('font-size': 20),
// 'h3': ('font-size': 19),
// 'h4': ('font-size': 18),
// 'h5': ('font-size': 17),
// 'h6': ('font-size': 16),
// ),
// print: (
// 'h1': ('font-size': 48),
// 'h2': ('font-size': 40),
// 'h3': ('font-size': 31),
// 'h4': ('font-size': 25),
// 'h5': ('font-size': 20),
// 'h6': ('font-size': 16),
// ),
// );
$size_head_1: 3.1em !default;
$size_head_2: 2.5em !default;
$size_head_3: 1.8em !default;
$size_head_4: 1.35em !default;
$size_text_1: 1em;
$size_text_2: 20;
$size_hero: $size_head_1 * 3;
$line_text_basic: 1.28 !default;
$line_text_mono: 1.1 !default;
$line_head_basic: $line_text_basic !default;
$family_text_basic: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default;
$family_text_print: #{'Times New Roman', times} !default;
$family_text_mono: #{'Courier New', monospace} !default;
$family_head_basic: $family_text_basic !default;
// COLORS
// ------------------------------------------------------------------------------
$color_palette: (
alpha: #fad803,
bravo: #d30a51,
charlie: #273f8b,
delta: #b7e0f0,
echo: #52bed1,
foxtrot: #0c85ff
) !default;
@include addDefaultColors;
$color_diff_basic: 12% !default;
$color_diff_tiny: 4% !default;
$color_diff_double: $color_diff_basic * 2;
$color_darkest: black !default;
$color_brightest: white !default;
$color_text_basic: black !default;
$color_back_basic: #808080 !default;
$color_border_basic: lighten($color_text_basic, $color_diff_basic) !default;
$color_front_basic: white !default;
$color_medium: lighten($color_darkest, 50%);
$color_dark: lighten($color_darkest, $color_diff_double);
$color_darker: darken($color_back_basic, $color_diff_basic);
$color_brighter: lighten($color_back_basic, $color_diff_basic);
$color_bright: darken($color_brightest, $color_diff_double);
$color_head_basic: $color_text_basic !default;
$color_link_basic: $delta_color !default;
$color_highlight_basic: $color_front_basic !default;
$color_action_basic: $foxtrot_color !default;
// default shadow colors
// $shadow_color: fade-out($color_medium, 0.5);
$color_list: ();
@each $key, $value in $color_palette {
$map: ();
$map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)) );
$color_list: map-merge($color_list, $map);
}
// LAYOUT
// ------------------------------------------------------------------------------
$box_sizing: border-box !default;
$z_heaven: 100 !default;
$z_top: 10 !default;
$z_basic: 1 !default;
$z_earth: -100 !default;
$width_basic: 96% !default;
$width_small: 80% !default;
$width_medium: 60% !default;
$width_large: 48% !default;
$width_aside_basic: 20% !default;
$space_tiny: 1px !default;
$space_basic: $space_tiny * 8 !default;
$space_half: $space_basic / 2;
$space_double: $space_basic * 2;
$space_small: $space_basic * 4;
$space_medium: $space_basic * 8;
$space_large: $space_basic * 16;
$margin_basic: $space_basic 0 !default;
$margin_double: $space_double 0 !default;
$margin_io: 0 $space_small 0 0 !default;
$padding_basic: calc(#{$space_basic} - 3px) $space_basic !default;
$padding_link: calc(#{$space_basic} - 1px) calc(#{$space_basic} * 2) !default;
$indent_basic: 2em !default;
$border_basic: $space_tiny solid $color_border_basic;
$border_dotted: $space_tiny dotted $color_border_basic;
$width_border_basic: $space_tiny !default;
$width_border_4: $width_border_basic * 4;
$width_border_8: $width_border_basic * 8;
$radius_basic: $space_tiny * 2 !default;
// IO
// ------------------------------------------------------------------------------
$io_input_list:
'input[type="text"]',
'input[type="number"]',
'input[type="color"]',
'input[type="range"]',
'input[type="date"]',
'input[type="time"]',
'input[type="datetime-local"]',
'input[type="month"]',
'input[type="week"]',
'input[type="email"]',
'input[type="password"]',
'input[type="tel"]',
'input[type="url"]',
'input[type="search"]',
'input:not([type])';
$io_date_list:
'.io_input[type="date"]',
'.io_input[type="time"]',
'.io_input[type="datetime-local"]',
'.io_input[type="month"]',
'.io_input[type="week"]';
$io_button_list:
'button',
'input[type="button"]',
// 'input[type="file"]',
'input[type="reset"]',
'input[type="image"]',
'input[type="submit"]';
$io_focus_list:
'a[href]',
'area[href]',
'button:not([disabled])',
'input:not([disabled])',
'select:not([disabled])',
'textarea:not([disabled])',
'*[tabindex]';
$color_text_io: lighten($color_text_basic, $color_diff_basic) !default;
$color_text_button: $color_text_basic !default;
$color_back_io: darken($color_front_basic, $color_diff_basic) !default;
$color_back_button: $color_darker !default;
$color_border_io: $color_front_basic !default;
$color_border_button: $color_dark !default;
$width_border_io: $space_tiny * 2 !default;
$border_io: $width_border_io solid $color_border_io;
$border_io_dotted: $width_border_io dotted $color_border_io;
$shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06);
$shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightness: -5%, $alpha: -0.3);
// ANIMATIONS
// ------------------------------------------------------------------------------
$duration_basic: 250ms !default;
$duration_double: $duration_basic * 2;
$duration_long: 2s !default;
$timing_basic: ease-out !default;
// HARDWARE BREAKPOINTS
// ------------------------------------------------------------------------------
$screen_tiny: 768px;
$screen_small: 1024px;
$screen_medium: 1280px;
$screen_large: 1440px;
$screen_huge: 1680px;
$screen_gigantic: 1920px;
// VENDOR PREFIX
// ------------------------------------------------------------------------------
$prefix_defaults: -moz- -webkit- -o- -ms- '';
$webkit_support: -webkit- '';
$moz_support: -moz- '';
$ms_support: -ms- '';
$moz_webkit_support: -moz- -webkit- '';
$moz_ms_support: -moz- -ms- '';
$webkit_ms_support: -webkit- -ms- '';
// SYMBOLS
// ------------------------------------------------------------------------------
$icons: (
glass: "\f000",
music: "\f001",
search: "\f002",
envelope-o: "\f003",
heart: "\f004"
);
@each $name, $icon in $icons {
.sym_#{$name}::before {
content: $icon;
}
}
// USER AGENT
// ------------------------------------------------------------------------------
$no_agent_focus: true;
@include overrideUserAgent;

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

@ -1,60 +1,60 @@
// Basic styles
// -----------------------------------------------------------------------------
%basic {
font-family: $family_text_basic;
font-size: $size_text_1;
line-height: $line_text_basic;
}
%basic_mono {
font-family: $family_text_mono;
font-size: $size_text_1;
line-height: $line_text_mono;
}
%basic_print {
font-family: $family_text_print;
font-size: $size_text_1;
line-height: $line_text_basic;
}
%head_all {
color: $color_head_basic;
font-family: $family_head_basic;
line-height: $line_head_basic;
}
%head_1 {
font-size: $size_head_1;
font-weight: 300;
}
%head_2 {
font-size: $size_head_2;
font-weight: 300;
}
%head_3 {
font-size: $size_head_3;
font-weight: 300;
}
%head_4 {
font-size: $size_head_4;
font-weight: 300;
}
%basic_button {
@extend %basic;
}
%solo {
@extend %basic;
}
%short {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; // vendor
}
// Basic styles
// -----------------------------------------------------------------------------
%basic {
font-family: $family_text_basic;
font-size: $size_text_1;
line-height: $line_text_basic;
}
%basic_mono {
font-family: $family_text_mono;
font-size: $size_text_1;
line-height: $line_text_mono;
}
%basic_print {
font-family: $family_text_print;
font-size: $size_text_1;
line-height: $line_text_basic;
}
%head_all {
color: $color_head_basic;
font-family: $family_head_basic;
line-height: $line_head_basic;
}
%head_1 {
font-size: $size_head_1;
font-weight: 300;
}
%head_2 {
font-size: $size_head_2;
font-weight: 300;
}
%head_3 {
font-size: $size_head_3;
font-weight: 300;
}
%head_4 {
font-size: $size_head_4;
font-weight: 300;
}
%basic_button {
@extend %basic;
}
%solo {
@extend %basic;
}
%short {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; // vendor
}

10
source/style/hippie/mixins/_all.scss
View file

@ -1,5 +1,5 @@
@import "media_query";
@import "sprite";
@import "flow";
@import "color";
@import "user_agent";
@import "media_query";
@import "sprite";
@import "flow";
@import "color";
@import "user_agent";

40
source/style/hippie/mixins/_color.scss
View file

@ -1,20 +1,20 @@
@mixin addDefaultColors() {
@if map-has-key($color_palette, alpha) {
$alpha_color: map-get($color_palette, alpha) !global;
}
@if map-has-key($color_palette, bravo) {
$bravo_color: map-get($color_palette, bravo) !global;
}
@if map-has-key($color_palette, charlie) {
$charlie_color: map-get($color_palette, charlie) !global;
}
@if map-has-key($color_palette, delta) {
$delta_color: map-get($color_palette, delta) !global;
}
@if map-has-key($color_palette, echo) {
$echo_color: map-get($color_palette, echo) !global;
}
@if map-has-key($color_palette, foxtrot) {
$foxtrot_color: map-get($color_palette, foxtrot) !global;
}
}
@mixin addDefaultColors() {
@if map-has-key($color_palette, alpha) {
$alpha_color: map-get($color_palette, alpha) !global;
}
@if map-has-key($color_palette, bravo) {
$bravo_color: map-get($color_palette, bravo) !global;
}
@if map-has-key($color_palette, charlie) {
$charlie_color: map-get($color_palette, charlie) !global;
}
@if map-has-key($color_palette, delta) {
$delta_color: map-get($color_palette, delta) !global;
}
@if map-has-key($color_palette, echo) {
$echo_color: map-get($color_palette, echo) !global;
}
@if map-has-key($color_palette, foxtrot) {
$foxtrot_color: map-get($color_palette, foxtrot) !global;
}
}

50
source/style/hippie/mixins/_flow.scss
View file

@ -1,25 +1,25 @@
@charset "UTF-8";
// Provides an easy way to include a clearflow for containing floats.
//
// @link http://cssmojo.com/latest_new_clearfix_so_far/
//
// @example scss - Usage
// .element {
// @include clearFlow;
// }
//
// @example css - CSS Output
// .element::after {
// content: "";
// clear: both;
// display: table;
// }
@mixin clearFlow {
&::after {
content: "";
clear: both;
display: table;
}
}
@charset "UTF-8";
// Provides an easy way to include a clearflow for containing floats.
//
// @link http://cssmojo.com/latest_new_clearfix_so_far/
//
// @example scss - Usage
// .element {
// @include clearFlow;
// }
//
// @example css - CSS Output
// .element::after {
// content: "";
// clear: both;
// display: table;
// }
@mixin clearFlow {
&::after {
content: "";
clear: both;
display: table;
}
}

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

@ -1,38 +1,38 @@
//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_small) { @content; } //600px
}
@mixin forTabletPortraitOnly {
@media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px
}
@mixin forTabletLandscapeUp {
@media (min-width: $screen_small) { @content; } //900px
}
@mixin forTabletLandscapeOnly {
@media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px
}
@mixin forDesktopUp {
@media (min-width: $screen_medium) { @content; } //1200px
}
@mixin forDesktopOnly {
@media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px
}
@mixin forBigDesktopUp {
@media (min-width: $screen_huge) { @content; } //1800px
}
//Mobile-first Media Query
@mixin goingLarge($width) {
@media (min-width: $width/16+em) { @content; }
}
//Desktop-first Media Query
@mixin goingSmall($width) {
@media (max-width: $width/16+em) { @content; }
}
//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_small) { @content; } //600px
}
@mixin forTabletPortraitOnly {
@media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px
}
@mixin forTabletLandscapeUp {
@media (min-width: $screen_small) { @content; } //900px
}
@mixin forTabletLandscapeOnly {
@media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px
}
@mixin forDesktopUp {
@media (min-width: $screen_medium) { @content; } //1200px
}
@mixin forDesktopOnly {
@media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px
}
@mixin forBigDesktopUp {
@media (min-width: $screen_huge) { @content; } //1800px
}
//Mobile-first Media Query
@mixin goingLarge($width) {
@media (min-width: $width/16+em) { @content; }
}
//Desktop-first Media Query
@mixin goingSmall($width) {
@media (max-width: $width/16+em) { @content; }
}

18
source/style/hippie/mixins/_user_agent.scss
View file

@ -1,9 +1,9 @@
@mixin overrideUserAgent() {
@if $no_agent_focus == true {
@each $el in $io_focus_list {
#{$el}:focus {
outline: 0;
}
}
}
}
@mixin overrideUserAgent() {
@if $no_agent_focus == true {
@each $el in $io_focus_list {
#{$el}:focus {
outline: 0;
}
}
}
}

46
source/style/hippie/modules/_vendor.scss
View file

@ -1,23 +1,23 @@
/**
* @description
* Generates cross-browser-compatible output for a given element with its value.
*
* @author sthag
*
* @param values
* @returns
* -webkit-<name>: <values>
* ...-<name>: <values>
*
* @example
* .selector
* @include vendor-prefix(hyphens, auto)
*/
@mixin vendor-prefix($name, $argument) {
-webkit-#{$name}: #{$argument};
-ms-#{$name}: #{$argument};
-moz-#{$name}: #{$argument};
-o-#{$name}: #{$argument};
#{$name}: #{$argument};
}
/**
* @description
* Generates cross-browser-compatible output for a given element with its value.
*
* @author sthag
*
* @param values
* @returns
* -webkit-<name>: <values>
* ...-<name>: <values>
*
* @example
* .selector
* @include vendor-prefix(hyphens, auto)
*/
@mixin vendor-prefix($name, $argument) {
-webkit-#{$name}: #{$argument};
-ms-#{$name}: #{$argument};
-moz-#{$name}: #{$argument};
-o-#{$name}: #{$argument};
#{$name}: #{$argument};
}

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

@ -1,47 +1,47 @@
.query_goingLarge {
@include goingLarge($screen_tiny) {};
}
.query_goingSmall {
@include goingSmall($screen_gigantic) {};
}
.query_phoneUp {
@include forPhoneUp {}
}
.query_phoneOnly {
@include forPhoneOnly {}
}
.query_tabletPortaitOnly {
@include forTabletPortraitOnly {
}
}
.query_tabletPortraitUp {
@include forTabletPortraitUp {
}
}
.query_tabletLandscapeOnly {
@include forTabletLandscapeOnly {}
}
.query_tabletLandscapeUp {
@include forTabletLandscapeUp {}
}
.query_desktopOnly {
@include forDesktopOnly {
}
}
.query_desktopUp {
@include forDesktopUp {
}
}
.query_bigDesktopUp {
@include forBigDesktopUp {}
}
.query_goingLarge {
@include goingLarge($screen_tiny) {};
}
.query_goingSmall {
@include goingSmall($screen_gigantic) {};
}
.query_phoneUp {
@include forPhoneUp {}
}
.query_phoneOnly {
@include forPhoneOnly {}
}
.query_tabletPortaitOnly {
@include forTabletPortraitOnly {
}
}
.query_tabletPortraitUp {
@include forTabletPortraitUp {
}
}
.query_tabletLandscapeOnly {
@include forTabletLandscapeOnly {}
}
.query_tabletLandscapeUp {
@include forTabletLandscapeUp {}
}
.query_desktopOnly {
@include forDesktopOnly {
}
}
.query_desktopUp {
@include forDesktopUp {
}
}
.query_bigDesktopUp {
@include forBigDesktopUp {}
}

198
source/style/hippie/modules/card/_card_module.scss
View file

@ -1,99 +1,99 @@
// Custom extends and mixins
// ------------------------------------------------------------------------------
@import "mixins";
@import "extends";
// Card module styles
// ------------------------------------------------------------------------------
%absolute_full {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card_body {
height: 100%;
.bkg_box {
@extend %absolute_full;
transition-duration: 800ms;
overflow: hidden;
vertical-align: top;
z-index: -1;
}
.bkg_box > svg {
position: relative;
}
.flex_wrap_center {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
}
.flex_content {
position: relative;
padding: 64px 64px 24px 64px;
border: 1px solid #FFF;
background-color: #F5F5F5;
z-index: 40;
}
h1 {
margin: 16px 0;
color: #1E1E1E;
font-size: 24px;
line-height: 1.4em;
font-weight: normal;
}
p {
margin-top: 0;
margin-bottom: 16px;
font-size: 12px;
line-height: 1.4em;
}
/* .full {
position: absolute;
width: 128px;
height: 128px;
top: 16px;
left: 16px;
background-color: #fff;
}
.mark {
float: left;
width: 32px;
height: 32px;
margin-top: 16px;
}
*/
.marked {
padding-left: 1em;
text-indent: -1em;
text-align: center;
}
.marked::before { content: "*\0000a0" }
.decent { color: #666 }
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #F4F9FA;
background-color: #0C85FF;
text-decoration: none;
}
}
// Custom extends and mixins
// ------------------------------------------------------------------------------
@import "mixins";
@import "extends";
// Card module styles
// ------------------------------------------------------------------------------
%absolute_full {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card_body {
height: 100%;
.bkg_box {
@extend %absolute_full;
transition-duration: 800ms;
overflow: hidden;
vertical-align: top;
z-index: -1;
}
.bkg_box > svg {
position: relative;
}
.flex_wrap_center {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
}
.flex_content {
position: relative;
padding: 64px 64px 24px 64px;
border: 1px solid #FFF;
background-color: #F5F5F5;
z-index: 40;
}
h1 {
margin: 16px 0;
color: #1E1E1E;
font-size: 24px;
line-height: 1.4em;
font-weight: normal;
}
p {
margin-top: 0;
margin-bottom: 16px;
font-size: 12px;
line-height: 1.4em;
}
/* .full {
position: absolute;
width: 128px;
height: 128px;
top: 16px;
left: 16px;
background-color: #fff;
}
.mark {
float: left;
width: 32px;
height: 32px;
margin-top: 16px;
}
*/
.marked {
padding-left: 1em;
text-indent: -1em;
text-align: center;
}
.marked::before { content: "*\0000a0" }
.decent { color: #666 }
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #F4F9FA;
background-color: #0C85FF;
text-decoration: none;
}
}

46
source/style/hippie/modules/editor/_editor_module.scss
View file

@ -1,23 +1,23 @@
// Custom extends and mixins
// ------------------------------------------------------------------------------
@import "mixins";
@import "extends";
// Editor module styles
// ------------------------------------------------------------------------------
%wip {
border-right: $space_basic solid rgba(crimson, 0.8);
background-color: rgba(crimson, 0.1) !important;
}
.wip {
@extend %wip;
&::before, &::after {
content: "";
display: block;
height: 48px;
}
}
.wip_txt {
@extend %wip;
}
// Custom extends and mixins
// ------------------------------------------------------------------------------
@import "mixins";
@import "extends";
// Editor module styles
// ------------------------------------------------------------------------------
%wip {
border-right: $space_basic solid rgba(crimson, 0.8);
background-color: rgba(crimson, 0.1) !important;
}
.wip {
@extend %wip;
&::before, &::after {
content: "";
display: block;
height: 48px;
}
}
.wip_txt {
@extend %wip;
}

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_large;
left: $space_large;
padding: $space_half;
border: 4px solid $color_back_basic;
border-radius: 4px;
background-color: $color_back_basic;
pointer-events: none;
}
.exp_marker_pop {
position: absolute;
top: -$size_text_basic / 4 * 3;
right: -$size_text_basic / 2;
width: $size_text_basic;
height: $size_text_basic;
border: $space_tiny solid $color_highlight_basic;
border-radius: $size_text_basic;
color: $color_highlight_basic;
background-color: $color_darkest;
}
.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: $space_basic $space_basic * 2;
cursor: pointer;
}
.exp_help_btn {
display: table;
right: $space_double;
bottom: $space_double;
background-color: rgba($color_darkest, 0.4);
&:hover {
background-color: $color_brightest;
> .span_solo {
color: $color_darkest;
}
}
.span_solo {
display: table-cell;
color: rgba($color_brightest, 0.8);
font-family: $family_text_mono;
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_large;
left: $space_large;
padding: $space_half;
border: 4px solid $color_back_basic;
border-radius: 4px;
background-color: $color_back_basic;
pointer-events: none;
}
.exp_marker_pop {
position: absolute;
top: -$size_text_basic / 4 * 3;
right: -$size_text_basic / 2;
width: $size_text_basic;
height: $size_text_basic;
border: $space_tiny solid $color_highlight_basic;
border-radius: $size_text_basic;
color: $color_highlight_basic;
background-color: $color_darkest;
}
.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: $space_basic $space_basic * 2;
cursor: pointer;
}
.exp_help_btn {
display: table;
right: $space_double;
bottom: $space_double;
background-color: rgba($color_darkest, 0.4);
&:hover {
background-color: $color_brightest;
> .span_solo {
color: $color_darkest;
}
}
.span_solo {
display: table-cell;
color: rgba($color_brightest, 0.8);
font-family: $family_text_mono;
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_small;
}
}
}
.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_small;
}
}
}

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

@ -1,4 +1,4 @@
.nomedia {
@extend .box_placeholder;
height: inherit;
}
.nomedia {
@extend .box_placeholder;
height: inherit;
}

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

@ -1,171 +1,171 @@
nav {
ul {
padding-left: 0;
}
li {
margin-bottom: $space_basic;
list-style: none;
}
}
.nav_horizontal {
ul {
@extend .overflow;
ul {
margin: $space_basic 0;
}
li {
@extend .float_space_left;
margin-right: $space_basic;
margin-bottom: 0;
&:last-child {
margin-right: 0;
}
}
}
}
.nav_right {
float: right;
margin-left: $space_basic;
.align_parent {
margin-right: $space_basic * -1;
}
}
.nav_separate {
li {
position: relative;
padding-left: $space_tiny;
&:not(:first-child) {
&::before {
content: "";
position: absolute;
width: $space_tiny;
height: 100%;
left: 0;
top: 0;
background-color: $color_border_basic;
}
}
}
}
.nav_separate_right {
float: right;
li {
position: relative;
&:first-child {
padding-left: $space_basic * 2 + $space_tiny;
&::before {
content: "";
position: absolute;
width: $space_tiny;
height: 100%;
left: 0;
top: 0;
background-color: $color_front_basic;
margin: 0 $space_basic;
}
}
}
}
.nav_center_old {
@extend .nav_horizontal;
float: right;
position: relative;
left: -50%;
ul {
position: relative;
left: 50%;
text-align: center;
}
}
.nav_column {
position: relative;
margin: $space_basic 0;
ul {
@extend .flex;
margin: 0 $space_large;
li {
@extend .flex_child;
flex-grow: 1;
margin: 0;
text-align: center;
a {
display: block;
}
}
}
}
.nav_page_meta {
position: fixed;
// display: table;
// width: 3em;
right: $space_half;
bottom: $space_double;
ul {
margin: $space_basic 0;
}
li {
margin-bottom: 0;
line-height: 1;
}
button {
width: 32px;
margin-right: 0;
margin-left: 0;
}
.a_button_meta {
// display: table-cell;
display: inline-block;
&:active,
&:focus {
background-color: transparent;
}
&:hover {
background-color: $color_action_basic;
}
}
.sprite_img {
vertical-align: top;
}
}
.header_page {
nav {
@extend .nav_horizontal;
a {
&:active,
&:focus,
&:hover {
background-color: rgba($color_text_basic, 0.2);
color: $color_text_basic;
}
}
}
}
nav {
ul {
padding-left: 0;
}
li {
margin-bottom: $space_basic;
list-style: none;
}
}
.nav_horizontal {
ul {
@extend .overflow;
ul {
margin: $space_basic 0;
}
li {
@extend .float_space_left;
margin-right: $space_basic;
margin-bottom: 0;
&:last-child {
margin-right: 0;
}
}
}
}
.nav_right {
float: right;
margin-left: $space_basic;
.align_parent {
margin-right: $space_basic * -1;
}
}
.nav_separate {
li {
position: relative;
padding-left: $space_tiny;
&:not(:first-child) {
&::before {
content: "";
position: absolute;
width: $space_tiny;
height: 100%;
left: 0;
top: 0;
background-color: $color_border_basic;
}
}
}
}
.nav_separate_right {
float: right;
li {
position: relative;
&:first-child {
padding-left: $space_basic * 2 + $space_tiny;
&::before {
content: "";
position: absolute;
width: $space_tiny;
height: 100%;
left: 0;
top: 0;
background-color: $color_front_basic;
margin: 0 $space_basic;
}
}
}
}
.nav_center_old {
@extend .nav_horizontal;
float: right;
position: relative;
left: -50%;
ul {
position: relative;
left: 50%;
text-align: center;
}
}
.nav_column {
position: relative;
margin: $space_basic 0;
ul {
@extend .flex;
margin: 0 $space_large;
li {
@extend .flex_child;
flex-grow: 1;
margin: 0;
text-align: center;
a {
display: block;
}
}
}
}
.nav_page_meta {
position: fixed;
// display: table;
// width: 3em;
right: $space_half;
bottom: $space_double;
ul {
margin: $space_basic 0;
}
li {
margin-bottom: 0;
line-height: 1;
}
button {
width: 32px;
margin-right: 0;
margin-left: 0;
}
.a_button_meta {
// display: table-cell;
display: inline-block;
&:active,
&:focus {
background-color: transparent;
}
&:hover {
background-color: $color_action_basic;
}
}
.sprite_img {
vertical-align: top;
}
}
.header_page {
nav {
@extend .nav_horizontal;
a {
&:active,
&:focus,
&:hover {
background-color: rgba($color_text_basic, 0.2);
color: $color_text_basic;
}
}
}
}

256
source/style/hippie/modules/print/_print_module.scss
View file

@ -1,128 +1,128 @@
// Custom extends and mixins
// ------------------------------------------------------------------------------
@import "mixins";
@import "extends";
// Print module styles
// ------------------------------------------------------------------------------
%paper {
background-color: $color_front_basic;
}
$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm;
$a5: ".dina5" 0 0 0 1.2cm;
$a6: ".dina6" 0 0 0 1.2cm;
$din: $a4, $a5, $a6;
.print_body {
font-size: $size_text_print;
margin: 10vh 20vw;
@page {
size: A4;
margin: 1.2cm;
}
@page:first {
size: A4;
margin: 0;
}
@each $space in $din {
#{nth($space, 1)} {
padding-top: nth($space, 2);
padding-right: nth($space, 3);
padding-bottom: nth($space, 4);
padding-left: nth($space, 5);
.page_head, .page_foot {
right: nth($space, 3);
left: nth($space, 5);
}
.page_head {
top: nth($space, 2);
}
.page_foot {
bottom: nth($space, 4);
}
}
}
*[class^="din"] {
@extend %paper;
position: relative;
overflow: auto;
p {
@extend %basic_print;
}
.page_head, .page_foot {
position: absolute;
}
.page_head {
page: cover;
}
.page_foot {
display: flex;
flex-direction: row;
*:last-child {
margin-bottom: 0;
}
p {
flex: 1 0 auto;
margin: 0;
font-size: 8pt;
line-height: 10pt;
text-align: center;
}
.page_no {
flex: 1 0 auto;
font-size: 20pt;
line-height: 1;
text-align: right;
}
p:first-child {
text-align: left;
}
}
.page_content {
margin-top: 10cm;
margin-bottom: 2cm;
}
margin: $space_small auto;
}
.page_title, .page_date {
font-size: 14pt;
}
.page_title {
margin: 0;
}
.page_date, .page_no {
@extend %head_1;
float: right;
}
.page_author {
position: absolute;
top: 5cm;
right: 0;
text-align: right;
}
.page_recipient {
position: absolute;
top: 5cm;
left: 0;
}
}
// Custom extends and mixins
// ------------------------------------------------------------------------------
@import "mixins";
@import "extends";
// Print module styles
// ------------------------------------------------------------------------------
%paper {
background-color: $color_front_basic;
}
$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm;
$a5: ".dina5" 0 0 0 1.2cm;
$a6: ".dina6" 0 0 0 1.2cm;
$din: $a4, $a5, $a6;
.print_body {
font-size: $size_text_print;
margin: 10vh 20vw;
@page {
size: A4;
margin: 1.2cm;
}
@page:first {
size: A4;
margin: 0;
}
@each $space in $din {
#{nth($space, 1)} {
padding-top: nth($space, 2);
padding-right: nth($space, 3);
padding-bottom: nth($space, 4);
padding-left: nth($space, 5);
.page_head, .page_foot {
right: nth($space, 3);
left: nth($space, 5);
}
.page_head {
top: nth($space, 2);
}
.page_foot {
bottom: nth($space, 4);
}
}
}
*[class^="din"] {
@extend %paper;
position: relative;
overflow: auto;
p {
@extend %basic_print;
}
.page_head, .page_foot {
position: absolute;
}
.page_head {
page: cover;
}
.page_foot {
display: flex;
flex-direction: row;
*:last-child {
margin-bottom: 0;
}
p {
flex: 1 0 auto;
margin: 0;
font-size: 8pt;
line-height: 10pt;
text-align: center;
}
.page_no {
flex: 1 0 auto;
font-size: 20pt;
line-height: 1;
text-align: right;
}
p:first-child {
text-align: left;
}
}
.page_content {
margin-top: 10cm;
margin-bottom: 2cm;
}
margin: $space_small auto;
}
.page_title, .page_date {
font-size: 14pt;
}
.page_title {
margin: 0;
}
.page_date, .page_no {
@extend %head_1;
float: right;
}
.page_author {
position: absolute;
top: 5cm;
right: 0;
text-align: right;
}
.page_recipient {
position: absolute;
top: 5cm;
left: 0;
}
}

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: $border_basic;
&:hover {
background-color: $color_bright;
}
}
th, td {
border: 0;
}
.cell_icon {
width: 48px;
text-align: center;
img {
vertical-align: text-top;
}
}
.cell_link {
padding-right: $space_basic;
padding-left: $space_basic;
&:hover {
background-color: $foxtrot_color;
a:first-child {
display: none;
}
a:last-child {
display: block;
color: $color_highlight_basic;
}
}
a {
display: block;
}
a:last-child {
display: none;
}
}
th:last-child, .cell_date {
width: 16%;
text-align: center;
}
.cell_text {
padding-right: $space_basic;
padding-left: $space_basic;
div {
width: 100%;
}
.shorten {
@extend %short;
max-height: 44px;
}
}
}
.table_link {
width: 100%;
border: 0;
table-layout: auto;
tbody {
border-bottom: $border_basic;
&:hover {
background-color: $color_bright;
}
}
th, td {
border: 0;
}
.cell_icon {
width: 48px;
text-align: center;
img {
vertical-align: text-top;
}
}
.cell_link {
padding-right: $space_basic;
padding-left: $space_basic;
&:hover {
background-color: $foxtrot_color;
a:first-child {
display: none;
}
a:last-child {
display: block;
color: $color_highlight_basic;
}
}
a {
display: block;
}
a:last-child {
display: none;
}
}
th:last-child, .cell_date {
width: 16%;
text-align: center;
}
.cell_text {
padding-right: $space_basic;
padding-left: $space_basic;
div {
width: 100%;
}
.shorten {
@extend %short;
max-height: 44px;
}
}
}

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

@ -1,252 +1,252 @@
.demo__intro {
@extend .sec_main_center;
@extend .sec_main_status;
}
.demo__status {
@extend .sec_main_status;
position: relative;
min-height: 50vh;
border-color: $foxtrot_color;
h1:first-of-type {
margin-top: 0;
font-weight: bold;
}
@media (max-height: 512px) {
.pos_abs {
position: static !important;
}
}
}
.demo__header {
padding: $space_double;
nav {
ul {
margin: 0;
}
}
}
.header_fancy {
background-color: transparentize($bravo_color, 0.4);
nav {
a {
background-color: transparentize($alpha_color, 0.4);
color: $alpha_color;
&:active,
&:focus,
&:hover {
background-color: rgba($color_brightest, 0.2);
color: $color_brightest;
}
}
}
}
.header_fix {
position: relative;
top: 0;
left: 0;
width: 100%;
background-color: transparentize($charlie_color, 0.4);
nav {
a {
&:active,
&:focus,
&:hover {
background-color: rgba($color_brightest, 0.2);
color: $color_brightest;
}
}
}
}
.demo__footer {
width: 100%;
// height: 128px;
padding: $space_double 0;
background-color: $color_dark;
color: $color_bright;
nav {
a {
color: $color_brightest;
}
}
}
.demo__sprite_down {
@include sprite($down);
// width: 32px;
// height: 32px;
// background-image: url(../art/sprites.png);
// background-position: -32px 0;
}
.demo__sprite_up {
@include sprite($up);
// width: 32px;
// height: 64px;
// background-image: url(../art/sprites.png);
// background-position: 0 0;
}
.demo__sprite_meta {
@include sprite($meta);
// width: 32px;
// height: 32px;
// background-image: url(../art/sprites.png);
// background-position: -32px 32px;
}
.demo__avatar {
img {
opacity: 1;
width: 128px;
height: auto;
min-width: 128px;
min-height: 128px;
border-radius: 50%;
background-color: $delta_color;
}
}
.demo__flag {
height: 40vh;
}
.demo__credits {
margin: $space_small 0 $space_basic 0;
}
.demo__button_32 {
width: 32px;
height: 32px;
}
.demo__queries > p {
padding: $padding_basic;
}
.query_phoneUp {
@include forPhoneUp {background-color: rgba($color_text_basic, 0.2)};
}
.query_phoneOnly {
@include forPhoneOnly { background-color: rgba($color_text_basic, 0.2); }
}
.query_tabletPortaitOnly {
@include forTabletPortraitOnly { background-color: rgba($color_text_basic, 0.2); }
}
.query_tabletPortraitUp {
@include forTabletPortraitUp { background-color: rgba($color_text_basic, 0.2); }
}
.query_tabletLandscapeOnly {
@include forTabletLandscapeOnly { background-color: rgba($color_text_basic, 0.2); }
}
.query_tabletLandscapeUp {
@include forTabletLandscapeUp { background-color: rgba($color_text_basic, 0.2); }
}
.query_desktopOnly {
@include forDesktopOnly { background-color: rgba($color_text_basic, 0.2); }
}
.query_desktopUp {
@include forDesktopUp { background-color: rgba($color_text_basic, 0.2); }
}
.query_bigDesktopUp {
@include forBigDesktopUp { background-color: rgba($color_text_basic, 0.2); }
}
.demo__query_example {
@include goingLarge($screen_tiny/1px) {background-color: $alpha_color; }
@include goingLarge($screen_small/1px) {background-color: $bravo_color; }
@include goingLarge($screen_medium/1px) {background-color: $charlie_color; }
@include goingLarge($screen_large/1px) {background-color: $delta_color; }
@include goingLarge($screen_huge/1px) {background-color: $echo_color; }
@include goingLarge($screen_gigantic/1px) {background-color: $foxtrot_color; }
margin-bottom: $space_small;
padding: $space_small;
text-align: center;
&:after {
@extend code;
@include goingLarge($screen_tiny/1px) {
& { content: '768px'; }
}
@include goingLarge($screen_small/1px) {
& { content: '1024px'; }
}
@include goingLarge($screen_medium/1px) {
& { content: '1280px'; }
}
@include goingLarge($screen_huge/1px) {
& { content: '1680px'; }
}
@include goingLarge($screen_gigantic/1px) {
& { content: '1920px'; }
}
content: '< 768px';
padding: $padding_basic;
border-radius: $radius_basic;
color: $color_brightest;
background-color: rgba($color_front_basic, 0.2);
}
}
// Tables
.demo__td_no_bl {
border-left: none;
}
.demo__td_no_br {
border-right: none;
}
.demo__td_pr {
padding-right: $space_double;
}
.demo__td_pl {
padding-left: $space_double;
}
// Index
// -----------------------------------------------------------------------------
.wrap {
display: flex;
// height: 100%;
align-items: center;
justify-content: center;
}
.hello {
flex: 0 1 auto;
width: 80%;
ul {
padding: 1em 5em;
background-color: $color_darker;
}
}
.demo__intro {
@extend .sec_main_center;
@extend .sec_main_status;
}
.demo__status {
@extend .sec_main_status;
position: relative;
min-height: 50vh;
border-color: $foxtrot_color;
h1:first-of-type {
margin-top: 0;
font-weight: bold;
}
@media (max-height: 512px) {
.pos_abs {
position: static !important;
}
}
}
.demo__header {
padding: $space_double;
nav {
ul {
margin: 0;
}
}
}
.header_fancy {
background-color: transparentize($bravo_color, 0.4);
nav {
a {
background-color: transparentize($alpha_color, 0.4);
color: $alpha_color;
&:active,
&:focus,
&:hover {
background-color: rgba($color_brightest, 0.2);
color: $color_brightest;
}
}
}
}
.header_fix {
position: relative;
top: 0;
left: 0;
width: 100%;
background-color: transparentize($charlie_color, 0.4);
nav {
a {
&:active,
&:focus,
&:hover {
background-color: rgba($color_brightest, 0.2);
color: $color_brightest;
}
}
}
}
.demo__footer {
width: 100%;
// height: 128px;
padding: $space_double 0;
background-color: $color_dark;
color: $color_bright;
nav {
a {
color: $color_brightest;
}
}
}
.demo__sprite_down {
@include sprite($down);
// width: 32px;
// height: 32px;
// background-image: url(../art/sprites.png);
// background-position: -32px 0;
}
.demo__sprite_up {
@include sprite($up);
// width: 32px;
// height: 64px;
// background-image: url(../art/sprites.png);
// background-position: 0 0;
}
.demo__sprite_meta {
@include sprite($meta);
// width: 32px;
// height: 32px;
// background-image: url(../art/sprites.png);
// background-position: -32px 32px;
}
.demo__avatar {
img {
opacity: 1;
width: 128px;
height: auto;
min-width: 128px;
min-height: 128px;
border-radius: 50%;
background-color: $delta_color;
}
}
.demo__flag {
height: 40vh;
}
.demo__credits {
margin: $space_small 0 $space_basic 0;
}
.demo__button_32 {
width: 32px;
height: 32px;
}
.demo__queries > p {
padding: $padding_basic;
}
.query_phoneUp {
@include forPhoneUp {background-color: rgba($color_text_basic, 0.2)};
}
.query_phoneOnly {
@include forPhoneOnly { background-color: rgba($color_text_basic, 0.2); }
}
.query_tabletPortaitOnly {
@include forTabletPortraitOnly { background-color: rgba($color_text_basic, 0.2); }
}
.query_tabletPortraitUp {
@include forTabletPortraitUp { background-color: rgba($color_text_basic, 0.2); }
}
.query_tabletLandscapeOnly {
@include forTabletLandscapeOnly { background-color: rgba($color_text_basic, 0.2); }
}
.query_tabletLandscapeUp {
@include forTabletLandscapeUp { background-color: rgba($color_text_basic, 0.2); }
}
.query_desktopOnly {
@include forDesktopOnly { background-color: rgba($color_text_basic, 0.2); }
}
.query_desktopUp {
@include forDesktopUp { background-color: rgba($color_text_basic, 0.2); }
}
.query_bigDesktopUp {
@include forBigDesktopUp { background-color: rgba($color_text_basic, 0.2); }
}
.demo__query_example {
@include goingLarge($screen_tiny/1px) {background-color: $alpha_color; }
@include goingLarge($screen_small/1px) {background-color: $bravo_color; }
@include goingLarge($screen_medium/1px) {background-color: $charlie_color; }
@include goingLarge($screen_large/1px) {background-color: $delta_color; }
@include goingLarge($screen_huge/1px) {background-color: $echo_color; }
@include goingLarge($screen_gigantic/1px) {background-color: $foxtrot_color; }
margin-bottom: $space_small;
padding: $space_small;
text-align: center;
&:after {
@extend code;
@include goingLarge($screen_tiny/1px) {
& { content: '768px'; }
}
@include goingLarge($screen_small/1px) {
& { content: '1024px'; }
}
@include goingLarge($screen_medium/1px) {
& { content: '1280px'; }
}
@include goingLarge($screen_huge/1px) {
& { content: '1680px'; }
}
@include goingLarge($screen_gigantic/1px) {
& { content: '1920px'; }
}
content: '< 768px';
padding: $padding_basic;
border-radius: $radius_basic;
color: $color_brightest;
background-color: rgba($color_front_basic, 0.2);
}
}
// Tables
.demo__td_no_bl {
border-left: none;
}
.demo__td_no_br {
border-right: none;
}
.demo__td_pr {
padding-right: $space_double;
}
.demo__td_pl {
padding-left: $space_double;
}
// Index
// -----------------------------------------------------------------------------
.wrap {
display: flex;
// height: 100%;
align-items: center;
justify-content: center;
}
.hello {
flex: 0 1 auto;
width: 80%;
ul {
padding: 1em 5em;
background-color: $color_darker;
}
}

58
source/templates/demo/_default.njk
View file

@ -1,29 +1,29 @@
<!-- template-default.njk -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
{% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title>
{% include "demo/partials/_meta.njk" %}
{% block link %}{% endblock %}
<link rel="stylesheet" type="text/css" media="all" href="/css/demo.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/> -->
{% endblock %}
</head>
<body id="{{ pageId }}" class="{{ pageClass }}">
{% block body %}{% endblock %}
{% block script %}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>
<!-- template-default.njk -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
{% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title>
{% include "demo/partials/_meta.njk" %}
{% block link %}{% endblock %}
<link rel="stylesheet" type="text/css" media="all" href="/css/demo.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/> -->
{% endblock %}
</head>
<body id="{{ pageId }}" class="{{ pageClass }}">
{% block body %}{% endblock %}
{% block script %}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>

98
source/templates/demo/_extended.njk
View file

@ -1,49 +1,49 @@
<!-- template-extended.njk -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
{% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title>
{% include "demo/partials/_meta.njk" %}
<!--[if lte IE 9]>
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
<!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
<!--Only use one of the above!-->
{% block link %}{% endblock %}
<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
<link rel="stylesheet" type="text/css" media="all" href="/css/demo.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/> -->
{% endblock %}
</head>
<body id="{{ pageId }}" class="{{ pageClass }}">
{% include "hippie/partials/_body_hover.njk" %}
<div id="root">
{% include "hippie/partials/_header.njk" %}
<main class="main_site">
{% block main %}{% endblock %}
</main>
{% include "hippie/partials/_footer.njk" %}
</div>
{% block script %}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
{# <script src="bower_components/jquery/dist/jquery.js"></script> #}
{% endblock %}
</body>
</html>
<!-- template-extended.njk -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
{% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title>
{% include "demo/partials/_meta.njk" %}
<!--[if lte IE 9]>
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
<!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
<!--Only use one of the above!-->
{% block link %}{% endblock %}
<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
<link rel="stylesheet" type="text/css" media="all" href="/css/demo.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/> -->
{% endblock %}
</head>
<body id="{{ pageId }}" class="{{ pageClass }}">
{% include "hippie/partials/_body_hover.njk" %}
<div id="root">
{% include "hippie/partials/_header.njk" %}
<main class="main_site">
{% block main %}{% endblock %}
</main>
{% include "hippie/partials/_footer.njk" %}
</div>
{% block script %}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
{# <script src="bower_components/jquery/dist/jquery.js"></script> #}
{% endblock %}
</body>
</html>

54
source/templates/demo/_maintenance.njk
View file

@ -1,27 +1,27 @@
<!-- template-maintenance.njk -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
{% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title>
{% include "demo/partials/_meta.njk" %}
<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH7SURBVDiNldM/aJNBGMfx71viH7TqIoLiIOoiSJRu0qE4uIiDm5OI4ODk4uYioqBuUkR0kKJNFC1mqUltlbZSqE3RYt+2SUyTppCmeU2bkiZ907z3vnfnUEU0NrXPeMd97p6H+xlaa02D0oDRYL+p4WEN9yZm8dT6dzQEQtkCuiIJxHKbBxZrLiNWmc8vRxn7lMGRanPAw0QW49Uwp8ODJEZmCCSt/wcGrCWavte44LRz7FyYnd+yxMZz2J7cGKh6kvczRUp3X9BnmFyLzHNVRpkeShNM1b+iDngUn2Oue4qLLV3cf+YST2tiLf3sj04wmypSEt76wFixwoJpcbKnh/ZMmuXK2vqdYJXLxyPMDiTpTOX/DbhK88bMMh4Y5sSZt3R2/+53aRkCzgT+oX4Kls2i49YDT+M5JkMmV+aj3BrII/+a15MuSevZEPl3UzxP5/8EMiurfO1L0hyNU27tZehL/c/zJNzsLXB+uoNySZBfFQD4tIbHHxJMfoxxu2pi7rK5fsm3FgL5MwXKQAPaMzh8JMbg61E6mn3c8B/CF5yx2L1tC/5TR4nsAS/RhlNzcR0P6TggFVoDGrYqyYMkLOybZ4fQZFZqGOHsgi4KF1tIakrhKIXj/WrBQAuJV3EQtsBbEQjbQVQEB/0HUHu3Y2wU5/XKVRqhFD8AgpYX2M9TNGcAAAAASUVORK5CYII=">
<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 %}
</head>
<body id="{{ pageId }}" class="{{ pageClass }}">
{% block main %}
{% import "hippie/macros/footer-status.njk" as status %}
{{ status.footer() }}
{% endblock %}
</body>
</html>
<!-- template-maintenance.njk -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
{% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title>
{% include "demo/partials/_meta.njk" %}
<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH7SURBVDiNldM/aJNBGMfx71viH7TqIoLiIOoiSJRu0qE4uIiDm5OI4ODk4uYioqBuUkR0kKJNFC1mqUltlbZSqE3RYt+2SUyTppCmeU2bkiZ907z3vnfnUEU0NrXPeMd97p6H+xlaa02D0oDRYL+p4WEN9yZm8dT6dzQEQtkCuiIJxHKbBxZrLiNWmc8vRxn7lMGRanPAw0QW49Uwp8ODJEZmCCSt/wcGrCWavte44LRz7FyYnd+yxMZz2J7cGKh6kvczRUp3X9BnmFyLzHNVRpkeShNM1b+iDngUn2Oue4qLLV3cf+YST2tiLf3sj04wmypSEt76wFixwoJpcbKnh/ZMmuXK2vqdYJXLxyPMDiTpTOX/DbhK88bMMh4Y5sSZt3R2/+53aRkCzgT+oX4Kls2i49YDT+M5JkMmV+aj3BrII/+a15MuSevZEPl3UzxP5/8EMiurfO1L0hyNU27tZehL/c/zJNzsLXB+uoNySZBfFQD4tIbHHxJMfoxxu2pi7rK5fsm3FgL5MwXKQAPaMzh8JMbg61E6mn3c8B/CF5yx2L1tC/5TR4nsAS/RhlNzcR0P6TggFVoDGrYqyYMkLOybZ4fQZFZqGOHsgi4KF1tIakrhKIXj/WrBQAuJV3EQtsBbEQjbQVQEB/0HUHu3Y2wU5/XKVRqhFD8AgpYX2M9TNGcAAAAASUVORK5CYII=">
<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 %}
</head>
<body id="{{ pageId }}" class="{{ pageClass }}">
{% block main %}
{% import "hippie/macros/footer-status.njk" as status %}
{{ status.footer() }}
{% endblock %}
</body>
</html>

116
source/templates/demo/data.json
View file

@ -1,58 +1,58 @@
{
"demoadditionallinks": [
{
"href": "/demo.html",
"text": "Index"
},
{
"href": "/demo/intro.html",
"text": "Intro"
},
{
"href": "/demo/elements.html",
"text": "Elements"
},
{
"href": "/demo/examples.html",
"text": "Examples"
},
{
"href": "/demo/tests.html",
"text": "Tests"
}
],
"demolinks": [
{
"href": "demo/blank.html",
"text": "Blank"
},
{
"href": "demo/maintenance.html",
"text": "Maintenance"
},
{
"href": "demo/error/304.html",
"text": "304"
},
{
"href": "demo/error/404.html",
"text": "404"
},
{
"href": "demo/error/403.html",
"text": "403"
},
{
"href": "demo/error/400.html",
"text": "400"
},
{
"href": "demo/error/500.html",
"text": "500"
},
{
"href": "demo/os.html",
"text": "OS"
}
]
}
{
"demoadditionallinks": [
{
"href": "/demo.html",
"text": "Index"
},
{
"href": "/demo/intro.html",
"text": "Intro"
},
{
"href": "/demo/elements.html",
"text": "Elements"
},
{
"href": "/demo/examples.html",
"text": "Examples"
},
{
"href": "/demo/tests.html",
"text": "Tests"
}
],
"demolinks": [
{
"href": "demo/blank.html",
"text": "Blank"
},
{
"href": "demo/maintenance.html",
"text": "Maintenance"
},
{
"href": "demo/error/304.html",
"text": "304"
},
{
"href": "demo/error/404.html",
"text": "404"
},
{
"href": "demo/error/403.html",
"text": "403"
},
{
"href": "demo/error/400.html",
"text": "400"
},
{
"href": "demo/error/500.html",
"text": "500"
},
{
"href": "demo/os.html",
"text": "OS"
}
]
}

20
source/templates/demo/macros/_nav.njk
View file

@ -1,10 +1,10 @@
<!-- nav.main.macro -->
{% macro main(data, active='') %}
<nav>
<ul>
{% for link in data %}
<li{%if active == link.text %} class="active_txt"{% endif %}>{%if active == link.text %}{{ link.text }}{%else%}<a href="{{ link.href }}">{{ link.text }}</a>{% endif %}</li>
{% endfor %}
</ul>
</nav>
{% endmacro %}
<!-- nav.main.macro -->
{% macro main(data, active='') %}
<nav>
<ul>
{% for link in data %}
<li{%if active == link.text %} class="active_txt"{% endif %}>{%if active == link.text %}{{ link.text }}{%else%}<a href="{{ link.href }}">{{ link.text }}</a>{% endif %}</li>
{% endfor %}
</ul>
</nav>
{% endmacro %}

26
source/templates/demo/partials/_meta.njk
View file

@ -1,13 +1,13 @@
<!-- 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">
{# <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="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEAAAIBAQCbjUIABQQCAGdfKgDcxYUAiXpGABkWCgDXxnEApmxRAMGZawAIBwMArZ5PAKFydQBmIZIAoGJFAIx+QwBSSyIA1biBADlx0gBNn+0AgztQAMimcQAMCwQADAsFANS/dAB7P3EAeuH7ANb4/gBQPLwAp2pNAI6CQwCilEwAr3hdADyH5ADw/f8A////AHTU+AB6M2YA0LN4ABMRBwA/OhsAyKR2AGYvjQCf7PwA7fz/AENy2gCrclkAk4ZDAAYFAgDNtXEAjkhHAEul7QD8//8AlOn8AGk1hwDWvXsAGBYJAJaHSgCnbE4AVy6rAML0/gD7/v8AQ6vuAKx1YwCZjEQALCgTALyOZwB+NVoAZ8D0AL30/QBLULMA2sV+AB4bCwDFpm0Ak087AFArvgBv4PoAjOf7AIzm+wCN4/sAjuH7AI7h+gCP3fkAOI/sAKVvcwCfkUQAfnM6ANO2hAC3iGkAk150AI9OcACKRmkAhj9kAH84YQB9NWEAfTRgAH0zYAB6MWYAei9lAItFUADdy3wAKCQPAFtTJQB2bDIAhXk5AJKGPwCbjkQAq5xOALepWwDEtGcAzLlwAMyzcgDKrXIAx6NwALyNZgDWu4IApJZHAAcGAwANDAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB3eGhpamtsbW5vcHFycwt0dXZYWVpbXF1eX2BhYmNkZWZnAktMTU5PUFFRUlNUVVZXAABDREVGJSUlJSUlR0hJSgAAADs8PT4lJSUlP0BBQgAAAAAyMzQ1NiUlJTc4OToAAAAAACorLC0lJS4vMDEAAAAAAAAAISIjJCUmJygpAAAAAAAAABkaGxwdHh8gAAAAAAAAAAAAEhMUFRYXGAAAAAAAAAAAAAANDg8QEQAAAAAAAAAAAAAACAkKCwwAAAAAAAAAAAAAAAAFBgcAAAAAAAAAAAAAAAAAAgMEAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=">
<!-- 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">
{# <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="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEAAAIBAQCbjUIABQQCAGdfKgDcxYUAiXpGABkWCgDXxnEApmxRAMGZawAIBwMArZ5PAKFydQBmIZIAoGJFAIx+QwBSSyIA1biBADlx0gBNn+0AgztQAMimcQAMCwQADAsFANS/dAB7P3EAeuH7ANb4/gBQPLwAp2pNAI6CQwCilEwAr3hdADyH5ADw/f8A////AHTU+AB6M2YA0LN4ABMRBwA/OhsAyKR2AGYvjQCf7PwA7fz/AENy2gCrclkAk4ZDAAYFAgDNtXEAjkhHAEul7QD8//8AlOn8AGk1hwDWvXsAGBYJAJaHSgCnbE4AVy6rAML0/gD7/v8AQ6vuAKx1YwCZjEQALCgTALyOZwB+NVoAZ8D0AL30/QBLULMA2sV+AB4bCwDFpm0Ak087AFArvgBv4PoAjOf7AIzm+wCN4/sAjuH7AI7h+gCP3fkAOI/sAKVvcwCfkUQAfnM6ANO2hAC3iGkAk150AI9OcACKRmkAhj9kAH84YQB9NWEAfTRgAH0zYAB6MWYAei9lAItFUADdy3wAKCQPAFtTJQB2bDIAhXk5AJKGPwCbjkQAq5xOALepWwDEtGcAzLlwAMyzcgDKrXIAx6NwALyNZgDWu4IApJZHAAcGAwANDAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB3eGhpamtsbW5vcHFycwt0dXZYWVpbXF1eX2BhYmNkZWZnAktMTU5PUFFRUlNUVVZXAABDREVGJSUlJSUlR0hJSgAAADs8PT4lJSUlP0BBQgAAAAAyMzQ1NiUlJTc4OToAAAAAACorLC0lJS4vMDEAAAAAAAAAISIjJCUmJygpAAAAAAAAABkaGxwdHh8gAAAAAAAAAAAAEhMUFRYXGAAAAAAAAAAAAAANDg8QEQAAAAAAAAAAAAAACAkKCwwAAAAAAAAAAAAAAAAFBgcAAAAAAAAAAAAAAAAAAgMEAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=">

14
source/templates/demo/partials/exp-colors.njk
View file

@ -1,7 +1,7 @@
<!-- explanation-colors.partial -->
{# var colors = [{name: "alpha", class: "alpha_color"}] #}
{% set cls = cycler("odd", "even") %}
{% for row in rows %}
<div class="{{ cls.next() }}">{{ row.name }}</div>
{% endfor %}
<!-- explanation-colors.partial -->
{# var colors = [{name: "alpha", class: "alpha_color"}] #}
{% set cls = cycler("odd", "even") %}
{% for row in rows %}
<div class="{{ cls.next() }}">{{ row.name }}</div>
{% endfor %}

26
source/templates/hippie/macros/footer-status.njk
View file

@ -1,13 +1,13 @@
<!-- footer-status.macro -->
{% macro footer(email='admin@domain.tld', app='Application', version='ver.s.ion', system='System Name', domain='domain.tld:port', type) %}
{% if not type or type == 'status' %}
<footer class="pos_abs pin_bottom width_full">
<address class="txt_center">Kontakt: <a class="lineLink" href="mailto:{{ email }}">{{ email }}</a> * Server: {{ app }}/{{ version }} ({{ system }}) * Domain: {{ domain }}</address>
</footer>
{% else %}
<footer class="pos_abs pin_bottom width_full">
<p>Platzhalter unten fixiert</p>
</footer>
{% endif %}
{% endmacro %}
<!-- footer-status.macro -->
{% macro footer(email='admin@domain.tld', app='Application', version='ver.s.ion', system='System Name', domain='domain.tld:port', type) %}
{% if not type or type == 'status' %}
<footer class="pos_abs pin_bottom width_full">
<address class="txt_center">Kontakt: <a class="lineLink" href="mailto:{{ email }}">{{ email }}</a> * Server: {{ app }}/{{ version }} ({{ system }}) * Domain: {{ domain }}</address>
</footer>
{% else %}
<footer class="pos_abs pin_bottom width_full">
<p>Platzhalter unten fixiert</p>
</footer>
{% endif %}
{% endmacro %}

10
source/templates/hippie/macros/top-macro.njk
View file

@ -1,5 +1,5 @@
{% macro field(name, value='', type='text') %}
<div class="field">
<input type="{{ type }}" name="{{ name }}" value="{{ value | escape }}" />
</div>
{% endmacro %}
{% macro field(name, value='', type='text') %}
<div class="field">
<input type="{{ type }}" name="{{ name }}" value="{{ value | escape }}" />
</div>
{% endmacro %}

4
source/templates/hippie/partials/_body_hover.njk
View file

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

56
source/templates/hippie/partials/_body_nav.njk
View file

@ -1,28 +1,28 @@
<!-- body_nav.partial -->
<div class="pos_rel">
<nav class="nav_page_meta">
<ul>
<li class="magic">
<a href="#begin" class="js_scrolltop a_button_meta">
<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> #}
<a href="#meta" class="js_showmeta a_button_meta">
<div class="sprite_img demo__sprite_meta meta"></div>
</a>
</li>
<li>
<a href="#end" class="js_scrolldown a_button_meta">
<div class="sprite_img demo__sprite_down"></div>
{# <img src="../art/down.png" alt="" width="32" height="32"> #}
</a>
</li>
</ul>
</nav>
</div>
{# <div class="exp_overlay_btn exp_help_btn">
<span class="span_solo">?</span>
</div> #}
<!-- body_nav.partial -->
<div class="pos_rel">
<nav class="nav_page_meta">
<ul>
<li class="magic">
<a href="#begin" class="js_scrolltop a_button_meta">
<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> #}
<a href="#meta" class="js_showmeta a_button_meta">
<div class="sprite_img demo__sprite_meta meta"></div>
</a>
</li>
<li>
<a href="#end" class="js_scrolldown a_button_meta">
<div class="sprite_img demo__sprite_down"></div>
{# <img src="../art/down.png" alt="" width="32" height="32"> #}
</a>
</li>
</ul>
</nav>
</div>
{# <div class="exp_overlay_btn exp_help_btn">
<span class="span_solo">?</span>
</div> #}

8
source/templates/hippie/partials/_footer.njk
View file

@ -1,4 +1,4 @@
<!-- footer.partial -->
<footer class="footer_site">
<div id="end"></div>
</footer>
<!-- footer.partial -->
<footer class="footer_site">
<div id="end"></div>
</footer>