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

Requirements updated and new nunjucks variables

Browse source 
Fixed problems with base paths.
This commit is contained in:
Stephan Hagedorn 2020-04-04 23:56:49 +02:00
parent 8567604ea6
commit b2ea5b01aa
26 changed files with 1404 additions and 1228 deletions
Download patch file Download diff file Expand all files Collapse all files

72
gulpfile.js
View file

@ -4,7 +4,9 @@ const hippie = {
jsFile: 'main', jsFile: 'main',
jsonFile: 'db', jsonFile: 'db',
index: 'demo.html', index: 'demo.html',
data: 'demo/data.json' data: 'demo/data.json',
titlePrefix: ' - HIPPIE',
pageBase: './'
} }
// Gulp requirements // Gulp requirements
const { watch, series, parallel } = require('gulp'); const { watch, series, parallel } = require('gulp');
@ -16,6 +18,7 @@ const plumber = require('gulp-plumber');
// const notify = require('gulp-notify'); // const notify = require('gulp-notify');
const nunjucksRender = require('gulp-nunjucks-render'); const nunjucksRender = require('gulp-nunjucks-render');
// const nunjucks = require('gulp-nunjucks');
const data = require('gulp-data'); const data = require('gulp-data');
const jsonConcat = require('gulp-json-concat'); const jsonConcat = require('gulp-json-concat');
const browserSync = require('browser-sync'), server = browserSync.create(); const browserSync = require('browser-sync'), server = browserSync.create();
@ -94,53 +97,62 @@ if (fs.existsSync('source/data/data.json')) {
// Create tasks // Create tasks
// Clean build folder // Clean build folder
function clean () { function clean() {
return del(output.root +'/**'); return del(output.root + '/**');
} }
// Automagically reload browsers // Automagically reload browsers
function reload (done) { function reload(done) {
server.reload(); server.reload();
done(); done();
} }
// Concatenate JSON files // Concatenate JSON files
function json () { function json() {
return src(input.data) return src(input.data)
.pipe(plumber()) .pipe(plumber())
.pipe(jsonConcat(hippie.jsonFile +'.json', function (data) { .pipe(jsonConcat(hippie.jsonFile + '.json', function (data) {
return new Buffer.from(JSON.stringify(data)); return new Buffer.from(JSON.stringify(data));
})) }))
.pipe(dest(output.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 // Transpile HTML
function nunjucks () { function nunjucks() {
return src(input.screens) return src(input.screens)
.pipe(plumber()) .pipe(plumber())
.pipe(data(function () { .pipe(data(function () {
let data = JSON.parse(fs.readFileSync(input.templates +'/'+ hippie.data)); let data = JSON.parse(fs.readFileSync(input.templates + '/' + hippie.data));
object = {hippie, data}; object = { hippie, data };
return object; return object;
})) }))
.pipe(nunjucksRender({ .pipe(nunjucksRender({
path: input.templates, path: input.templates,
envOptions: { envOptions: {
trimBlocks: true trimBlocks: true
} },
manageEnv: manageEnvironment
})) }))
.pipe(dest(output.root)); .pipe(dest(output.root));
} }
function validate () { function validate() {
return src('build/**/*.html') return src('build/**/*.html')
.pipe(htmlValidator()) .pipe(htmlValidator())
.pipe(htmlValidator.reporter()); .pipe(htmlValidator.reporter());
} }
// Serve files to the browser // Serve files to the browser
function serve (done) { function serve(done) {
server.init({ server.init({
index: hippie.index, index: hippie.index,
open: false, open: false,
@ -151,11 +163,11 @@ function serve (done) {
} }
// This is for the looks // This is for the looks
function style () { function style() {
return src(input.style) return src(input.style)
// .pipe(plumbError('STYLE PROBLEM')) // .pipe(plumbError('STYLE PROBLEM'))
.pipe(sass({ .pipe(sass({
includePaths: [input.vendor +'/**/*.s+(a|c)ss'] includePaths: [input.vendor + '/**/*.s+(a|c)ss']
}).on('error', sass.logError)) }).on('error', sass.logError))
.pipe(autoprefixer(['>= 4%', 'last 2 version'])) .pipe(autoprefixer(['>= 4%', 'last 2 version']))
.pipe(dest(output.style)) .pipe(dest(output.style))
@ -166,18 +178,18 @@ function style () {
.pipe(dest(output.style)); .pipe(dest(output.style));
} }
// Linting // Linting
function styleLint () { function styleLint() {
var dir = output.reports; const dir = output.reports;
if (!fs.existsSync(dir)) { if (!fs.existsSync(dir)) {
fs.mkdirSync(dir); fs.mkdirSync(dir);
} }
var file = fs.createWriteStream(output.reports +'/sass-lint.html'); let file = fs.createWriteStream(output.reports + '/sass-lint.html');
var stream = src(input.style) let stream = src(input.style)
.pipe(plumber()) .pipe(plumber())
.pipe(sassLint({ .pipe(sassLint({
configFile: '.sasslintrc', configFile: '.sasslintrc',
files: { files: {
ignore: input.vendor +'/**/*.s+(a|c)ss' ignore: input.vendor + '/**/*.s+(a|c)ss'
} }
})) }))
.pipe(sassLint.format(file)); .pipe(sassLint.format(file));
@ -190,7 +202,7 @@ function styleLint () {
} }
// Javascript for the win // Javascript for the win
function code (cb) { function code(cb) {
pump([ pump([
src(input.code, { src(input.code, {
sourcemaps: true, sourcemaps: true,
@ -198,8 +210,8 @@ function code (cb) {
}), }),
plumber(), plumber(),
// cache('code'), // cache('code'),
babel({ presets: ['@babel/env']}), babel({ presets: ['@babel/env'] }),
concat(hippie.jsFile +'.js'), concat(hippie.jsFile + '.js'),
dest(output.code), dest(output.code),
uglify(), uglify(),
// remember('code'), // remember('code'),
@ -210,7 +222,7 @@ function code (cb) {
], cb); ], cb);
} }
// Linting // Linting
function codeLint () { function codeLint() {
return src(input.code, { allowEmpty: true }) return src(input.code, { allowEmpty: true })
.pipe(plumber()) .pipe(plumber())
.pipe(jshint()) .pipe(jshint())
@ -222,14 +234,14 @@ function codeLint () {
} }
// Fonts // Fonts
function fonts () { function fonts() {
return src(input.fonts) return src(input.fonts)
.pipe(plumber()) .pipe(plumber())
.pipe(dest(output.fonts)) .pipe(dest(output.fonts))
} }
// Add art // Add art
function art () { function art() {
// Move favicons to the root folder // Move favicons to the root folder
let favicons = src(input.art.favicons) let favicons = src(input.art.favicons)
.pipe(plumber()) .pipe(plumber())
@ -245,7 +257,7 @@ function art () {
return merge(favicons, images) return merge(favicons, images)
} }
function sprites () { function sprites() {
// Assemble sprites // Assemble sprites
let sprites = src(input.art.sprites) let sprites = src(input.art.sprites)
.pipe(plumber()) .pipe(plumber())
@ -256,26 +268,26 @@ function sprites () {
cssName: '_sprite.scss' cssName: '_sprite.scss'
})); }));
var imgStream = sprites.img const imgStream = sprites.img
// DEV: We must buffer our stream into a Buffer for `imagemin` // DEV: We must buffer our stream into a Buffer for `imagemin`
// .pipe(buffer()) // .pipe(buffer())
// .pipe(imagemin()) // .pipe(imagemin())
.pipe(dest(output.art)); .pipe(dest(output.art));
var cssStream = sprites.css const cssStream = sprites.css
.pipe(dest('source/style/hippie-style/mixins/')); .pipe(dest('source/style/hippie-style/mixins/'));
return merge(imgStream, cssStream); return merge(imgStream, cssStream);
} }
// Gather dependencies for tools // Gather dependencies for tools
function vendor () { function vendor() {
return src(input.vendor) return src(input.vendor)
.pipe(plumber()) .pipe(plumber())
.pipe(dest(output.vendor)) .pipe(dest(output.vendor))
} }
function overview () { function overview() {
watch([input.templates, input.screens, input.demo.data], series(nunjucks, reload)); watch([input.templates, input.screens, input.demo.data], series(nunjucks, reload));
watch(input.style, series(styleLint, style, reload)); watch(input.style, series(styleLint, style, reload));
watch(input.code, series(codeLint, code, reload)); watch(input.code, series(codeLint, code, reload));

1224
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

20
package.json
View file

@ -17,35 +17,35 @@
}, },
"homepage": "https://github.com/sthag/hippie#readme", "homepage": "https://github.com/sthag/hippie#readme",
"devDependencies": { "devDependencies": {
"@babel/core": "^7.7.2", "@babel/core": "~7",
"@babel/preset-env": "^7.7.1", "@babel/preset-env": "~7",
"browser-sync": "^2.26.7", "browser-sync": "^2.26.7",
"del": "^5.1.0", "del": "^5.1.0",
"gulp": "^4.0.2", "gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1", "gulp-autoprefixer": "^7.0.1",
"gulp-babel": "^8.0.0", "gulp-babel": "~8.0",
"gulp-cached": "^1.1.1", "gulp-cached": "^1.1.1",
"gulp-changed": "^4.0.2", "gulp-changed": "^4.0.2",
"gulp-clean-css": "^4.2.0", "gulp-clean-css": "^4.2.0",
"gulp-concat": "^2.6.1", "gulp-concat": "^2.6.1",
"gulp-data": "^1.3.1", "gulp-data": "^1.3.1",
"gulp-if": "^3.0.0", "gulp-if": "~3",
"gulp-jshint": "^2.1.0", "gulp-jshint": "~2",
"gulp-json-concat": "^0.1.1", "gulp-json-concat": "~0.2",
"gulp-notify": "^3.2.0", "gulp-notify": "^3.2.0",
"gulp-nunjucks-render": "^2.2.3", "gulp-nunjucks-render": "^2.2.3",
"gulp-plumber": "^1.2.1", "gulp-plumber": "^1.2.1",
"gulp-remember": "^1.0.1", "gulp-remember": "^1.0.1",
"gulp-rename": "^1.4.0", "gulp-rename": "~2",
"gulp-sass": "^4.0.2", "gulp-sass": "^4.0.2",
"gulp-sass-lint": "^1.4.0", "gulp-sass-lint": "^1.4.0",
"gulp-uglify": "^3.0.2", "gulp-uglify": "^3.0.2",
"gulp-w3c-html-validator": "^1.4.4", "gulp-w3c-html-validator": "~2",
"gulp.spritesmith": "^6.11.0", "gulp.spritesmith": "^6.11.0",
"jshint": "^2.10.3", "jshint": "~2",
"jshint-stylish": "^2.2.1", "jshint-stylish": "^2.2.1",
"merge-stream": "^2.0.0", "merge-stream": "^2.0.0",
"node-sass": "^4.13.0", "node-sass": "~4",
"pump": "^3.0.0" "pump": "^3.0.0"
}, },
"dependencies": {} "dependencies": {}

9
source/screens/demo.njk
View file

@ -1,4 +1,5 @@
<!-- index.screen --> <!-- index.screen -->
{% set pageBase = "./" %}
{% set pageId = "index" %} {% set pageId = "index" %}
{% set pageClass = "h_full_view" %} {% set pageClass = "h_full_view" %}
@ -12,7 +13,7 @@
{% block body %} {% block body %}
<div class="wrap"> <div class="wrap">
<div class="hello"> <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>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>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> <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"> <ul class="list_link">
<!-- Loops through "demoadditionallinks" array --> <!-- Loops through "demoadditionallinks" array -->
{% for link in data.demoadditionallinks %} {% for link in data.demoadditionallinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li> <li><a href="{{ link.href }}">{{ link.text }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
</nav> </nav>
@ -33,7 +34,7 @@
<ul class="list_link"> <ul class="list_link">
<!-- Loops through "demo-links" array --> <!-- Loops through "demo-links" array -->
{% for link in data.demolinks %} {% for link in data.demolinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li> <li><a href="{{ link.href }}">{{ link.text }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
@ -42,7 +43,7 @@
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script src="./js/{{hippie.jsFile}}.min.js"></script> <script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script>
<script> <script>
// Page specific // Page specific
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------

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

@ -1,4 +1,5 @@
<!-- blank.page --> <!-- blank.page -->
{% set pageBase = "../" %}
{% set pageId = "blank" %} {% set pageId = "blank" %}
{% set pageClass = "h_full_view" %} {% set pageClass = "h_full_view" %}

96
source/screens/demo/card.njk Normal file
View file

@ -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 %}

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

@ -1,4 +1,5 @@
<!-- elements.page --> <!-- elements.page -->
{% set pageBase = "../" %}
{% set pageId = "elements" %} {% set pageId = "elements" %}
{% extends "demo/_extended.njk" %} {% extends "demo/_extended.njk" %}
@ -64,8 +65,8 @@
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script> <script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
// Page specific // Page specific
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------

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

@ -1,4 +1,5 @@
<!-- error-404.page --> <!-- error-404.page -->
{% set pageBase = "../../" %}
{% set pageId = "304" %} {% set pageId = "304" %}
{% set bodyClass = "body_status" %} {% set bodyClass = "body_status" %}

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

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

24
source/screens/demo/error/401.njk Normal file
View file

@ -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 %}

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

@ -1,4 +1,5 @@
<!-- error-404.page --> <!-- error-404.page -->
{% set pageBase = "../../" %}
{% set pageId = "403" %} {% set pageId = "403" %}
{% set bodyClass = "body_status" %} {% set bodyClass = "body_status" %}

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

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

24
source/screens/demo/error/408.njk Normal file
View file

@ -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 %}

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

@ -1,4 +1,5 @@
<!-- error-500.page --> <!-- error-500.page -->
{% set pageBase = "../../" %}
{% set pageId = "500" %} {% set pageId = "500" %}
{% set bodyClass = "body_status" %} {% set bodyClass = "body_status" %}

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

@ -1,4 +1,5 @@
<!-- elements.page --> <!-- elements.page -->
{% set pageBase = "../" %}
{% set pageId = "examples" %} {% set pageId = "examples" %}
{% extends "demo/_extended.njk" %} {% extends "demo/_extended.njk" %}
@ -34,7 +35,7 @@
<h2>&lt;section&gt;</h2> <h2>&lt;section&gt;</h2>
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre> <pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
<section class="overflow"> <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> <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> </section>
<pre class="pre_code"><code>div.space_left_fourth</code></pre> <pre class="pre_code"><code>div.space_left_fourth</code></pre>
@ -166,7 +167,7 @@
<h2>Gruppierung</h2> <h2>Gruppierung</h2>
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre> <pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
<ul class="list_link"> <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="">Work</a></li>
<li><a href="">Projects</a></li> <li><a href="">Projects</a></li>
</ul> </ul>
@ -228,8 +229,8 @@
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script> <script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
// Page specific // Page specific
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------

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

@ -1,4 +1,5 @@
<!-- intro.screen --> <!-- intro.screen -->
{% set pageBase = "../" %}
{% set pageId = "intro" %} {% set pageId = "intro" %}
{% extends "demo/_extended.njk" %} {% extends "demo/_extended.njk" %}
@ -136,7 +137,7 @@
</nav> </nav>
<nav class="nav_center_old"> <nav class="nav_center_old">
<ul> <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_internal">Hilfe</a></li>
<li><a href="" class="a_button">⌨</a></li> <li><a href="" class="a_button">⌨</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>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> <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> <picture>
<source srcset="../art/demo/flag_websafe_128x80.webp" type="image/webp"/> <source srcset="{{ pageBase }}art/demo/flag_websafe_128x80.webp" type="image/webp"/>
<img src="../art/demo/flag_websafe_128x80.gif" alt="" width="128" height="80"/> <img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" alt="" width="128" height="80"/>
</picture> </picture>
</article> </article>
<article> <article>
@ -570,7 +571,7 @@
{% block script %} {% block script %}
{{ super() }} {{ 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> <script>
// Page specific // Page specific
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------

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

@ -1,4 +1,5 @@
<!-- maintenance.page --> <!-- maintenance.page -->
{% set pageBase = "../" %}
{% set pageId = "blank" %} {% set pageId = "blank" %}
{% set pageClass = "h_full_view" %} {% set pageClass = "h_full_view" %}

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

@ -5,9 +5,10 @@
<meta charset="utf-8"> <meta charset="utf-8">
{% block head %} {% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title> <title>{% block title %}{% endblock %}{{ hippie.titlePrefix }}</title>
{% include "demo/partials/_meta.njk" %} {% include "demo/partials/_meta.njk" %}
{# <base href="/"> #}
{% block meta %}{% endblock %} {% block meta %}{% endblock %}
{% include "hippie/partials/_head_script.njk" %} {% include "hippie/partials/_head_script.njk" %}
@ -22,7 +23,9 @@
{% include "demo/partials/_links.njk" %} {% include "demo/partials/_links.njk" %}
{% block links %} {% 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 %}
{% endblock %} {% endblock %}
</head> </head>

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

@ -32,8 +32,8 @@ document.addEventListener('DOMContentLoaded', function () {
<!--Only use one of the above!--> <!--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 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="{{ pageBase }}css/demo.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/> --> <!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
{% endblock %} {% endblock %}
{% endblock %} {% endblock %}
</head> </head>

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

@ -13,7 +13,7 @@
{% block links %} {% 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="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 %}
{% endblock %} {% endblock %}
</head> </head>

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

@ -1,19 +1,19 @@
{ {
"demoadditionallinks": [ "demoadditionallinks": [
{ {
"href": "/demo.html", "href": "demo.html",
"text": "Index" "text": "Index"
}, },
{ {
"href": "/demo/intro.html", "href": "demo/intro.html",
"text": "Intro" "text": "Intro"
}, },
{ {
"href": "/demo/elements.html", "href": "demo/elements.html",
"text": "Elements" "text": "Elements"
}, },
{ {
"href": "/demo/examples.html", "href": "demo/examples.html",
"text": "Examples" "text": "Examples"
} }
], ],
@ -22,6 +22,10 @@
"href": "demo/blank.html", "href": "demo/blank.html",
"text": "Blank" "text": "Blank"
}, },
{
"href": "demo/card.html",
"text": "Card"
},
{ {
"href": "demo/maintenance.html", "href": "demo/maintenance.html",
"text": "Maintenance" "text": "Maintenance"
@ -31,16 +35,24 @@
"text": "304" "text": "304"
}, },
{ {
"href": "demo/error/404.html", "href": "demo/error/400.html",
"text": "404" "text": "400"
},
{
"href": "demo/error/401.html",
"text": "401"
}, },
{ {
"href": "demo/error/403.html", "href": "demo/error/403.html",
"text": "403" "text": "403"
}, },
{ {
"href": "demo/error/400.html", "href": "demo/error/404.html",
"text": "400" "text": "404"
},
{
"href": "demo/error/408.html",
"text": "408"
}, },
{ {
"href": "demo/error/500.html", "href": "demo/error/500.html",

2
source/templates/demo/partials/_links.njk
View file

@ -1,4 +1,4 @@
<!-- links.partial --> <!-- links.partial -->
{# <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="{{ 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="> <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=">

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

@ -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">
{# <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> #} {# <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" /> #}

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

@ -5,7 +5,7 @@
<li class="js_scrolltop hide"> <li class="js_scrolltop hide">
<a href="#begin" class="a_button_meta"> <a href="#begin" class="a_button_meta">
<div class="sprite_img demo__sprite_up"></div> <div class="sprite_img demo__sprite_up"></div>
{# <img src="../art/up.png" alt="" width="32" height="64"> #} {# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}
</a> </a>
</li> </li>
<li> <li>
@ -17,7 +17,7 @@
<li class="js_scrolldown"> <li class="js_scrolldown">
<a href="#end" class="a_button_meta"> <a href="#end" class="a_button_meta">
<div class="sprite_img demo__sprite_down"></div> <div class="sprite_img demo__sprite_down"></div>
{# <img src="../art/down.png" alt="" width="32" height="32"> #} {# <img src="{{ pageBase }}art/down.png" alt="" width="32" height="32"> #}
</a> </a>
</li> </li>
</ul> </ul>

2
source/templates/hippie/partials/_head_script.njk
View file

@ -23,7 +23,7 @@ function logPerf (msg, arg) {
.attr('id', 'jsLogPerf') .attr('id', 'jsLogPerf')
.css({ .css({
position: 'fixed', position: 'fixed',
bottom: '4px', bottom: '16px',
right: '40px', right: '40px',
zIndex: '1000', zIndex: '1000',
padding: '0 8px', padding: '0 8px',