diff --git a/.bowerrc b/.bowerrc index 201ba9d..ea25244 100644 --- a/.bowerrc +++ b/.bowerrc @@ -1,3 +1,3 @@ { - "directory": "source/bower_components/" + "directory": "vendor/" } diff --git a/bower.json b/bower.json index bb2622f..66d9bde 100644 --- a/bower.json +++ b/bower.json @@ -13,6 +13,7 @@ "node_modules", "bower_components", "build/bower_components", + "build/vendor", "test", "tests" ], diff --git a/gulpfile.js b/gulpfile.js index 54ce553..be19cfe 100644 --- a/gulpfile.js +++ b/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.reporter('default'), + // jshint('.jshintrc'), + // 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 ... -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()); +// copy additional files +gulp.task('favicon', function() { + return gulp.src('source/favicon.ico') + .pipe(plumbError()) + .pipe(gulp.dest(build_folder.root)) + ; }); -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 diff --git a/source/code/hippie/functions.js b/source/code/hippie/functions.js index d120d16..94f4b75 100644 --- a/source/code/hippie/functions.js +++ b/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("
"); $('#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 { - top: box.top + pageYOffset, - left: box.left + pageXOffset - }; + return { + top: box.top + pageYOffset, + left: box.left + pageXOffset + }; } // https://stackoverflow.com/a/488073/1444149 -function Utils() { - -} +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(); + 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)); - } - } + if (fullyInView === true) { + return ((pageTop < elementTop) && (pageBottom > elementBottom)); + } else { + 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; }); diff --git a/source/code/hippie/global.js b/source/code/hippie/global.js index 1b8e7de..1f96a87 100644 --- a/source/code/hippie/global.js +++ b/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(); - $('body').animate({scrollTop: 0}, basic_ease, function() { - console.log('arrived at 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) { - console.log('scroll down'); + $('.js_scrolldown').click(function(event) { event.preventDefault(); - $('body').animate({scrollTop: $(document).height()}, basic_ease * 2, function() { - console.log('arrived at bottom'); - }); + var pos = Math.max(html_height, body_height) - view_height; + 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( "" ); - $( this ).html( tempContent +""+ i +"" ); + $( this ).html(tempContent + "" + i + ""); 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) { - $('#js_scrolltop').parent().removeClass('magic'); + if (doc_pos_y > scroll_y_margin) { + $('.js_scrolltop').parent().removeClass('magic'); } else { - $('#js_scrolltop').parent().addClass('magic'); + $('.js_scrolltop').parent().addClass('magic'); } diff --git a/source/code/hippie/variables.js b/source/code/hippie/variables.js index 3aa9cd6..0f19349 100644 --- a/source/code/hippie/variables.js +++ b/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 h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); +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 = h; +var scroll_y_margin = view_height; - -// TEST -// var fixed_containers = []; +var onerow_alphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ "; +var onerow_digits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) "; diff --git a/source/demo_data.json b/source/demo_data.json index 90f05d5..6623626 100644 --- a/source/demo_data.json +++ b/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" diff --git a/source/favicon.ico b/source/favicon.ico new file mode 100644 index 0000000..745351c Binary files /dev/null and b/source/favicon.ico differ diff --git a/source/pages/demo.njk b/source/pages/demo.njk index 14de17c..2835071 100644 --- a/source/pages/demo.njk +++ b/source/pages/demo.njk @@ -7,8 +7,6 @@ {% block title %}Index{% endblock %} {% block head %} {{ super() }} - - {% endblock %} {% block body_content %} @@ -50,7 +48,6 @@ C(")(") // Page specific // ------------------------------------------------------------------------------ $( document ).ready(function() { - console.log('HIPPIE'); }); {% endblock %} diff --git a/source/pages/demo/blank.njk b/source/pages/demo/blank.njk index 7f12f0e..eb0a6c4 100644 --- a/source/pages/demo/blank.njk +++ b/source/pages/demo/blank.njk @@ -8,8 +8,6 @@ {% block head %} {{ super() }} - - {% endblock %} {% block body_content %} diff --git a/source/pages/demo/elements.njk b/source/pages/demo/elements.njk index c53df80..2895727 100644 --- a/source/pages/demo/elements.njk +++ b/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' diff --git a/source/pages/demo/error/304.njk b/source/pages/demo/error/304.njk new file mode 100644 index 0000000..f2ca90d --- /dev/null +++ b/source/pages/demo/error/304.njk @@ -0,0 +1,23 @@ + +{% set pageId = "304" %} +{% set pageClass = "body_status" %} + +{% extends "demo/maintenance.njk" %} + +{% block title %}{{ pageId }}{% endblock %} +{% block head %} +{{ super() }} +{% endblock %} + +{% block body_content %} +
+

{{ pageId }}

+

Umleitung

+

Unverändert Not Modified

+
+

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 Browser-Cache-Versionsvergleich.

+

Wikipedia

+
+
+{{ super() }} +{% endblock %} diff --git a/source/pages/demo/error/400.njk b/source/pages/demo/error/400.njk new file mode 100644 index 0000000..b5204b0 --- /dev/null +++ b/source/pages/demo/error/400.njk @@ -0,0 +1,23 @@ + +{% set pageId = "400" %} +{% set pageClass = "body_status" %} + +{% extends "demo/maintenance.njk" %} + +{% block title %}{{ pageId }}{% endblock %} +{% block head %} +{{ super() }} +{% endblock %} + +{% block body_content %} +
+

{{ pageId }}

+

Client-Fehler

+

Fehlerhafte Anfrage! Bad Request

+
+

Die Anfrage-Nachricht war fehlerhaft aufgebaut.

+

Wikipedia

+
+
+{{ super() }} +{% endblock %} diff --git a/source/pages/demo/error/403.njk b/source/pages/demo/error/403.njk new file mode 100644 index 0000000..1a06a2e --- /dev/null +++ b/source/pages/demo/error/403.njk @@ -0,0 +1,23 @@ + +{% set pageId = "403" %} +{% set pageClass = "body_status" %} + +{% extends "demo/maintenance.njk" %} + +{% block title %}{{ pageId }}{% endblock %} +{% block head %} +{{ super() }} +{% endblock %} + +{% block body_content %} +
+

{{ pageId }}

+

Client-Fehler

+

Nicht erlaubt! Forbidden

+
+

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.

+

Wikipedia

+
+
+{{ super() }} +{% endblock %} diff --git a/source/pages/demo/error/404.njk b/source/pages/demo/error/404.njk index 33c26d0..5e9509b 100644 --- a/source/pages/demo/error/404.njk +++ b/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() }} - - {% endblock %} {% block body_content %}
-

404

+

{{ pageId }}

Client-Fehler

Hier ist nichts. Not Found

@@ -21,5 +19,5 @@

Wikipedia

-{% include "demo/partials/footer-status.njk" %} +{{ super() }} {% endblock %} diff --git a/source/pages/demo/error/500.njk b/source/pages/demo/error/500.njk index e74624a..37b2ad6 100644 --- a/source/pages/demo/error/500.njk +++ b/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() }} - - {% endblock %} {% block body_content %}
-

500

+

{{ pageId }}

Server-Fehler

Allgemeiner Server Fehler!!! Internal Server Error

@@ -21,5 +19,5 @@

Wikipedia

-{% include "demo/partials/footer-status.njk" %} +{{ super() }} {% endblock %} diff --git a/source/pages/demo/examples.njk b/source/pages/demo/examples.njk index 49a8cc3..3b9d82a 100644 --- a/source/pages/demo/examples.njk +++ b/source/pages/demo/examples.njk @@ -223,49 +223,6 @@ -
-
-

Autarke Seiten

-

Diese Elemente repräsentieren jeweils eine eigene Seite.

-
-
-
-
-

404

-

Hier ist nichts.

-
-

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.

-

Wikipedia

-
-
- {% include "demo/partials/footer-status.njk" %} -
-
-
-

403

-

Nicht erlaubt! Forbidden

-
-

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.

-

Wikipedia

-
-
- {% include "demo/partials/footer-status.njk" %} -
-
-
-

400

-

Fehlerhafte Anfrage! Bad Request

-
-

Die Anfrage-Nachricht war fehlerhaft aufgebaut.

-

Wikipedia

-
-
- {% include "demo/partials/footer-status.njk" %} -
-
-
- - {% 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' diff --git a/source/pages/demo/intro.njk b/source/pages/demo/intro.njk index 17eb303..6c71dea 100644 --- a/source/pages/demo/intro.njk +++ b/source/pages/demo/intro.njk @@ -11,9 +11,6 @@ {% block body_content %}
- {% include "hippie/partials/nav-page-meta.njk" %}
@@ -133,8 +130,8 @@

Textebene

{# // 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 #}

Verweise

-

Ein wesentlicher Bestandteil von Hypertext sind Verweise <a>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. Interne Verweisea.a_line können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. Externe Verweise 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 Alles auslösen. Anweisungen werden im URL Standard übergeben.

-

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. Farbige oder unterstrichene Varianten sind einfache Beispiele.

+

Ein wesentlicher Bestandteil von Hypertext sind Verweise <a>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. Interne Verweisea.a_line können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. Externe Verweise 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 Alles auslösen. Anweisungen werden im URL Standard übergeben.

+

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. Farbige oder unterstrichene Varianten sind einfache Beispiele.

Wird der Verweis innerhalb eines <nav> Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes oder der Anwendung. Verweise werden dann durchaus auch wie Schaltflächen dargestellt.