Compare commits
No commits in common. "7950d23b145b4dffe5a11fbc7ea660f3456f919b" and "79ad6f452d226cacf1d8d058964e1d18b2e8ca9e" have entirely different histories.
7950d23b14
...
79ad6f452d
46 changed files with 2340 additions and 2758 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 67 B |
Binary file not shown.
|
Before Width: | Height: | Size: 77 B |
|
|
@ -1,113 +0,0 @@
|
||||||
// Creates a div element which is draggable
|
|
||||||
class NewDiv {
|
|
||||||
constructor(x, y, width, height, backgroundColor) {
|
|
||||||
this.x = x;
|
|
||||||
this.y = y;
|
|
||||||
this.width = width;
|
|
||||||
this.height = height;
|
|
||||||
this.backgroundColor = backgroundColor;
|
|
||||||
this.element = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create the div element
|
|
||||||
createDiv() {
|
|
||||||
this.element = document.createElement('div');
|
|
||||||
this.element.style.position = 'absolute';
|
|
||||||
this.element.style.left = `${this.x}px`;
|
|
||||||
this.element.style.top = `${this.y}px`;
|
|
||||||
this.element.style.width = `${this.width}px`;
|
|
||||||
this.element.style.height = `${this.height}px`;
|
|
||||||
this.element.style.background = this.backgroundColor;
|
|
||||||
this.element.style.cursor = 'move';
|
|
||||||
|
|
||||||
// Add event listeners for dragging
|
|
||||||
let isDown = false;
|
|
||||||
let offset = [0, 0];
|
|
||||||
|
|
||||||
this
|
|
||||||
.element
|
|
||||||
.addEventListener('mousedown', (event) => {
|
|
||||||
if (event.button === 0) { // Left mouse button
|
|
||||||
isDown = true;
|
|
||||||
offset = [
|
|
||||||
this.element.offsetLeft - event.clientX,
|
|
||||||
this.element.offsetTop - event.clientY
|
|
||||||
];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('mouseup', () => {
|
|
||||||
isDown = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('mousemove', (event) => {
|
|
||||||
if (isDown) {
|
|
||||||
const maxX = window.innerWidth - this.element.offsetWidth;
|
|
||||||
const maxY = window.innerHeight - this.element.offsetHeight;
|
|
||||||
let x = event.clientX + offset[0];
|
|
||||||
let y = event.clientY + offset[1];
|
|
||||||
|
|
||||||
// Boundary checks
|
|
||||||
if (x < 0)
|
|
||||||
x = 0;
|
|
||||||
if (y < 0)
|
|
||||||
y = 0;
|
|
||||||
if (x > maxX)
|
|
||||||
x = maxX;
|
|
||||||
if (y > maxY)
|
|
||||||
y = maxY;
|
|
||||||
|
|
||||||
this.element.style.left = `${x}px`;
|
|
||||||
this.element.style.top = `${y}px`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Save position and size
|
|
||||||
const saveData = () => {
|
|
||||||
const data = {
|
|
||||||
x: this.element.offsetLeft,
|
|
||||||
y: this.element.offsetTop,
|
|
||||||
width: this.element.offsetWidth,
|
|
||||||
height: this.element.offsetHeight
|
|
||||||
};
|
|
||||||
// Save data to local storage or a database
|
|
||||||
localStorage.setItem(`divData${this.element.id}`, JSON.stringify(data));
|
|
||||||
};
|
|
||||||
|
|
||||||
// Load saved data
|
|
||||||
const loadData = () => {
|
|
||||||
const data = localStorage.getItem(`divData${this.element.id}`);
|
|
||||||
if (data) {
|
|
||||||
const parsedData = JSON.parse(data);
|
|
||||||
this.element.style.left = `${parsedData.x}px`;
|
|
||||||
this.element.style.top = `${parsedData.y}px`;
|
|
||||||
this.element.style.width = `${parsedData.width}px`;
|
|
||||||
this.element.style.height = `${parsedData.height}px`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Call the save function when the user stops dragging
|
|
||||||
document.addEventListener('mouseup', saveData);
|
|
||||||
|
|
||||||
// Load saved data on page load
|
|
||||||
loadData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Append the div to the space
|
|
||||||
appendToFrame(space) {
|
|
||||||
this.element.id = `newDiv${space.children.length}`;
|
|
||||||
space.appendChild(this.element);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function to generate a random color
|
|
||||||
function getRandomColor() {
|
|
||||||
const letters = '0123456789ABCDEF';
|
|
||||||
let color = '#';
|
|
||||||
|
|
||||||
for (let i = 0; i < 6; i++) {
|
|
||||||
color += letters[Math.floor(Math.random() * 16)];
|
|
||||||
}
|
|
||||||
|
|
||||||
return color;
|
|
||||||
}
|
|
||||||
|
|
@ -1,22 +1,22 @@
|
||||||
//NEW
|
//NEW
|
||||||
|
|
||||||
function Clock(id) {
|
function Clock(id){
|
||||||
this.id = id;
|
this.id = id;
|
||||||
|
|
||||||
var that = this;
|
var that = this;
|
||||||
setInterval(function () { that.updateClock(); }, 1000);
|
setInterval(function(){that.updateClock();}, 1000);
|
||||||
this.updateClock();
|
this.updateClock();
|
||||||
}
|
}
|
||||||
|
|
||||||
Clock.prototype.updateClock = function () {
|
Clock.prototype.updateClock = function(){
|
||||||
var date = new Date();
|
var date = new Date();
|
||||||
var clock = document.getElementById(this.id);
|
var clock = document.getElementById(this.id);
|
||||||
//console.log(this);
|
//console.log(this);
|
||||||
clock.innerHTML = this.formatDigits(date.getHours()) + ":" + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds());
|
clock.innerHTML = this.formatDigits(date.getHours()) + ":" + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds());
|
||||||
};
|
};
|
||||||
|
|
||||||
Clock.prototype.formatDigits = function (val) {
|
Clock.prototype.formatDigits = function(val){
|
||||||
if (val < 10) val = "0" + val;
|
if(val<10) val = "0" + val;
|
||||||
|
|
||||||
return val;
|
return val;
|
||||||
}
|
}
|
||||||
|
|
@ -28,7 +28,7 @@ var floor = Math.floor;
|
||||||
function ongoing() {
|
function ongoing() {
|
||||||
|
|
||||||
var now = new Date();
|
var now = new Date();
|
||||||
|
|
||||||
var w = Math.floor(now.getDay());
|
var w = Math.floor(now.getDay());
|
||||||
var D = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
|
var D = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
|
||||||
var DNumb = Math.floor(now.getDate());
|
var DNumb = Math.floor(now.getDate());
|
||||||
|
|
@ -36,114 +36,157 @@ function ongoing() {
|
||||||
var M = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
|
var M = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
|
||||||
var y = Math.floor(now.getYear());
|
var y = Math.floor(now.getYear());
|
||||||
if (y < 999) y += 1900;
|
if (y < 999) y += 1900;
|
||||||
|
|
||||||
var ms = Math.floor(now.getMilliseconds());
|
var ms = Math.floor(now.getMilliseconds());
|
||||||
var s = Math.floor(now.getSeconds());
|
var s = Math.floor(now.getSeconds());
|
||||||
var m = Math.floor(now.getMinutes() + s / 60);
|
var m = Math.floor(now.getMinutes() + s / 60);
|
||||||
var h = Math.floor(now.getHours() + m / 60);
|
var h = Math.floor(now.getHours() + m / 60);
|
||||||
|
|
||||||
var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5)
|
var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5)
|
||||||
j2000.setUTCFullYear(2000, 0, 1);
|
j2000.setUTCFullYear(2000,0,1);
|
||||||
j2000.setUTCHours(0, 0, 0, 0);
|
j2000.setUTCHours(0,0,0,0);
|
||||||
|
|
||||||
var utc = new Date();
|
var utc = new Date();
|
||||||
utc.setUTCFullYear(y, MNumb, DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
|
utc.setUTCFullYear(y,MNumb,DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
|
||||||
utc.setUTCHours(h, m, s, ms);
|
utc.setUTCHours(h,m,s,ms);
|
||||||
|
|
||||||
var utc0 = new Date();
|
var utc0 = new Date();
|
||||||
utc0.setUTCFullYear(y, MNumb, DNumb);
|
utc0.setUTCFullYear(y,MNumb,DNumb);
|
||||||
utc0.setUTCHours(0, 0, 0, 0);
|
utc0.setUTCHours(0,0,0,0);
|
||||||
|
|
||||||
var jd = 2451544.5 + (utc - j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
|
|
||||||
var jdUTC0 = 2451544.5 + (utc0 - j2000) / 86400000;
|
|
||||||
|
|
||||||
|
var jd = 2451544.5 + (utc-j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
|
||||||
|
var jdUTC0 = 2451544.5 + (utc0-j2000) / 86400000;
|
||||||
|
|
||||||
var N = jd - 2451545.0;
|
var N = jd - 2451545.0;
|
||||||
var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne
|
var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne
|
||||||
var g = 357.528 + 0.9856003 * N; // mittlere Anomalie
|
var g = 357.528 + 0.9856003 * N; // mittlere Anomalie
|
||||||
var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2 * g);
|
var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2*g);
|
||||||
var e = 23.439 - 0.0000004 * N;
|
var e = 23.439 - 0.0000004 * N;
|
||||||
var rektaszension = Math.atan((Math.cos(e) * Math.sin(el)) / Math.cos(el));
|
var rektaszension = Math.atan((Math.cos(e)*Math.sin(el)) / Math.cos(el));
|
||||||
|
|
||||||
var T = (jdUTC0 - 2451545.0) / 36525;
|
var T = (jdUTC0 - 2451545.0) / 36525;
|
||||||
var stGMT = (((6 * 3600) + (41 * 60) + 50.54841) + (8640184.812866 * T) + (0.093104 * Math.pow(T, 2)) - (0.0000062 * Math.pow(T, 3))) / 3600;
|
var stGMT = (((6*3600) + (41*60) + 50.54841) + (8640184.812866*T) + (0.093104*Math.pow(T,2)) - (0.0000062*Math.pow(T,3))) / 3600;
|
||||||
|
|
||||||
var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T;
|
var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T;
|
||||||
var hWGMT = stGMT2 * 15;
|
var hWGMT = stGMT2 * 15;
|
||||||
var hW = hWGMT + 11.9566185772;
|
var hW = hWGMT + 11.9566185772;
|
||||||
|
|
||||||
var st = (stGMT + (now.getUTCHours() * 1.00273790935)) + (11.9566185772 / 15); // Sommerzeit muss noch berücksichtigt werden
|
var st = (stGMT + (now.getUTCHours()*1.00273790935)) + (11.9566185772/15); // Sommerzeit muss noch berücksichtigt werden
|
||||||
var st24 = Math.abs(st - (Math.round(st / 24) * 24));
|
var st24 = Math.abs(st - (Math.round(st / 24) * 24));
|
||||||
var stH = Math.floor(st24);
|
var stH = Math.floor(st24);
|
||||||
var stM = Math.floor((st24 % 1) * 60);
|
var stM = Math.floor((st24 % 1) * 60);
|
||||||
var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2);
|
var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2);
|
||||||
|
|
||||||
var travelWidth = document.body.clientWidth;
|
var travelWidth = document.body.clientWidth;
|
||||||
var travelHeight = document.body.clientHeight;
|
var travelHeight = document.body.clientHeight;
|
||||||
var sunPosX = 0;
|
var sunPosX = 0;
|
||||||
var sunPosY = 0;
|
var sunPosY = 0;
|
||||||
var moonPosX = 0;
|
var moonPosX = 0;
|
||||||
var moonPosY = 0;
|
var moonPosY = 0;
|
||||||
|
|
||||||
var sun = $("#sun").css({
|
var sun = $("#sun").css({
|
||||||
"left": (s / 60) * travelWidth,
|
"left": (s / 60) * travelWidth,
|
||||||
"top": (m / 60) * travelHeight
|
"top": (m / 60) * travelHeight
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#day").text(D[w]);
|
$("#day").text(D[w]);
|
||||||
$("#dayNumb").text(DNumb);
|
$("#dayNumb").text(DNumb);
|
||||||
$("#month").text(M[MNumb]);
|
$("#month").text(M[MNumb]);
|
||||||
$("#year").text(y);
|
$("#year").text(y);
|
||||||
$("#time").text('' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2));
|
$("#time").text('' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2));
|
||||||
|
|
||||||
$("#julian").text(jd.toFixed(6));
|
$("#julian").text(jd.toFixed(6));
|
||||||
//$("#star").text(stH + ':' + stM + ':' + stS);
|
//$("#star").text(stH + ':' + stM + ':' + stS);
|
||||||
$("#star").text(stH + ':' + stM);
|
$("#star").text(stH + ':' + stM);
|
||||||
$("#star1").text(stGMT);
|
$("#star1").text(stGMT);
|
||||||
$("#star2").text(stGMT2);
|
$("#star2").text(stGMT2);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function zeroFill(number, width) {
|
function zeroFill( number, width ){
|
||||||
width -= number.toString().length;
|
width -= number.toString().length;
|
||||||
if (width > 0) {
|
if ( width > 0 ){
|
||||||
return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
|
return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
|
||||||
}
|
}
|
||||||
return number + ""; // always return a string
|
return number + ""; // always return a string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// create emails
|
||||||
|
function composeMail(tag, name, prov, suffix, text, topic) {
|
||||||
|
var trigger = tag.indexOf(".");
|
||||||
|
var mailString = name + '@' + prov + '.' + suffix;
|
||||||
|
var textString = mailString.replace(/@/g, "(at)");
|
||||||
|
var descString = "Nachricht an " + mailString;
|
||||||
|
if (trigger == -1) {
|
||||||
|
if (!text) {
|
||||||
|
text = mailString;
|
||||||
|
} else if (text == "at") {
|
||||||
|
text = textString;
|
||||||
|
} else if (text == "to") {
|
||||||
|
text = descString;
|
||||||
|
}
|
||||||
|
if (!topic) {
|
||||||
|
topic = "";
|
||||||
|
} else {
|
||||||
|
topic = "?subject=" + topic;
|
||||||
|
}
|
||||||
|
var old = $('#'+tag).html();
|
||||||
|
$('#'+tag).html(old + text);
|
||||||
|
$('#'+tag).attr("href", "mailto:" + mailString + topic);
|
||||||
|
} else {
|
||||||
|
$(tag).each(function() {
|
||||||
|
if (!text) {
|
||||||
|
text = mailString;
|
||||||
|
} else if (text == "at") {
|
||||||
|
text = textString;
|
||||||
|
} else if (text == "to") {
|
||||||
|
text = descString;
|
||||||
|
}
|
||||||
|
if (!topic) {
|
||||||
|
topic = "";
|
||||||
|
} else {
|
||||||
|
topic = "?subject=" + topic;
|
||||||
|
}
|
||||||
|
var old = $(this).html();
|
||||||
|
$(this).html(old + text);
|
||||||
|
$(this).attr("href", "mailto:" + mailString + topic);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//Länge der Balken im Diagram berechnen
|
//Länge der Balken im Diagram berechnen
|
||||||
function barwidth(size, G, W) {
|
function barwidth(size, G, W) {
|
||||||
var s = size;
|
var s = size;
|
||||||
var g = G;
|
var g = G;
|
||||||
var w = W;
|
var w = W;
|
||||||
var p = (w / g) * 100;
|
var p = ( w / g ) * 100;
|
||||||
var newW = s * (p / 100);
|
var newW = s * ( p /100 );
|
||||||
|
|
||||||
return newW;
|
return newW;
|
||||||
}
|
}
|
||||||
//String Element erweitern
|
//String Element erweitern
|
||||||
String.prototype.transform = function () {
|
String.prototype.transform = function() {
|
||||||
return parseFloat(this.replace(',', '.'));
|
return parseFloat(this.replace(',', '.'));
|
||||||
}
|
}
|
||||||
//Array Element erweitern
|
//Array Element erweitern
|
||||||
Array.prototype.arrayAdd = function () {
|
Array.prototype.arrayAdd = function() {
|
||||||
return eval(this.join("+"));
|
return eval(this.join("+"));
|
||||||
}
|
}
|
||||||
//Speicherplatz in Prozent berechnen
|
//Speicherplatz in Prozent berechnen
|
||||||
function percentage(total, gigs, round) {
|
function percentage(total, gigs, round) {
|
||||||
var totalSpace = total;
|
var totalSpace = total;
|
||||||
var singleSpace = gigs;
|
var singleSpace = gigs;
|
||||||
var z = round;
|
var z = round;
|
||||||
var p = singleSpace / (totalSpace / 100);
|
var p = singleSpace / ( totalSpace / 100 );
|
||||||
|
|
||||||
return p;
|
return p;
|
||||||
}
|
}
|
||||||
//Speicherplatz in GB berechnen
|
//Speicherplatz in GB berechnen
|
||||||
function gigabytes(percent, total, round) {
|
function gigabytes(percent, total, round) {
|
||||||
var occupiedPercent = percent;
|
var occupiedPercent = percent;
|
||||||
var singleSpace = total;
|
var singleSpace = total;
|
||||||
var z = round;
|
var z = round;
|
||||||
var g = (singleSpace / 100) * occupiedPercent;
|
var g = (singleSpace / 100 ) * occupiedPercent;
|
||||||
|
|
||||||
return g;
|
return g;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,188 +1,149 @@
|
||||||
// This is called everytime
|
// This is called everytime
|
||||||
function setup() {
|
function setup() {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
console.group('Document information');
|
console.group('Document information');
|
||||||
console.info('\n', hippie.brand, '\n\n');
|
console.info('\n', hippie.brand, '\n\n');
|
||||||
console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
|
console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
|
||||||
console.groupEnd();
|
console.groupEnd();
|
||||||
if (debugOn) {
|
if (debugOn) {
|
||||||
console.group('Debug information');
|
console.group('Debug information');
|
||||||
console.dir(hippie);
|
console.dir(hippie);
|
||||||
console.groupEnd();
|
console.groupEnd();
|
||||||
}
|
}
|
||||||
|
|
||||||
// WANNABE MODULE Mouse over effect
|
// WANNABE MODULE Mouse over effect
|
||||||
// With CSS only
|
// With CSS only
|
||||||
if ($('#js_mob').length && viewHover) {
|
if ($('#js_mob').length && viewHover) {
|
||||||
$('#js_mob').addClass('mouse_over');
|
$('#js_mob').addClass('mouse_over');
|
||||||
}
|
}
|
||||||
// if (viewHover) {
|
// if (viewHover) {
|
||||||
// $('body').prepend('<div id="js_mob" class="mouse_over"></div>');
|
// $('body').prepend('<div id="js_mob" class="mouse_over"></div>');
|
||||||
// }
|
// }
|
||||||
// With JS
|
// With JS
|
||||||
}
|
}
|
||||||
|
|
||||||
// MODULE Scroll navigation
|
// MODULE Scroll navigation
|
||||||
// Using constructor function
|
// Using constructor function
|
||||||
function HippieScroll($tp, $dn) {
|
function HippieScroll($tp, $dn) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
// this.$tp = $tp;
|
// this.$tp = $tp;
|
||||||
// Define initial situation
|
// Define initial situation
|
||||||
let initLeft = false;
|
let initLeft = false;
|
||||||
const initY = hippie.screen.vh;
|
const initY = hippie.screen.vh;
|
||||||
|
|
||||||
$tp.addClass('di_none');
|
$tp.addClass('di_none');
|
||||||
|
|
||||||
// Check scroll position and toggle element
|
// Check scroll position and toggle element
|
||||||
this.check = function () {
|
this.check = function () {
|
||||||
hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
|
hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
|
||||||
if (hippie.screen.y > initY) {
|
if (hippie.screen.y > initY) {
|
||||||
if (!initLeft) {
|
if (!initLeft) {
|
||||||
$tp.removeClass('di_none');
|
$tp.removeClass('di_none');
|
||||||
console.info('Initial viewport left');
|
console.info('Initial viewport left');
|
||||||
}
|
}
|
||||||
initLeft = true;
|
initLeft = true;
|
||||||
} else {
|
} else {
|
||||||
if (initLeft) {
|
if (initLeft) {
|
||||||
$tp.addClass('di_none');
|
$tp.addClass('di_none');
|
||||||
console.info('Initial viewport entered');
|
console.info('Initial viewport entered');
|
||||||
}
|
}
|
||||||
initLeft = false;
|
initLeft = false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Add events to navigation elements
|
// Add events to navigation elements
|
||||||
$tp.click(function (event) {
|
$tp.click(function (event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
$('html, body').stop().animate({
|
$('html, body').stop().animate({
|
||||||
scrollTop: 0
|
scrollTop: 0
|
||||||
}, basicEase);
|
}, basicEase);
|
||||||
// console.log('Scrolled to top');
|
// console.log('Scrolled to top');
|
||||||
});
|
});
|
||||||
$dn.click(function (event) {
|
$dn.click(function (event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
|
var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
|
||||||
$('html').scrollTop(pos);
|
$('html').scrollTop(pos);
|
||||||
// document.documentElement.scrollTop = pos;
|
// document.documentElement.scrollTop = pos;
|
||||||
console.info('Scrolled down to', pos);
|
console.info('Scrolled down to', pos);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// MODULE Meta elements
|
// MODULE Meta elements
|
||||||
function HippieMeta($ma, $pp) {
|
function HippieMeta($ma, $pp) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
let metaOn = false;
|
let metaOn = false;
|
||||||
|
|
||||||
$ma.click(function () {
|
$ma.click(function () {
|
||||||
var $wrap, $pop;
|
var $wrap, $pop;
|
||||||
|
|
||||||
// if (metaOn !== true) {
|
// if (metaOn !== true) {
|
||||||
if (!metaOn) {
|
if (!metaOn) {
|
||||||
metaOn = true;
|
metaOn = true;
|
||||||
|
|
||||||
$pp.each(function () {
|
$pp.each(function () {
|
||||||
// if ($(this).css('position') === 'static') {
|
// if ($(this).css('position') === 'static') {
|
||||||
// $(this).addClass('js_changed_pos');
|
// $(this).addClass('js_changed_pos');
|
||||||
// $(this).css('position', 'relative');
|
// $(this).css('position', 'relative');
|
||||||
// }
|
// }
|
||||||
// $pop = $(this).next('.exp_pop').detach();
|
// $pop = $(this).next('.exp_pop').detach();
|
||||||
// $wrap = $(this).wrap('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_overlay"></span>').prepend('<span class="exp_marker_pop"></span>');
|
// $wrap = $(this).wrap('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_overlay"></span>').prepend('<span class="exp_marker_pop"></span>');
|
||||||
// $wrap.after($pop);
|
// $wrap.after($pop);
|
||||||
|
|
||||||
$('<div></div>').addClass('exp_overlay').css({
|
$('<div></div>').addClass('exp_overlay').css({
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0
|
left: 0
|
||||||
}).appendTo($(this).addClass('exp_wrap'));
|
}).appendTo($(this).addClass('exp_wrap'));
|
||||||
|
|
||||||
// Displays explanation popup following the mouse
|
// Displays explanation popup following the mouse
|
||||||
$(this).on({
|
$(this).on({
|
||||||
mouseenter: function () {
|
mouseenter: function () {
|
||||||
// if ($(this).attr('emmet')) {
|
// if ($(this).attr('emmet')) {
|
||||||
//
|
//
|
||||||
// }
|
// }
|
||||||
$(this).next('.exp_pop').show();
|
$(this).next('.exp_pop').show();
|
||||||
},
|
},
|
||||||
mouseleave: function () {
|
mouseleave: function () {
|
||||||
$(this).next('.exp_pop').hide();
|
$(this).next('.exp_pop').hide();
|
||||||
},
|
},
|
||||||
mousemove: function (event) {
|
mousemove: function (event) {
|
||||||
$(this).next('.exp_pop').css({
|
$(this).next('.exp_pop').css({
|
||||||
'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
|
'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
|
||||||
'left': event.pageX + 8
|
'left': event.pageX + 8
|
||||||
// 'left': event.pageX - $(this).offset().left + 8
|
// 'left': event.pageX - $(this).offset().left + 8
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
$pp.each(function () {
|
$pp.each(function () {
|
||||||
$(this).off('mouseenter mouseleave mousemove');
|
$(this).off('mouseenter mouseleave mousemove');
|
||||||
|
|
||||||
$(this).removeClass('exp_wrap').find('.exp_overlay').remove();
|
$(this).removeClass('exp_wrap').find('.exp_overlay').remove();
|
||||||
// $wrap = $(this).parent('.exp_wrap');
|
// $wrap = $(this).parent('.exp_wrap');
|
||||||
// $pop = $wrap.next('.exp_pop').detach();
|
// $pop = $wrap.next('.exp_pop').detach();
|
||||||
// $wrap.find('.exp_marker_pop').remove();
|
// $wrap.find('.exp_marker_pop').remove();
|
||||||
// $(this).unwrap('.exp_wrap');
|
// $(this).unwrap('.exp_wrap');
|
||||||
// $(this).after($pop);
|
// $(this).after($pop);
|
||||||
// if ($(this).hasClass('js_changed_pos')) {
|
// if ($(this).hasClass('js_changed_pos')) {
|
||||||
// $(this).css('position', '');
|
// $(this).css('position', '');
|
||||||
// if ($(this).attr('style') === '') {
|
// if ($(this).attr('style') === '') {
|
||||||
// $(this).removeAttr('style');
|
// $(this).removeAttr('style');
|
||||||
// }
|
// }
|
||||||
// $(this).removeClass('js_changed_pos');
|
// $(this).removeClass('js_changed_pos');
|
||||||
// }
|
// }
|
||||||
});
|
});
|
||||||
|
|
||||||
metaOn = false;
|
metaOn = false;
|
||||||
}
|
}
|
||||||
console.log('Explanation mode', metaOn);
|
console.log('Explanation mode', metaOn);
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
// Sets the href attribute to mailto: with given information
|
|
||||||
function composeMail(tag, name, prov, suffix, text, topic) {
|
|
||||||
let trigger = tag.indexOf(".");
|
|
||||||
let mailString = name + '@' + prov + '.' + suffix;
|
|
||||||
let textString = mailString.replace(/@/g, "(at)");
|
|
||||||
let descString = "Nachricht an " + mailString;
|
|
||||||
|
|
||||||
if (!text) {
|
|
||||||
text = mailString;
|
|
||||||
} else if (text === "at") {
|
|
||||||
text = textString;
|
|
||||||
} else if (text === "to") {
|
|
||||||
text = descString;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (topic) {
|
|
||||||
topic = "?subject=" + topic;
|
|
||||||
} else {
|
|
||||||
topic = "";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (trigger === -1) {
|
|
||||||
const el = document.getElementById(tag);
|
|
||||||
const elContent = el.innerHTML;
|
|
||||||
|
|
||||||
el.innerHTML = elContent + text;
|
|
||||||
el.setAttribute("href", "mailto:" + mailString + topic);
|
|
||||||
} else {
|
|
||||||
const els = document.getElementsByClassName(tag.slice(1));
|
|
||||||
|
|
||||||
for (let el of els) {
|
|
||||||
const elContent = el.innerHTML;
|
|
||||||
|
|
||||||
el.innerHTML = elContent + text;
|
|
||||||
el.setAttribute("href", "mailto:" + mailString + topic);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// get document coordinates of the element
|
// get document coordinates of the element
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
// Setup
|
// Setup
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
setup();
|
// setup();
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,20 @@
|
||||||
let hippie = {
|
var hippie = {
|
||||||
brand: "|-| | |^ |^ | [- ",
|
brand: "|-| | |^ |^ | [- ",
|
||||||
screen: {
|
screen: {
|
||||||
w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
|
w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
|
||||||
vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
|
vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
|
||||||
dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0),
|
dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0),
|
||||||
y: Math.min($(document).scrollTop(), document.documentElement.scrollTop)
|
y: Math.min($(document).scrollTop(), document.documentElement.scrollTop)
|
||||||
// hippie.screen.y: document.documentElement.scrollTop
|
// hippie.screen.y: document.documentElement.scrollTop
|
||||||
},
|
},
|
||||||
body: {
|
body: {
|
||||||
w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0),
|
w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0),
|
||||||
h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0),
|
h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0),
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
let viewHover = true;
|
|
||||||
let basicEase = 600;
|
|
||||||
|
|
||||||
const onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
|
var viewHover = true;
|
||||||
const onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";
|
var basicEase = 600;
|
||||||
const flagColors = [
|
|
||||||
'fad803',
|
var onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
|
||||||
'f2af13',
|
var onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";
|
||||||
'd30a51',
|
|
||||||
'8e1f68',
|
|
||||||
'273f8b',
|
|
||||||
'3c579a',
|
|
||||||
'b7e0f0',
|
|
||||||
'6bc7d9',
|
|
||||||
'52bed1'
|
|
||||||
]
|
|
||||||
|
|
|
||||||
|
|
@ -1,128 +1,48 @@
|
||||||
class Intro {
|
let introDelay = 6;
|
||||||
constructor(name) {
|
let hintDelay = 1;
|
||||||
this.name = name;
|
let isAgree = false;
|
||||||
|
|
||||||
|
const steps = {
|
||||||
|
agreement: {
|
||||||
|
element: document.getElementById('agreement'),
|
||||||
|
msgIn: 'Agreement shown.',
|
||||||
|
msgOut: 'Agreement accepted.',
|
||||||
|
msgNo: 'No agreement today.'
|
||||||
}
|
}
|
||||||
|
};
|
||||||
init() {
|
const intro = document.getElementById('intro');
|
||||||
return new Promise((resolve) => {
|
const agreement = steps.agreement.element;
|
||||||
console.log('%s Init', this.name);
|
const hint = {
|
||||||
|
element: document.getElementById('hint'),
|
||||||
resolve();
|
delay: hintDelay * 1000,
|
||||||
});
|
show() {
|
||||||
}
|
if (typeof this.timeoutId === 'number') {
|
||||||
}
|
this.cancel();
|
||||||
|
|
||||||
class UI {
|
|
||||||
constructor() {
|
|
||||||
this.introDelay = 6;
|
|
||||||
this.hintDelay = 1;
|
|
||||||
this.isAgree = false;
|
|
||||||
this.steps = {
|
|
||||||
agreement: {
|
|
||||||
element: document.getElementById('agreement'),
|
|
||||||
msgIn: 'Agreement shown.',
|
|
||||||
msgOut: 'Agreement accepted.',
|
|
||||||
msgNo: 'No agreement today.'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
this.intro = document.getElementById('intro');
|
|
||||||
this.agreement = this.steps.agreement.element;
|
|
||||||
this.hint = {
|
|
||||||
element: document.getElementById('hint'),
|
|
||||||
delay: this.hintDelay * 1000
|
|
||||||
};
|
|
||||||
this.loader = document.getElementById('loader');
|
|
||||||
}
|
|
||||||
|
|
||||||
showIntro() {
|
|
||||||
const el = this.intro;
|
|
||||||
const dy = this.introDelay * 1000;
|
|
||||||
|
|
||||||
document.addEventListener('click', hintHandler, false);
|
|
||||||
document.addEventListener('keydown', hintHandler, false);
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (el) {
|
|
||||||
console.info("Intro begin.");
|
|
||||||
|
|
||||||
el.classList.replace('op_hide', 'op_show');
|
|
||||||
setTimeout(
|
|
||||||
() => {
|
|
||||||
el.classList.replace('op_show', 'op_hide');
|
|
||||||
el.addEventListener('transitionend', () => {
|
|
||||||
console.info("Intro fin.");
|
|
||||||
|
|
||||||
el.classList.add('di_none');
|
|
||||||
resolve("Intro fin.");
|
|
||||||
});
|
|
||||||
},
|
|
||||||
dy
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
reject('No intro available.');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
showHint() {
|
|
||||||
if (typeof this.hint.timeoutId === 'number') {
|
|
||||||
this.cancelHint();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.hint.element.classList.remove('di_none');
|
this.element.classList.remove('di_none');
|
||||||
|
|
||||||
this.hint.timeoutId = setTimeout(
|
this.timeoutId = setTimeout(
|
||||||
() => {
|
() => {
|
||||||
this.dismissHint();
|
this.dismiss();
|
||||||
},
|
},
|
||||||
this.hint.delay
|
this.delay
|
||||||
);
|
);
|
||||||
|
},
|
||||||
|
dismiss() {
|
||||||
|
this.element.classList.add('di_none');
|
||||||
|
this.timeoutId = undefined;
|
||||||
|
},
|
||||||
|
cancel() {
|
||||||
|
clearTimeout(this.timeoutId);
|
||||||
}
|
}
|
||||||
|
};
|
||||||
dismissHint() {
|
const loader = document.getElementById('loader');
|
||||||
this.hint.element.classList.add('di_none');
|
|
||||||
this.hint.timeoutId = undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
cancelHint() {
|
|
||||||
clearTimeout(this.hint.timeoutId);
|
|
||||||
}
|
|
||||||
|
|
||||||
showIdle() {
|
|
||||||
const el = document.getElementById('idle');
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (el) {
|
|
||||||
console.info('Idle.');
|
|
||||||
|
|
||||||
el.classList.replace('op_hide', 'op_show');
|
|
||||||
resolve('Idle.');
|
|
||||||
} else {
|
|
||||||
reject();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
init() {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
console.log('Init');
|
|
||||||
|
|
||||||
resolve();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
console.log('Init');
|
console.log('Init');
|
||||||
|
|
||||||
// Set all steps to not receive pointer events
|
|
||||||
document.querySelectorAll('.step').forEach(element => {
|
|
||||||
console.log(element);
|
|
||||||
|
|
||||||
element.style.pointerEvents = 'none';
|
|
||||||
});
|
|
||||||
|
|
||||||
resolve();
|
resolve();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -146,16 +66,12 @@ function showIntro() {
|
||||||
console.info("Intro fin.");
|
console.info("Intro fin.");
|
||||||
|
|
||||||
el.classList.add('di_none');
|
el.classList.add('di_none');
|
||||||
|
|
||||||
resolve("Intro fin.");
|
resolve("Intro fin.");
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
dy
|
dy
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
document.removeEventListener('click', hintHandler);
|
|
||||||
document.removeEventListener('keydown', hintHandler);
|
|
||||||
|
|
||||||
reject('No intro available.');
|
reject('No intro available.');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -172,10 +88,7 @@ function showAgreement() {
|
||||||
console.info(steps.agreement.msgIn);
|
console.info(steps.agreement.msgIn);
|
||||||
|
|
||||||
el.classList.replace('op_hide', 'op_show');
|
el.classList.replace('op_hide', 'op_show');
|
||||||
el.style.pointerEvents = '';
|
|
||||||
|
|
||||||
el.addEventListener('click', agreeHandler);
|
el.addEventListener('click', agreeHandler);
|
||||||
document.addEventListener('keydown', agreeHandler);
|
|
||||||
} else {
|
} else {
|
||||||
reject(steps.agreement.msgNo);
|
reject(steps.agreement.msgNo);
|
||||||
}
|
}
|
||||||
|
|
@ -191,9 +104,7 @@ function showAgreement() {
|
||||||
|
|
||||||
el.removeEventListener('transitionend', endListener);
|
el.removeEventListener('transitionend', endListener);
|
||||||
el.removeEventListener('click', agreeHandler);
|
el.removeEventListener('click', agreeHandler);
|
||||||
document.removeEventListener('keydown', agreeHandler);
|
|
||||||
el.classList.add('di_none');
|
el.classList.add('di_none');
|
||||||
|
|
||||||
resolve(steps.agreement.msgOut);
|
resolve(steps.agreement.msgOut);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -203,22 +114,13 @@ function showAgreement() {
|
||||||
function showIdle() {
|
function showIdle() {
|
||||||
const el = document.getElementById('idle');
|
const el = document.getElementById('idle');
|
||||||
|
|
||||||
document.addEventListener('mouseleave', idleStart, false);
|
|
||||||
document.addEventListener('mouseenter', idleStop, false);
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
if (el) {
|
if (el) {
|
||||||
console.info('Idle.');
|
console.info('Idle.');
|
||||||
|
|
||||||
el.classList.replace('op_hide', 'op_show');
|
el.classList.replace('op_hide', 'op_show');
|
||||||
el.style.pointerEvents = '';
|
|
||||||
el.addEventListener('click', idleStart, false);
|
|
||||||
|
|
||||||
resolve('Idle.');
|
resolve('Idle.');
|
||||||
} else {
|
} else {
|
||||||
document.removeEventListener('mouseleave', idleStart);
|
|
||||||
document.removeEventListener('mouseenter', idleStop);
|
|
||||||
|
|
||||||
reject();
|
reject();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -264,7 +166,6 @@ function loadCore() {
|
||||||
|
|
||||||
el.removeEventListener('transitionend', endListener);
|
el.removeEventListener('transitionend', endListener);
|
||||||
el.classList.add('di_none');
|
el.classList.add('di_none');
|
||||||
|
|
||||||
resolve("Core loaded.");
|
resolve("Core loaded.");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -272,6 +173,60 @@ function loadCore() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
init()
|
||||||
|
.then(loadCore)
|
||||||
|
.then(showIntro)
|
||||||
|
.catch(er => console.error(er))
|
||||||
|
.then(showAgreement)
|
||||||
|
.then(showIdle)
|
||||||
|
.catch(er => console.error(er))
|
||||||
|
.finally(() => {
|
||||||
|
console.debug('Init end.', isAgree);
|
||||||
|
// location = 'demo/examples/ui/new.html';
|
||||||
|
});
|
||||||
|
|
||||||
|
// document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// const barEl = document.getElementById('bar');
|
||||||
|
// const bar = document.getElementById('progress');
|
||||||
|
// const status = document.getElementById('status');
|
||||||
|
// const spinnerEl = document.getElementById('spinner');
|
||||||
|
// const spinner = document.getElementById('spinner').querySelector('span');
|
||||||
|
|
||||||
|
// let progress = 0;
|
||||||
|
|
||||||
|
// function updateProgressBar() {
|
||||||
|
// let increment = randomIntFrom(1, 9);
|
||||||
|
// progress += increment;
|
||||||
|
|
||||||
|
// if (progress >= 100) progress = 100;
|
||||||
|
// console.log(progress);
|
||||||
|
|
||||||
|
// bar.style.width = progress + '%';
|
||||||
|
// status.textContent = progress + '%';
|
||||||
|
|
||||||
|
// if (progress < 100) {
|
||||||
|
// setTimeout(updateProgressBar, 100);
|
||||||
|
// } else {
|
||||||
|
// bar.style.width = '100%';
|
||||||
|
// spinner.style.animationPlayState = 'paused';
|
||||||
|
// spinnerEl.style.color = 'white';
|
||||||
|
// spinnerEl.style.backgroundColor = 'black';
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// updateProgressBar();
|
||||||
|
|
||||||
|
// window.addEventListener('load', () => {
|
||||||
|
// // progressEl.style.width = '100%';
|
||||||
|
// // setTimeout(() => {
|
||||||
|
// // progressBar.style.opacity = 0;
|
||||||
|
// // setTimeout(() => {
|
||||||
|
// // progressBar.style.display = 'none';
|
||||||
|
// // }, 500);
|
||||||
|
// // }, 2000);
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Gibt eine Zahl zwischen <min> und <max> aus.
|
* Gibt eine Zahl zwischen <min> und <max> aus.
|
||||||
* Die Werte <min> und <max> sind dabei mit eingeschlossen.
|
* Die Werte <min> und <max> sind dabei mit eingeschlossen.
|
||||||
|
|
@ -297,14 +252,6 @@ function hintHandler() {
|
||||||
hint.show();
|
hint.show();
|
||||||
}
|
}
|
||||||
|
|
||||||
function idleStart() {
|
|
||||||
idle.cycle();
|
|
||||||
}
|
|
||||||
|
|
||||||
function idleStop() {
|
|
||||||
idle.cancel();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Blendet einen Schritt aus.
|
* Blendet einen Schritt aus.
|
||||||
*
|
*
|
||||||
|
|
@ -321,7 +268,6 @@ function stepHandler(e) {
|
||||||
console.info(msg);
|
console.info(msg);
|
||||||
|
|
||||||
el.removeEventListener('transitionend', endListener);
|
el.removeEventListener('transitionend', endListener);
|
||||||
|
|
||||||
resolve(msg);
|
resolve(msg);
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -7,380 +7,201 @@ tags:
|
||||||
{% set pageId = page.fileSlug %}
|
{% set pageId = page.fileSlug %}
|
||||||
|
|
||||||
{% extends "demo/_main.njk" %}
|
{% extends "demo/_main.njk" %}
|
||||||
{% import "hippie/macros/_footer.njk" as footer %}
|
|
||||||
|
|
||||||
{% block title %}Komponenten{% endblock %}
|
{% block title %}Komponenten{% endblock %}
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block main %}
|
{% block main %}
|
||||||
<!-- {{ page.fileSlug }}.page -->
|
<!-- {{ page.fileSlug }}.page -->
|
||||||
<section class="sec_main_center">
|
<div class="temp_layer">
|
||||||
<header class="header_txt">
|
<!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
|
||||||
<h1>Medienformat Abfragen</h1>
|
{% include "hippie/partials/_body_nav.njk" %}
|
||||||
</header>
|
</div>
|
||||||
<article>
|
<div id="begin" class="">
|
||||||
<div class="demo__query_example">Umbruch bei </div>
|
<section class="sec_main_center">
|
||||||
<div class="demo__queries">
|
<header class="header_txt">
|
||||||
<p class="query_phoneUp">Telefone und größer</p>
|
<h1>Medienformat Abfragen</h1>
|
||||||
<p class="query_phoneOnly">Nur Telefone</p>
|
</header>
|
||||||
<p class="query_tabletPortaitOnly">Nur Schreibtafeln hochkant</p>
|
<article>
|
||||||
<p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
|
<div class="demo__query_example">Umbruch bei </div>
|
||||||
<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
|
<div class="demo__queries">
|
||||||
<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
|
<p class="query_phoneUp">Telefone und größer</p>
|
||||||
<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
|
<p class="query_phoneOnly">Nur Telefone</p>
|
||||||
<p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
|
<p class="query_tabletPortaitOnly">Nur Schreibtafeln hochkant</p>
|
||||||
<p class="query_bigDesktopUp">Richtige Monitore und größer</p>
|
<p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
|
||||||
</div>
|
<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
|
||||||
</article>
|
<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
|
||||||
</section>
|
<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
|
||||||
|
<p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
|
||||||
|
<p class="query_bigDesktopUp">Richtige Monitore und größer</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="sec_main_center">
|
<section class="sec_main_center">
|
||||||
<header class="header_txt">
|
<header class="header_txt">
|
||||||
<h1>Übersicht aller Elemente</h1>
|
<h1>Übersicht aller Elemente</h1>
|
||||||
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://html.spec.whatwg.org/multipage/#toc-semantics">html.spec.whatwg.org/multipage/#toc-semantics</a>) verwendet.</p>
|
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p>
|
||||||
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
|
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
|
||||||
</header>
|
</header>
|
||||||
<pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h2{<tag>}+h4{Varianten}</code></pre>
|
<pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h4{Varianten}</code></pre>
|
||||||
<article>
|
<article>
|
||||||
<h1 id="sections">Bereiche</h1>
|
<h1 id="sections">Bereiche</h1>
|
||||||
<p>Elemente:</p>
|
<p>Elemente:</p>
|
||||||
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
|
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
|
||||||
<h2><body></h2>
|
<h2><body></h2>
|
||||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||||
<h2><article></h2>
|
<h2><article></h2>
|
||||||
<article>Ein Artikel.</article>
|
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||||
<h2><section></h2>
|
<h2><section></h2>
|
||||||
<section>Ein Bereich.</section>
|
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||||
<h4>Varianten</h4>
|
<h4>Varianten</h4>
|
||||||
<pre class="pre_code"><code>section.sec_main_center</code></pre>
|
<pre class="pre_code"><code>section.sec_main_center</code></pre>
|
||||||
<section class="sec_main_center">
|
<pre class="pre_code"><code>section.sec_main_status</code></pre>
|
||||||
<p class="float_right">Ende.</p>
|
<h2><h3></h2>
|
||||||
<p>Zentrierter Bereich.</p>
|
<h2><h4></h2>
|
||||||
</section>
|
</article>
|
||||||
<pre class="pre_code"><code>section.sec_main_status</code></pre>
|
<article>
|
||||||
<section class="sec_main_status">Status-Bereich</section>
|
<h1 id="grouping">Gruppierung</h1>
|
||||||
<h2><nav></h2>
|
<p>Elemente:</p>
|
||||||
<nav>Navigation</nav>
|
<pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre>
|
||||||
<h2><aside></h2>
|
<h2><p></h2>
|
||||||
<p>Fließt um andere Inhalte. Klassen zur Positionierung und Kombination mit <code>.bside</code>.</p>
|
<h4>Varianten</h4>
|
||||||
<pre class="pre_code"><code>aside.right+div.bside</code></pre>
|
<pre class="pre_code"><code>p.txt_center</code></pre>
|
||||||
<section>
|
<pre class="pre_code"><code>p.txt_right</code></pre>
|
||||||
<aside class="right">Seitenbereich, recht ausgerichtet.</aside>
|
<pre class="pre_code"><code>p.column_2</code></pre>
|
||||||
<div class="bside">Hauptbereich</div>
|
<pre class="pre_code"><code>p.column_3.column_line</code></pre>
|
||||||
</section>
|
<h2><hr></h2>
|
||||||
<h2><h*></h2>
|
<h4>Varianten</h4>
|
||||||
<h1>Überschrift 1</h1>
|
<pre class="pre_code"><code>hr.hr_hidden</code></pre>
|
||||||
<h2>Überschrift 2</h2>
|
<pre class="pre_code"><code>hr.hr_dotted</code></pre>
|
||||||
<h3>Überschrift 3</h3>
|
<pre class="pre_code"><code>hr.space_even_half</code></pre>
|
||||||
<h4>Überschrift 4</h4>
|
<pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
|
||||||
<h5>Überschrift 5</h5>
|
<h2><blockquote></h2>
|
||||||
<hgroup>
|
<pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre>
|
||||||
<h6>Überschrift 6</h6>
|
<h2><figure></h2>
|
||||||
<p>Mit Absatz innerhalb von <code><hgroup></code>.</p>
|
<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
|
||||||
</hgroup>
|
<h2><div></h2>
|
||||||
<h2><header></h2>
|
<pre class="pre_code"><code>div.div_info>p</code></pre>
|
||||||
<header>Kopfbereich</header>
|
<h4>Varianten</h4>
|
||||||
<pre class="pre_code"><code>header.header_page</code></pre>
|
</article>
|
||||||
<pre class="pre_code"><code>header.header_txt>h1</code></pre>
|
<article>
|
||||||
<header class="header_txt">
|
<h1 id="tabularData">Tabellen</h1>
|
||||||
<h1>Überschrift 1</h1>
|
<p>Elemente:</p>
|
||||||
<p>Innerhalb eines <code><header></code>.</p>
|
<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
|
||||||
</header>
|
<h2><table></h2>
|
||||||
<h2><footer></h2>
|
<h4>Varianten</h4>
|
||||||
<p>Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
|
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
|
||||||
<footer>Fußbereich</footer>
|
<table class="width_full table_fix js_pop">
|
||||||
<div style="position:relative;height:256px;background-color:#b7e0f0;">
|
<thead>
|
||||||
{{ footer.pinned() }}
|
<tr>
|
||||||
</div>
|
<th class="cell_pre" scope="col"></th>
|
||||||
</article>
|
<th scope="col">Kopfzeile</th>
|
||||||
<article>
|
<th scope="col">A</th>
|
||||||
<h1 id="grouping">Gruppierung</h1>
|
<th scope="col">B</th>
|
||||||
<p>Elemente:</p>
|
</tr>
|
||||||
<pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre>
|
</thead>
|
||||||
<h2><p></h2>
|
<tbody>
|
||||||
<p>Ein Absatz. Ein <code>code</code> Element innerhalb wird besonders behandelt.</p>
|
<tr>
|
||||||
<h4>Varianten</h4>
|
<td class="cell_pre">Vorspalte</td>
|
||||||
<pre class="pre_code"><code>p.column_2</code></pre>
|
<td>Eine</td>
|
||||||
<p class="column_2">Spalten können angegeben werden.</p>
|
<td></td>
|
||||||
<pre class="pre_code"><code>p.column_3.column_line</code></pre>
|
<td></td>
|
||||||
<p class="column_3 column_line">Spalten können angegeben werden.</p>
|
</tr>
|
||||||
<h2><address></h2>
|
<tr>
|
||||||
<address>Anschrift, mit bestimmtem, ##### Format.</address>
|
<td class="cell_pre">1</td>
|
||||||
<h2><hr></h2>
|
<td></td>
|
||||||
<hr>
|
<td>erweiterte</td>
|
||||||
<h4>Varianten</h4>
|
<td></td>
|
||||||
<pre class="pre_code"><code>hr.hr_hidden+hr.hr_dotted+hr.hr_double</code></pre>
|
</tr>
|
||||||
<hr class="hr_hidden">
|
<tr>
|
||||||
<hr class="hr_dotted">
|
<td class="cell_pre">2</td>
|
||||||
<hr class="hr_double">
|
<td></td>
|
||||||
<h2><pre></h2>
|
<td></td>
|
||||||
<pre>Vorformatierter Text.
|
<td>Tabelle</td>
|
||||||
erhält Umbrüche und Einrückung.
|
</tr>
|
||||||
</pre>
|
</tbody>
|
||||||
<pre class="pre_code"><code>pre.pre_code>code*2</code></pre>
|
</table>
|
||||||
<pre class="pre_code"><code>let variable = true;</code>
|
<pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre>
|
||||||
<code>()(){}</code></pre>
|
<table class="width_full table_stripe table_fix table_free">
|
||||||
<h2><blockquote></h2>
|
<tr>
|
||||||
<blockquote>Ein Zitat ist eingerückt.</blockquote>
|
<td>Tabelle</td>
|
||||||
<pre class="pre_code"><code>blockquote.quote_mark>p+p.quote_source</code></pre>
|
<td></td>
|
||||||
<blockquote class="quote_mark">
|
<td></td>
|
||||||
<p>Zitat mit automatischen Anführungszeichen</p>
|
</tr>
|
||||||
<p class="quote_source">und Quellenangabe.</p>
|
<tr>
|
||||||
</blockquote>
|
<td>ohne</td>
|
||||||
<h2><dl>, <ol>, <ul></h2>
|
<td>Rahmen</td>
|
||||||
<dl>
|
<td></td>
|
||||||
<dt>Begriff</dt>
|
</tr>
|
||||||
<dd>Definition</dd>
|
<tr>
|
||||||
</dl>
|
<td></td>
|
||||||
<ol>
|
<td>jedoch</td>
|
||||||
<li>Eins</li>
|
<td>mit</td>
|
||||||
<li>Zwei</li>
|
</tr>
|
||||||
</ol>
|
<tr>
|
||||||
<ul class="horizontal">
|
<td></td>
|
||||||
<li>Obst</li>
|
<td></td>
|
||||||
<li>Gemüse</li>
|
<td>Streifen</td>
|
||||||
</ul>
|
</tr>
|
||||||
<h4>Varianten</h4>
|
</table>
|
||||||
<pre class="pre_code"><code>ul.list_basic.list_dash>li*2</code></pre>
|
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
|
||||||
<ul class="list_basic list_dash">
|
<table>
|
||||||
<li>Mehr Abstand und</li>
|
<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
|
||||||
<li>mit Unterstrichen.</li>
|
<thead>
|
||||||
</ul>
|
<tr>
|
||||||
<pre class="pre_code"><code>ul.list_link>(li>a)*2</code></pre>
|
<th scope="col">Bezeichnung</th>
|
||||||
<ul class="list_link">
|
<th scope="col">Menge</th>
|
||||||
<li><a href="">Mit</a></li>
|
<th scope="col">Wert</th>
|
||||||
<li><a href="">Verweisen</a></li>
|
</tr>
|
||||||
</ul>
|
</thead>
|
||||||
<h2><figure></h2>
|
<tbody>
|
||||||
<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
|
<tr>
|
||||||
<figure>
|
<td>Alpha</td>
|
||||||
<figcaption>Bezeichnung</figcaption>
|
<td>1</td>
|
||||||
Grafisches Element.
|
<td class="txt_right">8990</td>
|
||||||
</figure>
|
</tr>
|
||||||
<h2><main></h2>
|
<tr>
|
||||||
<main>Hauptbereich</main>
|
<td>Bravo</td>
|
||||||
<h2><div></h2>
|
<td>10</td>
|
||||||
<h4>Varianten</h4>
|
<td class="txt_right">1</td>
|
||||||
<pre class="pre_code"><code>div.div_info>p</code></pre>
|
</tr>
|
||||||
<div class="div_info">
|
<tr>
|
||||||
<p>Absatz in Informationsbox.</p>
|
<td>Charlie</td>
|
||||||
</div>
|
<td>1</td>
|
||||||
<pre class="pre_code"><code>div.box_space>div.box_cube>span</code></pre>
|
<td class="txt_right">1</td>
|
||||||
<div class="box_space">
|
</tr>
|
||||||
<div class="box_cube"><span>Text</span></div>
|
</tbody>
|
||||||
</div>
|
<tfoot>
|
||||||
<pre class="pre_code"><code>div.box_placeholder+hr+div.box_placeholder_bkg</code></pre>
|
<tr>
|
||||||
<div class="box_placeholder"></div>
|
<th colspan="2" class="txt_right" scope="row">Summe</th>
|
||||||
<hr>
|
<td class="txt_right" title=">9000">9001</td>
|
||||||
<div class="box_placeholder_bkg"></div>
|
</tr>
|
||||||
</article>
|
</tfoot>
|
||||||
<article>
|
</table>
|
||||||
<h1 id="tabularData">Tabellen</h1>
|
</article>
|
||||||
<p>Elemente:</p>
|
</section>
|
||||||
<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
|
</div>
|
||||||
<h2><table></h2>
|
|
||||||
<h4>Varianten</h4>
|
|
||||||
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
|
|
||||||
<table class="width_full table_fix">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th class="cell_pre" scope="col"></th>
|
|
||||||
<th scope="col">Kopfzeile</th>
|
|
||||||
<th scope="col">A</th>
|
|
||||||
<th scope="col">B</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td class="cell_pre">Vorspalte</td>
|
|
||||||
<td>Eine</td>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td class="cell_pre">1</td>
|
|
||||||
<td></td>
|
|
||||||
<td>erweiterte</td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td class="cell_pre">2</td>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
<td>Tabelle</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre>
|
|
||||||
<table class="width_full table_stripe table_fix table_free">
|
|
||||||
<tr>
|
|
||||||
<td>Tabelle</td>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>ohne</td>
|
|
||||||
<td>Rahmen</td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td></td>
|
|
||||||
<td>jedoch</td>
|
|
||||||
<td>mit</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
<td>Streifen</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
|
|
||||||
<table>
|
|
||||||
<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col">Bezeichnung</th>
|
|
||||||
<th scope="col">Menge</th>
|
|
||||||
<th scope="col">Wert</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Alpha</td>
|
|
||||||
<td>1</td>
|
|
||||||
<td class="txt_right">8990</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Bravo</td>
|
|
||||||
<td>10</td>
|
|
||||||
<td class="txt_right">1</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Charlie</td>
|
|
||||||
<td>1</td>
|
|
||||||
<td class="txt_right">1</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<th colspan="2" class="txt_right" scope="row">Summe</th>
|
|
||||||
<td class="txt_right" title=">9000">9001</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<h1 id="forms">Formulare</h1>
|
|
||||||
<p>Elemente:</p>
|
|
||||||
<pre>// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend</pre>
|
|
||||||
<h2><input></h2>
|
|
||||||
<div class="flex_column_wrap">
|
|
||||||
<div class="flex_column"><input value="Undefiniert"/></div>
|
|
||||||
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
|
|
||||||
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
|
|
||||||
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
|
||||||
<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
|
|
||||||
</div>
|
|
||||||
<h4>Varianten</h4>
|
|
||||||
<div id="capsCheck">
|
|
||||||
<form action="">
|
|
||||||
<input type="password" onkeypress="capLock(event)"/>
|
|
||||||
<div id="hint" style="visibility:hidden">Caps Lock is on.</div>
|
|
||||||
<input type="text"/>
|
|
||||||
<span id="error">Caps Lock is ON.</span>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<h2><select></h2>
|
|
||||||
<select name="F">
|
|
||||||
<option value="0">
|
|
||||||
Plain list</option>
|
|
||||||
<option value="1" selected="selected">
|
|
||||||
Fancy list</option>
|
|
||||||
<option value="2">
|
|
||||||
Table list</option>
|
|
||||||
</select>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
<script>
|
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js"></script>
|
||||||
function capLock(e) {
|
{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
|
||||||
console.log('capLock');
|
<!-- build:js js/main.concat.min.js -->
|
||||||
kc = e.keyCode
|
<script src="{{ pageBase }}js/variables.js"></script>
|
||||||
? e.keyCode
|
<script src="{{ pageBase }}js/functions.js"></script>
|
||||||
: e.which;
|
<script src="{{ pageBase }}js/global.js"></script>
|
||||||
sk = e.shiftKey
|
{{ log.asset(true) }}
|
||||||
? e.shiftKey
|
{{ log.log('Assets loaded.', assetsLoaded) }}
|
||||||
: (
|
<script>
|
||||||
(kc == 16)
|
// Page specific
|
||||||
? true
|
// ------------------------------------------------------------------------------
|
||||||
: false);
|
$(document).ready(function () {
|
||||||
|
// jq-sticky-anything
|
||||||
if (((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk)) {
|
$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
|
||||||
document
|
});
|
||||||
.getElementById('hint')
|
</script>
|
||||||
.style
|
|
||||||
.visibility = 'visible';
|
|
||||||
} else {
|
|
||||||
document
|
|
||||||
.getElementById('hint')
|
|
||||||
.style
|
|
||||||
.visibility = 'hidden';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function capsDetect() {
|
|
||||||
const body = document.getElementsByTagName('body')[0];
|
|
||||||
const capsWarning = document.getElementById('error');
|
|
||||||
let isShiftPressed = false;
|
|
||||||
let isCapsOn = false;
|
|
||||||
|
|
||||||
console.log(body);
|
|
||||||
body.addEventListener('keydown', function (e) {
|
|
||||||
var keyCode = e.keyCode
|
|
||||||
? e.keyCode
|
|
||||||
: e.which;
|
|
||||||
if (keyCode === 16) {
|
|
||||||
isShiftPressed = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
body.addEventListener('keyup', function (e) {
|
|
||||||
var keyCode = e.keyCode
|
|
||||||
? e.keyCode
|
|
||||||
: e.which;
|
|
||||||
if (keyCode === 16) {
|
|
||||||
isShiftPressed = false;
|
|
||||||
}
|
|
||||||
if (keyCode === 20) {
|
|
||||||
if (isCapsOn) {
|
|
||||||
isCapsOn = false;
|
|
||||||
capsWarning.style.display = 'none';
|
|
||||||
} else {
|
|
||||||
isCapsOn = true;
|
|
||||||
capsWarning.style.display = 'inline-block';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
body.addEventListener('keypress', function (e) {
|
|
||||||
var keyCode = e.keyCode
|
|
||||||
? e.keyCode
|
|
||||||
: e.which;
|
|
||||||
if (keyCode <= 40)
|
|
||||||
return;
|
|
||||||
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
|
|
||||||
isCapsOn = true;
|
|
||||||
capsWarning.style.display = 'inline-block';
|
|
||||||
} else {
|
|
||||||
capsWarning.style.display = 'none';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: Beide Varianten lauffähig machen
|
|
||||||
// capsDetect();
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
@ -9,91 +9,105 @@ tags:
|
||||||
{% extends "demo/_default.njk" %}
|
{% extends "demo/_default.njk" %}
|
||||||
{% import "hippie/macros/_placeholder.njk" as ph %}
|
{% import "hippie/macros/_placeholder.njk" as ph %}
|
||||||
|
|
||||||
{% block title %}{{ title }}
|
{% block title %}{{ title }}{% endblock %}
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
|
<!-- {{ page.fileSlug }}.page -->
|
||||||
<!-- {{ page.fileSlug }}.page -->
|
<div class="card_bkg">
|
||||||
<div class="card_bkg">
|
<div id="dither"></div>
|
||||||
<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">
|
||||||
<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">
|
{# <defs>
|
||||||
{# <defs>
|
<filter id="turb3">
|
||||||
<filter id="turb3">
|
<feColorMatrix type="saturate" values="1" />
|
||||||
<feColorMatrix type="saturate" values="1" />
|
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
|
||||||
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
|
</filter>
|
||||||
</filter>
|
<symbol id="triangle-5">
|
||||||
<symbol id="triangle-5">
|
<rect y="0" fill="#273F8B" width="1920" height="1200"/>
|
||||||
<rect y="0" fill="#273F8B" width="1920" height="1200"/>
|
</symbol>
|
||||||
</symbol>
|
</defs>
|
||||||
</defs>
|
<g>
|
||||||
<g>
|
<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
|
||||||
<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
|
</g> #}
|
||||||
</g> #}
|
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
|
||||||
<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-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-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-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-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-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-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-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
|
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
|
||||||
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
|
</svg>
|
||||||
</svg>
|
{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
|
||||||
{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
|
</div>
|
||||||
</div>
|
<div class="card_box">
|
||||||
<div class="card_box">
|
<div id="jsCardHover">
|
||||||
<div id="js_content">
|
<p>Titel<br/>und Beschreibung</p>
|
||||||
<p>Titel<br/>und Beschreibung</p>
|
<h1>{{ ph.name() }}</h1>
|
||||||
<h1>{{ ph.name() }}</h1>
|
<p>
|
||||||
<p>
|
{{ ph.email('card_address') }}<br/>
|
||||||
{{ ph.email('card_address') }}<br/>
|
{{ ph.link('decent', 'site.tld') }}
|
||||||
{{ ph.link('decent', 'site.tld') }}
|
·
|
||||||
·
|
{{ ph.address('decent') }}</p>
|
||||||
{{ ph.address('decent') }}</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
<script>
|
{{ super() }}
|
||||||
const flag = document.getElementById("flag");
|
{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
|
||||||
let colors = new Array();
|
<!-- build:js js/main.concat.min.js -->
|
||||||
let iId = undefined;
|
<script src="{{ pageBase }}js/variables.js"></script>
|
||||||
let position = 0;
|
<script src="{{ pageBase }}js/functions.js"></script>
|
||||||
|
<script src="{{ pageBase }}js/global.js"></script>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
// composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', '');
|
||||||
|
|
||||||
for (let i = 1; i <= flag.childElementCount; i++) {
|
var colors = new Array();
|
||||||
colors.push(document.getElementById("triangle-" + i).getAttribute("fill"));
|
var position = 0;
|
||||||
}
|
|
||||||
|
|
||||||
// console.log(colors);
|
for (var i = 1; i <= $("#flag").children().length; i++) {
|
||||||
|
colors.push($("#triangle-" + i).attr("fill"));
|
||||||
|
}
|
||||||
|
|
||||||
document.getElementById('js_content').addEventListener('mouseenter', () => {
|
$('#jsCardHover').on({
|
||||||
iId = setInterval(() => {
|
mouseenter: function () {
|
||||||
for (let i = 1; i <= colors.length; i++) {
|
// $('#flag').addClass('effect');
|
||||||
position++;
|
// $('#flag').css('opacity', 0);
|
||||||
|
$('#flag')
|
||||||
if (position >= colors.length) {
|
.stop()
|
||||||
position = 0;
|
.fadeOut(10000);
|
||||||
}
|
this.iid = setInterval(function () {
|
||||||
|
for (var i = 1; i <= colors.length; i++) {
|
||||||
document.getElementById("triangle-" + i).setAttribute("fill", colors[position]);
|
position++;
|
||||||
}
|
if (position >= colors.length) {
|
||||||
|
position = 0;
|
||||||
position++;
|
}
|
||||||
|
$("#triangle-" + i).attr("fill", colors[position]);
|
||||||
if (position >= colors.length) {
|
}
|
||||||
position = 0;
|
position++;
|
||||||
}
|
if (position >= colors.length) {
|
||||||
}, 600);
|
position = 0;
|
||||||
});
|
}
|
||||||
|
}, 600);
|
||||||
document.getElementById('js_content').addEventListener('mouseleave', () => {
|
},
|
||||||
iId && clearInterval(iId);
|
mouseleave: function () {
|
||||||
});
|
// $('#flag').removeClass('effect');
|
||||||
</script>
|
// $('#flag').css('opacity', 1);
|
||||||
|
$('#flag')
|
||||||
|
.stop()
|
||||||
|
.fadeIn(1000);
|
||||||
|
this.iid && clearInterval(this.iid);
|
||||||
|
},
|
||||||
|
click: function () {
|
||||||
|
$("#dither").toggle();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
@ -9,33 +9,32 @@ tags:
|
||||||
{% extends "demo/_default.njk" %}
|
{% extends "demo/_default.njk" %}
|
||||||
{% import "hippie/macros/_gate.njk" as gate %}
|
{% import "hippie/macros/_gate.njk" as gate %}
|
||||||
|
|
||||||
{% block title %}{{ title }}
|
{% block title %}{{ title }}{% endblock %}
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<!-- {{ page.fileSlug }}.page -->
|
<!-- {{ page.fileSlug }}.page -->
|
||||||
<div class="portal">
|
<div class="portal">
|
||||||
{{ gate.list(
|
{{ gate.list(
|
||||||
'Tor mit Symbol und Liste',
|
'Tor mit Symbol und Liste',
|
||||||
'../demo', {
|
'../demo', {
|
||||||
src: '/art/demo/flag_websafe_128x80.gif',
|
src: '/art/demo/flag_websafe_128x80.gif',
|
||||||
alt: 'Flag of Interaktionsweise'
|
alt: 'Flag of Interaktionsweise'
|
||||||
}, [
|
}, [
|
||||||
{
|
{
|
||||||
name: '1',
|
name: '1',
|
||||||
href: 'http://domain.tld',
|
href: 'http://domain.tld',
|
||||||
img: '../art/bullet.gif'
|
img: '../art/bullet.gif'
|
||||||
}, {
|
}, {
|
||||||
name: 'Zwei',
|
name: 'Zwei',
|
||||||
href: 'http://domain.tld',
|
href: 'http://domain.tld',
|
||||||
img: '../art/bullet.gif'
|
img: '../art/bullet.gif'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
) }}
|
) }}
|
||||||
{{ gate.simple('Tor', '../demo') }}
|
{{ gate.simple('Tor', '../demo') }}
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
@ -10,43 +10,42 @@ tags:
|
||||||
{% import "hippie/macros/_placeholder.njk" as ph %}
|
{% import "hippie/macros/_placeholder.njk" as ph %}
|
||||||
{% import "hippie/macros/_song.njk" as song %}
|
{% import "hippie/macros/_song.njk" as song %}
|
||||||
|
|
||||||
{% block title %}{{ title }}
|
{% block title %}{{ title }}{% endblock %}
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<!-- {{ page.fileSlug }}.page -->
|
<!-- {{ page.fileSlug }}.page -->
|
||||||
<div class="sec_main_center">
|
<div class="sec_main_center">
|
||||||
<header class="header_txt">
|
<header class="header_txt">
|
||||||
<h1>Titel</h1>
|
<h1>Titel</h1>
|
||||||
<p>Jahr</p>
|
<p>Jahr</p>
|
||||||
</header>
|
</header>
|
||||||
<nav role="doc-toc">
|
<nav role="doc-toc">
|
||||||
<h2>Inhaltsverzeichnis</h2>
|
<h2>Inhaltsverzeichnis</h2>
|
||||||
<ul>
|
<ul>
|
||||||
{%- for song in collections.song -%}
|
{%- for song in collections.song -%}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ song.page.url }}">{{ song.data.title }}</a>
|
<a href="{{ song.page.url }}">{{ song.data.title }}</a>
|
||||||
</li>
|
</li>
|
||||||
{%- endfor -%}
|
{%- endfor -%}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<h2>Vorwort</h2>
|
<h2>Vorwort</h2>
|
||||||
<p>Liederbuch für
|
<p>Liederbuch für
|
||||||
<em>Name</em>.</p>
|
<em>Name</em>.</p>
|
||||||
<p>Gibt es gebunden und hier
|
<p>Gibt es gebunden und hier
|
||||||
{{ ph.link() }}.<br/>
|
{{ ph.link() }}.<br/>
|
||||||
Bestellungen bitte an
|
Bestellungen bitte an
|
||||||
{{ ph.name() }}
|
{{ ph.name() }}
|
||||||
richten.</p>
|
richten.</p>
|
||||||
<hr class="hr_double hr_dotted">
|
<hr class="hr_double hr_dotted">
|
||||||
{%- for piece in collections.song -%}
|
{%- for piece in collections.song -%}
|
||||||
{{ song.simple(loop.index0, piece.data, piece.content) }}
|
{{ song.simple(loop.index0, piece.data, piece.content) }}
|
||||||
{%- endfor -%}
|
{%- endfor -%}
|
||||||
<hr/>
|
<hr/>
|
||||||
<address>{{ ph.name() }}</address>
|
<address>{{ ph.name() }}</address>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
@ -9,8 +9,7 @@ tags:
|
||||||
|
|
||||||
{% extends "demo/_app.njk" %}
|
{% extends "demo/_app.njk" %}
|
||||||
|
|
||||||
{% block title %}{{ title }}
|
{% block title %}{{ title }}{% endblock %}
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block links %}
|
{% block links %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
|
|
@ -23,18 +22,123 @@ tags:
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<div id="space"></div>
|
<div id="space"></div>
|
||||||
<button data-action="add">Add</button>
|
<button id="addFrame">Add</button>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{%- block script %}
|
{%- block script %}
|
||||||
<script src="{{ pageBase }}js/_ui.js"></script>
|
|
||||||
<script>
|
<script>
|
||||||
|
// Define the NewDiv class
|
||||||
|
class NewDiv {
|
||||||
|
constructor(x, y, width, height, backgroundColor) {
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
this.width = width;
|
||||||
|
this.height = height;
|
||||||
|
this.backgroundColor = backgroundColor;
|
||||||
|
this.element = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create the div element
|
||||||
|
createDiv() {
|
||||||
|
this.element = document.createElement('div');
|
||||||
|
this.element.style.position = 'absolute';
|
||||||
|
this.element.style.left = `${this.x}px`;
|
||||||
|
this.element.style.top = `${this.y}px`;
|
||||||
|
this.element.style.width = `${this.width}px`;
|
||||||
|
this.element.style.height = `${this.height}px`;
|
||||||
|
this.element.style.background = this.backgroundColor;
|
||||||
|
this.element.style.cursor = 'move';
|
||||||
|
|
||||||
|
// Add event listeners for dragging
|
||||||
|
let isDown = false;
|
||||||
|
let offset = [0, 0];
|
||||||
|
|
||||||
|
this.element.addEventListener('mousedown', (event) => {
|
||||||
|
if (event.button === 0) { // Left mouse button
|
||||||
|
isDown = true;
|
||||||
|
offset = [
|
||||||
|
this.element.offsetLeft - event.clientX,
|
||||||
|
this.element.offsetTop - event.clientY
|
||||||
|
];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('mouseup', () => {
|
||||||
|
isDown = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', (event) => {
|
||||||
|
if (isDown) {
|
||||||
|
const maxX = window.innerWidth - this.element.offsetWidth;
|
||||||
|
const maxY = window.innerHeight - this.element.offsetHeight;
|
||||||
|
let x = event.clientX + offset[0];
|
||||||
|
let y = event.clientY + offset[1];
|
||||||
|
|
||||||
|
// Boundary checks
|
||||||
|
if (x < 0) x = 0;
|
||||||
|
if (y < 0) y = 0;
|
||||||
|
if (x > maxX) x = maxX;
|
||||||
|
if (y > maxY) y = maxY;
|
||||||
|
|
||||||
|
this.element.style.left = `${x}px`;
|
||||||
|
this.element.style.top = `${y}px`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Save position and size
|
||||||
|
const saveData = () => {
|
||||||
|
const data = {
|
||||||
|
x: this.element.offsetLeft,
|
||||||
|
y: this.element.offsetTop,
|
||||||
|
width: this.element.offsetWidth,
|
||||||
|
height: this.element.offsetHeight
|
||||||
|
};
|
||||||
|
// Save data to local storage or a database
|
||||||
|
localStorage.setItem(`divData${this.element.id}`, JSON.stringify(data));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Load saved data
|
||||||
|
const loadData = () => {
|
||||||
|
const data = localStorage.getItem(`divData${this.element.id}`);
|
||||||
|
if (data) {
|
||||||
|
const parsedData = JSON.parse(data);
|
||||||
|
this.element.style.left = `${parsedData.x}px`;
|
||||||
|
this.element.style.top = `${parsedData.y}px`;
|
||||||
|
this.element.style.width = `${parsedData.width}px`;
|
||||||
|
this.element.style.height = `${parsedData.height}px`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Call the save function when the user stops dragging
|
||||||
|
document.addEventListener('mouseup', saveData);
|
||||||
|
|
||||||
|
// Load saved data on page load
|
||||||
|
loadData();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Append the div to the space
|
||||||
|
appendToFrame(space) {
|
||||||
|
this.element.id = `newDiv${space.children.length}`;
|
||||||
|
space.appendChild(this.element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to generate a random color
|
||||||
|
function getRandomColor() {
|
||||||
|
const letters = '0123456789ABCDEF';
|
||||||
|
let color = '#';
|
||||||
|
for (let i = 0; i < 6; i++) {
|
||||||
|
color += letters[Math.floor(Math.random() * 16)];
|
||||||
|
}
|
||||||
|
return color;
|
||||||
|
}
|
||||||
|
|
||||||
// Get the space element
|
// Get the space element
|
||||||
const space = document.getElementById('space');
|
const space = document.getElementById('space');
|
||||||
const add = document.querySelector('[data-action=add]');
|
const addFrameButton = document.getElementById('addFrame');
|
||||||
|
|
||||||
// Add event listener to the add space button
|
// Add event listener to the add space button
|
||||||
add.addEventListener('click', () => {
|
addFrameButton.addEventListener('click', () => {
|
||||||
const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
|
const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
|
||||||
newDiv.createDiv();
|
newDiv.createDiv();
|
||||||
newDiv.appendToFrame(space);
|
newDiv.appendToFrame(space);
|
||||||
|
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
---
|
|
||||||
title: Form
|
|
||||||
tags:
|
|
||||||
- demoExample
|
|
||||||
- ui
|
|
||||||
---
|
|
||||||
{% set bodyClass = "body_form" %}
|
|
||||||
|
|
||||||
{% extends "demo/_app.njk" %}
|
|
||||||
|
|
||||||
{% block title %}{{ title }}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block links %}
|
|
||||||
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block head %}
|
|
||||||
{{ super() }}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block body %}
|
|
||||||
<div id="head">
|
|
||||||
<h1>Formulare</h1>
|
|
||||||
<button data-action="add">Hinzufügen</button>
|
|
||||||
<button data-action="change">Ändern</button>
|
|
||||||
<hr>
|
|
||||||
</div>
|
|
||||||
<form id="form" action="">
|
|
||||||
<div id="grid">
|
|
||||||
<div>a</div>
|
|
||||||
<div>b</div>
|
|
||||||
<div>c</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{%- block script %}
|
|
||||||
{{ super() }}
|
|
||||||
<script>
|
|
||||||
const add = document.querySelector('[data-action=add]');
|
|
||||||
const change = document.querySelector('[data-action=change]');
|
|
||||||
const grid = document.getElementById('grid');
|
|
||||||
|
|
||||||
add.addEventListener('click', (e) => {
|
|
||||||
const item = document.createElement('div');
|
|
||||||
|
|
||||||
item.style.backgroundColor = '#f0f';
|
|
||||||
item.textContent = 'c'
|
|
||||||
|
|
||||||
grid.appendChild(item);
|
|
||||||
});
|
|
||||||
|
|
||||||
change.addEventListener('click', (e) => {
|
|
||||||
changeLayout(grid);
|
|
||||||
});
|
|
||||||
|
|
||||||
function changeLayout(grid) {
|
|
||||||
const currentTemplate = grid.style.gridTemplateColumns;
|
|
||||||
|
|
||||||
if (currentTemplate === 'repeat(4, 1fr)') {
|
|
||||||
grid.style.gridTemplateColumns = 'repeat(2, 1fr)';
|
|
||||||
} else {
|
|
||||||
grid.style.gridTemplateColumns = 'repeat(4, 1fr)';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
@ -5,147 +5,56 @@ tags:
|
||||||
- index
|
- index
|
||||||
- ui
|
- ui
|
||||||
---
|
---
|
||||||
|
|
||||||
{% set pageId = "init" %}
|
{% set pageId = "init" %}
|
||||||
{% set pageClass = "html_ui" %}
|
{% set pageClass = "html_ui" %}
|
||||||
|
|
||||||
{% extends "demo/_app.njk" %}
|
{% extends "demo/_app.njk" %}
|
||||||
{% import "hippie/macros/_placeholder.njk" as ph %}
|
{% import "hippie/macros/_placeholder.njk" as ph %}
|
||||||
{% block title %}
|
|
||||||
{{ title }}
|
{% block title %}{{ title }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block links %}
|
{% block links %}
|
||||||
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<div id="loader" class="step op_show">
|
<div id="loader" class="step op_show">
|
||||||
<div id="bar">
|
<div id="bar">
|
||||||
<div id="spinner">
|
<div id="spinner"><span>I</span></div>
|
||||||
<span>I</span>
|
<div id="wrap">
|
||||||
|
<div id="progress"></div>
|
||||||
|
</div>
|
||||||
|
<div id="status">0%</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="wrap">
|
|
||||||
<div id="progress"></div>
|
|
||||||
</div>
|
|
||||||
<div id="status">0%</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div id="intro" class="step op_hide">
|
|
||||||
<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
|
<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
|
||||||
<p>Hold
|
<p>Hold <kbd>space</kbd> to skip.</p>
|
||||||
<kbd>space</kbd>
|
</div>
|
||||||
to skip.</p>
|
<div id="intro" class="step op_hide">
|
||||||
|
{{ ph.brand('brand') }}
|
||||||
|
<p>Powered by</p>
|
||||||
|
<ul class="tech-stack">
|
||||||
|
<li>Vendor</li>
|
||||||
|
<li>IDE</li>
|
||||||
|
<li>Engine</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div id="agreement" class="step op_hide">
|
||||||
|
<h1>Agreement</h1>
|
||||||
|
<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
|
||||||
|
</div>
|
||||||
|
<div id="idle" class="step op_hide">
|
||||||
|
<div class="hello">Hello World!</div>
|
||||||
|
<p class="hello">Only left mouse click or any key</p>
|
||||||
</div>
|
</div>
|
||||||
{{ ph.brand('brand') }}
|
|
||||||
<p>Powered by</p>
|
|
||||||
<ul class="tech-stack">
|
|
||||||
<li>Vendor</li>
|
|
||||||
<li>IDE</li>
|
|
||||||
<li>Engine</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="agreement" class="step op_hide">
|
|
||||||
<h1>Agreement</h1>
|
|
||||||
<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
|
|
||||||
</div>
|
|
||||||
<div id="idle" class="step op_hide">
|
|
||||||
<div class="mouse_over"></div>
|
|
||||||
<div class="hello">Hello World!</div>
|
|
||||||
<p class="hello">Only left mouse click or any key</p>
|
|
||||||
</div>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{%- block script %}
|
{%- block script %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
<script src="{{ pageBase }}js/_intro.js"></script>
|
<script src="{{ pageBase }}js/ui.js"></script>
|
||||||
<script>
|
|
||||||
//let intro = new Intro('Intro');
|
|
||||||
//intro.init();
|
|
||||||
|
|
||||||
//const ui = new UI();
|
|
||||||
//ui
|
|
||||||
// .init()
|
|
||||||
// .then(() => ui.showIntro())
|
|
||||||
// .then(() => ui.showHint())
|
|
||||||
// .then(() => ui.showIdle())
|
|
||||||
// .catch((error) => console.error(error));
|
|
||||||
|
|
||||||
let introDelay = 6;
|
|
||||||
let hintDelay = 1;
|
|
||||||
let cycleDelay = 2;
|
|
||||||
let isAgree = false;
|
|
||||||
const steps = {
|
|
||||||
agreement: {
|
|
||||||
element: document.getElementById('agreement'),
|
|
||||||
msgIn: 'Agreement shown.',
|
|
||||||
msgOut: 'Agreement accepted.',
|
|
||||||
msgNo: 'No agreement today.'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const intro = document.getElementById('intro');
|
|
||||||
const agreement = steps.agreement.element;
|
|
||||||
const hint = {
|
|
||||||
element: document.getElementById('hint'),
|
|
||||||
delay: hintDelay * 1000,
|
|
||||||
show() {
|
|
||||||
if (typeof this.timeoutId === 'number') {
|
|
||||||
this.cancel();
|
|
||||||
}
|
|
||||||
this
|
|
||||||
.element
|
|
||||||
.classList
|
|
||||||
.remove('di_none');
|
|
||||||
this.timeoutId = setTimeout(() => {
|
|
||||||
this.dismiss();
|
|
||||||
}, this.delay);
|
|
||||||
},
|
|
||||||
dismiss() {
|
|
||||||
this
|
|
||||||
.element
|
|
||||||
.classList
|
|
||||||
.add('di_none');
|
|
||||||
this.timeoutId = undefined;
|
|
||||||
},
|
|
||||||
cancel() {
|
|
||||||
clearTimeout(this.timeoutId);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const loader = document.getElementById('loader');
|
|
||||||
const idle = {
|
|
||||||
element: document.getElementById('idle'),
|
|
||||||
delay: cycleDelay * 1000,
|
|
||||||
position: 0,
|
|
||||||
cycle() {
|
|
||||||
if (typeof this.intervalId === 'number') {
|
|
||||||
this.cancel();
|
|
||||||
}
|
|
||||||
this.intervalId = setInterval(() => {
|
|
||||||
this.position++;
|
|
||||||
if (this.position >= flagColors.length) {
|
|
||||||
this.position = 0;
|
|
||||||
}
|
|
||||||
this.element.style.backgroundColor = '#' + flagColors[this.position];
|
|
||||||
}, this.delay);
|
|
||||||
},
|
|
||||||
cancel() {
|
|
||||||
this.intervalId && clearInterval(this.intervalId);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
init()
|
|
||||||
.then(loadCore)
|
|
||||||
.then(showIntro)
|
|
||||||
.catch(er => console.error(er))
|
|
||||||
.then(showAgreement)
|
|
||||||
.then(showIdle)
|
|
||||||
.catch(er => console.error(er))
|
|
||||||
. finally(() => {
|
|
||||||
console.debug('Init end.', isAgree);
|
|
||||||
// location = 'demo/examples/ui/new.html';
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
@ -12,71 +12,80 @@ tags:
|
||||||
|
|
||||||
{% block title %}Index{% endblock %}
|
{% block title %}Index{% endblock %}
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<!-- {{ page.fileSlug }}.page -->
|
<!-- {{ page.fileSlug }}.page -->
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="hello">
|
<div class="hello">
|
||||||
<h2>This is
|
<h2>This is
|
||||||
{{ hippie.brand | upper }}</h2>
|
{{ 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
|
<p>To do this you need to create a file
|
||||||
<code>/index.njk</code>
|
<code>/index.njk</code>
|
||||||
inside the
|
inside the
|
||||||
<i>source/screens</i>
|
<i>source/screens</i>
|
||||||
folder. You can also create a
|
folder. You can also create a
|
||||||
<code>data.json</code>
|
<code>data.json</code>
|
||||||
file inside the
|
file inside the
|
||||||
<i>source/templates</i>
|
<i>source/templates</i>
|
||||||
folder as a data source for your nunjucks files.</p>
|
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
|
<p>For a very basic start you can make a copy of the demo page
|
||||||
<code>blank.njk</code>. You can find it at
|
<code>blank.njk</code>. You can find it at
|
||||||
<i>/source/screens/demo</i>.</p>
|
<i>/source/screens/demo</i>.</p>
|
||||||
<p>The
|
<p>The
|
||||||
<i>source/demo</i>
|
<i>source/demo</i>
|
||||||
folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
|
folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
|
||||||
<div class="pos_rel">
|
<div class="pos_rel">
|
||||||
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>c(")(")</pre>
|
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>c(")(")</pre>
|
||||||
<h3>Overview</h3>
|
<h3>Overview</h3>
|
||||||
</div>
|
</div>
|
||||||
<nav>
|
<nav>
|
||||||
<ul class="list_link">
|
<ul class="list_link">
|
||||||
{% for link in collections.demoIndex %}
|
{% for link in collections.demoIndex %}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<h3>Page</h3>
|
<h3>Page</h3>
|
||||||
<ul class="list_link">
|
<ul class="list_link">
|
||||||
{% for link in collections.demoPage | sort(false, false, 'data.title') %}
|
{% for link in collections.demoPage | sort(false, false, 'data.title') %}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
<h3>Example</h3>
|
<h3>Example</h3>
|
||||||
<ul class="list_link">
|
<ul class="list_link">
|
||||||
{% for link in collections.demoExample %}
|
{% for link in collections.demoExample %}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
<script>
|
{# <script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script> #}
|
||||||
assetsLoaded = true;
|
<!-- build:js js/main.concat.min.js -->
|
||||||
logPerf('BODY :: Assets loaded, running page specific script...', assetsLoaded);
|
<script src="{{ pageBase }}js/variables.js"></script>
|
||||||
// Page specific
|
<script src="{{ pageBase }}js/functions.js"></script>
|
||||||
// ------------------------------------------------------------------------------
|
<script src="{{ pageBase }}js/global.js"></script>
|
||||||
logPerf('Application ready... not.');
|
<script>
|
||||||
</script>
|
assetsLoaded = true;
|
||||||
|
logPerf('BODY :: Assets loaded, running page specific script...');
|
||||||
|
// Page specific
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
$(document).ready(function () {
|
||||||
|
logPerf('EVENT :: jQuery \'ready\' event fired.');
|
||||||
|
setup();
|
||||||
|
});
|
||||||
|
logPerf('Application ready... not.');
|
||||||
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
@ -10,38 +10,49 @@ tags:
|
||||||
|
|
||||||
{% block title %}Einführung{% endblock %}
|
{% block title %}Einführung{% endblock %}
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block main %}
|
{% block main %}
|
||||||
<!-- {{ page.fileSlug }}.page -->
|
<!-- {{ page.fileSlug }}.page -->
|
||||||
<section class="sec_main_center">
|
{% include "hippie/partials/_body_nav.njk" %}
|
||||||
<header>
|
|
||||||
<hgroup>
|
<section class="sec_main_center">
|
||||||
<h1>Introduction to HIPPIE</h1>
|
<header>
|
||||||
<p>Hippie interweaves preeminent personal interface elements.</p>
|
<hgroup>
|
||||||
</hgroup>
|
<h1>Introduction to HIPPIE</h1>
|
||||||
</header>
|
<p>Hippie interweaves preeminent personal interface elements.</p>
|
||||||
<article>
|
</hgroup>
|
||||||
<p>…</p>
|
</header>
|
||||||
<p>Contact: <a id="special" href=""></a>
|
<article>
|
||||||
</p>
|
<p>…</p>
|
||||||
<p>More: <a class="general" href=""></a>, <a class="general" href=""></a>
|
</article>
|
||||||
</p>
|
</section>
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
<script>
|
{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
|
||||||
assetsLoaded = true;
|
<!-- build:js js/main.concat.min.js -->
|
||||||
logPerf('Assets loaded.', assetsLoaded);
|
<script src="{{ pageBase }}js/variables.js"></script>
|
||||||
// Page specific
|
<script src="{{ pageBase }}js/functions.js"></script>
|
||||||
// ------------------------------------------------------------------------------
|
<script src="{{ pageBase }}js/global.js"></script>
|
||||||
composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
|
<script>
|
||||||
composeMail('.general', 'name', 'domain', 'tld', '', '')
|
assetsLoaded = true;
|
||||||
|
logPerf('Assets loaded.', assetsLoaded);
|
||||||
|
// Page specific
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
// Create instance of object made by contructor function
|
||||||
|
var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
|
||||||
|
var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
|
||||||
|
|
||||||
logPerf('Application ready... not.');
|
$(document).ready(function () {
|
||||||
</script>
|
logPerf('JQ document ready event fired.');
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).scroll(function () {
|
||||||
|
scrollUi.check();
|
||||||
|
});
|
||||||
|
logPerf('Application ready... not.');
|
||||||
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
@ -10,326 +10,331 @@ tags:
|
||||||
|
|
||||||
{% block title %}Gestaltungen{% endblock %}
|
{% block title %}Gestaltungen{% endblock %}
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block main %}
|
{% block main %}
|
||||||
<!-- {{ page.fileSlug }}.page -->
|
<!-- {{ page.fileSlug }}.page -->
|
||||||
<section class="sec_main_center">
|
<div class="temp_layer">
|
||||||
<header class="header_txt">
|
<!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
|
||||||
<h1>Sammlung formatierter Elemente</h1>
|
{% include "hippie/partials/_body_nav.njk" %}
|
||||||
<p>Die Elemente werden fortlaufend komplexer</p>
|
</div>
|
||||||
</header>
|
<div id="begin" class="">
|
||||||
<article>
|
<section class="sec_main_center">
|
||||||
<h2>Bereiche</h2>
|
<header class="header_txt">
|
||||||
<h3>section</h3>
|
<h1>Sammlung formatierter Elemente</h1>
|
||||||
<pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre>
|
<p>Die Elemente werden fortlaufend komplexer</p>
|
||||||
<section class="overflow">
|
</header>
|
||||||
<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>
|
<article>
|
||||||
<p>Vorname Name<br>Straße 1, 01234 Stadt</p>
|
<h2><h3></h2>
|
||||||
<p>+49 (0)123 1337 0000<br>
|
<h4>Beispiele</h4>
|
||||||
<a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a>
|
<pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
|
||||||
</p>
|
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
|
||||||
</section>
|
<p>Mit normalem Textabsatz</p>
|
||||||
<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre>
|
<h2><h4></h2>
|
||||||
<div class="space_left_fourth">
|
<h4>Beispiele</h4>
|
||||||
<hr/>
|
<pre class="pre_code"><code>a>h4</code></pre>
|
||||||
<p>Eingerückter Inhalt</p>
|
<a href="">
|
||||||
<hr/>
|
<h4>Überschrift als Block-Verweis</h4>
|
||||||
</div>
|
</a>
|
||||||
<pre class="pre_code"><code>div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)</code></pre>
|
<h2><section></h2>
|
||||||
<div class="overflow">
|
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
|
||||||
<nav class="float_space_left">
|
<section class="overflow">
|
||||||
<ul>
|
<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>
|
||||||
<li>
|
<p>Vorname Name<br>Straße 1, 01234 Stadt</p>
|
||||||
<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
|
<p>+49 (0)123 1337 0000<br>
|
||||||
</li>
|
<a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a>
|
||||||
<li>
|
</p>
|
||||||
<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
|
</section>
|
||||||
</li>
|
<pre class="pre_code"><code>div.space_left_fourth</code></pre>
|
||||||
<li>
|
<div class="space_left_fourth">
|
||||||
<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
|
<hr/>
|
||||||
</li>
|
<p>Eingerückter Inhalt</p>
|
||||||
<li>
|
<hr/>
|
||||||
<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
|
</div>
|
||||||
</li>
|
<pre class="pre_code"><code>nav>ul>(li>a.a_button{punkt $})*4nav>ul>(li>a.a_button_border{stufe $})*4</code></pre>
|
||||||
</ul>
|
<div class="overflow">
|
||||||
</nav>
|
<nav class="float_space_left">
|
||||||
<nav>
|
<ul>
|
||||||
<ul>
|
<li>
|
||||||
<li>
|
<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
|
||||||
<a href="" class="a_button_border">Stufe 1</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
|
||||||
<a href="" class="a_button_border">Stufe 2</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
|
||||||
<a href="" class="a_button_border">Stufe 3</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
|
||||||
<a href="" class="a_button_border">Stufe 4</a>
|
</li>
|
||||||
</li>
|
</ul>
|
||||||
</ul>
|
</nav>
|
||||||
</nav>
|
<nav>
|
||||||
</div>
|
<ul>
|
||||||
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4</code></pre>
|
<li>
|
||||||
<nav class="nav_horizontal">
|
<a href="" class="a_button_border">Stufe 1</a>
|
||||||
<ul>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button">Abschnitt 1</a>
|
<a href="" class="a_button_border">Stufe 2</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button">Abschnitt 2</a>
|
<a href="" class="a_button_border">Stufe 3</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button">Abschnitt 3</a>
|
<a href="" class="a_button_border">Stufe 4</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
</ul>
|
||||||
<a href="" class="a_button">Abschnitt 4</a>
|
</nav>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
|
||||||
</nav>
|
<nav class="nav_horizontal">
|
||||||
<pre class="pre_code"><code>div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
|
<ul>
|
||||||
<div class="overflow">
|
<li>
|
||||||
<nav class="nav_center_old">
|
<a href="" class="a_button">Abschnitt 1</a>
|
||||||
<ul>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button">Typ 1</a>
|
<a href="" class="a_button">Abschnitt 2</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button">Typ 2</a>
|
<a href="" class="a_button">Abschnitt 3</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button">Typ 3</a>
|
<a href="" class="a_button">Abschnitt 4</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
</ul>
|
||||||
<a href="" class="a_button">Typ 4</a>
|
</nav>
|
||||||
</li>
|
<div class="overflow">
|
||||||
</ul>
|
<nav class="nav_center_old">
|
||||||
</nav>
|
<ul>
|
||||||
</div>
|
<li>
|
||||||
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
|
<a href="" class="a_button">Typ 1</a>
|
||||||
<header class="header_page demo__header header_fancy">
|
</li>
|
||||||
<h1>Aufmacher</h1>
|
<li>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
|
<a href="" class="a_button">Typ 2</a>
|
||||||
<nav class="nav_separate_right">
|
</li>
|
||||||
<ul>
|
<li>
|
||||||
<li>
|
<a href="" class="a_button">Typ 3</a>
|
||||||
<a href="" class="a_button">Mensch</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="" class="a_button">Typ 4</a>
|
||||||
<a href="" class="a_button">Pflanze</a>
|
</li>
|
||||||
</li>
|
</ul>
|
||||||
</ul>
|
</nav>
|
||||||
</nav>
|
</div>
|
||||||
<nav class="nav_right">
|
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
|
||||||
<ul>
|
<header class="header_page demo__header header_fancy">
|
||||||
<li>
|
<h1>Aufmacher</h1>
|
||||||
<a href="" class="a_button">Blau</a>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
|
||||||
</li>
|
<nav class="nav_separate_right">
|
||||||
<li>
|
<ul>
|
||||||
<a href="" class="a_button">Gelb</a>
|
<li>
|
||||||
</li>
|
<a href="" class="a_button">Mensch</a>
|
||||||
</ul>
|
</li>
|
||||||
</nav>
|
<li>
|
||||||
</header>
|
<a href="" class="a_button">Pflanze</a>
|
||||||
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
|
</li>
|
||||||
<div class="box_space h_basic">
|
</ul>
|
||||||
<header id="js_demo_fix" class="header_page demo__header header_fix">
|
</nav>
|
||||||
<nav class="nav_right">
|
<nav class="nav_right">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button">Eins</a>
|
<a href="" class="a_button">Blau</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button">Zwei</a>
|
<a href="" class="a_button">Gelb</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<div class="pos_abs pin_bottom width_full">
|
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
|
||||||
<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
|
<div class="box_space h_basic">
|
||||||
<footer id="js_demo_stop" class="demo_footer">
|
<header id="js_demo_fix" class="header_page demo__header header_fix">
|
||||||
<nav class="nav_column nav_separate">
|
<nav class="nav_right">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button_text">Alpha</a>
|
<a href="" class="a_button">Eins</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button_text">Bravo</a>
|
<a href="" class="a_button">Zwei</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
</ul>
|
||||||
<a href="" class="a_button_text">Charlie</a>
|
</nav>
|
||||||
</li>
|
</header>
|
||||||
<li>
|
<div class="pos_abs pin_bottom width_full">
|
||||||
<a href="" class="a_button_text">Delta</a>
|
<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
|
||||||
</li>
|
<footer id="js_demo_stop" class="demo_footer">
|
||||||
</ul>
|
<nav class="nav_column nav_separate">
|
||||||
</nav>
|
<ul>
|
||||||
<p class="txt_center demo__credits">
|
<li>
|
||||||
<i class="i_bright">👨💻</i>
|
<a href="" class="a_button_text">Alpha</a>
|
||||||
mit
|
</li>
|
||||||
<i class="i_bright">❤</i>
|
<li>
|
||||||
von
|
<a href="" class="a_button_text">Bravo</a>
|
||||||
<a href="https://interaktionsweise.de">Interaktionsweise</a>
|
</li>
|
||||||
</p>
|
<li>
|
||||||
</footer>
|
<a href="" class="a_button_text">Charlie</a>
|
||||||
</div>
|
</li>
|
||||||
</div>
|
<li>
|
||||||
<div class="flex">
|
<a href="" class="a_button_text">Delta</a>
|
||||||
<div class="flex_child"></div>
|
</li>
|
||||||
<div class="flex_child"></div>
|
</ul>
|
||||||
<div class="flex_child"></div>
|
</nav>
|
||||||
<div class="flex_child"></div>
|
<p class="txt_center demo__credits">
|
||||||
<div class="flex_child"></div>
|
<i class="i_bright">👨💻</i>
|
||||||
</div>
|
mit
|
||||||
<div class="flex_column_wrap">
|
<i class="i_bright">❤</i>
|
||||||
<div class="flex_column"><input value="Undefiniert"/></div>
|
von
|
||||||
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
|
<a href="https://interaktionsweise.de">Interaktionsweise</a>
|
||||||
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
|
</p>
|
||||||
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
</footer>
|
||||||
<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex_child"></div>
|
||||||
|
<div class="flex_child"></div>
|
||||||
|
<div class="flex_child"></div>
|
||||||
|
<div class="flex_child"></div>
|
||||||
|
<div class="flex_child"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex_column_wrap">
|
||||||
|
<div class="flex_column"><input value="Undefiniert"/></div>
|
||||||
|
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
|
||||||
|
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
|
||||||
|
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
||||||
|
<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
|
||||||
|
</div>
|
||||||
|
<form method="get">
|
||||||
|
<p class="label">
|
||||||
|
Show me a
|
||||||
|
<select name="F">
|
||||||
|
<option value="0">
|
||||||
|
Plain list</option>
|
||||||
|
<option value="1" selected="selected">
|
||||||
|
Fancy list</option>
|
||||||
|
<option value="2">
|
||||||
|
Table list</option>
|
||||||
|
</select>
|
||||||
|
Sorted by
|
||||||
|
<select name="C">
|
||||||
|
<option value="N" selected="selected">
|
||||||
|
Name</option>
|
||||||
|
<option value="M">
|
||||||
|
Date Modified</option>
|
||||||
|
<option value="S">
|
||||||
|
Size</option>
|
||||||
|
<option value="D">
|
||||||
|
Description</option>
|
||||||
|
</select>
|
||||||
|
<select name="O">
|
||||||
|
<option value="A" selected="selected">
|
||||||
|
Ascending</option>
|
||||||
|
<option value="D">
|
||||||
|
Descending</option>
|
||||||
|
</select>
|
||||||
|
<select name="V">
|
||||||
|
<option value="0" selected="selected">
|
||||||
|
in Normal order</option>
|
||||||
|
<option value="1">
|
||||||
|
in Version order</option>
|
||||||
|
</select>
|
||||||
|
Matching
|
||||||
|
<input type="text" name="P" value="*"/>
|
||||||
|
<input type="submit" name="X" value="Go"/>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
|
||||||
<form method="get">
|
<h2>Gruppierung</h2>
|
||||||
<p class="label">
|
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
|
||||||
Show me a
|
<ul class="list_link">
|
||||||
<select name="F">
|
<li>
|
||||||
<option value="0">Plain list</option>
|
<a href=""><img src="{{ pageBase }}art/letter.gif" alt="">name@domain.tld</a>
|
||||||
<option value="1" selected="selected">Fancy list</option>
|
</li>
|
||||||
<option value="2">Table list</option>
|
<li>
|
||||||
</select>
|
<a href="">Work</a>
|
||||||
Sorted by
|
</li>
|
||||||
<select name="C">
|
<li>
|
||||||
<option value="N" selected="selected">Name</option>
|
<a href="">Projects</a>
|
||||||
<option value="M">Date Modified</option>
|
</li>
|
||||||
<option value="S">Size</option>
|
</ul>
|
||||||
<option value="D">Description</option>
|
|
||||||
</select>
|
|
||||||
<select name="O">
|
|
||||||
<option value="A" selected="selected">Ascending</option>
|
|
||||||
<option value="D">Descending</option>
|
|
||||||
</select>
|
|
||||||
<select name="V">
|
|
||||||
<option value="0" selected="selected">in Normal order</option>
|
|
||||||
<option value="1">in Version order</option>
|
|
||||||
</select>
|
|
||||||
Matching
|
|
||||||
<input type="text" name="P" value="*"/>
|
|
||||||
<input type="submit" name="X" value="Go"/>
|
|
||||||
</p>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<h2>Gruppierung</h2>
|
<h2>Tabellen</h2>
|
||||||
<h3>p</h3>
|
<pre class="pre_code"><code>table.table_link>thead>tr>th{&nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2</code></pre>
|
||||||
<pre class="pre_code"><code>p.txt_right+p.txt_center+p.txt_left</code></pre>
|
<table class="table_link js_pop">
|
||||||
<p class="txt_right">Rechts</p>
|
<thead>
|
||||||
<p class="txt_center">Mittig</p>
|
<tr>
|
||||||
<p class="txt_left">Links</p>
|
<th> </th>
|
||||||
<h3>h*</h3>
|
<th>Ab / Zy</th>
|
||||||
<pre class="pre_code"><code>h3.txt_color_dark+p.txt_tiny</code></pre>
|
<th>Neu / Alt</th>
|
||||||
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
|
</tr>
|
||||||
<p class="txt_tiny">Mit winzigem Textabsatz</p>
|
</thead>
|
||||||
<pre class="pre_code"><code>a>h4</code></pre>
|
<tbody>
|
||||||
<a href="">
|
<tr>
|
||||||
<h4>Überschrift als Block-Verweis</h4>
|
<td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
|
||||||
</a>
|
<td class="cell_link">
|
||||||
<h1>Überschrift 1</h1>
|
<a href="" target="_blank">Name</a>
|
||||||
<h1>Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.</h1>
|
<a href="" target="_blank">URL</a>
|
||||||
<h2>Überschrift 2</h2>
|
</td>
|
||||||
<h2>kann das ebenso.</h2>
|
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||||
|
</tr>
|
||||||
<h3>hr</h3>
|
<tr>
|
||||||
<pre class="pre_code"><code>hr.space_even_half</code></pre>
|
<td class="cell_text">
|
||||||
<hr class="space_even_half">
|
<div class="shorten">Beschreibung</div>
|
||||||
<pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
|
</td>
|
||||||
<hr class="hr_dotted space_even_fourth">
|
</tr>
|
||||||
<h3>ul</h3>
|
</tbody>
|
||||||
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
|
<tbody>
|
||||||
<ul class="list_link">
|
<tr>
|
||||||
<li>
|
<td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
|
||||||
<a href=""><img src="{{ pageBase }}art/demo/letter.gif" alt="">name@domain.tld</a>
|
<td class="cell_link">
|
||||||
</li>
|
<a href="" target="_blank">Name</a>
|
||||||
<li>
|
<a href="" target="_blank">URL</a>
|
||||||
<a href="">Work</a>
|
</td>
|
||||||
</li>
|
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||||
<li>
|
</tr>
|
||||||
<a href="">Projects</a>
|
<tr>
|
||||||
</li>
|
<td class="cell_text">
|
||||||
</ul>
|
<div class="shorten">Beschreibung</div>
|
||||||
|
</td>
|
||||||
<h2>Tabellen</h2>
|
</tr>
|
||||||
<pre class="pre_code"><code>table.table_link>thead>tr>th{&nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2</code></pre>
|
</tbody>
|
||||||
<table class="table_link js_pop">
|
</table>
|
||||||
<thead>
|
<h2>Eingebettet</h2>
|
||||||
<tr>
|
<div class="demo__flag">
|
||||||
<th> </th>
|
<svg version="1.1" id="vector" 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">
|
||||||
<th>Ab / Zy</th>
|
<desc>Background flag</desc>
|
||||||
<th>Neu / Alt</th>
|
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
|
||||||
</tr>
|
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
|
||||||
</thead>
|
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
|
||||||
<tbody>
|
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
|
||||||
<tr>
|
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
|
||||||
<td class="cell_icon" rowspan="2"><img src="/art/demo/bullet.gif" alt="" width="16" height="16"></td>
|
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
|
||||||
<td class="cell_link">
|
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
|
||||||
<a href="" target="_blank">Name</a>
|
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
|
||||||
<a href="" target="_blank">URL</a>
|
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
|
||||||
</td>
|
</svg>
|
||||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
</div>
|
||||||
</tr>
|
</article>
|
||||||
<tr>
|
</section>
|
||||||
<td class="cell_text">
|
</div>
|
||||||
<div class="shorten">Beschreibung</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td class="cell_icon" rowspan="2"><img src="/art/demo/bullet.gif" alt="" width="16" height="16"></td>
|
|
||||||
<td class="cell_link">
|
|
||||||
<a href="" target="_blank">Name</a>
|
|
||||||
<a href="" target="_blank">URL</a>
|
|
||||||
</td>
|
|
||||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td class="cell_text">
|
|
||||||
<div class="shorten">Beschreibung</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<h2>Eingebettet</h2>
|
|
||||||
<div class="demo__flag">
|
|
||||||
<svg version="1.1" id="vector" 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">
|
|
||||||
<desc>Background flag</desc>
|
|
||||||
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
|
|
||||||
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
|
|
||||||
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
|
|
||||||
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
|
|
||||||
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
|
|
||||||
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
|
|
||||||
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
|
|
||||||
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
|
|
||||||
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||||
{{ log.asset(true) }}
|
{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
|
||||||
{{ log.log('Assets loaded.', assetsLoaded) }}
|
<!-- build:js js/main.concat.min.js -->
|
||||||
<script>
|
<script src="{{ pageBase }}js/variables.js"></script>
|
||||||
// Page specific
|
<script src="{{ pageBase }}js/functions.js"></script>
|
||||||
// ------------------------------------------------------------------------------
|
<script src="{{ pageBase }}js/global.js"></script>
|
||||||
$(document).ready(function () {
|
{{ log.asset(true) }}
|
||||||
// jq-sticky-anything
|
{{ log.log('Assets loaded.', assetsLoaded) }}
|
||||||
$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
|
<script>
|
||||||
});
|
// Page specific
|
||||||
</script>
|
// ------------------------------------------------------------------------------
|
||||||
|
$(document).ready(function () {
|
||||||
|
// jq-sticky-anything
|
||||||
|
$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
@ -1 +1 @@
|
||||||
Subproject commit a1a4bd408bedaa11f5e1aacca630d0b1bbbe7aa2
|
Subproject commit 9f3797f6516a63101fb8ebd23ab8229053ec57b6
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
.body_drag {
|
.body_drag {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
// padding: $space_basic;
|
// padding: $space_basic;
|
||||||
|
|
||||||
button {
|
|
||||||
@extend .io_button;
|
|
||||||
position: fixed;
|
|
||||||
top: 8px;
|
|
||||||
right: 8px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#space {
|
#space {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: $color-dark;
|
background-color: $color-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
#addFrame {
|
||||||
|
@extend .io_button;
|
||||||
|
position: fixed;
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
.body_form {
|
|
||||||
margin: 0;
|
|
||||||
background-color: $color-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
#head {
|
|
||||||
// display: flex;
|
|
||||||
|
|
||||||
button {
|
|
||||||
@extend .io_button;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#grid {
|
|
||||||
display: grid;
|
|
||||||
gap: 8px;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
grid-auto-rows: minmax(64px, auto);
|
|
||||||
margin-inline: $space_small;
|
|
||||||
}
|
|
||||||
|
|
||||||
#grid>div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: aquamarine;
|
|
||||||
}
|
|
||||||
|
|
||||||
#grid>div:first-child {
|
|
||||||
grid-column: 1 / 3;
|
|
||||||
background-color: violet;
|
|
||||||
}
|
|
||||||
|
|
@ -44,6 +44,7 @@ $z-indexes: (
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bar {
|
#bar {
|
||||||
|
|
@ -112,6 +113,7 @@ $z-indexes: (
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
p,
|
p,
|
||||||
|
|
@ -152,27 +154,19 @@ $z-indexes: (
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
background-color: $color_back_basic;
|
||||||
}
|
}
|
||||||
|
|
||||||
#agreement {
|
#agreement {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: $bravo_color;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
color: $color_brightest;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#idle {
|
#idle {
|
||||||
background-color: $color_back_basic;
|
pointer-events: none;
|
||||||
transition: background-color 4s;
|
|
||||||
|
|
||||||
&:hover>.mouse_over {
|
|
||||||
background-color: transparent !important;
|
|
||||||
transition: background-color $duration_basic $timing_basic 0s !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast {
|
.toast {
|
||||||
|
|
@ -194,11 +188,10 @@ $z-indexes: (
|
||||||
.hello {
|
.hello {
|
||||||
flex: 0 1 auto;
|
flex: 0 1 auto;
|
||||||
padding: 1em 2em;
|
padding: 1em 2em;
|
||||||
background-color: rgba($color_bright, .5);
|
// background-color: rgba(black, .25);
|
||||||
font-family: $family_text_mono;
|
background-color: $color_darker;
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "modules/ui/new_module";
|
@import "modules/ui/new_module";
|
||||||
@import "modules/ui/settings_module";
|
@import "modules/ui/settings_module";
|
||||||
@import "modules/ui/drag_module";
|
@import "modules/ui/drag_module";
|
||||||
@import "modules/ui/form_module";
|
|
||||||
|
|
@ -1,30 +1,29 @@
|
||||||
<!-- demo.app.template -->
|
<!-- demo.app.template -->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
<title>{{ hippie.titlePrefix }}
|
<title>{{ hippie.titlePrefix }}
|
||||||
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
|
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
|
||||||
|
|
||||||
{% block meta %}
|
{% block meta %}
|
||||||
{% include "demo/partials/_meta.njk" %}
|
{% include "demo/partials/_meta.njk" %}
|
||||||
<base href="/">
|
<base href="/">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block links %}{% endblock %}
|
{% block links %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="{{ bodyClass }}">
|
<body class="{{ bodyClass }}">
|
||||||
{% block body %}{% endblock %}
|
{% block body %}{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
{% endblock %}
|
||||||
<script src="{{ pageBase }}js/variables.js"></script>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -2,18 +2,18 @@
|
||||||
{% extends "hippie/_default.njk" %}
|
{% extends "hippie/_default.njk" %}
|
||||||
|
|
||||||
{% block meta %}
|
{% block meta %}
|
||||||
{% include "demo/partials/_meta.njk" %}
|
{% include "demo/partials/_meta.njk" %}
|
||||||
<base href="/">
|
<base href="/">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block links %}
|
{% block links %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
|
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
|
||||||
{# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
|
{# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
|
||||||
{# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/> #}
|
{# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/> #}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
@ -2,20 +2,25 @@
|
||||||
{% extends "hippie/_main.njk" %}
|
{% extends "hippie/_main.njk" %}
|
||||||
|
|
||||||
{% block meta %}
|
{% block meta %}
|
||||||
{% include "demo/partials/_meta.njk" %}
|
{% include "demo/partials/_meta.njk" %}
|
||||||
<base href="/">
|
<base href="/">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block links %}
|
{% block links %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
{% if hippie.legacyMode %}
|
{% if hippie.legacyMode %}
|
||||||
<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
|
<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
|
||||||
<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]-->
|
<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]-->
|
||||||
<!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
|
<!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
|
||||||
<!--Only use one of the above!-->
|
<!--Only use one of the above!-->
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<!-- <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="{{ pageBase }}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="{{ pageBase }}css/print.css"/> -->
|
<!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
{{ super() }}
|
||||||
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||||
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -2,11 +2,11 @@
|
||||||
{% extends "hippie/_maintenance.njk" %}
|
{% extends "hippie/_maintenance.njk" %}
|
||||||
|
|
||||||
{% block meta %}
|
{% block meta %}
|
||||||
{% include "demo/partials/_meta.njk" %}
|
{% include "demo/partials/_meta.njk" %}
|
||||||
<base href="/">
|
<base href="/">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block links %}
|
{% block links %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
|
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
@ -1,7 +1,5 @@
|
||||||
<!-- default.template -->
|
<!-- default.template -->
|
||||||
{# {% if hippie.debugMode %} #}
|
{% import "hippie/macros/_log.njk" as log %}
|
||||||
{% import "hippie/macros/_log.njk" as log %}
|
|
||||||
{# {% endif %} #}
|
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||||
|
|
|
||||||
|
|
@ -3,67 +3,46 @@
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
<title>{{ hippie.titlePrefix }}
|
<title>{{ hippie.titlePrefix }}
|
||||||
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
|
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
|
||||||
|
|
||||||
{% block meta %}
|
{% block meta %}
|
||||||
{% include "hippie/partials/_head_meta.njk" %}
|
{% include "hippie/partials/_head_meta.njk" %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% include "hippie/partials/_head_script.njk" %}
|
{% include "hippie/partials/_head_script.njk" %}
|
||||||
{{ log.debug(hippie.debugMode, true) }}
|
{{ log.debug(hippie.debugMode, true) }}
|
||||||
{{ log.start() }}
|
{{ log.start() }}
|
||||||
|
|
||||||
{% block links %}
|
{% block links %}
|
||||||
{% include "hippie/partials/_head_links.njk" %}
|
{% include "hippie/partials/_head_links.njk" %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{{ log.log('HEAD end :: Links parsed, starting to load.') }}
|
{{ log.log('HEAD end :: Links parsed, starting to load.') }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="{{ bodyClass }}">
|
<body class="{{ bodyClass }}">
|
||||||
{{ log.log('BODY start') }}
|
{{ log.log('BODY start') }}
|
||||||
{% include "hippie/partials/_body_hover.njk" %}
|
{% include "hippie/partials/_body_hover.njk" %}
|
||||||
{% include "hippie/partials/_body_nav.njk" %}
|
<div id="root">
|
||||||
<div id="root">
|
{% include "hippie/partials/_header.njk" %}
|
||||||
{% include "hippie/partials/_header.njk" %}
|
|
||||||
|
|
||||||
<main class="main_site">
|
<main class="main_site">
|
||||||
{% block main %}{% endblock %}
|
{% block main %}{% endblock %}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{% include "hippie/partials/_footer.njk" %}
|
{% include "hippie/partials/_footer.njk" %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
{{ log.log('BODY :: Loading script assets...') }}
|
{{ log.log('BODY :: Loading script assets...') }}
|
||||||
{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
|
{% endblock %}
|
||||||
<!-- build:js js/main.concat.min.js -->
|
|
||||||
{# // TODO: Remove dependecy to jQuery; at least maek it optional #}
|
|
||||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
|
||||||
<script src="{{ pageBase }}js/variables.js"></script>
|
|
||||||
<script src="{{ pageBase }}js/functions.js"></script>
|
|
||||||
<script src="{{ pageBase }}js/global.js"></script>
|
|
||||||
<script>
|
|
||||||
// Create instances of objects made by contructor functions
|
|
||||||
let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
|
|
||||||
let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
|
|
||||||
|
|
||||||
document.addEventListener('scroll', () => {
|
{{ log.log('BODY end :: Page script might still be loading.') }}
|
||||||
scrollUi.check();
|
</body>
|
||||||
});
|
|
||||||
|
|
||||||
$(document).ready(function () {
|
|
||||||
logPerf('EVENT :: jQuery \'ready\' event fired.');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{{ log.log('BODY end :: Page script might still be loading.') }}
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,27 +1,27 @@
|
||||||
<!-- maintenance.template -->
|
<!-- maintenance.template -->
|
||||||
{% import "hippie/macros/_footer.njk" as footer %}
|
{% import "hippie/macros/footer-status.njk" as status %}
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
<title>{{ hippie.titlePrefix }}
|
<title>{{ hippie.titlePrefix }}
|
||||||
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
|
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
|
||||||
|
|
||||||
{% block meta %}
|
{% block meta %}
|
||||||
{% include "hippie/partials/_head_meta.njk" %}
|
{% include "hippie/partials/_head_meta.njk" %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% 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=">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="{{ bodyClass }}">
|
<body class="{{ bodyClass }}">
|
||||||
{% block body %}
|
{% block body %}
|
||||||
{{ footer.status() }}
|
{{ status.footer() }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
{% macro status(email = 'admin@domain.tld', app = 'Application', version = 'ver.s.ion', system = 'System Name', domain = 'domain.tld:port') %}
|
|
||||||
<footer class="pos_abs pin_bottom width_full">
|
|
||||||
<address class="txt_center">Kontakt:
|
|
||||||
<a class="lineLink" href="mailto:{{ email }}">{{ email }}</a>
|
|
||||||
* Server:
|
|
||||||
{{ app }}/{{ version }}
|
|
||||||
({{ system }}) * Domain:
|
|
||||||
{{ domain }}
|
|
||||||
</address>
|
|
||||||
</footer>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro pinned(pos = 'bottom') %}
|
|
||||||
<footer class="pos_abs pin_{{ pos }} pin_right pin_left">
|
|
||||||
<p class="txt_center">Unten fixiert</p>
|
|
||||||
</footer>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro main() %}
|
|
||||||
<footer class="footer_site">
|
|
||||||
<div id="end"></div>
|
|
||||||
</footer>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
@ -1,30 +1,31 @@
|
||||||
|
<!-- gates.macro -->
|
||||||
{% macro list(name, url, image, links) %}
|
{% macro list(name, url, image, links) %}
|
||||||
<article class="portal__entry">
|
<article class="portal__entry">
|
||||||
<section>
|
<section>
|
||||||
<h2>
|
<h2>
|
||||||
<a class="a_discreet" href="{{ url }}">{{ name }}</a>
|
<a class="a_discreet" href="{{ url }}">{{ name }}</a>
|
||||||
</h2>
|
</h2>
|
||||||
<a class="portal__link portal__link--{{ name | slug }}" href="{{ url }}">
|
<a class="portal__link portal__link--{{ name | slug }}" href="{{ url }}">
|
||||||
<img src="{{ image.src }}" alt="{{ image.alt }}"/>
|
<img src="{{ image.src }}" alt="{{ image.alt }}"/>
|
||||||
</a>
|
</a>
|
||||||
{% if links %}
|
{% if links %}
|
||||||
<ul class="portal__list">
|
<ul class="portal__list">
|
||||||
{% for link in links %}
|
{% for link in links %}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
|
<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
{% macro simple(name, url) %}
|
{% macro simple(name, url) %}
|
||||||
<article class="portal__entry">
|
<article class="portal__entry">
|
||||||
<section>
|
<section>
|
||||||
<h2>
|
<h2>
|
||||||
<a class="a_discreet" href="{{ url }}">{{ name }}</a>
|
<a class="a_discreet" href="{{ url }}">{{ name }}</a>
|
||||||
</h2>
|
</h2>
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
{% macro main() %}
|
|
||||||
<header class="header_site">
|
|
||||||
<div id="begin"></div>
|
|
||||||
</header>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
@ -1,24 +1,24 @@
|
||||||
{% macro start() %}
|
{% macro start() %}
|
||||||
<script>
|
<script>
|
||||||
logAdd('EVENT :: Document \'%s\' event fired.', 'DOMContentLoaded');
|
logAdd('EVENT :: Document \'%s\' event fired.', 'DOMContentLoaded');
|
||||||
logPerf('HEAD start :: Debugging performance...', debugOn);
|
logPerf('HEAD start :: Debugging performance...', debugOn);
|
||||||
</script>
|
</script>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
{% macro log(msg, arg = '') %}
|
{% macro log(msg, arg = '') %}
|
||||||
<script>
|
<script>
|
||||||
logPerf('{{ msg }}', {{ arg }});
|
logPerf('{{ msg }}', {{ arg }});
|
||||||
</script>
|
</script>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
{% macro debug(state = false, display = false, assets = false) %}
|
{% macro debug(state = false, display = false, assets = false) %}
|
||||||
{# {{ set hippie.debugMode = state }} #}
|
{# {{ set hippie.debugMode = state }} #}
|
||||||
<script>
|
<script>
|
||||||
debugOn = {{ state }};
|
debugOn = {{ state }};
|
||||||
debugOnScreen = {{ display }};
|
debugOnScreen = {{ display }};
|
||||||
assetsLoaded = {{ assets }};
|
assetsLoaded = {{ assets }};
|
||||||
</script>
|
</script>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
{% macro asset(state = false) %}
|
{% macro asset(state = false) %}
|
||||||
<script>
|
<script>
|
||||||
assetsLoaded = {{ state }};
|
assetsLoaded = {{ state }};
|
||||||
</script>
|
</script>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
{% macro main(data, active = '') %}
|
{% macro main(data, active = '') %}
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
{% for link in data %}
|
{% for link in data %}
|
||||||
<li{%if active == link.text %} class="active_txt" {% endif %}>
|
<li{%if active == link.text %} class="active_txt" {% endif %}>
|
||||||
{%if active == link.text %}{{ link.text }}{%else%}
|
{%if active == link.text %}{{ link.text }}{%else%}
|
||||||
<a href="{{ link.href }}">{{ link.text }}</a>
|
<a href="{{ link.href }}">{{ link.text }}</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|
@ -1,47 +1,43 @@
|
||||||
{% macro email(class = '', text = 'name@domain.tld') %}
|
{% macro email(class='', text='name@domain.tld') %}
|
||||||
<a class="{{ class }}" href="">{{ text }}</a>
|
<a class="{{ class }}" href="">{{ text }}</a>
|
||||||
{# {{ 'name@domain.tld' | urlize | safe }} #}
|
{# {{ 'name@domain.tld' | urlize | safe }} #}
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
{% macro link(class='', text='domain.tld', href='http://domain.internal') %}
|
||||||
{% macro link(class = '', text = 'domain.tld', href = 'http://domain.internal') %}
|
<a class="{{ class }}" href="{{ href }}">{{ text }}</a>
|
||||||
<a class="{{ class }}" href="{{ href }}">{{ text }}</a>
|
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
{% macro name(class='', text='Vorname Nachname') %}
|
||||||
{% macro name(class = '', text = 'Vorname Nachname') %}
|
<span class="{{ class }}">{{ text }}</span>
|
||||||
<span class="{{ class }}">{{ text }}</span>
|
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
{% macro address(class='', text='Straße Nr., PLZ Ort') %}
|
||||||
{% macro address(class = '', text = 'Straße Nr., PLZ Ort') %}
|
<span class="{{ class }}">{{ text }}</span>
|
||||||
<span class="{{ class }}">{{ text }}</span>
|
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
{% macro brand(class='', name='Marke') %}
|
||||||
{% macro brand(class = '', name = 'Marke') %}
|
<div class="{{ class }}">
|
||||||
<div class="{{ class }}">
|
{# <img src="" alt="Brand logo"> #}
|
||||||
{# <img src="" alt="Brand logo"> #}
|
<svg
|
||||||
<svg
|
|
||||||
width="128"
|
width="128"
|
||||||
height="128"
|
height="128"
|
||||||
viewBox="0 0 128 128"
|
viewBox="0 0 128 128"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:svg="http://www.w3.org/2000/svg">
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
<g>
|
<g>
|
||||||
<rect
|
<rect
|
||||||
style="display:inline;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-dasharray:none"
|
style="display:inline;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-dasharray:none"
|
||||||
width="126"
|
width="126"
|
||||||
height="126"
|
height="126"
|
||||||
x="1"
|
x="1"
|
||||||
y="1"/>
|
y="1" />
|
||||||
<circle
|
<circle
|
||||||
style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
|
style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
|
||||||
cx="64"
|
cx="64"
|
||||||
cy="64"
|
cy="64"
|
||||||
r="63"/>
|
r="63" />
|
||||||
<path
|
<path
|
||||||
style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
|
style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
|
||||||
d="m 9.3926879,32.472455 109.2146221,-2e-6 -54.607309,94.582637 z"/>
|
d="m 9.3926879,32.472455 109.2146221,-2e-6 -54.607309,94.582637 z" />
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<h1>{{ name }}</h1>
|
<h1>{{ name }}</h1>
|
||||||
</div>
|
</div>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
{% macro simple(index, data, content) %}
|
{% macro simple(index, data, content) %}
|
||||||
<article class="songbook_song">
|
<article class="songbook_song">
|
||||||
<header>
|
<header>
|
||||||
<h2>{{ data.title }}</h2>
|
<h2>{{ data.title }}</h2>
|
||||||
<h6>{{ data.releaseDate }}</h6>
|
<h6>{{ data.releaseDate }}</h6>
|
||||||
<p>{{ data.description }}</p>
|
<p>{{ data.description }}</p>
|
||||||
</header>
|
</header>
|
||||||
{# <pre class="pre_code"><code>{{ content }}</code></pre> #}
|
{# <pre class="pre_code"><code>{{ content }}</code></pre> #}
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
<footer>{{ index }}</footer>
|
<footer>{{ index }}</footer>
|
||||||
</article>
|
</article>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|
@ -1,14 +1,15 @@
|
||||||
{% macro coord(id, text = 'X: #, Y: ##') %}
|
<!-- states.macro -->
|
||||||
<span id="{{ id }}">{{ text }}</span>
|
{% macro coord(id, text='X: #, Y: ##') %}
|
||||||
|
<span id="{{ id }}">{{ text }}</span>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
{% macro time(id, text = '00:00:00', postfix = ' Uhr') %}
|
{% macro time(id, text='00:00:00', postfix=' Uhr') %}
|
||||||
<span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
|
<span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
{% macro date() %}
|
{% macro date() %}
|
||||||
<span id="{{ id }}">
|
<span id="{{ id }}">
|
||||||
<span id="day">Wochentag</span>,
|
<span id="day">Wochentag</span>,
|
||||||
<span id="dayNumb">##</span>.
|
<span id="dayNumb">##</span>.
|
||||||
<span id="month">Monat</span>
|
<span id="month">Monat</span>
|
||||||
<span id="year">####</span>
|
<span id="year">####</span>
|
||||||
</span>
|
</span>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
17
source/templates/hippie/macros/footer-status.njk
Normal file
17
source/templates/hippie/macros/footer-status.njk
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
{% macro footer(email = 'admin@domain.tld', app = 'Application', version = 'ver.s.ion', system = 'System Name', domain = 'domain.tld:port', type) %}
|
||||||
|
|
||||||
|
{% if not type or type == 'status' %}
|
||||||
|
<footer class="pos_abs pin_bottom width_full">
|
||||||
|
<address class="txt_center">Kontakt:
|
||||||
|
<a class="lineLink" href="mailto:{{ email }}">{{ email }}</a>
|
||||||
|
* Server:
|
||||||
|
{{ app }}/{{ version }}
|
||||||
|
({{ system }}) * Domain:
|
||||||
|
{{ domain }}</address>
|
||||||
|
</footer>
|
||||||
|
{% else %}
|
||||||
|
<footer class="pos_abs pin_bottom width_full">
|
||||||
|
<p>Platzhalter unten fixiert</p>
|
||||||
|
</footer>
|
||||||
|
{% endif %}
|
||||||
|
{% endmacro %}
|
||||||
|
|
@ -1,2 +1,2 @@
|
||||||
<!-- hover.partial -->
|
<!-- body_hover.partial -->
|
||||||
<div id="js_mob"></div>
|
<div id="js_mob"></div>
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<!-- nav.partial -->
|
<!-- body_nav.partial -->
|
||||||
<div class="pos_rel">
|
<div class="pos_rel">
|
||||||
<nav class="nav_page_meta">
|
<nav class="nav_page_meta">
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
<!-- footer.partial -->
|
<!-- footer.partial -->
|
||||||
{% import "hippie/macros/_footer.njk" as footer %}
|
<footer class="footer_site">
|
||||||
{{ footer.main() }}
|
<div id="end"></div>
|
||||||
|
</footer>
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<!-- links.partial -->
|
<!-- head.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="{{ pageBase }}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=">
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<!-- meta.partial -->
|
<!-- head.meta.partial -->
|
||||||
<meta name="robots" content="noindex">
|
<meta name="robots" content="noindex">
|
||||||
<meta name="generator" content="{{ eleventy.generator }}">
|
<meta name="generator" content="{{ eleventy.generator }}">
|
||||||
<meta name="author" content="">
|
<meta name="author" content="">
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<!-- script.partial -->
|
<!-- head.script.partial -->
|
||||||
<script>
|
<script>
|
||||||
// Entry script at page init
|
// Entry script at page init
|
||||||
let debugOn = {{ hippie.debugMode }};
|
let debugOn = {{ hippie.debugMode }};
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,2 @@
|
||||||
<!-- header.partial -->
|
<!-- header.partial -->
|
||||||
{% import "hippie/macros/_header.njk" as header %}
|
<header class="header_site"></header>
|
||||||
{{ header.main() }}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue