Requirements updated and new nunjucks variables

Fixed problems with base paths.
2020-04-04 23:56:49 +02:00 · 2020-04-04 23:56:49 +02:00 · b2ea5b01aa
commit b2ea5b01aa
parent 8567604ea6
26 changed files with 1404 additions and 1228 deletions
--- a/gulpfile.js
+++ b/gulpfile.js
@ -1,10 +1,12 @@
 // Setup project
 const hippie = {
-	brand: 'hippie',
-	jsFile: 'main',
-	jsonFile: 'db',
-	index: 'demo.html',
-	data: 'demo/data.json'
+  brand: 'hippie',
+  jsFile: 'main',
+  jsonFile: 'db',
+  index: 'demo.html',
+  data: 'demo/data.json',
+  titlePrefix: ' - HIPPIE',
+  pageBase: './'
 }
 // Gulp requirements
 const { watch, series, parallel } = require('gulp');
@ -16,6 +18,7 @@ const plumber = require('gulp-plumber');
 // const notify = require('gulp-notify');

 const nunjucksRender = require('gulp-nunjucks-render');
+// const nunjucks = require('gulp-nunjucks');
 const data = require('gulp-data');
 const jsonConcat = require('gulp-json-concat');
 const browserSync = require('browser-sync'), server = browserSync.create();
@ -41,248 +44,257 @@ const htmlValidator = require('gulp-w3c-html-validator');

 // Data variables
 const input = {
-	root: 'source',
-	screens: 'source/screens/**/*.+(njk|html)',
-	templates: 'source/templates',
-	data: 'source/data/**/*.json',
-	style: 'source/style/**/*.s+(a|c)ss',
-	code: [
-		'source/code/hippie/variables.js',
-		'source/code/hippie/functions.js',
-		'source/code/hippie/global.js',
-		'source/code/variables.js',
-		'source/code/functions.js',
-		'source/code/global.js',
-		'source/code/**/*.js',
-		'!source/vendor/**/*'
-	],
-	fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*',
-	art: {
-		favicons: 'source/art/favicons/**/*.+(ico|png)',
-		sprites: 'source/art/sprites/**/*.png',
-		images: 'source/art/images/**/*.+(png|gif|jpg|svg|webp)'
-	},
-	vendor: 'vendor/**/*',
-	demo: {
-		data: 'source/templates/demo/data.json'
-	}
+  root: 'source',
+  screens: 'source/screens/**/*.+(njk|html)',
+  templates: 'source/templates',
+  data: 'source/data/**/*.json',
+  style: 'source/style/**/*.s+(a|c)ss',
+  code: [
+    'source/code/hippie/variables.js',
+    'source/code/hippie/functions.js',
+    'source/code/hippie/global.js',
+    'source/code/variables.js',
+    'source/code/functions.js',
+    'source/code/global.js',
+    'source/code/**/*.js',
+    '!source/vendor/**/*'
+  ],
+  fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*',
+  art: {
+    favicons: 'source/art/favicons/**/*.+(ico|png)',
+    sprites: 'source/art/sprites/**/*.png',
+    images: 'source/art/images/**/*.+(png|gif|jpg|svg|webp)'
+  },
+  vendor: 'vendor/**/*',
+  demo: {
+    data: 'source/templates/demo/data.json'
+  }
 };

 const output = {
-	root: 'build',
-	screens: 'build/**/*.html',
-	data: 'build/json',
-	style: 'build/css',
-	code: 'build/js',
-	fonts: 'build/fonts',
-	art: 'build/art',
-	reports: 'reports',
-	vendor: 'build/vendor'
+  root: 'build',
+  screens: 'build/**/*.html',
+  data: 'build/json',
+  style: 'build/css',
+  code: 'build/js',
+  fonts: 'build/fonts',
+  art: 'build/art',
+  reports: 'reports',
+  vendor: 'build/vendor'
 };

 //Check for index file and deactivate demo content
 if (fs.existsSync('source/screens/index.njk')) {
-	hippie.index = 'index.html';
+  hippie.index = 'index.html';
 }
 if (fs.existsSync('source/templates/data.json')) {
-	hippie.data = 'data.json';
+  hippie.data = 'data.json';
 }
 if (fs.existsSync('source/data/data.json')) {
-	input.data = ['source/data/**/*.json', '!source/data/demo.json'];
+  input.data = ['source/data/**/*.json', '!source/data/demo.json'];
 }

 // Create tasks

 // Clean build folder
-function clean () {
-	return del(output.root +'/**');
+function clean() {
+  return del(output.root + '/**');
 }

 // Automagically reload browsers
-function reload (done) {
-	server.reload();
+function reload(done) {
+  server.reload();

-	done();
+  done();
 }

 // Concatenate JSON files
-function json () {
-	return src(input.data)
-	.pipe(plumber())
-	.pipe(jsonConcat(hippie.jsonFile +'.json', function (data) {
-		return new Buffer.from(JSON.stringify(data));
-	}))
-	.pipe(dest(output.data));
+function json() {
+  return src(input.data)
+    .pipe(plumber())
+    .pipe(jsonConcat(hippie.jsonFile + '.json', function (data) {
+      return new Buffer.from(JSON.stringify(data));
+    }))
+    .pipe(dest(output.data));
+}
+
+const manageEnvironment = function(environment) {
+  environment.addFilter('slug', function(str) {
+    return str && str.replace(/\s/g, '-', str).toLowerCase();
+  });
+
+  environment.addGlobal('titlePrefix', hippie.titlePrefix)
 }

 // Transpile HTML
-function nunjucks () {
-	return src(input.screens)
-	.pipe(plumber())
-	.pipe(data(function () {
-		let data = JSON.parse(fs.readFileSync(input.templates +'/'+ hippie.data));
-		object = {hippie, data};
-		return object;
-	}))
-	.pipe(nunjucksRender({
-		path: input.templates,
-		envOptions: {
-			trimBlocks: true
-		}
-	}))
-	.pipe(dest(output.root));
+function nunjucks() {
+  return src(input.screens)
+    .pipe(plumber())
+    .pipe(data(function () {
+      let data = JSON.parse(fs.readFileSync(input.templates + '/' + hippie.data));
+      object = { hippie, data };
+      return object;
+    }))
+    .pipe(nunjucksRender({
+      path: input.templates,
+      envOptions: {
+        trimBlocks: true
+      },
+      manageEnv: manageEnvironment
+    }))
+    .pipe(dest(output.root));
 }

-function validate () {
-	return src('build/**/*.html')
-	.pipe(htmlValidator())
-	.pipe(htmlValidator.reporter());
+function validate() {
+  return src('build/**/*.html')
+    .pipe(htmlValidator())
+    .pipe(htmlValidator.reporter());
 }

 // Serve files to the browser
-function serve (done) {
-	server.init({
-		index: hippie.index,
-		open: false,
-		server: output.root
-	});
+function serve(done) {
+  server.init({
+    index: hippie.index,
+    open: false,
+    server: output.root
+  });

-	done();
+  done();
 }

 // This is for the looks
-function style () {
-	return src(input.style)
-	// .pipe(plumbError('STYLE PROBLEM'))
-	.pipe(sass({
-		includePaths: [input.vendor +'/**/*.s+(a|c)ss']
-	}).on('error', sass.logError))
-	.pipe(autoprefixer(['>= 4%', 'last 2 version']))
-	.pipe(dest(output.style))
-	.pipe(cleanCss())
-	.pipe(rename({
-		suffix: '.min'
-	}))
-	.pipe(dest(output.style));
+function style() {
+  return src(input.style)
+    // .pipe(plumbError('STYLE PROBLEM'))
+    .pipe(sass({
+      includePaths: [input.vendor + '/**/*.s+(a|c)ss']
+    }).on('error', sass.logError))
+    .pipe(autoprefixer(['>= 4%', 'last 2 version']))
+    .pipe(dest(output.style))
+    .pipe(cleanCss())
+    .pipe(rename({
+      suffix: '.min'
+    }))
+    .pipe(dest(output.style));
 }
 // Linting
-function styleLint () {
-	var dir = output.reports;
-	if (!fs.existsSync(dir)) {
-		fs.mkdirSync(dir);
-	}
-	var file = fs.createWriteStream(output.reports +'/sass-lint.html');
-	var stream = src(input.style)
-	.pipe(plumber())
-	.pipe(sassLint({
-		configFile: '.sasslintrc',
-		files: {
-			ignore: input.vendor +'/**/*.s+(a|c)ss'
-		}
-	}))
-	.pipe(sassLint.format(file));
+function styleLint() {
+  const dir = output.reports;
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir);
+  }
+  let file = fs.createWriteStream(output.reports + '/sass-lint.html');
+  let stream = src(input.style)
+    .pipe(plumber())
+    .pipe(sassLint({
+      configFile: '.sasslintrc',
+      files: {
+        ignore: input.vendor + '/**/*.s+(a|c)ss'
+      }
+    }))
+    .pipe(sassLint.format(file));

-	stream.on('finish', function () {
-		file.end();
-	});
+  stream.on('finish', function () {
+    file.end();
+  });

-	return stream;
+  return stream;
 }

 // Javascript for the win
-function code (cb) {
-	pump([
-		src(input.code, {
-			sourcemaps: true,
-			allowEmpty: true
-		}),
-		plumber(),
-		// cache('code'),
-		babel({ presets: ['@babel/env']}),
-		concat(hippie.jsFile +'.js'),
-		dest(output.code),
-		uglify(),
-		// remember('code'),
-		rename({
-			suffix: '.min'
-		}),
-		dest(output.code, { sourcemaps: '.' }),
-	], cb);
+function code(cb) {
+  pump([
+    src(input.code, {
+      sourcemaps: true,
+      allowEmpty: true
+    }),
+    plumber(),
+    // cache('code'),
+    babel({ presets: ['@babel/env'] }),
+    concat(hippie.jsFile + '.js'),
+    dest(output.code),
+    uglify(),
+    // remember('code'),
+    rename({
+      suffix: '.min'
+    }),
+    dest(output.code, { sourcemaps: '.' }),
+  ], cb);
 }
 // Linting
-function codeLint () {
-	return src(input.code, { allowEmpty: true })
-	.pipe(plumber())
-	.pipe(jshint())
-	.pipe(jshint.reporter('jshint-stylish'))
-	.pipe(jshint.reporter('fail', {
-		ignoreWarning: true,
-		ignoreInfo: true
-	}));
+function codeLint() {
+  return src(input.code, { allowEmpty: true })
+    .pipe(plumber())
+    .pipe(jshint())
+    .pipe(jshint.reporter('jshint-stylish'))
+    .pipe(jshint.reporter('fail', {
+      ignoreWarning: true,
+      ignoreInfo: true
+    }));
 }

 // Fonts
-function fonts () {
-	return src(input.fonts)
-	.pipe(plumber())
-	.pipe(dest(output.fonts))
+function fonts() {
+  return src(input.fonts)
+    .pipe(plumber())
+    .pipe(dest(output.fonts))
 }

 // Add art
-function art () {
-	// Move favicons to the root folder
-	let favicons = src(input.art.favicons)
-	.pipe(plumber())
-	.pipe(changed(output.art))
-	.pipe(dest(output.root))
+function art() {
+  // Move favicons to the root folder
+  let favicons = src(input.art.favicons)
+    .pipe(plumber())
+    .pipe(changed(output.art))
+    .pipe(dest(output.root))

-	// Move images to the root folder
-	let images = src(input.art.images)
-	.pipe(plumber())
-	.pipe(changed(output.art))
-	.pipe(dest(output.art));
+  // Move images to the root folder
+  let images = src(input.art.images)
+    .pipe(plumber())
+    .pipe(changed(output.art))
+    .pipe(dest(output.art));

-	return merge(favicons, images)
+  return merge(favicons, images)
 }

-function sprites () {
-	// Assemble sprites
-	let sprites = src(input.art.sprites)
-	.pipe(plumber())
-	.pipe(changed(output.art))
-	.pipe(spritesmith({
-		imgName: 'sprite.png',
-		imgPath: '../art/sprite.png',
-		cssName: '_sprite.scss'
-	}));
+function sprites() {
+  // Assemble sprites
+  let sprites = src(input.art.sprites)
+    .pipe(plumber())
+    .pipe(changed(output.art))
+    .pipe(spritesmith({
+      imgName: 'sprite.png',
+      imgPath: '../art/sprite.png',
+      cssName: '_sprite.scss'
+    }));

-	var imgStream = sprites.img
-	// DEV: We must buffer our stream into a Buffer for `imagemin`
-	// .pipe(buffer())
-	// .pipe(imagemin())
-	.pipe(dest(output.art));
+  const imgStream = sprites.img
+    // DEV: We must buffer our stream into a Buffer for `imagemin`
+    // .pipe(buffer())
+    // .pipe(imagemin())
+    .pipe(dest(output.art));

-	var cssStream = sprites.css
-	.pipe(dest('source/style/hippie-style/mixins/'));
+  const cssStream = sprites.css
+    .pipe(dest('source/style/hippie-style/mixins/'));

-	return merge(imgStream, cssStream);
+  return merge(imgStream, cssStream);
 }

 // Gather dependencies for tools
-function vendor () {
-	return src(input.vendor)
-	.pipe(plumber())
-	.pipe(dest(output.vendor))
+function vendor() {
+  return src(input.vendor)
+    .pipe(plumber())
+    .pipe(dest(output.vendor))
 }

-function overview () {
-	watch([input.templates, input.screens, input.demo.data], series(nunjucks, reload));
-	watch(input.style, series(styleLint, style, reload));
-	watch(input.code, series(codeLint, code, reload));
-	watch(input.fonts, series(fonts, reload));
-	watch(input.art.sprites, series(parallel(sprites, style), reload));
-	watch([input.art.favicons, input.art.images], series(art, reload));
-	watch(input.data, series(json, reload));
+function overview() {
+  watch([input.templates, input.screens, input.demo.data], series(nunjucks, reload));
+  watch(input.style, series(styleLint, style, reload));
+  watch(input.code, series(codeLint, code, reload));
+  watch(input.fonts, series(fonts, reload));
+  watch(input.art.sprites, series(parallel(sprites, style), reload));
+  watch([input.art.favicons, input.art.images], series(art, reload));
+  watch(input.data, series(json, reload));
 }

 const assets = parallel(fonts, art, sprites, json, vendor);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -17,35 +17,35 @@
  },
  "homepage": "https://github.com/sthag/hippie#readme",
  "devDependencies": {
-    "@babel/core": "^7.7.2",
-    "@babel/preset-env": "^7.7.1",
+    "@babel/core": "~7",
+    "@babel/preset-env": "~7",
    "browser-sync": "^2.26.7",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
-    "gulp-babel": "^8.0.0",
+    "gulp-babel": "~8.0",
    "gulp-cached": "^1.1.1",
    "gulp-changed": "^4.0.2",
    "gulp-clean-css": "^4.2.0",
    "gulp-concat": "^2.6.1",
    "gulp-data": "^1.3.1",
-    "gulp-if": "^3.0.0",
-    "gulp-jshint": "^2.1.0",
-    "gulp-json-concat": "^0.1.1",
+    "gulp-if": "~3",
+    "gulp-jshint": "~2",
+    "gulp-json-concat": "~0.2",
    "gulp-notify": "^3.2.0",
    "gulp-nunjucks-render": "^2.2.3",
    "gulp-plumber": "^1.2.1",
    "gulp-remember": "^1.0.1",
-    "gulp-rename": "^1.4.0",
+    "gulp-rename": "~2",
    "gulp-sass": "^4.0.2",
    "gulp-sass-lint": "^1.4.0",
    "gulp-uglify": "^3.0.2",
-    "gulp-w3c-html-validator": "^1.4.4",
+    "gulp-w3c-html-validator": "~2",
    "gulp.spritesmith": "^6.11.0",
-    "jshint": "^2.10.3",
+    "jshint": "~2",
    "jshint-stylish": "^2.2.1",
    "merge-stream": "^2.0.0",
-    "node-sass": "^4.13.0",
+    "node-sass": "~4",
    "pump": "^3.0.0"
  },
  "dependencies": {}
--- a/source/screens/demo.njk
+++ b/source/screens/demo.njk
@ -1,4 +1,5 @@
 <!-- index.screen -->
+{% set pageBase = "./" %}
 {% set pageId = "index" %}
 {% set pageClass = "h_full_view" %}

@ -12,7 +13,7 @@
 {% block body %}
 <div class="wrap">
 	<div class="hello">
-		<h2>This is {{hippie.brand | upper}}</h2>
+		<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 create a file <code>/index.njk</code> inside the <i>source/screens</i> folder. You can also create a <code>data.json</code> file inside the <i>source/templates</i> folder as a data source for your nunjucks files.</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 <i>/source/screens/demo</i>.</p>
@ -25,7 +26,7 @@
 			<ul class="list_link">
 				<!-- Loops through "demoadditionallinks" array -->
 				{% for link in data.demoadditionallinks %}
-				<li><a href="{{link.href}}">{{link.text}}</a></li>
+				<li><a href="{{ link.href }}">{{ link.text }}</a></li>
 				{% endfor %}
 			</ul>
 		</nav>
@ -33,7 +34,7 @@
 		<ul class="list_link">
 			<!-- Loops through "demo-links" array -->
 			{% for link in data.demolinks %}
-			<li><a href="{{link.href}}">{{link.text}}</a></li>
+			<li><a href="{{ link.href }}">{{ link.text }}</a></li>
 			{% endfor %}
 		</ul>
 	</div>
@ -42,7 +43,7 @@

 {% block script %}
 {{ super() }}
-<script src="./js/{{hippie.jsFile}}.min.js"></script>
+<script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script>
 <script>
 // Page specific
 // ------------------------------------------------------------------------------
--- a/source/screens/demo/blank.njk
+++ b/source/screens/demo/blank.njk
@ -1,4 +1,5 @@
 <!-- blank.page -->
+{% set pageBase = "../" %}
 {% set pageId = "blank" %}
 {% set pageClass = "h_full_view" %}

--- a/source/screens/demo/card.njk
+++ b/source/screens/demo/card.njk
@ -0,0 +1,96 @@
+<!-- index.njk -->
+{% set pageBase = "../" %}
+{% set pageId = "card" %}
+{% set pageClass = "html_card" %}
+
+{% extends "demo/_default.njk" %}
+
+{% block title %}Karte{% endblock %}
+
+{% block head %}
+{{ super() }}
+{% endblock %}
+
+{% block body %}
+<div class="card_bkg">
+	<div id="dither"></div>
+	<svg version="1.1" id="flag" 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">
+		{# <defs>
+			<filter id="turb3">
+				<feColorMatrix type="saturate" values="1" /> </filter>
+				<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
+			</filter>
+			<symbol id="triangle-5">
+				<rect y="0" fill="#273F8B" width="1920" height="1200"/>
+			</symbol>
+		</defs>
+		<g>
+			<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
+		</g> #}
+		<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
+		<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
+		<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
+		<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
+		<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
+		<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
+		<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
+		<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
+		<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
+	</svg>
+	{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
+</div>
+<div class="card_box">
+	<div id="jsCardHover">
+		<p>Titel<br/>and description</p>
+		<h1>Prename Surname</h1>
+		<p><a class="card_address" href="">name@domain.tld</a><br/><a class="decent" href="http://">site.tld</a> &middot; <span class="decent">Street No., Postcode City</span></p>
+	</div>
+</div>
+{% endblock %}
+
+{% block script %}
+{{ super() }}
+<script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
+<script type="text/javascript">
+	$(document).ready(function() {
+		// composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', '');
+
+		var colors = new Array();
+		var position = 0;
+
+		for (var i = 1; i <= $("#flag").children().length; i++) {
+			colors.push($("#triangle-"+ i).attr("fill"));
+		}
+
+		$('#jsCardHover').on({
+			mouseenter: function() {
+				// $('#flag').addClass('effect');
+				// $('#flag').css('opacity', 0);
+				$('#flag').stop().fadeOut(10000);
+				this.iid = setInterval(function() {
+					for (var i = 1; i <= colors.length; i++) {
+						position++;
+						if (position >= colors.length) {
+							position = 0;
+						}
+						$("#triangle-"+ i).attr("fill", colors[position]);
+					}
+					position++;
+					if (position >= colors.length) {
+						position = 0;
+					}
+				}, 600);
+			},
+			mouseleave: function() {
+				// $('#flag').removeClass('effect');
+				// $('#flag').css('opacity', 1);
+				$('#flag').stop().fadeIn(1000);
+				this.iid && clearInterval(this.iid);
+			},
+			click: function() {
+				$("#dither").toggle();
+			}
+		});
+	});
+</script>
+{% endblock %}
--- a/source/screens/demo/elements.njk
+++ b/source/screens/demo/elements.njk
@ -1,4 +1,5 @@
 <!-- elements.page -->
+{% set pageBase = "../" %}
 {% set pageId = "elements" %}

 {% extends "demo/_extended.njk" %}
@ -64,8 +65,8 @@

 {% 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 src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
+<script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 // Page specific
 // ------------------------------------------------------------------------------
--- a/source/screens/demo/error/304.njk
+++ b/source/screens/demo/error/304.njk
@ -1,4 +1,5 @@
 <!-- error-404.page -->
+{% set pageBase = "../../" %}
 {% set pageId = "304" %}
 {% set bodyClass = "body_status" %}

--- a/source/screens/demo/error/400.njk
+++ b/source/screens/demo/error/400.njk
@ -1,4 +1,5 @@
 <!-- error-404.page -->
+{% set pageBase = "../../" %}
 {% set pageId = "400" %}
 {% set bodyClass = "body_status" %}

--- a/source/screens/demo/error/401.njk
+++ b/source/screens/demo/error/401.njk
@ -0,0 +1,24 @@
+<!-- error-404.page -->
+{% set pageBase = "../../" %}
+{% set pageId = "401" %}
+{% set bodyClass = "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 autorisiert! <dfn>Unauthorized</dfn></p>
+  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
+    <p>Die Anfrage kann nicht ohne gültige Authentifizierung durchgeführt werden. Wie die Authentifizierung durchgeführt werden soll, wird im „WWW-Authenticate“-Header-Feld der Antwort übermittelt.</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 %}
--- a/source/screens/demo/error/403.njk
+++ b/source/screens/demo/error/403.njk
@ -1,4 +1,5 @@
 <!-- error-404.page -->
+{% set pageBase = "../../" %}
 {% set pageId = "403" %}
 {% set bodyClass = "body_status" %}

--- a/source/screens/demo/error/404.njk
+++ b/source/screens/demo/error/404.njk
@ -1,4 +1,5 @@
 <!-- error-404.page -->
+{% set pageBase = "../../" %}
 {% set pageId = "404" %}
 {% set bodyClass = "body_status" %}

--- a/source/screens/demo/error/408.njk
+++ b/source/screens/demo/error/408.njk
@ -0,0 +1,24 @@
+<!-- error-404.page -->
+{% set pageBase = "../../" %}
+{% set pageId = "408" %}
+{% set bodyClass = "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>Zeitüberschreitung der Anforderung. <dfn>Request Timeout</dfn></p>
+  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
+    <p>Innerhalb der vom Server erlaubten Zeitspanne wurde keine vollständige Anfrage des Clients empfangen.</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 %}
--- a/source/screens/demo/error/500.njk
+++ b/source/screens/demo/error/500.njk
@ -1,4 +1,5 @@
 <!-- error-500.page -->
+{% set pageBase = "../../" %}
 {% set pageId = "500" %}
 {% set bodyClass = "body_status" %}

--- a/source/screens/demo/examples.njk
+++ b/source/screens/demo/examples.njk
@ -1,4 +1,5 @@
 <!-- elements.page -->
+{% set pageBase = "../" %}
 {% set pageId = "examples" %}

 {% extends "demo/_extended.njk" %}
@ -34,7 +35,7 @@
 			<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>
+				<div class="float_space_left demo__avatar"><img src="{{ pageBase }}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>
@ -166,7 +167,7 @@
 			<h2>Gruppierung</h2>
 			<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
 			<ul class="list_link">
-				<li><a href=""><img src="../art/letter.gif" alt="">name@domain.tld</a></li>
+				<li><a href=""><img src="{{ pageBase }}art/letter.gif" alt="">name@domain.tld</a></li>
 				<li><a href="">Work</a></li>
 				<li><a href="">Projects</a></li>
 			</ul>
@ -228,8 +229,8 @@

 {% 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 src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
+<script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 // Page specific
 // ------------------------------------------------------------------------------
--- a/source/screens/demo/intro.njk
+++ b/source/screens/demo/intro.njk
@ -1,4 +1,5 @@
 <!-- intro.screen -->
+{% set pageBase = "../" %}
 {% set pageId = "intro" %}

 {% extends "demo/_extended.njk" %}
@ -136,7 +137,7 @@
 		</nav>
 		<nav class="nav_center_old">
 			<ul>
-				<li><a href="../demo.html" class="a_button">Startseite</a></li>
+				<li><a href="{{ pageBase }}demo.html" class="a_button">Startseite</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>
@ -231,8 +232,8 @@
 		<p>Dies ist ein Bild. Es wird mit dem Element <code>&lt;img&gt;</code> eingebunden. Solch ein Bild hat üblicherweise die Attribute <code>width</code> und <code>height</code>. Mit ihnen werden die Abmessungen (Breite und Höhe) festgelegt. Außerdem sollte immer das Attribut <code>alt</code> für eine alternative Beschreibung in Textform verwendet werden.</p>
 		<p>Das Bild selbst liegt normalerweise als Datei vor. Die Quelle wird mit dem Attribut <code>src</code> angegeben. Es können einige Alternativen zur Angabe einer konkreten Datei eingesetzt werden. Zum Beispiel können mehrere Dateien in Abhängigkeit zur Darstellung oder dem unterstützen Format angegeben werden. Dafür können dann die Elemente <code>&lt;source&gt;</code> und <code>&lt;picture&gt;</code> in Kombination verwendet werden.</p>
 		<picture>
-			<source srcset="../art/demo/flag_websafe_128x80.webp" type="image/webp"/>
-			<img src="../art/demo/flag_websafe_128x80.gif" alt="" width="128" height="80"/>
+			<source srcset="{{ pageBase }}art/demo/flag_websafe_128x80.webp" type="image/webp"/>
+			<img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" alt="" width="128" height="80"/>
 		</picture>
 	</article>
 	<article>
@ -570,7 +571,7 @@

 {% block script %}
 {{ super() }}
-<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
+<script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
 <script>
 // Page specific
 // ------------------------------------------------------------------------------
--- a/source/screens/demo/maintenance.njk
+++ b/source/screens/demo/maintenance.njk
@ -1,4 +1,5 @@
 <!-- maintenance.page -->
+{% set pageBase = "../" %}
 {% set pageId = "blank" %}
 {% set pageClass = "h_full_view" %}

--- a/source/templates/demo/_default.njk
+++ b/source/templates/demo/_default.njk
@ -5,9 +5,10 @@
 	<meta charset="utf-8">

 	{% block head %}
-	<title>{% block title %}{% endblock %} - HIPPIE</title>
+	<title>{% block title %}{% endblock %}{{ hippie.titlePrefix }}</title>

 	{% include "demo/partials/_meta.njk" %}
+	{# <base href="/"> #}
 	{% block meta %}{% endblock %}

 	{% include "hippie/partials/_head_script.njk" %}
@ -22,7 +23,9 @@

 	{% include "demo/partials/_links.njk" %}
 	{% block links %}
-	<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="all" href="{{ hippie.pageBase | subdir(2) }}css/demo.css"/> #}
+	<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
 	{% endblock %}
 	{% endblock %}
 </head>
--- a/source/templates/demo/_extended.njk
+++ b/source/templates/demo/_extended.njk
@ -32,8 +32,8 @@ document.addEventListener('DOMContentLoaded', function () {
 	<!--Only use one of the above!-->

 	<!-- <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"/> -->
+	<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
+	<!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
 	{% endblock %}
 	{% endblock %}
 </head>
--- a/source/templates/demo/_maintenance.njk
+++ b/source/templates/demo/_maintenance.njk
@ -13,7 +13,7 @@
 	{% block links %}
 	<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="all" href="{{ pageBase }}css/demo_basic.css"/>
 	{% endblock %}
 	{% endblock %}
 </head>
--- a/source/templates/demo/data.json
+++ b/source/templates/demo/data.json
@ -1,19 +1,19 @@
 {
 	"demoadditionallinks": [
 		{
-			"href": "/demo.html",
+			"href": "demo.html",
 			"text": "Index"
 		},
 		{
-			"href": "/demo/intro.html",
+			"href": "demo/intro.html",
 			"text": "Intro"
 		},
 		{
-			"href": "/demo/elements.html",
+			"href": "demo/elements.html",
 			"text": "Elements"
 		},
 		{
-			"href": "/demo/examples.html",
+			"href": "demo/examples.html",
 			"text": "Examples"
 		}
 	],
@ -22,6 +22,10 @@
 			"href": "demo/blank.html",
 			"text": "Blank"
 		},
+		{
+			"href": "demo/card.html",
+			"text": "Card"
+		},
 		{
 			"href": "demo/maintenance.html",
 			"text": "Maintenance"
@ -31,16 +35,24 @@
 			"text": "304"
 		},
 		{
-			"href": "demo/error/404.html",
-			"text": "404"
+			"href": "demo/error/400.html",
+			"text": "400"
+		},
+		{
+			"href": "demo/error/401.html",
+			"text": "401"
 		},
 		{
 			"href": "demo/error/403.html",
 			"text": "403"
 		},
 		{
-			"href": "demo/error/400.html",
-			"text": "400"
+			"href": "demo/error/404.html",
+			"text": "404"
+		},
+		{
+			"href": "demo/error/408.html",
+			"text": "408"
 		},
 		{
 			"href": "demo/error/500.html",
--- a/source/templates/demo/partials/_links.njk
+++ b/source/templates/demo/partials/_links.njk
@ -1,4 +1,4 @@
 <!-- links.partial -->
 {# <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="{{ pageBase }}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=">
--- a/source/templates/demo/partials/_meta.njk
+++ b/source/templates/demo/partials/_meta.njk
@ -6,4 +6,4 @@

 <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" />
+{# <meta http-equiv="X-UA-Compatible" content="IE=edge" /> #}
--- a/source/templates/hippie/partials/_body_nav.njk
+++ b/source/templates/hippie/partials/_body_nav.njk
@ -5,7 +5,7 @@
 			<li class="js_scrolltop hide">
 				<a href="#begin" class="a_button_meta">
 					<div class="sprite_img demo__sprite_up"></div>
-					{# <img src="../art/up.png" alt="" width="32" height="64"> #}
+					{# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}
 				</a>
 			</li>
 			<li>
@ -17,7 +17,7 @@
 			<li class="js_scrolldown">
 				<a href="#end" class="a_button_meta">
 					<div class="sprite_img demo__sprite_down"></div>
-					{# <img src="../art/down.png" alt="" width="32" height="32"> #}
+					{# <img src="{{ pageBase }}art/down.png" alt="" width="32" height="32"> #}
 				</a>
 			</li>
 		</ul>
--- a/source/templates/hippie/partials/_head_script.njk
+++ b/source/templates/hippie/partials/_head_script.njk
@ -23,7 +23,7 @@ function logPerf (msg, arg) {
 				.attr('id', 'jsLogPerf')
 				.css({
 					position: 'fixed',
-					bottom: '4px',
+					bottom: '16px',
 					right: '40px',
 					zIndex: '1000',
 					padding: '0 8px',