Maintenance and a little bit more content

- added favicon
- changes to the gulp sprite module
- changes to gulp linting
- fixed javascript scroll function and added setup function content
- fixed javascript indentation
- new error pages
- changed css for link colors
- fixed css sprites

.bowerrc

@@ -1,3 +1,3 @@
 {
-	"directory": "source/bower_components/"
+	"directory": "vendor/"
 }

bower.json

@@ -13,6 +13,7 @@
     "node_modules",
     "bower_components",
     "build/bower_components",
+    "build/vendor",
     "test",
     "tests"
   ],

gulpfile.js

@@ -71,6 +71,14 @@ gulp.task('sass', function() {
     stream: true
   }))
 });
+// linting ...
+gulp.task('lint:scss', function() {
+  return gulp.src('source/style/**/*.scss')
+  .pipe(plumbError('SASSLint Error'))
+  .pipe(sasslint({
+    configFile: '.sass-lint.yml'
+  }))
+})
 
 
 // and this is functionality
@@ -78,8 +86,8 @@ gulp.task('js', function(cb) {
   pump([
     gulp.src(source_folder.scripts),
     cache('scripts'),
-    jshint('.jshintrc'),
+    // jshint('.jshintrc'),
-    jshint.reporter('default'),
+    // jshint.reporter('default'),
     sourcemap.init(),
     minify(),
     remember('scripts'),
@@ -89,6 +97,22 @@ gulp.task('js', function(cb) {
     browsersync.stream()
   ], cb);
 });
+// linting ...
+gulp.task('lint:js', function() {
+  return gulp.src('source/code/**/*.js')
+  .pipe(plumbError('JSHint Error'))
+  .pipe(jshint())
+  .pipe(jshint.reporter('jshint-stylish'))
+  .pipe(jshint.reporter('fail', {
+    ignoreWarning: true,
+    ignoreInfo: true
+  }))
+  .pipe(jscs({
+    fix: false,
+    configPath: '.jscsrc'
+  }))
+  // .pipe(jscs.reporter());
+});
 
 
 // templating engine
@@ -133,10 +157,14 @@ gulp.task('sprites', function() {
   gulp.src('source/art/sprites/**/*')
   .pipe(spritesmith({
     cssName: '_sprites.scss',
-    imgName: 'sprites.png'
+    imgName: 'sprites.png',
+    imgPath: '../art/sprites.png',
+    // retinaSrcFilter:	'source/art/sprites/*@2x.png',
+    // retinaImgName:	'sprites@2x.png',
+    // retinaImgPath:	'../art/sprites@2x.png'
   }))
   .pipe(gulpif('*.png', gulp.dest(build_folder.art)))
-  .pipe(gulpif('*.scss', gulp.dest('source/style/hippie/modules/media')));
+  .pipe(gulpif('*.scss', gulp.dest('source/style/hippie/mixins')));
 });
 
 // copy art files
@@ -155,34 +183,18 @@ gulp.task('vendor', function() {
   ;
 });
 
-// linting ...
+// copy additional files
-gulp.task('lint:js', function() {
+gulp.task('favicon', function() {
-  return gulp.src('source/code/**/*.js')
+  return gulp.src('source/favicon.ico')
-  .pipe(plumbError('JSHint Error'))
+  .pipe(plumbError())
-  .pipe(jshint())
+  .pipe(gulp.dest(build_folder.root))
-  .pipe(jshint.reporter('jshint-stylish'))
+  ;
-  .pipe(jshint.reporter('fail', {
-    ignoreWarning: true,
-    ignoreInfo: true
-  }))
-  .pipe(jscs({
-    fix: false,
-    configPath: '.jscsrc'
-  }))
-  // .pipe(jscs.reporter());
 });
-gulp.task('lint:scss', function() {
-  return gulp.src('source/style/**/*.scss')
-  .pipe(plumbError('SASSLint Error'))
-  .pipe(sasslint({
-    configFile: '.sass-lint.yml'
-  }))
-})
 
 
 // cleans the build folder
 gulp.task('clean:dev', function() {
-  del.sync([
+  return del.sync([
     build_folder.styles,
     build_folder.pages,
     build_folder.root+'/*.html'
@@ -202,9 +214,9 @@ gulp.task('overwatch', function() {
   gulp.watch([
     'source/templates/**/*',
     'source/pages/**/*.+(html|njk)',
-    'source/art/**/*',
     'source/demo_data.json'
   ], ['nunjucks']);
+  gulp.watch('source/art/**/*', ['sprites']);
 });
 
 
@@ -212,7 +224,7 @@ gulp.task('overwatch', function() {
 gulp.task('default', function(callback) {
   sequencer(
     'clean:dev',
-    ['sprites', 'art', 'vendor', 'lint:js', 'lint:scss'],
+    ['sprites', 'art', 'vendor', 'favicon', 'lint:js', 'lint:scss'],
     ['sass', 'js', 'nunjucks'],
     ['syncreload', 'overwatch'],
     callback

source/code/hippie/functions.js

@@ -1,6 +1,9 @@
 "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");
@@ -9,33 +12,31 @@ function setup() {
 
 // get document coordinates of the element
 function getCoords(elem) {
-  let box = elem.getBoundingClientRect();
+	let box = elem.getBoundingClientRect();
 
-  return {
+	return {
-    top: box.top + pageYOffset,
+		top: box.top + pageYOffset,
-    left: box.left + pageXOffset
+		left: box.left + pageXOffset
-  };
+	};
 }
 
 // https://stackoverflow.com/a/488073/1444149
-function Utils() {
+function Utils() {}
-
-}
 
 Utils.prototype = {
-    constructor: Utils,
+	constructor: Utils,
-    isElementInView: function (element, fullyInView) {
+	isElementInView: function (element, fullyInView) {
-        var pageTop = $(window).scrollTop();
+		var pageTop = $(window).scrollTop();
-        var pageBottom = pageTop + $(window).height();
+		var pageBottom = pageTop + $(window).height();
-        var elementTop = $(element).offset().top;
+		var elementTop = $(element).offset().top;
-        var elementBottom = elementTop + $(element).height();
+		var elementBottom = elementTop + $(element).height();
 
-        if (fullyInView === true) {
+		if (fullyInView === true) {
-            return ((pageTop < elementTop) && (pageBottom > elementBottom));
+			return ((pageTop < elementTop) && (pageBottom > elementBottom));
-        } else {
+		} else {
-            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
+			return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
-        }
+		}
-    }
+	}
 };
 
 var Utils = new Utils();
@@ -51,7 +52,7 @@ function scrollNav() {
 		$('.'+theClass).parent('li').addClass('active');
 		//Animate
 		$('html, body').stop().animate({
-				scrollTop: $( $(this).attr('href') ).offset().top - 160
+			scrollTop: $( $(this).attr('href') ).offset().top - 160
 		}, 400);
 		return false;
 	});

source/code/hippie/global.js

@@ -38,13 +38,13 @@ $( document ).ready(function() {
 				// "left": ev.pageX - $(this).offset().left + 8
 			});
 			// TODO - needs more love
-			console.log(ev.pageX);
+			// console.log(ev.pageX);
 		}
 	);
 
 	// WIP Activates layer with explanation elements
 	// Besser ::after oder ::before benutzen
-	$(".exp_help_btn").click(function(e){
+	$(".js_showmeta").click(function(e){
 		var $wrap, $pop;
 
 		if(exp_mode !== true){
@@ -80,24 +80,32 @@ $( document ).ready(function() {
 			exp_mode = false;
 
 		}
-		console.log("Explanation mode: "+ exp_mode);
+		console.log("Explanation mode", exp_mode);
 	});
 
 	//	WIP Scroll to top
-	$('#js_scrolltop').click(function(event) {
+	$('.js_scrolltop').click(function(event) {
+		event.preventDefault();
 		console.log('scroll to the top');
-		event.preventDefault();
+
-		// $('body').scrollTop();
+		document.documentElement.scrollTop = document.body.scrollTop = 0;
-		$('body').animate({scrollTop: 0}, basic_ease, function() {
+
-			 console.log('arrived at top');
+		// 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) {
+	$('.js_scrolldown').click(function(event) {
-		console.log('scroll down');
 		event.preventDefault();
-		$('body').animate({scrollTop: $(document).height()}, basic_ease * 2, function() {
+		var pos = Math.max(html_height, body_height) - view_height;
-			 console.log('arrived at bottom');
+		console.log('scroll down to', pos);
-		});
+		document.documentElement.scrollTop = pos;
 	});
 
 
@@ -113,10 +121,10 @@ $( document ).ready(function() {
 	$( ".pass-def dd" ).each(function() {
 		$( this ).find( "li" ).each(function( index ) {
 			if ( 0 === $( this ).children( "ul" ).length ) {
-				//console.log( index + ": " + $( this ).text() );
+				//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>" );
+				$( this ).html(tempContent + "<span class=\"list-count\">" + i + "</span>");
 				i++;
 			}
 		});
@@ -135,12 +143,11 @@ $( document ).scroll(function() {
 	// Toggle navigation elements
 	doc_pos_y = $( document ).scrollTop();
 	// console.log(doc_pos_y);
-	var h = scroll_y_margin;
 	// var demo_margin = $('.header__fix');
-	if (doc_pos_y > h) {
+	if (doc_pos_y > scroll_y_margin) {
-		$('#js_scrolltop').parent().removeClass('magic');
+		$('.js_scrolltop').parent().removeClass('magic');
 	} else {
-		$('#js_scrolltop').parent().addClass('magic');
+		$('.js_scrolltop').parent().addClass('magic');
 	}
 
 

source/code/hippie/variables.js

@@ -1,14 +1,16 @@
-"use strict";
+var hippie_brand = "|-| | |^ |^ | [- ";
 
-var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+var view_width = Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0);
-var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 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 = h;
+var scroll_y_margin = view_height;
 
-
+var onerow_alphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
-// TEST
+var onerow_digits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";
-// var fixed_containers = [];

source/demo_data.json

@@ -26,10 +26,22 @@
       "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"

source/pages/demo.njk

@@ -7,8 +7,6 @@
 {% block title %}Index{% endblock %}
 {% block head %}
 {{ super() }}
-<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 %}
 
 {% block body_content %}
@@ -50,7 +48,6 @@ C(")(")</pre>
 // Page specific
 // ------------------------------------------------------------------------------
 $( document ).ready(function() {
-  console.log('HIPPIE');
 });
 </script>
 {% endblock %}

source/pages/demo/blank.njk

@@ -8,8 +8,6 @@
 
 {% block head %}
 {{ super() }}
-<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 %}
 
 {% block body_content %}

source/pages/demo/elements.njk

@@ -72,8 +72,6 @@
 // Page specific
 // ------------------------------------------------------------------------------
 $( document ).ready(function() {
-  console.log('HIPPIE');
-
   // jq-sticky-anything
   $('#js_demo_fix').stickThis({
     pushup: '#js_demo_stop'

source/pages/demo/error/304.njk

@@ -0,0 +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 body_content %}
+<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 %}

source/pages/demo/error/400.njk

@@ -0,0 +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 body_content %}
+<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 %}

source/pages/demo/error/403.njk

@@ -0,0 +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 body_content %}
+<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 %}

source/pages/demo/error/404.njk

@@ -4,16 +4,14 @@
 
 {% extends "demo/maintenance.njk" %}
 
-{% block title %}404{% endblock %}
+{% block title %}{{ pageId }}{% endblock %}
 {% block head %}
 {{ super() }}
-<link rel="stylesheet" type="text/css" media="all" href="../../css/demo_basic.css"/>
-<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
 {% endblock %}
 
 {% block body_content %}
 <main class="main_site">
-  <h1>404</h1>
+  <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">
@@ -21,5 +19,5 @@
     <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
   </blockquote>
 </main>
-{% include "demo/partials/footer-status.njk" %}
+{{ super() }}
 {% endblock %}

source/pages/demo/error/500.njk

@@ -4,16 +4,14 @@
 
 {% extends "demo/maintenance.njk" %}
 
-{% block title %}500{% endblock %}
+{% block title %}{{ pageId }}{% endblock %}
 {% block head %}
 {{ super() }}
-<link rel="stylesheet" type="text/css" media="all" href="../../css/demo_basic.css"/>
-<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
 {% endblock %}
 
 {% block body_content %}
 <main class="main_site">
-  <h1>500</h1>
+  <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">
@@ -21,5 +19,5 @@
     <p class="quote-author"><a class="line-link" href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a></p>
   </blockquote>
 </main>
-{% include "demo/partials/footer-status.njk" %}
+{{ super() }}
 {% endblock %}

source/pages/demo/examples.njk

@@ -223,49 +223,6 @@
       </div>
     </article>
   </section>
-  <section>
-    <header class="sec_main_center header_txt">
-      <h1>Autarke Seiten</h1>
-      <p>Diese Elemente repräsentieren jeweils eine eigene Seite.</p>
-    </header>
-    <article>
-      <section class="sec_main_status demo__status">
-        <div class="wrap_center">
-          <h1>404</h1>
-          <p>Hier ist nichts.</p>
-          <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
-            <p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
-            <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
-          </blockquote>
-        </div>
-        {% include "demo/partials/footer-status.njk" %}
-      </section>
-      <section class="sec_main_status demo__status">
-        <div class="wrap_center">
-          <h1>403</h1>
-          <p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
-          <blockquote>
-            <p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
-            <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
-          </blockquote>
-        </div>
-        {% include "demo/partials/footer-status.njk" %}
-      </section>
-      <section class="sec_main_status demo__status">
-        <div class="wrap_center">
-          <h1>400</h1>
-          <p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
-          <blockquote>
-            <p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
-            <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
-          </blockquote>
-        </div>
-        {% include "demo/partials/footer-status.njk" %}
-      </section>
-    </article>
-  </section>
-
-
 </div>
 {% include "hippie/partials/footer.njk" %}
 {% endblock %}
@@ -278,8 +235,6 @@
 // Page specific
 // ------------------------------------------------------------------------------
 $( document ).ready(function() {
-  console.log('HIPPIE');
-
   // jq-sticky-anything
   $('#js_demo_fix').stickThis({
     pushup: '#js_demo_stop'

source/pages/demo/intro.njk

@@ -11,9 +11,6 @@
 
 {% block body_content %}
 <div class="temp_layer">
-  <!-- <div class="exp_overlay_btn exp_help_btn">
-  <span class="span_solo">?</span>
-</div> -->
 {% include "hippie/partials/nav-page-meta.njk" %}
 </div>
 
@@ -133,8 +130,8 @@
     <h1 id="textlevel">Textebene</h1>
     {# // 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 // -- Edits -- // ins // del #}
     <h2>Verweise</h2>
-    <p>Ein wesentlicher Bestandteil von Hypertext sind Verweise <code>&lt;a&gt;</code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. <a class="a_line js_pop" href="#links">Interne Verweise</a><span class="exp_pop"><code class="code_solo">a.a_line</code></span> können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. <a class="a_line" href="http://de.wikipedia.org">Externe Verweise</a> verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können zum Beispiel auch auf E-Mail Adressen oder Dateien zeigen. Theoretisch kann solch ein Verweis <b>Alles</b> auslösen. Anweisungen werden im <a href="https://tools.ietf.org/html/rfc1738">URL Standard</a> übergeben.</p>
+    <p>Ein wesentlicher Bestandteil von Hypertext sind Verweise <code>&lt;a&gt;</code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. <a class="a_internal js_pop" href="#links">Interne Verweise</a><span class="exp_pop"><code class="code_solo">a.a_line</code></span> können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. <a class="a_external" href="http://de.wikipedia.org">Externe Verweise</a> verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können zum Beispiel auch auf E-Mail Adressen oder Dateien zeigen. Theoretisch kann solch ein Verweis <b>Alles</b> auslösen. Anweisungen werden im <a href="https://tools.ietf.org/html/rfc1738">URL Standard</a> übergeben.</p>
-    <p>Nicht nur Text kann als Verweis verwendet werden. Auch andere Elemente wie Bilder können verknüpft werden. Abhängig von ihrer Funktion und ihrem Zweck, werden Verweise unterschiedlich formatiert. <a href="#">Farbige</a> oder <a class="a_line" href="#">unterstrichene Varianten</a> sind einfache Beispiele.</p>
+    <p>Nicht nur Text kann als Verweis verwendet werden. Auch andere Elemente wie Bilder können verknüpft werden. Abhängig von ihrer Funktion und ihrem Zweck, werden Verweise unterschiedlich formatiert. <a class="a_internal" href="#">Farbige</a> oder <a class="a_line" href="#">unterstrichene Varianten</a> sind einfache Beispiele.</p>
     <p>Wird der Verweis innerhalb eines <code>&lt;nav&gt;</code> Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes oder der Anwendung. Verweise werden dann durchaus auch wie Schaltflächen dargestellt.</p>
     <nav>
       <p><a class="a_button_text" href="#textlevel">↥</a> (Zum Anfang des Abschnitts springen) <a class="a_button_text" href="#begin">⇫</a> (Zum Anfang der Seite springen)</p>
@@ -142,7 +139,7 @@
     <nav class="nav_center_old">
       <ul>
         <li><a href="../demo.html" class="a_button">Startseite</a></li>
-        <li><a href="" class="a_button">Hilfe</a></li>
+        <li><a href="" class="a_button a_internal">Hilfe</a></li>
         <li><a href="" class="a_button">⌨</a></li>
         <li><a href="" class="a_button">⋯</a></li>
       </ul>
@@ -594,8 +591,6 @@
 // Page specific
 // ------------------------------------------------------------------------------
 $( document ).ready(function() {
-  console.log('HIPPIE');
-
 });
 </script>
 {% endblock %}

source/pages/demo/maintenance.njk

@@ -8,8 +8,6 @@
 
 {% block head %}
 {{ super() }}
-<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 %}
 
 {% block body_content %}

source/pages/demo/os.njk

@@ -143,7 +143,6 @@
 // Page specific
 // ------------------------------------------------------------------------------
 $( document ).ready(function() {
-  console.log('HIPPIE');
 });
 </script>
 {% endblock %}

source/pages/demo/tests.njk

@@ -7,8 +7,6 @@
 {% block title %}Tests{% endblock %}
 {% block head %}
 {{ super() }}
-<link rel="stylesheet" type="text/css" media="all" href="../css/demo.css"/>
-<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
 <style>
 #error {
   border: 1px solid #FFFF66;

source/style/hippie/elements/_sections.scss

@@ -1,7 +1,7 @@
 // Root
 // -----------------------------------------------------------------------------
 html {
-	height: 100%;
+	// height: 100%;
 }
 
 

source/style/hippie/elements/_textlevel.scss

@@ -48,6 +48,14 @@ a {
 	}
 }
 
+.a_internal {
+	color: $charlie_color;
+}
+
+.a_external {
+	color: $delta_color;
+}
+
 .a_line {
 	border-bottom-width: $space_tiny;
 	border-bottom-style: dotted;

source/style/hippie/global/_config.scss

@@ -95,7 +95,7 @@ $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: $echo_color !default;
+$color_link_basic: $delta_color !default;
 $color_highlight_basic: $color_front_basic !default;
 $color_action_basic: $foxtrot_color !default;
 

source/style/hippie/mixins/_all.scss

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

source/style/hippie/mixins/_sprites.scss

@@ -18,8 +18,8 @@ $down-width: 32px;
 $down-height: 32px;
 $down-total-width: 64px;
 $down-total-height: 64px;
-$down-image: 'sprites.png';
+$down-image: '../art/sprites.png';
-$down: (32px, 0px, -32px, 0px, 32px, 32px, 64px, 64px, 'sprites.png', 'down', );
+$down: (32px, 0px, -32px, 0px, 32px, 32px, 64px, 64px, '../art/sprites.png', 'down', );
 $meta-name: 'meta';
 $meta-x: 32px;
 $meta-y: 32px;
@@ -29,8 +29,8 @@ $meta-width: 32px;
 $meta-height: 32px;
 $meta-total-width: 64px;
 $meta-total-height: 64px;
-$meta-image: 'sprites.png';
+$meta-image: '../art/sprites.png';
-$meta: (32px, 32px, -32px, -32px, 32px, 32px, 64px, 64px, 'sprites.png', 'meta', );
+$meta: (32px, 32px, -32px, -32px, 32px, 32px, 64px, 64px, '../art/sprites.png', 'meta', );
 $up-name: 'up';
 $up-x: 0px;
 $up-y: 0px;
@@ -40,13 +40,13 @@ $up-width: 32px;
 $up-height: 64px;
 $up-total-width: 64px;
 $up-total-height: 64px;
-$up-image: 'sprites.png';
+$up-image: '../art/sprites.png';
-$up: (0px, 0px, 0px, 0px, 32px, 64px, 64px, 64px, 'sprites.png', 'up', );
+$up: (0px, 0px, 0px, 0px, 32px, 64px, 64px, 64px, '../art/sprites.png', 'up', );
 $spritesheet-width: 64px;
 $spritesheet-height: 64px;
-$spritesheet-image: 'sprites.png';
+$spritesheet-image: '../art/sprites.png';
 $spritesheet-sprites: ($down, $meta, $up, );
-$spritesheet: (64px, 64px, 'sprites.png', $spritesheet-sprites, );
+$spritesheet: (64px, 64px, '../art/sprites.png', $spritesheet-sprites, );
 
 // The provided mixins are intended to be used with the array-like variables
 //

source/style/hippie/modules/media/_media_module.scss

@@ -1,9 +1,4 @@
-.up {
+.nomedia {
-	@include sprite($up);
+	@extend .box_placeholder;
-}
+	height: inherit;
-.down {
-	@include sprite($down);
-}
-.meta {
-	@include sprite($meta);
 }

source/style/modules/demo/_demo_module.scss

@@ -88,24 +88,27 @@
 }
 
 .demo__sprite_down {
-	width: 32px;
+	@include sprite($down);
-	height: 32px;
+	// width: 32px;
-	background-image: url(../art/sprites.png);
+	// height: 32px;
-	background-position: -32px 0;
+	// background-image: url(../art/sprites.png);
+	// background-position: -32px 0;
 }
 
 .demo__sprite_up {
-	width: 32px;
+	@include sprite($up);
-	height: 64px;
+	// width: 32px;
-	background-image: url(../art/sprites.png);
+	// height: 64px;
-	background-position: 0 0;
+	// background-image: url(../art/sprites.png);
+	// background-position: 0 0;
 }
 
 .demo__sprite_meta {
-	width: 32px;
+	@include sprite($meta);
-	height: 32px;
+	// width: 32px;
-	background-image: url(../art/sprites.png);
+	// height: 32px;
-	background-position: -32px 32px;
+	// background-image: url(../art/sprites.png);
+	// background-position: -32px 32px;
 }
 
 .demo__avatar {

source/templates/demo/default.njk

@@ -6,12 +6,15 @@
 
   {% block head %}
   <title>{% block title %}{% endblock %} - HIPPIE</title>
-  
+
   {% include "demo/partials/head-meta.njk" %}
 
-  <link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
+  <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
-  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
+  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
+  <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=">
 
+  <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>
 

source/templates/demo/extended.njk

@@ -18,12 +18,12 @@
   <!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
   <!--Only use one of the above!-->
 
-  <link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
+  <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
-  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
+  <link rel="shortcut icon" type="image/x-icon" href="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=">
 
   <!-- <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="all" href="/css/demo.css"/>
-  <!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
+  <!-- <link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/> -->
   {% endblock %}
 </head>
 

source/templates/demo/maintenance.njk

@@ -9,13 +9,19 @@
 
   {% include "demo/partials/head-meta.njk" %}
 
-  <link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
+  <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
-  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
+  <link rel="shortcut icon" type="image/x-icon" href="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 body_content %}{% endblock %}
+  {% block body_content %}
+
+  {% import "hippie/macros/footer-status.njk" as status %}
+  {{ status.footer() }}
+  {% endblock %}
 </body>
 </html>

source/templates/demo/partials/exp-colors.njk

@@ -0,0 +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 %}

source/templates/demo/partials/footer-status.njk

@@ -1,4 +0,0 @@
-<!-- footer-status.partial -->
-<footer class="pos_abs pin_bottom width_full">
-	<address class="txt_center"><a class="lineLink" href="mailto:admin@domain.tld">admin@domain.tld</a> * Server Application/ver.s.ion (System Name) serving domain.tld:port</address>
-</footer>

source/templates/hippie/macros/footer-status.njk

@@ -0,0 +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 %}

source/templates/hippie/partials/nav-page-meta.njk

@@ -2,22 +2,25 @@
 <nav class="nav_page_meta">
 	<ul>
 		<li class="magic">
-			<a href="#begin" id="js_scrolltop" class="a_button_meta">
+			<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="a_button_meta">
+			<a href="#meta" class="js_showmeta a_button_meta">
 				<div class="sprite_img demo__sprite_meta meta"></div>
 			</a>
 		</li>
 		<li>
-			<a href="#end" id="js_scrolldown" class="a_button_meta">
+			<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 class="exp_overlay_btn exp_help_btn">
+	<span class="span_solo">?</span>
+</div> #}