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

382
gulpfile.js
View file

@ -1,10 +1,12 @@
// Setup project // Setup project
const hippie = { const hippie = {
brand: 'hippie', brand: '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();
@ -41,248 +44,257 @@ const htmlValidator = require('gulp-w3c-html-validator');
// Data variables // Data variables
const input = { const input = {
root: 'source', root: 'source',
screens: 'source/screens/**/*.+(njk|html)', screens: 'source/screens/**/*.+(njk|html)',
templates: 'source/templates', templates: 'source/templates',
data: 'source/data/**/*.json', data: 'source/data/**/*.json',
style: 'source/style/**/*.s+(a|c)ss', style: 'source/style/**/*.s+(a|c)ss',
code: [ code: [
'source/code/hippie/variables.js', 'source/code/hippie/variables.js',
'source/code/hippie/functions.js', 'source/code/hippie/functions.js',
'source/code/hippie/global.js', 'source/code/hippie/global.js',
'source/code/variables.js', 'source/code/variables.js',
'source/code/functions.js', 'source/code/functions.js',
'source/code/global.js', 'source/code/global.js',
'source/code/**/*.js', 'source/code/**/*.js',
'!source/vendor/**/*' '!source/vendor/**/*'
], ],
fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*', fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*',
art: { art: {
favicons: 'source/art/favicons/**/*.+(ico|png)', favicons: 'source/art/favicons/**/*.+(ico|png)',
sprites: 'source/art/sprites/**/*.png', sprites: 'source/art/sprites/**/*.png',
images: 'source/art/images/**/*.+(png|gif|jpg|svg|webp)' images: 'source/art/images/**/*.+(png|gif|jpg|svg|webp)'
}, },
vendor: 'vendor/**/*', vendor: 'vendor/**/*',
demo: { demo: {
data: 'source/templates/demo/data.json' data: 'source/templates/demo/data.json'
} }
}; };
const output = { const output = {
root: 'build', root: 'build',
screens: 'build/**/*.html', screens: 'build/**/*.html',
data: 'build/json', data: 'build/json',
style: 'build/css', style: 'build/css',
code: 'build/js', code: 'build/js',
fonts: 'build/fonts', fonts: 'build/fonts',
art: 'build/art', art: 'build/art',
reports: 'reports', reports: 'reports',
vendor: 'build/vendor' vendor: 'build/vendor'
}; };
//Check for index file and deactivate demo content //Check for index file and deactivate demo content
if (fs.existsSync('source/screens/index.njk')) { if (fs.existsSync('source/screens/index.njk')) {
hippie.index = 'index.html'; hippie.index = 'index.html';
} }
if (fs.existsSync('source/templates/data.json')) { if (fs.existsSync('source/templates/data.json')) {
hippie.data = 'data.json'; hippie.data = 'data.json';
} }
if (fs.existsSync('source/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 // 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,
server: output.root server: output.root
}); });
done(); 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))
.pipe(cleanCss()) .pipe(cleanCss())
.pipe(rename({ .pipe(rename({
suffix: '.min' suffix: '.min'
})) }))
.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));
stream.on('finish', function () { stream.on('finish', function () {
file.end(); file.end();
}); });
return stream; return stream;
} }
// 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,
allowEmpty: true allowEmpty: true
}), }),
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'),
rename({ rename({
suffix: '.min' suffix: '.min'
}), }),
dest(output.code, { sourcemaps: '.' }), dest(output.code, { sourcemaps: '.' }),
], 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())
.pipe(jshint.reporter('jshint-stylish')) .pipe(jshint.reporter('jshint-stylish'))
.pipe(jshint.reporter('fail', { .pipe(jshint.reporter('fail', {
ignoreWarning: true, ignoreWarning: true,
ignoreInfo: true ignoreInfo: true
})); }));
} }
// 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())
.pipe(changed(output.art)) .pipe(changed(output.art))
.pipe(dest(output.root)) .pipe(dest(output.root))
// Move images to the root folder // Move images to the root folder
let images = src(input.art.images) let images = src(input.art.images)
.pipe(plumber()) .pipe(plumber())
.pipe(changed(output.art)) .pipe(changed(output.art))
.pipe(dest(output.art)); .pipe(dest(output.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())
.pipe(changed(output.art)) .pipe(changed(output.art))
.pipe(spritesmith({ .pipe(spritesmith({
imgName: 'sprite.png', imgName: 'sprite.png',
imgPath: '../art/sprite.png', imgPath: '../art/sprite.png',
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));
watch(input.fonts, series(fonts, reload)); watch(input.fonts, series(fonts, reload));
watch(input.art.sprites, series(parallel(sprites, style), reload)); watch(input.art.sprites, series(parallel(sprites, style), reload));
watch([input.art.favicons, input.art.images], series(art, reload)); watch([input.art.favicons, input.art.images], series(art, reload));
watch(input.data, series(json, reload)); watch(input.data, series(json, reload));
} }
const assets = parallel(fonts, art, sprites, json, vendor); const assets = parallel(fonts, art, sprites, json, vendor);

1224
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

104
package.json
View file

@ -1,52 +1,52 @@
{ {
"name": "hippie", "name": "hippie",
"version": "0.4.2", "version": "0.4.2",
"description": "Hippie interweaves preeminent personal interface elements", "description": "Hippie interweaves preeminent personal interface elements",
"main": "gulpfile.js", "main": "gulpfile.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/sthag/hippie.git" "url": "git+https://github.com/sthag/hippie.git"
}, },
"author": "Stephan Hagedorn", "author": "Stephan Hagedorn",
"license": "MIT", "license": "MIT",
"bugs": { "bugs": {
"url": "https://github.com/sthag/hippie/issues" "url": "https://github.com/sthag/hippie/issues"
}, },
"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
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------

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

@ -1,23 +1,24 @@
<!-- error-404.page --> <!-- error-404.page -->
{% set pageId = "304" %} {% set pageBase = "../../" %}
{% set bodyClass = "body_status" %} {% set pageId = "304" %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %} {% block title %}{{ pageId }}{% endblock %}
{{ super() }} {% block head %}
{% endblock %} {{ super() }}
{% endblock %}
{% block main %}
<main class="main_site"> {% block main %}
<h1>{{ pageId }}</h1> <main class="main_site">
<h3>Umleitung</h3> <h1>{{ pageId }}</h1>
<p>Unverändert <dfn>Not Modified</dfn></p> <h3>Umleitung</h3>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung"> <p>Unverändert <dfn>Not Modified</dfn></p>
<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> <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">Wikipedia</a></p> <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>
</blockquote> <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">Wikipedia</a></p>
</main> </blockquote>
{{ super() }} </main>
{% endblock %} {{ super() }}
{% endblock %}

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

@ -1,23 +1,24 @@
<!-- error-404.page --> <!-- error-404.page -->
{% set pageId = "400" %} {% set pageBase = "../../" %}
{% set bodyClass = "body_status" %} {% set pageId = "400" %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %} {% block title %}{{ pageId }}{% endblock %}
{{ super() }} {% block head %}
{% endblock %} {{ super() }}
{% endblock %}
{% block main %}
<main class="main_site"> {% block main %}
<h1>{{ pageId }}</h1> <main class="main_site">
<h3>Client-Fehler</h3> <h1>{{ pageId }}</h1>
<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p> <h3>Client-Fehler</h3>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler"> <p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
<p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p> <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p> <p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
</blockquote> <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</main> </blockquote>
{{ super() }} </main>
{% endblock %} {{ super() }}
{% endblock %}

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

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

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

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

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

@ -1,23 +1,24 @@
<!-- error-500.page --> <!-- error-500.page -->
{% set pageId = "500" %} {% set pageBase = "../../" %}
{% set bodyClass = "body_status" %} {% set pageId = "500" %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %}
{% block head %} {% block title %}{{ pageId }}{% endblock %}
{{ super() }} {% block head %}
{% endblock %} {{ super() }}
{% endblock %}
{% block main %}
<main class="main_site"> {% block main %}
<h1>{{ pageId }}</h1> <main class="main_site">
<h3>Server-Fehler</h3> <h1>{{ pageId }}</h1>
<p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p> <h3>Server-Fehler</h3>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler"> <p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
<p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p> <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
<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> <p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p>
</blockquote> <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>
</main> </blockquote>
{{ super() }} </main>
{% endblock %} {{ super() }}
{% endblock %}

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

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

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

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',