From ad150fadf223db5d2f57e71ad4b6b071d5a614eb Mon Sep 17 00:00:00 2001 From: sthag Date: Wed, 14 May 2025 19:00:13 +0200 Subject: [PATCH 01/17] feat: Add form ui example Test css grid system for form fields. --- source/screens/demo/examples/ui/form.njk | 45 +++++++++++++++++++++++ source/style/modules/ui/_form_module.scss | 33 +++++++++++++++++ source/style/ui.scss | 3 +- 3 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 source/screens/demo/examples/ui/form.njk create mode 100644 source/style/modules/ui/_form_module.scss diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk new file mode 100644 index 0000000..60162ce --- /dev/null +++ b/source/screens/demo/examples/ui/form.njk @@ -0,0 +1,45 @@ +--- +title: Form +tags: + - demoExample + - ui +--- +{% extends "demo/_app.njk" %} + +{% block title %}{{ title }} +{% endblock %} + +{% block links %} + +{% endblock %} + +{% block head %} + {{ super() }} +{% endblock %} + +{% block body %} + +
+
a
+
b
+
+{% endblock %} + +{%- block script %} + {{ super() }} + +{% endblock %} \ No newline at end of file diff --git a/source/style/modules/ui/_form_module.scss b/source/style/modules/ui/_form_module.scss new file mode 100644 index 0000000..265663c --- /dev/null +++ b/source/style/modules/ui/_form_module.scss @@ -0,0 +1,33 @@ +#form body { + margin: 0; + background-color: #808080; +} + +#head { + // display: flex; +} + +h1 { + margin: 0; +} + +#grid { + display: grid; + gap: 8px; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(64px, auto); +} + +#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; +} \ No newline at end of file diff --git a/source/style/ui.scss b/source/style/ui.scss index e6886e8..f74e666 100644 --- a/source/style/ui.scss +++ b/source/style/ui.scss @@ -194,4 +194,5 @@ $z-indexes: ( @import "modules/ui/new_module"; @import "modules/ui/settings_module"; -@import "modules/ui/drag_module"; \ No newline at end of file +@import "modules/ui/drag_module"; +@import "modules/ui/form_module"; \ No newline at end of file From 8937b36a1e768d57720cdcf65caf7927d7d2c002 Mon Sep 17 00:00:00 2001 From: sthag Date: Thu, 15 May 2025 20:00:51 +0200 Subject: [PATCH 02/17] feat: Changes to ui form and drag - Use common styles - Move NewDiv class to external script - Align script for form and drag pages --- source/code/_ui.js | 113 +++++++++++++++++++++ source/screens/demo/examples/ui/drag.njk | 116 ++-------------------- source/screens/demo/examples/ui/form.njk | 33 +++++- source/style/modules/ui/_drag_module.scss | 16 +-- source/style/modules/ui/_form_module.scss | 15 ++- 5 files changed, 165 insertions(+), 128 deletions(-) create mode 100644 source/code/_ui.js diff --git a/source/code/_ui.js b/source/code/_ui.js new file mode 100644 index 0000000..24e034a --- /dev/null +++ b/source/code/_ui.js @@ -0,0 +1,113 @@ +// 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; +} diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk index 15c24b1..09266b9 100755 --- a/source/screens/demo/examples/ui/drag.njk +++ b/source/screens/demo/examples/ui/drag.njk @@ -9,7 +9,8 @@ tags: {% extends "demo/_app.njk" %} -{% block title %}{{ title }}{% endblock %} +{% block title %}{{ title }} +{% endblock %} {% block links %} {{ super() }} @@ -22,123 +23,18 @@ tags: {% block body %}
- + {% endblock %} {%- block script %} + {% endblock %} \ No newline at end of file diff --git a/source/style/modules/ui/_drag_module.scss b/source/style/modules/ui/_drag_module.scss index ac1dc6c..3942e0a 100644 --- a/source/style/modules/ui/_drag_module.scss +++ b/source/style/modules/ui/_drag_module.scss @@ -1,18 +1,18 @@ .body_drag { height: 100vh; // padding: $space_basic; + + button { + @extend .io_button; + position: fixed; + top: 8px; + right: 8px; + margin: 0; + } } #space { position: relative; height: 100%; background-color: $color-dark; -} - -#addFrame { - @extend .io_button; - position: fixed; - top: 8px; - right: 8px; - margin: 0; } \ No newline at end of file diff --git a/source/style/modules/ui/_form_module.scss b/source/style/modules/ui/_form_module.scss index 265663c..e52b8af 100644 --- a/source/style/modules/ui/_form_module.scss +++ b/source/style/modules/ui/_form_module.scss @@ -1,14 +1,18 @@ -#form body { +.body_form { margin: 0; - background-color: #808080; + background-color: $color-dark; } #head { // display: flex; -} -h1 { - margin: 0; + button { + @extend .io_button; + } + + h1 { + margin: 0; + } } #grid { @@ -16,6 +20,7 @@ h1 { gap: 8px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(64px, auto); + margin-inline: $space_small; } #grid>div { From 6cfe5b21e1453c6915b44a8fd0ba915c3ab84c6f Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 17 May 2025 11:06:45 +0200 Subject: [PATCH 03/17] feat: Consolidate intro scripts - Change script source from ui to intro - Test variants with classes - Move active scripts parts to index - Remove old ui script --- source/code/{ui.js => _intro.js} | 191 ++++++++++++---------- source/screens/demo/examples/ui/index.njk | 66 +++++++- 2 files changed, 170 insertions(+), 87 deletions(-) rename source/code/{ui.js => _intro.js} (64%) diff --git a/source/code/ui.js b/source/code/_intro.js similarity index 64% rename from source/code/ui.js rename to source/code/_intro.js index e4c1da9..71db197 100644 --- a/source/code/ui.js +++ b/source/code/_intro.js @@ -1,43 +1,116 @@ -let introDelay = 6; -let hintDelay = 1; -let isAgree = false; - -const steps = { - agreement: { - element: document.getElementById('agreement'), - msgIn: 'Agreement shown.', - msgOut: 'Agreement accepted.', - msgNo: 'No agreement today.' +class Intro { + constructor(name) { + this.name = name; } -}; -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(); + + init() { + return new Promise((resolve) => { + console.log('%s Init', this.name); + + resolve(); + }); + } +} + +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.element.classList.remove('di_none'); + this.hint.element.classList.remove('di_none'); - this.timeoutId = setTimeout( + this.hint.timeoutId = setTimeout( () => { - this.dismiss(); + this.dismissHint(); }, - this.delay + this.hint.delay ); - }, - dismiss() { - this.element.classList.add('di_none'); - this.timeoutId = undefined; - }, - cancel() { - clearTimeout(this.timeoutId); } -}; -const loader = document.getElementById('loader'); + + dismissHint() { + 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() { return new Promise((resolve) => { @@ -173,60 +246,6 @@ 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 und aus. * Die Werte und sind dabei mit eingeschlossen. diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk index 9af9edc..c01cb81 100644 --- a/source/screens/demo/examples/ui/index.njk +++ b/source/screens/demo/examples/ui/index.njk @@ -56,5 +56,69 @@ tags: {%- block script %} {{ super() }} - + + {% endblock %} \ No newline at end of file From 8942dc3632db93f7d7400bf8257b0b89da7eec54 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 17 May 2025 13:04:31 +0200 Subject: [PATCH 04/17] refactor: Move script parts around - Run setup function in global script - Move common script assets to hippie main template - Remove unused scrcipt from components page --- source/code/hippie/global.js | 2 +- source/screens/demo/basics.njk | 5 ----- source/screens/demo/components.njk | 13 ------------- source/screens/demo/examples/card.njk | 5 ----- source/screens/demo/index.njk | 6 ------ source/screens/demo/introduction.njk | 5 ----- source/screens/demo/layouts.njk | 5 ----- source/templates/demo/_main.njk | 17 ++++++----------- source/templates/hippie/_default.njk | 4 +++- source/templates/hippie/_main.njk | 7 +++++++ 10 files changed, 17 insertions(+), 52 deletions(-) diff --git a/source/code/hippie/global.js b/source/code/hippie/global.js index ef61ad7..0b05906 100644 --- a/source/code/hippie/global.js +++ b/source/code/hippie/global.js @@ -1,3 +1,3 @@ // Setup // ----------------------------------------------------------------------------- -// setup(); +setup(); diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk index 566d527..8206a8c 100644 --- a/source/screens/demo/basics.njk +++ b/source/screens/demo/basics.njk @@ -872,11 +872,6 @@ tags: {% block script %} {{ super() }} - {# #} - - - - - {# #} - - - - {{ log.asset(true) }} {{ log.log('Assets loaded.', assetsLoaded) }} - {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/card.njk b/source/screens/demo/examples/card.njk index 353fed9..ee7011a 100644 --- a/source/screens/demo/examples/card.njk +++ b/source/screens/demo/examples/card.njk @@ -59,11 +59,6 @@ tags: {% block script %} {{ super() }} - {# #} - - - - #} - - - - diff --git a/source/screens/demo/introduction.njk b/source/screens/demo/introduction.njk index 3d82d76..792967e 100644 --- a/source/screens/demo/introduction.njk +++ b/source/screens/demo/introduction.njk @@ -32,11 +32,6 @@ tags: {% block script %} {{ super() }} - {# #} - - - - - {# #} - - - - {{ log.asset(true) }} {{ log.log('Assets loaded.', assetsLoaded) }} -{% endblock %} diff --git a/source/templates/hippie/_default.njk b/source/templates/hippie/_default.njk index 2fcbcd1..8756e7f 100644 --- a/source/templates/hippie/_default.njk +++ b/source/templates/hippie/_default.njk @@ -1,5 +1,7 @@ -{% import "hippie/macros/_log.njk" as log %} +{# {% if hippie.debugMode %} #} + {% import "hippie/macros/_log.njk" as log %} +{# {% endif %} #} diff --git a/source/templates/hippie/_main.njk b/source/templates/hippie/_main.njk index 9a76aad..b7d305a 100644 --- a/source/templates/hippie/_main.njk +++ b/source/templates/hippie/_main.njk @@ -41,6 +41,13 @@ {% block script %} {{ log.log('BODY :: Loading script assets...') }} + {# #} + + {# // TODO: Remove dependecy to jQuery; at least maek it optional #} + + + + {% endblock %} {{ log.log('BODY end :: Page script might still be loading.') }} From fe2261fda512d53084896987fe6becd88abc6486 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 18 May 2025 11:17:48 +0200 Subject: [PATCH 05/17] feat: Change app template - Add global variables to app template - Add flag colors to global variables - Change var declaration --- source/code/hippie/variables.js | 22 ++++++++++++++++------ source/templates/demo/_app.njk | 2 ++ 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/source/code/hippie/variables.js b/source/code/hippie/variables.js index bf6f4bc..7ab6556 100644 --- a/source/code/hippie/variables.js +++ b/source/code/hippie/variables.js @@ -1,4 +1,4 @@ -var hippie = { +let hippie = { brand: "|-| | |^ |^ | [- ", screen: { w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0), @@ -12,9 +12,19 @@ var hippie = { h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0), } }; +let viewHover = true; +let basicEase = 600; -var viewHover = true; -var basicEase = 600; - -var onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ "; -var onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) "; +const onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ "; +const onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) "; +const flagColors = [ + 'fad803', + 'f2af13', + 'd30a51', + '8e1f68', + '273f8b', + '3c579a', + 'b7e0f0', + '6bc7d9', + '52bed1' +] \ No newline at end of file diff --git a/source/templates/demo/_app.njk b/source/templates/demo/_app.njk index 0939550..ca7a37c 100755 --- a/source/templates/demo/_app.njk +++ b/source/templates/demo/_app.njk @@ -23,6 +23,8 @@ {% block body %}{% endblock %} {% block script %} + + {% endblock %} From 13b9318f562e92aa435cd9319c335c4c98f31b13 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 18 May 2025 11:20:48 +0200 Subject: [PATCH 06/17] feat: Changes to event handling and steps - New idle object - New handlers for idle state - Idle uses global colors - Add mouse over style to idle - Set pointer events style from js - Reindent ui index --- source/code/_intro.js | 25 +++ source/screens/demo/examples/ui/index.njk | 218 ++++++++++++---------- source/style/hippie-style | 2 +- source/style/ui.scss | 17 +- 4 files changed, 159 insertions(+), 103 deletions(-) diff --git a/source/code/_intro.js b/source/code/_intro.js index 71db197..426bb57 100644 --- a/source/code/_intro.js +++ b/source/code/_intro.js @@ -116,6 +116,13 @@ function init() { return new Promise((resolve) => { console.log('Init'); + // Set all steps to not receive pointer events + document.querySelectorAll('.step').forEach(element => { + console.log(element); + + element.style.pointerEvents = 'none'; + }); + resolve(); }); } @@ -161,6 +168,8 @@ function showAgreement() { console.info(steps.agreement.msgIn); el.classList.replace('op_hide', 'op_show'); + el.style.pointerEvents = ''; + el.addEventListener('click', agreeHandler); } else { reject(steps.agreement.msgNo); @@ -187,13 +196,21 @@ function showAgreement() { function showIdle() { const el = document.getElementById('idle'); + document.addEventListener('mouseleave', idleStart, false); + document.addEventListener('mouseenter', idleStop, false); + return new Promise((resolve, reject) => { if (el) { console.info('Idle.'); el.classList.replace('op_hide', 'op_show'); + el.style.pointerEvents = ''; + el.addEventListener('click', idleStart, false); resolve('Idle.'); } else { + document.removeEventListener('mouseleave', idleStart); + document.removeEventListener('mouseenter', idleStop); + reject(); } }) @@ -271,6 +288,14 @@ function hintHandler() { hint.show(); } +function idleStart() { + idle.cycle(); +} + +function idleStop() { + idle.cancel(); +} + /** * Blendet einen Schritt aus. * diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk index c01cb81..fdd8d97 100644 --- a/source/screens/demo/examples/ui/index.njk +++ b/source/screens/demo/examples/ui/index.njk @@ -1,124 +1,150 @@ --- title: Init tags: - - demoExample - - index - - ui + - demoExample + - index + - ui --- + {% set pageId = "init" %} {% set pageClass = "html_ui" %} {% extends "demo/_app.njk" %} {% import "hippie/macros/_placeholder.njk" as ph %} - -{% block title %}{{ title }} +{% block title %} + {{ title }} {% endblock %} {% block links %} - + {% endblock %} {% block head %} - {{ super() }} + {{ super() }} {% endblock %} {% block body %} -
-
-
I
-
-
-
-
0%
+
+
+
+ I
+
+
+
+
0%
- -
- {{ ph.brand('brand') }} -

Powered by

-
    -
  • Vendor
    • -
  • IDE
    • -
  • Engine
    • -
-
-
-

Agreement

-

This needs to be seen and acknowledged.
So an interaction must be made to continue.

-
-
-
Hello World!
-

Only left mouse click or any key

-
+
+ +
+ {{ ph.brand('brand') }} +

Powered by

+
    +
  • Vendor
    • +
  • IDE
    • +
  • Engine
    • +
+
+
+

Agreement

+

This needs to be seen and acknowledged.
So an interaction must be made to continue.

+
+
+
+
Hello World!
+

Only left mouse click or any key

+
{% endblock %} {%- block script %} - {{ super() }} - - + + 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'; + }); + {% endblock %} \ No newline at end of file diff --git a/source/style/hippie-style b/source/style/hippie-style index 9f3797f..d17f966 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit 9f3797f6516a63101fb8ebd23ab8229053ec57b6 +Subproject commit d17f9667943a2f525707b1dc77d2d9bf95814e71 diff --git a/source/style/ui.scss b/source/style/ui.scss index f74e666..65b6b0b 100644 --- a/source/style/ui.scss +++ b/source/style/ui.scss @@ -44,7 +44,6 @@ $z-indexes: ( align-items: center; justify-content: center; background-color: white; - pointer-events: none; } #bar { @@ -113,7 +112,6 @@ $z-indexes: ( align-items: center; justify-content: center; background-color: black; - pointer-events: none; h1, p, @@ -154,19 +152,26 @@ $z-indexes: ( align-items: center; justify-content: center; height: 100vh; - background-color: $color_back_basic; } #agreement { flex-direction: column; + background-color: $bravo_color; h1 { margin-top: 0; + color: $color_brightest; } } #idle { - pointer-events: none; + background-color: $color_back_basic; + transition: background-color 1s; + + &:hover>.mouse_over { + background-color: transparent !important; + transition: background-color $duration_basic $timing_basic 0s !important; + } } .toast { @@ -188,8 +193,8 @@ $z-indexes: ( .hello { flex: 0 1 auto; padding: 1em 2em; - // background-color: rgba(black, .25); - background-color: $color_darker; + background-color: rgba($color_bright, .5); + font-family: $family_text_mono; } @import "modules/ui/new_module"; From ba063b0760d9de4795eac34220cecd070fffa999 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 18 May 2025 11:45:26 +0200 Subject: [PATCH 07/17] fix: Indentation for frontmatter --- source/screens/demo/examples/ui/index.njk | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk index fdd8d97..83b1518 100644 --- a/source/screens/demo/examples/ui/index.njk +++ b/source/screens/demo/examples/ui/index.njk @@ -1,9 +1,9 @@ --- title: Init tags: - - demoExample - - index - - ui + - demoExample + - index + - ui --- {% set pageId = "init" %} From 9ff731395aaac7b1fecb4537925478de2ebe2f62 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 18 May 2025 12:07:10 +0200 Subject: [PATCH 08/17] feat: Improve details - Prevent text selection for agreement step - Extend mouse out time - Hint toast is now part of intro step - Agreement step can now be solved with keyboard - Remove more event listeners when step is solved --- source/code/_intro.js | 10 ++++++++++ source/screens/demo/examples/ui/index.njk | 13 +++++++------ source/style/ui.scss | 3 ++- 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/source/code/_intro.js b/source/code/_intro.js index 426bb57..341df5e 100644 --- a/source/code/_intro.js +++ b/source/code/_intro.js @@ -146,12 +146,16 @@ function showIntro() { console.info("Intro fin."); el.classList.add('di_none'); + resolve("Intro fin."); }); }, dy ); } else { + document.removeEventListener('click', hintHandler); + document.removeEventListener('keydown', hintHandler); + reject('No intro available.'); } }) @@ -171,6 +175,7 @@ function showAgreement() { el.style.pointerEvents = ''; el.addEventListener('click', agreeHandler); + document.addEventListener('keydown', agreeHandler); } else { reject(steps.agreement.msgNo); } @@ -186,7 +191,9 @@ function showAgreement() { el.removeEventListener('transitionend', endListener); el.removeEventListener('click', agreeHandler); + document.removeEventListener('keydown', agreeHandler); el.classList.add('di_none'); + resolve(steps.agreement.msgOut); }); } @@ -206,6 +213,7 @@ function showIdle() { el.classList.replace('op_hide', 'op_show'); el.style.pointerEvents = ''; el.addEventListener('click', idleStart, false); + resolve('Idle.'); } else { document.removeEventListener('mouseleave', idleStart); @@ -256,6 +264,7 @@ function loadCore() { el.removeEventListener('transitionend', endListener); el.classList.add('di_none'); + resolve("Core loaded."); }); } @@ -312,6 +321,7 @@ function stepHandler(e) { console.info(msg); el.removeEventListener('transitionend', endListener); + resolve(msg); }); }) diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk index 83b1518..f7534f3 100644 --- a/source/screens/demo/examples/ui/index.njk +++ b/source/screens/demo/examples/ui/index.njk @@ -35,12 +35,12 @@ tags:
0%
-
+ {{ ph.brand('brand') }}

Powered by

    @@ -77,6 +77,7 @@ tags: let introDelay = 6; let hintDelay = 1; + let cycleDelay = 2; let isAgree = false; const steps = { agreement: { @@ -117,7 +118,7 @@ tags: const loader = document.getElementById('loader'); const idle = { element: document.getElementById('idle'), - delay: 2000, + delay: cycleDelay * 1000, position: 0, cycle() { if (typeof this.intervalId === 'number') { diff --git a/source/style/ui.scss b/source/style/ui.scss index 65b6b0b..645e1f5 100644 --- a/source/style/ui.scss +++ b/source/style/ui.scss @@ -157,6 +157,7 @@ $z-indexes: ( #agreement { flex-direction: column; background-color: $bravo_color; + user-select: none; h1 { margin-top: 0; @@ -166,7 +167,7 @@ $z-indexes: ( #idle { background-color: $color_back_basic; - transition: background-color 1s; + transition: background-color 4s; &:hover>.mouse_over { background-color: transparent !important; From 9fbc19388f1ed600868469cb30220306a8f4a52e Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 18 May 2025 12:44:47 +0200 Subject: [PATCH 09/17] feat: Update card script - Use vanilla instead of jQuery - Remove super script - Remove event for dither variant - Reindent --- source/screens/demo/examples/card.njk | 161 ++++++++++++-------------- 1 file changed, 76 insertions(+), 85 deletions(-) diff --git a/source/screens/demo/examples/card.njk b/source/screens/demo/examples/card.njk index ee7011a..7db860b 100644 --- a/source/screens/demo/examples/card.njk +++ b/source/screens/demo/examples/card.njk @@ -9,100 +9,91 @@ tags: {% extends "demo/_default.njk" %} {% import "hippie/macros/_placeholder.njk" as ph %} -{% block title %}{{ title }}{% endblock %} +{% block title %}{{ title }} +{% endblock %} {% block head %} - {{ super() }} + {{ super() }} {% endblock %} {% block body %} - -
    -
    - - {# - - - - - - - - - - - #} - - - - - - - - - - - {# Background flag dithered #} -
    -
    -
    -

    Titel
    und Beschreibung

    -

    {{ ph.name() }}

    -

    - {{ ph.email('card_address') }}
    - {{ ph.link('decent', 'site.tld') }} - · - {{ ph.address('decent') }}

    -
    -
    + + +
    +
    + + {# + + + + + + + + + + + #} + + + + + + + + + + + {# Background flag dithered #} +
    +
    +
    +

    Titel
    und Beschreibung

    +

    {{ ph.name() }}

    +

    + {{ ph.email('card_address') }}
    + {{ ph.link('decent', 'site.tld') }} + · + {{ ph.address('decent') }}

    +
    +
    {% endblock %} {% block script %} - {{ super() }} - + document.getElementById('js_content').addEventListener('mouseenter', () => { + iId = setInterval(() => { + for (let i = 1; i <= colors.length; i++) { + position++; + + if (position >= colors.length) { + position = 0; + } + + document.getElementById("triangle-" + i).setAttribute("fill", colors[position]); + } + + position++; + + if (position >= colors.length) { + position = 0; + } + }, 600); + }); + + document.getElementById('js_content').addEventListener('mouseleave', () => { + iId && clearInterval(iId); + }); + {% endblock %} \ No newline at end of file From 875041bacfe0254fc1889df38065400cdf6583b2 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 18 May 2025 13:02:30 +0200 Subject: [PATCH 10/17] feat: Update composeMail function - Move function to hippie functions - Use vanilla instead of jQuery - Add examples to introduction page - Reindent --- source/code/app.js | 143 +++++--------- source/code/hippie/functions.js | 279 +++++++++++++++------------ source/screens/demo/introduction.njk | 4 + 3 files changed, 213 insertions(+), 213 deletions(-) diff --git a/source/code/app.js b/source/code/app.js index 5ce57d0..8632638 100644 --- a/source/code/app.js +++ b/source/code/app.js @@ -1,22 +1,22 @@ //NEW -function Clock(id){ +function Clock(id) { this.id = id; - + var that = this; - setInterval(function(){that.updateClock();}, 1000); + setInterval(function () { that.updateClock(); }, 1000); this.updateClock(); } -Clock.prototype.updateClock = function(){ +Clock.prototype.updateClock = function () { var date = new Date(); var clock = document.getElementById(this.id); //console.log(this); clock.innerHTML = this.formatDigits(date.getHours()) + ":" + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds()); }; - -Clock.prototype.formatDigits = function(val){ - if(val<10) val = "0" + val; + +Clock.prototype.formatDigits = function (val) { + if (val < 10) val = "0" + val; return val; } @@ -28,7 +28,7 @@ var floor = Math.floor; function ongoing() { var now = new Date(); - + var w = Math.floor(now.getDay()); var D = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"); var DNumb = Math.floor(now.getDate()); @@ -36,157 +36,114 @@ function ongoing() { var M = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"); var y = Math.floor(now.getYear()); if (y < 999) y += 1900; - + var ms = Math.floor(now.getMilliseconds()); var s = Math.floor(now.getSeconds()); var m = Math.floor(now.getMinutes() + s / 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) - j2000.setUTCFullYear(2000,0,1); - j2000.setUTCHours(0,0,0,0); + j2000.setUTCFullYear(2000, 0, 1); + j2000.setUTCHours(0, 0, 0, 0); var utc = new Date(); - utc.setUTCFullYear(y,MNumb,DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden - utc.setUTCHours(h,m,s,ms); + utc.setUTCFullYear(y, MNumb, DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden + utc.setUTCHours(h, m, s, ms); var utc0 = new Date(); - utc0.setUTCFullYear(y,MNumb,DNumb); - utc0.setUTCHours(0,0,0,0); + utc0.setUTCFullYear(y, MNumb, DNumb); + 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 L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne 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 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 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 hWGMT = stGMT2 * 15; 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 stH = Math.floor(st24); var stM = Math.floor((st24 % 1) * 60); var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2); - + var travelWidth = document.body.clientWidth; var travelHeight = document.body.clientHeight; var sunPosX = 0; var sunPosY = 0; var moonPosX = 0; var moonPosY = 0; - + var sun = $("#sun").css({ "left": (s / 60) * travelWidth, "top": (m / 60) * travelHeight }); - + $("#day").text(D[w]); $("#dayNumb").text(DNumb); $("#month").text(M[MNumb]); $("#year").text(y); $("#time").text('' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2)); - + $("#julian").text(jd.toFixed(6)); //$("#star").text(stH + ':' + stM + ':' + stS); $("#star").text(stH + ':' + stM); $("#star1").text(stGMT); $("#star2").text(stGMT2); - + } -function zeroFill( number, width ){ +function zeroFill(number, width) { width -= number.toString().length; - if ( width > 0 ){ - return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number; + if (width > 0) { + return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number; } 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 function barwidth(size, G, W) { var s = size; var g = G; var w = W; - var p = ( w / g ) * 100; - var newW = s * ( p /100 ); + var p = (w / g) * 100; + var newW = s * (p / 100); return newW; } //String Element erweitern -String.prototype.transform = function() { - return parseFloat(this.replace(',', '.')); +String.prototype.transform = function () { + return parseFloat(this.replace(',', '.')); } //Array Element erweitern -Array.prototype.arrayAdd = function() { +Array.prototype.arrayAdd = function () { return eval(this.join("+")); } //Speicherplatz in Prozent berechnen function percentage(total, gigs, round) { - var totalSpace = total; - var singleSpace = gigs; - var z = round; - var p = singleSpace / ( totalSpace / 100 ); - - return p; + var totalSpace = total; + var singleSpace = gigs; + var z = round; + var p = singleSpace / (totalSpace / 100); + + return p; } //Speicherplatz in GB berechnen function gigabytes(percent, total, round) { - var occupiedPercent = percent; - var singleSpace = total; - var z = round; - var g = (singleSpace / 100 ) * occupiedPercent; - - return g; + var occupiedPercent = percent; + var singleSpace = total; + var z = round; + var g = (singleSpace / 100) * occupiedPercent; + + return g; } diff --git a/source/code/hippie/functions.js b/source/code/hippie/functions.js index 602ca13..cdca2f2 100644 --- a/source/code/hippie/functions.js +++ b/source/code/hippie/functions.js @@ -1,149 +1,188 @@ // This is called everytime function setup() { - 'use strict'; + 'use strict'; - console.group('Document information'); - console.info('\n', hippie.brand, '\n\n'); - console.info('HTML:', hippie.screen, '\nBODY:', hippie.body); - console.groupEnd(); - if (debugOn) { - console.group('Debug information'); - console.dir(hippie); - console.groupEnd(); - } + console.group('Document information'); + console.info('\n', hippie.brand, '\n\n'); + console.info('HTML:', hippie.screen, '\nBODY:', hippie.body); + console.groupEnd(); + if (debugOn) { + console.group('Debug information'); + console.dir(hippie); + console.groupEnd(); + } - // WANNABE MODULE Mouse over effect - // With CSS only - if ($('#js_mob').length && viewHover) { - $('#js_mob').addClass('mouse_over'); - } - // if (viewHover) { - // $('body').prepend('
    '); - // } - // With JS + // WANNABE MODULE Mouse over effect + // With CSS only + if ($('#js_mob').length && viewHover) { + $('#js_mob').addClass('mouse_over'); + } + // if (viewHover) { + // $('body').prepend('
    '); + // } + // With JS } // MODULE Scroll navigation // Using constructor function function HippieScroll($tp, $dn) { - 'use strict'; + 'use strict'; - // this.$tp = $tp; - // Define initial situation - let initLeft = false; - const initY = hippie.screen.vh; + // this.$tp = $tp; + // Define initial situation + let initLeft = false; + const initY = hippie.screen.vh; - $tp.addClass('di_none'); + $tp.addClass('di_none'); - // Check scroll position and toggle element - this.check = function () { - hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop); - if (hippie.screen.y > initY) { - if (!initLeft) { - $tp.removeClass('di_none'); - console.info('Initial viewport left'); - } - initLeft = true; - } else { - if (initLeft) { - $tp.addClass('di_none'); - console.info('Initial viewport entered'); - } - initLeft = false; - } - }; + // Check scroll position and toggle element + this.check = function () { + hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop); + if (hippie.screen.y > initY) { + if (!initLeft) { + $tp.removeClass('di_none'); + console.info('Initial viewport left'); + } + initLeft = true; + } else { + if (initLeft) { + $tp.addClass('di_none'); + console.info('Initial viewport entered'); + } + initLeft = false; + } + }; - // Add events to navigation elements - $tp.click(function (event) { - event.preventDefault(); - $('html, body').stop().animate({ - scrollTop: 0 - }, basicEase); - // console.log('Scrolled to top'); - }); - $dn.click(function (event) { - event.preventDefault(); - var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh; - $('html').scrollTop(pos); - // document.documentElement.scrollTop = pos; - console.info('Scrolled down to', pos); - }); + // Add events to navigation elements + $tp.click(function (event) { + event.preventDefault(); + $('html, body').stop().animate({ + scrollTop: 0 + }, basicEase); + // console.log('Scrolled to top'); + }); + $dn.click(function (event) { + event.preventDefault(); + var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh; + $('html').scrollTop(pos); + // document.documentElement.scrollTop = pos; + console.info('Scrolled down to', pos); + }); } // MODULE Meta elements function HippieMeta($ma, $pp) { - 'use strict'; + 'use strict'; - let metaOn = false; + let metaOn = false; - $ma.click(function () { - var $wrap, $pop; + $ma.click(function () { + var $wrap, $pop; - // if (metaOn !== true) { - if (!metaOn) { - metaOn = true; + // if (metaOn !== true) { + if (!metaOn) { + metaOn = true; - $pp.each(function () { - // if ($(this).css('position') === 'static') { - // $(this).addClass('js_changed_pos'); - // $(this).css('position', 'relative'); - // } - // $pop = $(this).next('.exp_pop').detach(); - // $wrap = $(this).wrap('').parent().prepend('').prepend(''); - // $wrap.after($pop); + $pp.each(function () { + // if ($(this).css('position') === 'static') { + // $(this).addClass('js_changed_pos'); + // $(this).css('position', 'relative'); + // } + // $pop = $(this).next('.exp_pop').detach(); + // $wrap = $(this).wrap('').parent().prepend('').prepend(''); + // $wrap.after($pop); - $('
    ').addClass('exp_overlay').css({ - position: 'absolute', - width: '100%', - height: '100%', - top: 0, - left: 0 - }).appendTo($(this).addClass('exp_wrap')); + $('
    ').addClass('exp_overlay').css({ + position: 'absolute', + width: '100%', + height: '100%', + top: 0, + left: 0 + }).appendTo($(this).addClass('exp_wrap')); - // Displays explanation popup following the mouse - $(this).on({ - mouseenter: function () { - // if ($(this).attr('emmet')) { - // - // } - $(this).next('.exp_pop').show(); - }, - mouseleave: function () { - $(this).next('.exp_pop').hide(); - }, - mousemove: function (event) { - $(this).next('.exp_pop').css({ - 'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4, - 'left': event.pageX + 8 - // 'left': event.pageX - $(this).offset().left + 8 - }); - } - }); - }); + // Displays explanation popup following the mouse + $(this).on({ + mouseenter: function () { + // if ($(this).attr('emmet')) { + // + // } + $(this).next('.exp_pop').show(); + }, + mouseleave: function () { + $(this).next('.exp_pop').hide(); + }, + mousemove: function (event) { + $(this).next('.exp_pop').css({ + 'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4, + 'left': event.pageX + 8 + // 'left': event.pageX - $(this).offset().left + 8 + }); + } + }); + }); - } else { - $pp.each(function () { - $(this).off('mouseenter mouseleave mousemove'); + } else { + $pp.each(function () { + $(this).off('mouseenter mouseleave mousemove'); - $(this).removeClass('exp_wrap').find('.exp_overlay').remove(); - // $wrap = $(this).parent('.exp_wrap'); - // $pop = $wrap.next('.exp_pop').detach(); - // $wrap.find('.exp_marker_pop').remove(); - // $(this).unwrap('.exp_wrap'); - // $(this).after($pop); - // if ($(this).hasClass('js_changed_pos')) { - // $(this).css('position', ''); - // if ($(this).attr('style') === '') { - // $(this).removeAttr('style'); - // } - // $(this).removeClass('js_changed_pos'); - // } - }); + $(this).removeClass('exp_wrap').find('.exp_overlay').remove(); + // $wrap = $(this).parent('.exp_wrap'); + // $pop = $wrap.next('.exp_pop').detach(); + // $wrap.find('.exp_marker_pop').remove(); + // $(this).unwrap('.exp_wrap'); + // $(this).after($pop); + // if ($(this).hasClass('js_changed_pos')) { + // $(this).css('position', ''); + // if ($(this).attr('style') === '') { + // $(this).removeAttr('style'); + // } + // $(this).removeClass('js_changed_pos'); + // } + }); - metaOn = false; - } - console.log('Explanation mode', metaOn); - }); + metaOn = false; + } + 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 diff --git a/source/screens/demo/introduction.njk b/source/screens/demo/introduction.njk index 792967e..d74be33 100644 --- a/source/screens/demo/introduction.njk +++ b/source/screens/demo/introduction.njk @@ -26,6 +26,8 @@ tags:

    …

    +

    Contact:

    +

    More: ,

    {% endblock %} @@ -43,6 +45,8 @@ tags: $(document).ready(function () { logPerf('JQ document ready event fired.'); + composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE') + composeMail('.general', 'name', 'domain', 'tld', '', '') }); $(document).scroll(function () { From 8f15664d577f605fcc66b0dbe46dee900da4a493 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 18 May 2025 13:08:58 +0200 Subject: [PATCH 11/17] style: Spaces to tabs --- source/code/hippie/variables.js | 42 +- source/screens/demo/basics.njk | 1736 ++++++++++----------- source/screens/demo/components.njk | 348 ++--- source/screens/demo/examples/portal.njk | 47 +- source/screens/demo/examples/songbook.njk | 67 +- source/screens/demo/index.njk | 128 +- source/screens/demo/introduction.njk | 72 +- source/screens/demo/layouts.njk | 628 ++++---- source/templates/demo/_app.njk | 39 +- source/templates/demo/_default.njk | 16 +- source/templates/demo/_main.njk | 26 +- source/templates/demo/_maintenance.njk | 8 +- 12 files changed, 1580 insertions(+), 1577 deletions(-) diff --git a/source/code/hippie/variables.js b/source/code/hippie/variables.js index 7ab6556..e1f77e7 100644 --- a/source/code/hippie/variables.js +++ b/source/code/hippie/variables.js @@ -1,16 +1,16 @@ let hippie = { - brand: "|-| | |^ |^ | [- ", - screen: { - w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0), - vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0), - dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0), - y: Math.min($(document).scrollTop(), document.documentElement.scrollTop) - // hippie.screen.y: document.documentElement.scrollTop - }, - body: { - w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0), - h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0), - } + brand: "|-| | |^ |^ | [- ", + screen: { + w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0), + vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0), + dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0), + y: Math.min($(document).scrollTop(), document.documentElement.scrollTop) + // hippie.screen.y: document.documentElement.scrollTop + }, + body: { + w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0), + h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0), + } }; let viewHover = true; let basicEase = 600; @@ -18,13 +18,13 @@ let basicEase = 600; const onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ "; const onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) "; const flagColors = [ - 'fad803', - 'f2af13', - 'd30a51', - '8e1f68', - '273f8b', - '3c579a', - 'b7e0f0', - '6bc7d9', - '52bed1' + 'fad803', + 'f2af13', + 'd30a51', + '8e1f68', + '273f8b', + '3c579a', + 'b7e0f0', + '6bc7d9', + '52bed1' ] \ No newline at end of file diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk index 8206a8c..2d962aa 100644 --- a/source/screens/demo/basics.njk +++ b/source/screens/demo/basics.njk @@ -10,884 +10,884 @@ tags: {% block title %}Grundlagen{% endblock %} {% block head %} - {{ super() }} + {{ super() }} {% endblock %} {% block main %} - - {% include "hippie/partials/_body_nav.njk" %} + + {% include "hippie/partials/_body_nav.njk" %} -
    - Dies ist einfach nur Text.
    Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.
    Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.

    -
    -

    Es wirken nur die Eigenschaften des - <body> - Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.

    -

    Bereiche

    - {# // body // article // section // nav // aside // h1-h6 // header // footer #} -
    -

    Ein Abschnitt, welcher für sich alleine stehen kann, definiert sich durch - <article>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.

    -

    Noch allgemeiner ist das - <section> - Element. Es schafft Bereiche um Inhalte zu strukturieren.

    -

    Bestimmte Bereiche haben einen vorgegebene Zweck.
    Folgende Bereiche sind vorgegeben:

    -
    - - -
    -
    -

    Um einleitenden Inhalt festzuhalten, wird das - <header> - Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.

    - -
    -
    -

    Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird - <footer> - eingesetzt.

    -
    -
    - -

    Zur feineren Strukturierung und Gliederung von Texten sind einige weitere Elemente verfügbar. Diese werden nun der Reihe nach aufgeführt. Zu Beginn die Überschriften, da sie noch zu den Abschnitten gehören. Das kommt vermutlich daher, da Abschnitte häufig eine kennzeichnende Überschrift beinhalten.

    -

    Überschrift 1

    -

    Eine Überschrift erster Ordnung - <h1> - ist sehr groß und steht daher oft außerhalb eines Textflusses. Sie schafft eine deutliche Trennung sowohl inhaltlich wie auch optisch. Sie erzeugt einen Abstand gleich der horizontalen Linie über sich.

    -

    Überschrift 2

    -

    Die weiteren Überschriften - <h2> - bis - <h6> - gliedern Text und werden auch als Titel für andere Elemente eingesetzt.

    -

    Überschrift 3 ist in Großbuchstaben gesetzt

    -

    Überschrift 4 verwendet normale Buchstaben und gleicht ansonsten Überschrift 3

    -
    Überschrift 5 ist Überschrift 5
    -
    -
    Überschrift 6
    -

    Überschriften können mit dem Element <hgroup> mit Absätzen gruppiert werden um beispielsweise Untertitel abzubilden.

    -
    -
    -
    -

    Gruppierung

    - {# // p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div #} -

    Ein Absatz - <p>. Zugegeben ein kurzer.

    -

    Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder unterhaltsamen Charakter.
    Einfache Zeilenumbrüche werden darin mit - <br> - erreicht. Dies ist allerdings ein Element der Textebene und keine Gruppierung.

    -

    Die Unterteilung in Absätze ist eine von vielen Möglichkeiten Texte zu gruppieren und ihnen Struktur zu verleihen. In diesem Dokument flattert Text normalerweise von Links daher. Er ist schwarz und in einer serifenlosen Schrift gesetzt. Zu weiteren Formatierungen, die eher auf einer Ebene der Zeichen einzuordnen ist, wird im Verlauf näher eingegangen. Zunächst die Struktur:

    -

    Text sitzt gerne auch mal zentriert.

    -
    - p.txt_center -
    -

    Rechtsbündig ist schon eher eine Ausnahme bzw. Besonderheit.

    -
    - p.txt_right -
    -
    Das Element - <address> - hat den Zweck, Kontaktinformationen bereit zu stellen. Diese werden, je nach Position des Elements im Kontext der gesamten Seite, anders gewertet.
    -

    Texte können auf verschiedene Arten unterteilt werden. Dafür werden unterschiedlich formatierte - <hr> - Elemente verwendet. Die horizontale Linie ist die Ausgangsformatierung, daher auch der abgekürzte Name des Elements. Eine Linie ist schwarz und durchgezogen.

    -
    -

    Es ist auch eine unsichtbare Unterteilung möglich:

    -
    -
    - hr.hr_hidden -
    -

    Die Linie darf auch gepunkted sein. Zudem sind verschiedene Längen möglich. Diese sind immer ein Prozentwert der verfügbaren Breite. Hier in gleicher Reihenfolge 100%, 50% und 25%:

    -
    -
    - hr.hr_dotted -
    - -
    -
    - hr.space_even_half -
    -
    -
    - hr.hr_dotted.space_even_fourth -
    -

    Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.

    -
    - p.column_2 -
    -

    Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.

    -
    - p.column_3.column_line -
    -

    Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.
    Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter.
    Auch das zeigen diese beiden Absätze ganz gut.

    -

    Es gibt die Möglichkeit vorformatierten Text darzustellen - <pre>.

    - 
    dadurch
    	bleiben
    		einrückungen
    			durch
    				tabulatoren
    					erhalten.
    -

    Wird Bezug auf fremde Inhalte genommen, kommt ein Zitat - <blockquote> - zur Anwendung. Es besteht aus der Aussage und der Quelle.

    -
    -

    Ein Zitat (das, lateinisch citatum „Angeführtes, Aufgerufenes“ zu lat. citāre „in Bewegung setzen, vorladen“, vgl. „jemanden vor Gericht zitieren“) ist eine wörtlich übernommene Stelle aus einem Text oder ein Hinweis auf eine bestimmte Textstelle.

    -

    - Wikipedia -

    -
    -
    - blockquote>p+p.quote_source -
    -

    Gerade bei wörtlichen Zitierungen kommt häufig das Anführungszeichen zum Einsatz. Es kann durch die Formatierung automatisch ergänzt werden.

    -
    -

    Das kannst du schon so machen aber dann isses halt Kacke.

    -

    o. V.

    -
    -
    - blockquote.quote_mark>p+p.quote_source -
    -

    Listen

    -

    Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete - <ul> - und geordnete Listen - <ol> - sowie Beschreibungslisten - <dl>. Die beiden ersten Varianten beinhalten das Listenelement - <li>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck - <dt> - und Beschreibung - <dd>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:

    -
      -
    • Ungeordnete
      • -
    • Listen
      • -
    -
      -
    • Verschiedener
      • -
    • Art
      • -
    -
      -
    1. Geordnete
      2. -
    2. Liste
      3. -
    -
    -
    Beschreibungsliste
    -
    Auch Definitionslisten genannt
    -
    Ausdruck
    -
    Beschreibung
    -
    -

    Auch Inhalte, die nicht in Textform sind, können durch einen Bezug integriert werden. Wie diese Fahne werden sie mit - <figure> - umschlossen und tragen eine Bezeichnung, welche mit - <figcaption> - ausgezeichnet wird.

    -
    -
    Fahne
    - - Flag - - - - - - - - - - -
    -
    - figure>figcaption+{element} -
    -
    -

    Eine sehr klar definierte Gruppierung stellt das Element - <main> - dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.

    -

    Eine von sich aus undefinierte Möglichkeit zur Gruppierung von Text besteht durch - <div>. Dieses Element hat, ohne weitere Klassifizierung keine Auswirkungen auf die Erscheinung oder die inhaltliche Aussage. Daher der allgemeine Einsatz.

    -
    -

    Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese hervorgehobene Information zeigt.

    -
    -
    - div.div_info>p -
    -
    -
    -

    Textebene

    - {# // a // em // strong // small // s // cite // q // dfn // abbr // ruby // rb // rt // rtc // rp // data // time // code // var // samp // kbd // sub // sup // i // b // u // mark // bdi // bdo // span // br // wbr // -- Edits -- // ins // del #} -

    Verweise

    -

    Ein wesentlicher Bestandteil von Hypertext sind Verweise - <a>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. - Interne Verweise - - a.a_line - - können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. - Externe Verweise - verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können zum Beispiel auch auf E-Mail Adressen oder Dateien zeigen. Theoretisch kann solch ein Verweis - Alles - auslösen. Anweisungen werden im - URL-Standard - übergeben.

    -

    Nicht nur Text kann als Verweis verwendet werden. Auch andere Elemente wie Bilder können verknüpft werden. Abhängig von ihrer Funktion und ihrem Zweck, werden Verweise unterschiedlich formatiert. - Farbige - oder - unterstrichene Varianten - sind einfache Beispiele.

    -

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

    - - -

    Formatierungen

    -

    Texte, Wörter oder Zeichen können vielfältig formatiert werden.

    -

    Sie können - fett - <b> - oder - kursiv - <i> - geschrieben sein. - - Auch beides ist möglich!?! Sollen sie nicht nur anders - aussehen, sondern auch - eine besondere inhaltliche Bedeutung - bekommen, werden sie mit - <strong> - und - <em> - ausgezeichnet.

    -

    Das - <u> - Element stellt eine Spanne von Text mit einer unartikulierten, wenn auch explizit dargestellten, nicht-textuellen Anmerkung dar, wie z.B. die Beschriftung des Textes als Eigenname wie - Interaktionsweise, oder die Beschriftung des Textes als - flasch - (falsch) geschrieben.

    -

    Ähnlich ist es mit dem Element - <small>. - Es steht für Randnotizen wird aber häufig auch kleiner dargestellt. -

    -

    Ist ein Text nicht mehr korrekt oder relevant kann er mit - <s> - markiert werden:
    - Die Erde ist eine Scheibe. -

    -

    Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. Sowas kann mit - <cite> - ausgezeichnet werden. - Pulp Fiction, ist ein super Film - zum Beispiel.

    -

    Um ein Zitat direkt im Text zu verwenden benutzt man das - <q> - Element. Es platziert Anführungszeichen um die Aussage:

    -

    Sie sagte: - Du wolltest staubsaugen!
    Er sagte: - Mach' ich morgen. -

    -

    Mit dem - <dfn> - Element werden Begriffe definiert. Es wird häufig mit dem Element für Abkürzungen - <abbr> - gemeinsam verwendet. Die eigentliche Definition kann dabei auch im Attribut - title - stehen. Dies ist ein globales Attribut das erklärende Informationen zu dem Element enthält. Diese wird typischerweise beim darauf Zeigen eingeblendet.

    -

    - - HIPPIE - - is an recursive acronym for - Hippie interweaves preeminent personal interface elements.

    -

    Die besondere Auszeichnung - <ruby> - bezeichnet ein Anmerkungssystem, bei dem der Text zusammen mit seiner Anmerkung in einer Zeile erscheint. - Das System verwendet die folgenden weiteren Elemente mit spezifischer Bedeutung:

    -
    -
    - <rb> -
    -
    Basis Textkomponente
    -
    - <rt> -
    -
    Annotation
    -
    - <rtc> -
    -
    Einzelne Komponente einer Annotation
    -
    - <rp> -
    -
    Alternative bei fehlender Unterstützung
    -
    -
    -
    - - Basis - Auszeichnung - - - 今日 - きょう - - - ♥: - - Herz - , - - - Cœur - - . - ☘: - - Kleeblatt - , - - - Trèfle - - . - ✶: - - Stern - , - - - Étoile - - . - -
    -
    -

    Wikipedia erklärt dies ausführlicher unter - Ruby Annotation.

    -

    Es gibt auch mehrere besondere Elemente um Maschinensprache oder Programmiersprache zu bezeichnen. Dabei wird unterschieden, ob der Inhalt nur für Menschen ausgezeichnet wird oder auch maschinen-lesbar sein soll. Die Elemente - <data> - und - <time> - enthalten eine maschinen-lesbare Repräsentation des Inhaltes:

    -
    -
    - 0 - ≠ - NULL -
    -
    - <data>0</data> ≠ <data>NULL</data> -
    -
    Der Wert - NULL - mit Attribut
    -
    - <data value="NULL">NULL</data> -
    -
    - -
    -
    - <time>2018-10-08</time> -
    -
    Die Zeitangabe - - - - mit Attribut
    -
    - <time datetime="2018-10-08">Gestern</time> -
    -
    -

    Die Auszeichnung - <code> - wurde bis hier hin schon verwendet. Sie markiert ebenfalls Maschinensprache. Allerdings dient sie dazu von Menschen gelesen zu werden. In diesem Dokument werden alle Elemente, die erklärt werden wiederum mit diesem Element markiert.

    -

    Für zusammenhängende Blöcke wird die Auszeichnung oft in Kombination mit dem Element - <pre> - verwendet:

    - 
    <html>
      <head>
        <title>hyper text markup language</title>
      </head>
      <body id="root">
        <!-- content goes here -->
        <p class="example">just like this.</p>
      </body>
    </html>
    -

    Dabei bleiben vorhandene Textformatierungen wie Zeilenumbrüche und Einrückung erhalten.

    -

    - var def = "Definition einer Variablen"; -

    -

    In diesem Beispiel wird die Variable - def - definiert. Solch ein spezieller Typ Text kann mit dem dafür vorgesehenen Element - <var> - ausgezeichnet werden.

    -

    Soll beispielhaft auf Ausgaben von Computern verwiesen werden, wird das - <samp> - Element verwendet. Der Computer hat gesagt: - Ich kann das angegebene Objekt nicht finden.

    -

    Benutzereingaben haben ebenfalls ein eigenes Element - <kbd>. Damit werden Eingaben durch den Nutzer, wie zum Beispiel - Drücken Sie gleichzeitig - Strg - und - A - , gekennzeichnet.

    -

    Hoch- und Tiefgestellte Zeichen werden durch die Elemente - <sup> - und - <sub> - repräsentiert. Sie dienen nicht dazu rein optische Auszeichnungen zu erreichen sondern werden für ihren jeweiligen Zweck eingesetzt. In der Mathematik oder Chemie sind sie üblich:

    -

    Beispielsweise die Formel - E=m - c - 2 - oder das Element H2O

    -

    Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden. Dies stellt sich wie folgt dar:

    -

    Beispiel zum markieren 😉.

    -

    Eine Markierung kann, mittels - <mark>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar: - Diese Worte sind markiert. -

    -

    Um Text, dessen schreibweise nicht vorhersehbar ist, zu markieren wie z.B. Benutzernamen - كائن بشري, die auch rechtsbündig geschrieben sein können, wird das - <bdi> - Element eingesetzt.
    Die Schreibweise kann auch auch vom Author vorgegeben und expliziert geändert werden. Dies wird dem - <bdo> - Element umgesetzt. Die Richtung wird dann mit dem Attribut - dir - angegeben.

    -
      -
    • - كائن بشري -
      • -
    • - إنسان آلي -
      • -
    -

    Neben den vielen speziellen Elementen gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist das - <span> - Element.
    Es dient dazu ganz individuelle Auszeichnungen zu ermöglichen die eher optische Auswirkungen haben und eben keine inhaltlichen. Mit den Attributen - id - oder - class - werden dazu eigene Typen des Elements definiert. Diese Möglichkeit der Definition von individuellen Elementen ist ein Grundprinzip der Auszeichnungssprache - HTML.

    -

    Mit der Einführung von Absätzen wurde auch schon das - <br> - Element erwähnt und seitdem häufig benutzt. Es erzeugt einen Zeilenumbruch. Es wird dadurch kein neuer Absatz erstellt. Es dient auch nicht dazu optischen Abstand zu erzeugen, sondern innerhalb eines Absatzes den Text umzubrechen.

    -

    Eine besondere Form des Zeilenumbruchs kann mit - <wbr> - eingesetzt werden. Es stellt die Möglichkeit für einen Zeilenumbruch dar. Da das Format eines HTML-Dokumentes häufig nicht vorhersehbar ist, kann solch ein Element einen Umbruch erzeugen falls ein Wort zu lang für eine Textzeile sein sollte.

    -

    Und der Löwe brüllte "RRRRrrrrooooooooaaaaAAAAAAAAHHHHhhhhrrrrrrrrr"! -

    -

    Es kann auch innerhalb von vorformatierten Texten Zeilenumbrüche ermöglichen

    -

    Änderungen

    -

    Werden Texte geändert, können solche Änderungen sichtbar gemacht werden. Somit können sie besser nachvollzogen werden.
    Zum Beispiel eine Ergänzung von Inhalt.

    - -

    Der Inhalt wird dann mit - <ins> - ausgezeichnet. Wird Text entfernt, kommt - <del> - zum Einsatz.

    -
    Zu Tun
    -
      -
    • Fahrrad reparieren
      • -
    • - Staubsaugen -
      • -
    • Tisch bauen
      • -
    -
    -
    -

    Eingebundene Inhalte

    - {# // picture // source // img // iframe // embed // object // param // video // audio // track // map // area #} - Fahne von Interaktionsweise -

    Dies ist ein Bild. Es wird mit dem Element - <img> - eingebunden. Solch ein Bild hat üblicherweise die Attribute - width - und - height. Mit ihnen werden die Abmessungen (Breite und Höhe) festgelegt. Außerdem sollte immer das Attribut - alt - für eine alternative Beschreibung in Textform verwendet werden.

    -

    Das Bild selbst liegt normalerweise als Datei vor. Die Quelle wird mit dem Attribut - src - angegeben. Es können einige Alternativen zur Angabe einer konkreten Datei eingesetzt werden. Zum Beispiel können mehrere Dateien in Abhängigkeit zur Darstellung oder dem unterstützen Format angegeben werden. Dafür können dann die Elemente - <source> - und - <picture> - in Kombination verwendet werden.

    - - - - -
    -
    -

    Tabellen

    -

    Tabellen bieten besonders geordnete Struktur. Häufig werden in ihnen Text und Daten kombiniert dargestellt. Dies erfordert individuelle Formatierungen. Einige grundlegende Eigenschaften werden im folgenden aufgezeigt. Tabellen sind in ihrer Größe entweder vordefiniert (fixiert) oder richten sich nach ihrem Inhalt. Das bedeutet, die Spaltenbreite entspricht der breitesten ihrer Zellen.

    - - - - - - - - -
    Eineeinfache
    Tabelle
    -
    - table.width_full>tr>td*2^tr>td[colspan=2] -
    -
    - - - - - - - - -
    Einefreie (nicht fixierte)
    Tabelle
    -
    - table>tr>td*2^tr>td[colspan=2] -
    - - - - - - - - -
    Mitohne
    Linien
    -
    - table.table_blank>tr>td*2^tr>td[colspan=2] -
    -
    -

    Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre Zellverteilung:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Beschreibung bzw. Zusammenhang der Tabelle
    KopfzeileAB
    Tabelle
    mitTitel
    Kopf-und
    Fußzeile
    FußzeileAB
    -
    - table.width_full.table_fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2 -
    -

    Viele weitere Formate sind möglich.

    -
    -
    -

    Formulare

    -

    Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Werden sie nicht explizit gestaltet, ist ihre Erscheinung system- bzw. browserabhängig.
    Üblicherweise stehen alle Bedienelemente innerhalb eines - <form> - Elementes. Dieses ist notwendig um Angaben zur Kommunikation mit dem Server zu setzen. Es hat normalerweise keine gestalterische Funktion.

    -

    Grundlegend ist das Element - <input>. Es hat viele Attribute um den Typ der Eingabe anzupassen. Ist es undefiniert nimmt es jegliche textbasierte Information auf und erhält eine Standardgröße.

    -

    -

    Ein spezieller Typ des Eingabefeldes hat die Funktion einer Schaltfläche - <input[type="button"]>. Es gibt allerdings auch ein eigenes Element - <button> - dafür.

    -

    - -

    -

    - -

    -

    Interaktive Elemente können durch das Attribut - readonly - nur lesbar gemacht werden oder mittels - disabled - gänzlich deaktiviert werden.

    -

    - -

    -

    - -

    -

    Das Element - <label> - ergänzt interaktive Elemente um eine Beschriftung. Wichtig ist hier, dass die Beziehung beider Elemente zu einander deutlich ist.

    -

    - -

    -
    -
    - - - - - - - - - -
    - -
    - -
    -
    - - - - - - - - - - - - - - - - - - - -
    - - - -
    - - - -
    - - - -
    -
    -

    Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese werden mit - <fieldset> - realisiert.

    -
    -
    - - -
    -
    -

    Sie können mittels - <legend> - auch eine eigene Beschriftung erhalten.

    -
    - Einfache Eingabeelemente -
    - -
    -
    - -
    - -
    - -
    - -
    - - -
    - - -
    -
    -
    - Einfache Eingabeelemente mit Stil -
    - -
    -
    - -
    - -
    - -
    - -
    - - -
    - - -
    -
    -
    - Weitere Eingabemöglichkeiten -

    Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen Information oder lockern das Erscheinungsbild auf.

    -

    Hier nun eine Liste weiterer Arten von Eingabefeldern:

    -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    -
    +
    + Dies ist einfach nur Text.
    Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.
    Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.

    +
    +

    Es wirken nur die Eigenschaften des + <body> + Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.

    +

    Bereiche

    + {# // body // article // section // nav // aside // h1-h6 // header // footer #} +
    +

    Ein Abschnitt, welcher für sich alleine stehen kann, definiert sich durch + <article>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.

    +

    Noch allgemeiner ist das + <section> + Element. Es schafft Bereiche um Inhalte zu strukturieren.

    +

    Bestimmte Bereiche haben einen vorgegebene Zweck.
    Folgende Bereiche sind vorgegeben:

    +
    + + +
    +
    +

    Um einleitenden Inhalt festzuhalten, wird das + <header> + Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.

    + +
    +
    +

    Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird + <footer> + eingesetzt.

    +
    +
    + +

    Zur feineren Strukturierung und Gliederung von Texten sind einige weitere Elemente verfügbar. Diese werden nun der Reihe nach aufgeführt. Zu Beginn die Überschriften, da sie noch zu den Abschnitten gehören. Das kommt vermutlich daher, da Abschnitte häufig eine kennzeichnende Überschrift beinhalten.

    +

    Überschrift 1

    +

    Eine Überschrift erster Ordnung + <h1> + ist sehr groß und steht daher oft außerhalb eines Textflusses. Sie schafft eine deutliche Trennung sowohl inhaltlich wie auch optisch. Sie erzeugt einen Abstand gleich der horizontalen Linie über sich.

    +

    Überschrift 2

    +

    Die weiteren Überschriften + <h2> + bis + <h6> + gliedern Text und werden auch als Titel für andere Elemente eingesetzt.

    +

    Überschrift 3 ist in Großbuchstaben gesetzt

    +

    Überschrift 4 verwendet normale Buchstaben und gleicht ansonsten Überschrift 3

    +
    Überschrift 5 ist Überschrift 5
    +
    +
    Überschrift 6
    +

    Überschriften können mit dem Element <hgroup> mit Absätzen gruppiert werden um beispielsweise Untertitel abzubilden.

    +
    +
    +
    +

    Gruppierung

    + {# // p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div #} +

    Ein Absatz + <p>. Zugegeben ein kurzer.

    +

    Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder unterhaltsamen Charakter.
    Einfache Zeilenumbrüche werden darin mit + <br> + erreicht. Dies ist allerdings ein Element der Textebene und keine Gruppierung.

    +

    Die Unterteilung in Absätze ist eine von vielen Möglichkeiten Texte zu gruppieren und ihnen Struktur zu verleihen. In diesem Dokument flattert Text normalerweise von Links daher. Er ist schwarz und in einer serifenlosen Schrift gesetzt. Zu weiteren Formatierungen, die eher auf einer Ebene der Zeichen einzuordnen ist, wird im Verlauf näher eingegangen. Zunächst die Struktur:

    +

    Text sitzt gerne auch mal zentriert.

    +
    + p.txt_center +
    +

    Rechtsbündig ist schon eher eine Ausnahme bzw. Besonderheit.

    +
    + p.txt_right +
    +
    Das Element + <address> + hat den Zweck, Kontaktinformationen bereit zu stellen. Diese werden, je nach Position des Elements im Kontext der gesamten Seite, anders gewertet.
    +

    Texte können auf verschiedene Arten unterteilt werden. Dafür werden unterschiedlich formatierte + <hr> + Elemente verwendet. Die horizontale Linie ist die Ausgangsformatierung, daher auch der abgekürzte Name des Elements. Eine Linie ist schwarz und durchgezogen.

    +
    +

    Es ist auch eine unsichtbare Unterteilung möglich:

    +
    +
    + hr.hr_hidden +
    +

    Die Linie darf auch gepunkted sein. Zudem sind verschiedene Längen möglich. Diese sind immer ein Prozentwert der verfügbaren Breite. Hier in gleicher Reihenfolge 100%, 50% und 25%:

    +
    +
    + hr.hr_dotted +
    + +
    +
    + hr.space_even_half +
    +
    +
    + hr.hr_dotted.space_even_fourth +
    +

    Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.

    +
    + p.column_2 +
    +

    Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.

    +
    + p.column_3.column_line +
    +

    Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.
    Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter.
    Auch das zeigen diese beiden Absätze ganz gut.

    +

    Es gibt die Möglichkeit vorformatierten Text darzustellen + <pre>.

    + 
    dadurch
    	bleiben
    		einrückungen
    			durch
    				tabulatoren
    					erhalten.
    +

    Wird Bezug auf fremde Inhalte genommen, kommt ein Zitat + <blockquote> + zur Anwendung. Es besteht aus der Aussage und der Quelle.

    +
    +

    Ein Zitat (das, lateinisch citatum „Angeführtes, Aufgerufenes“ zu lat. citāre „in Bewegung setzen, vorladen“, vgl. „jemanden vor Gericht zitieren“) ist eine wörtlich übernommene Stelle aus einem Text oder ein Hinweis auf eine bestimmte Textstelle.

    +

    + Wikipedia +

    +
    +
    + blockquote>p+p.quote_source +
    +

    Gerade bei wörtlichen Zitierungen kommt häufig das Anführungszeichen zum Einsatz. Es kann durch die Formatierung automatisch ergänzt werden.

    +
    +

    Das kannst du schon so machen aber dann isses halt Kacke.

    +

    o. V.

    +
    +
    + blockquote.quote_mark>p+p.quote_source +
    +

    Listen

    +

    Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete + <ul> + und geordnete Listen + <ol> + sowie Beschreibungslisten + <dl>. Die beiden ersten Varianten beinhalten das Listenelement + <li>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck + <dt> + und Beschreibung + <dd>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:

    +
      +
    • Ungeordnete
      • +
    • Listen
      • +
    +
      +
    • Verschiedener
      • +
    • Art
      • +
    +
      +
    1. Geordnete
      2. +
    2. Liste
      3. +
    +
    +
    Beschreibungsliste
    +
    Auch Definitionslisten genannt
    +
    Ausdruck
    +
    Beschreibung
    +
    +

    Auch Inhalte, die nicht in Textform sind, können durch einen Bezug integriert werden. Wie diese Fahne werden sie mit + <figure> + umschlossen und tragen eine Bezeichnung, welche mit + <figcaption> + ausgezeichnet wird.

    +
    +
    Fahne
    + + Flag + + + + + + + + + + +
    +
    + figure>figcaption+{element} +
    +
    +

    Eine sehr klar definierte Gruppierung stellt das Element + <main> + dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.

    +

    Eine von sich aus undefinierte Möglichkeit zur Gruppierung von Text besteht durch + <div>. Dieses Element hat, ohne weitere Klassifizierung keine Auswirkungen auf die Erscheinung oder die inhaltliche Aussage. Daher der allgemeine Einsatz.

    +
    +

    Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese hervorgehobene Information zeigt.

    +
    +
    + div.div_info>p +
    +
    +
    +

    Textebene

    + {# // a // em // strong // small // s // cite // q // dfn // abbr // ruby // rb // rt // rtc // rp // data // time // code // var // samp // kbd // sub // sup // i // b // u // mark // bdi // bdo // span // br // wbr // -- Edits -- // ins // del #} +

    Verweise

    +

    Ein wesentlicher Bestandteil von Hypertext sind Verweise + <a>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. + Interne Verweise + + a.a_line + + können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. + Externe Verweise + verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können zum Beispiel auch auf E-Mail Adressen oder Dateien zeigen. Theoretisch kann solch ein Verweis + Alles + auslösen. Anweisungen werden im + URL-Standard + übergeben.

    +

    Nicht nur Text kann als Verweis verwendet werden. Auch andere Elemente wie Bilder können verknüpft werden. Abhängig von ihrer Funktion und ihrem Zweck, werden Verweise unterschiedlich formatiert. + Farbige + oder + unterstrichene Varianten + sind einfache Beispiele.

    +

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

    + + +

    Formatierungen

    +

    Texte, Wörter oder Zeichen können vielfältig formatiert werden.

    +

    Sie können + fett + <b> + oder + kursiv + <i> + geschrieben sein. + + Auch beides ist möglich!?! Sollen sie nicht nur anders + aussehen, sondern auch + eine besondere inhaltliche Bedeutung + bekommen, werden sie mit + <strong> + und + <em> + ausgezeichnet.

    +

    Das + <u> + Element stellt eine Spanne von Text mit einer unartikulierten, wenn auch explizit dargestellten, nicht-textuellen Anmerkung dar, wie z.B. die Beschriftung des Textes als Eigenname wie + Interaktionsweise, oder die Beschriftung des Textes als + flasch + (falsch) geschrieben.

    +

    Ähnlich ist es mit dem Element + <small>. + Es steht für Randnotizen wird aber häufig auch kleiner dargestellt. +

    +

    Ist ein Text nicht mehr korrekt oder relevant kann er mit + <s> + markiert werden:
    + Die Erde ist eine Scheibe. +

    +

    Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. Sowas kann mit + <cite> + ausgezeichnet werden. + Pulp Fiction, ist ein super Film - zum Beispiel.

    +

    Um ein Zitat direkt im Text zu verwenden benutzt man das + <q> + Element. Es platziert Anführungszeichen um die Aussage:

    +

    Sie sagte: + Du wolltest staubsaugen!
    Er sagte: + Mach' ich morgen. +

    +

    Mit dem + <dfn> + Element werden Begriffe definiert. Es wird häufig mit dem Element für Abkürzungen + <abbr> + gemeinsam verwendet. Die eigentliche Definition kann dabei auch im Attribut + title + stehen. Dies ist ein globales Attribut das erklärende Informationen zu dem Element enthält. Diese wird typischerweise beim darauf Zeigen eingeblendet.

    +

    + + HIPPIE + + is an recursive acronym for + Hippie interweaves preeminent personal interface elements.

    +

    Die besondere Auszeichnung + <ruby> + bezeichnet ein Anmerkungssystem, bei dem der Text zusammen mit seiner Anmerkung in einer Zeile erscheint. + Das System verwendet die folgenden weiteren Elemente mit spezifischer Bedeutung:

    +
    +
    + <rb> +
    +
    Basis Textkomponente
    +
    + <rt> +
    +
    Annotation
    +
    + <rtc> +
    +
    Einzelne Komponente einer Annotation
    +
    + <rp> +
    +
    Alternative bei fehlender Unterstützung
    +
    +
    +
    + + Basis + Auszeichnung + + + 今日 + きょう + + + ♥: + + Herz + , + + + Cœur + + . + ☘: + + Kleeblatt + , + + + Trèfle + + . + ✶: + + Stern + , + + + Étoile + + . + +
    +
    +

    Wikipedia erklärt dies ausführlicher unter + Ruby Annotation.

    +

    Es gibt auch mehrere besondere Elemente um Maschinensprache oder Programmiersprache zu bezeichnen. Dabei wird unterschieden, ob der Inhalt nur für Menschen ausgezeichnet wird oder auch maschinen-lesbar sein soll. Die Elemente + <data> + und + <time> + enthalten eine maschinen-lesbare Repräsentation des Inhaltes:

    +
    +
    + 0 + ≠ + NULL +
    +
    + <data>0</data> ≠ <data>NULL</data> +
    +
    Der Wert + NULL + mit Attribut
    +
    + <data value="NULL">NULL</data> +
    +
    + +
    +
    + <time>2018-10-08</time> +
    +
    Die Zeitangabe + + + + mit Attribut
    +
    + <time datetime="2018-10-08">Gestern</time> +
    +
    +

    Die Auszeichnung + <code> + wurde bis hier hin schon verwendet. Sie markiert ebenfalls Maschinensprache. Allerdings dient sie dazu von Menschen gelesen zu werden. In diesem Dokument werden alle Elemente, die erklärt werden wiederum mit diesem Element markiert.

    +

    Für zusammenhängende Blöcke wird die Auszeichnung oft in Kombination mit dem Element + <pre> + verwendet:

    + 
    <html>
      <head>
        <title>hyper text markup language</title>
      </head>
      <body id="root">
        <!-- content goes here -->
        <p class="example">just like this.</p>
      </body>
    </html>
    +

    Dabei bleiben vorhandene Textformatierungen wie Zeilenumbrüche und Einrückung erhalten.

    +

    + var def = "Definition einer Variablen"; +

    +

    In diesem Beispiel wird die Variable + def + definiert. Solch ein spezieller Typ Text kann mit dem dafür vorgesehenen Element + <var> + ausgezeichnet werden.

    +

    Soll beispielhaft auf Ausgaben von Computern verwiesen werden, wird das + <samp> + Element verwendet. Der Computer hat gesagt: + Ich kann das angegebene Objekt nicht finden.

    +

    Benutzereingaben haben ebenfalls ein eigenes Element + <kbd>. Damit werden Eingaben durch den Nutzer, wie zum Beispiel + Drücken Sie gleichzeitig + Strg + und + A + , gekennzeichnet.

    +

    Hoch- und Tiefgestellte Zeichen werden durch die Elemente + <sup> + und + <sub> + repräsentiert. Sie dienen nicht dazu rein optische Auszeichnungen zu erreichen sondern werden für ihren jeweiligen Zweck eingesetzt. In der Mathematik oder Chemie sind sie üblich:

    +

    Beispielsweise die Formel + E=m + c + 2 + oder das Element H2O

    +

    Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden. Dies stellt sich wie folgt dar:

    +

    Beispiel zum markieren 😉.

    +

    Eine Markierung kann, mittels + <mark>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar: + Diese Worte sind markiert. +

    +

    Um Text, dessen schreibweise nicht vorhersehbar ist, zu markieren wie z.B. Benutzernamen + كائن بشري, die auch rechtsbündig geschrieben sein können, wird das + <bdi> + Element eingesetzt.
    Die Schreibweise kann auch auch vom Author vorgegeben und expliziert geändert werden. Dies wird dem + <bdo> + Element umgesetzt. Die Richtung wird dann mit dem Attribut + dir + angegeben.

    +
      +
    • + كائن بشري +
      • +
    • + إنسان آلي +
      • +
    +

    Neben den vielen speziellen Elementen gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist das + <span> + Element.
    Es dient dazu ganz individuelle Auszeichnungen zu ermöglichen die eher optische Auswirkungen haben und eben keine inhaltlichen. Mit den Attributen + id + oder + class + werden dazu eigene Typen des Elements definiert. Diese Möglichkeit der Definition von individuellen Elementen ist ein Grundprinzip der Auszeichnungssprache + HTML.

    +

    Mit der Einführung von Absätzen wurde auch schon das + <br> + Element erwähnt und seitdem häufig benutzt. Es erzeugt einen Zeilenumbruch. Es wird dadurch kein neuer Absatz erstellt. Es dient auch nicht dazu optischen Abstand zu erzeugen, sondern innerhalb eines Absatzes den Text umzubrechen.

    +

    Eine besondere Form des Zeilenumbruchs kann mit + <wbr> + eingesetzt werden. Es stellt die Möglichkeit für einen Zeilenumbruch dar. Da das Format eines HTML-Dokumentes häufig nicht vorhersehbar ist, kann solch ein Element einen Umbruch erzeugen falls ein Wort zu lang für eine Textzeile sein sollte.

    +

    Und der Löwe brüllte "RRRRrrrrooooooooaaaaAAAAAAAAHHHHhhhhrrrrrrrrr"! +

    +

    Es kann auch innerhalb von vorformatierten Texten Zeilenumbrüche ermöglichen

    +

    Änderungen

    +

    Werden Texte geändert, können solche Änderungen sichtbar gemacht werden. Somit können sie besser nachvollzogen werden.
    Zum Beispiel eine Ergänzung von Inhalt.

    + +

    Der Inhalt wird dann mit + <ins> + ausgezeichnet. Wird Text entfernt, kommt + <del> + zum Einsatz.

    +
    Zu Tun
    +
      +
    • Fahrrad reparieren
      • +
    • + Staubsaugen +
      • +
    • Tisch bauen
      • +
    +
    +
    +

    Eingebundene Inhalte

    + {# // picture // source // img // iframe // embed // object // param // video // audio // track // map // area #} + Fahne von Interaktionsweise +

    Dies ist ein Bild. Es wird mit dem Element + <img> + eingebunden. Solch ein Bild hat üblicherweise die Attribute + width + und + height. Mit ihnen werden die Abmessungen (Breite und Höhe) festgelegt. Außerdem sollte immer das Attribut + alt + für eine alternative Beschreibung in Textform verwendet werden.

    +

    Das Bild selbst liegt normalerweise als Datei vor. Die Quelle wird mit dem Attribut + src + angegeben. Es können einige Alternativen zur Angabe einer konkreten Datei eingesetzt werden. Zum Beispiel können mehrere Dateien in Abhängigkeit zur Darstellung oder dem unterstützen Format angegeben werden. Dafür können dann die Elemente + <source> + und + <picture> + in Kombination verwendet werden.

    + + + + +
    +
    +

    Tabellen

    +

    Tabellen bieten besonders geordnete Struktur. Häufig werden in ihnen Text und Daten kombiniert dargestellt. Dies erfordert individuelle Formatierungen. Einige grundlegende Eigenschaften werden im folgenden aufgezeigt. Tabellen sind in ihrer Größe entweder vordefiniert (fixiert) oder richten sich nach ihrem Inhalt. Das bedeutet, die Spaltenbreite entspricht der breitesten ihrer Zellen.

    + + + + + + + + +
    Eineeinfache
    Tabelle
    +
    + table.width_full>tr>td*2^tr>td[colspan=2] +
    +
    + + + + + + + + +
    Einefreie (nicht fixierte)
    Tabelle
    +
    + table>tr>td*2^tr>td[colspan=2] +
    + + + + + + + + +
    Mitohne
    Linien
    +
    + table.table_blank>tr>td*2^tr>td[colspan=2] +
    +
    +

    Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre Zellverteilung:

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Beschreibung bzw. Zusammenhang der Tabelle
    KopfzeileAB
    Tabelle
    mitTitel
    Kopf-und
    Fußzeile
    FußzeileAB
    +
    + table.width_full.table_fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2 +
    +

    Viele weitere Formate sind möglich.

    +
    +
    +

    Formulare

    +

    Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Werden sie nicht explizit gestaltet, ist ihre Erscheinung system- bzw. browserabhängig.
    Üblicherweise stehen alle Bedienelemente innerhalb eines + <form> + Elementes. Dieses ist notwendig um Angaben zur Kommunikation mit dem Server zu setzen. Es hat normalerweise keine gestalterische Funktion.

    +

    Grundlegend ist das Element + <input>. Es hat viele Attribute um den Typ der Eingabe anzupassen. Ist es undefiniert nimmt es jegliche textbasierte Information auf und erhält eine Standardgröße.

    +

    +

    Ein spezieller Typ des Eingabefeldes hat die Funktion einer Schaltfläche + <input[type="button"]>. Es gibt allerdings auch ein eigenes Element + <button> + dafür.

    +

    + +

    +

    + +

    +

    Interaktive Elemente können durch das Attribut + readonly + nur lesbar gemacht werden oder mittels + disabled + gänzlich deaktiviert werden.

    +

    + +

    +

    + +

    +

    Das Element + <label> + ergänzt interaktive Elemente um eine Beschriftung. Wichtig ist hier, dass die Beziehung beider Elemente zu einander deutlich ist.

    +

    + +

    +
    +
    + + + + + + + + + +
    + +
    + +
    +
    + + + + + + + + + + + + + + + + + + + +
    + + + +
    + + + +
    + + + +
    +
    +

    Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese werden mit + <fieldset> + realisiert.

    +
    +
    + + +
    +
    +

    Sie können mittels + <legend> + auch eine eigene Beschriftung erhalten.

    +
    + Einfache Eingabeelemente +
    + +
    +
    + +
    + +
    + +
    + +
    + + +
    + + +
    +
    +
    + Einfache Eingabeelemente mit Stil +
    + +
    +
    + +
    + +
    + +
    + +
    + + +
    + + +
    +
    +
    + Weitere Eingabemöglichkeiten +

    Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen Information oder lockern das Erscheinungsbild auf.

    +

    Hier nun eine Liste weiterer Arten von Eingabefeldern:

    +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    +
    -

    Interaktive Elemente

    -
    -
    -

    Struktur

    -
    -
    -
    - - - - -
    -
    -
    -
    -
    -

    Medien

    -
    -
    -

    Druck

    -
    +

    Interaktive Elemente

    +
    +
    +

    Struktur

    +
    +
    +
    + + + + +
    +
    +
    +
    +
    +

    Medien

    +
    +
    +

    Druck

    +
    -
    -
    -

    Ende der Einführung

    -

    Dies war eine Übersicht der grundlegenden Elemente. Nun folgen Komponenten mit Kombinationen und erweiterten Formatierungen.

    -
    -
    -
    +
    +
    +

    Ende der Einführung

    +

    Dies war eine Übersicht der grundlegenden Elemente. Nun folgen Komponenten mit Kombinationen und erweiterten Formatierungen.

    +
    +
    +
{% endblock %} {% block script %} - {{ super() }} - + $(document).scroll(function () { + scrollUi.check(); + }); + logPerf('Application ready... not.'); + {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk index b1f6ed3..b4d27f5 100644 --- a/source/screens/demo/components.njk +++ b/source/screens/demo/components.njk @@ -10,185 +10,185 @@ tags: {% block title %}Komponenten{% endblock %} {% block head %} - {{ super() }} + {{ super() }} {% endblock %} {% block main %} - -
- - {% include "hippie/partials/_body_nav.njk" %} -
-
-
-
-

Medienformat Abfragen

-
-
-
Umbruch bei 
-
-

Telefone und größer

-

Nur Telefone

-

Nur Schreibtafeln hochkant

-

Schreibtafeln und größer

-

Schreibtafeln im Querformat

-

Schreibtafeln quer und größer

-

Nur Arbeitsplatzrechner

-

Arbeitsplatzrechner und größer

-

Richtige Monitore und größer

-
-
-
+ +
+ + {% include "hippie/partials/_body_nav.njk" %} +
+
+
+
+

Medienformat Abfragen

+
+
+
Umbruch bei 
+
+

Telefone und größer

+

Nur Telefone

+

Nur Schreibtafeln hochkant

+

Schreibtafeln und größer

+

Schreibtafeln im Querformat

+

Schreibtafeln quer und größer

+

Nur Arbeitsplatzrechner

+

Arbeitsplatzrechner und größer

+

Richtige Monitore und größer

+
+
+
-
-
-

Übersicht aller Elemente

-

Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (www.w3.org/TR/2017/REC-html52-20171214/index.html#contents) verwendet.

-

Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.

-
- 
article>h1+p{Elemente:}+pre+h4{Varianten}
-
-

Bereiche

-

Elemente:

- 
// body
// article
// section
// nav
// aside
// h1-h6
// header
// footer
-

<body>

-

Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.

-

<article>

-

Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.

-

<section>

-

Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.

-

Varianten

- 
section.sec_main_center
- 
section.sec_main_status
-

<h3>

-

<h4>

-
-
-

Gruppierung

-

Elemente:

- 
// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div
-

<p>

-

Varianten

- 
p.txt_center
- 
p.txt_right
- 
p.column_2
- 
p.column_3.column_line
-

<hr>

-

Varianten

- 
hr.hr_hidden
- 
hr.hr_dotted
- 
hr.space_even_half
- 
hr.hr_dotted.space_even_fourth
-

<blockquote>

- 
blockquote>p+p.quote_source
-

<figure>

- 
figure>figcaption+{element}
-

<div>

- 
div.div_info>p
-

Varianten

-
-
-

Tabellen

-

Elemente:

- 
// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th
-

<table>

-

Varianten

- 
table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KopfzeileAB
VorspalteEine
1erweiterte
2Tabelle
- 
table.width_full.table_stripe.table_fix.table_free>tr>td*3
- - - - - - - - - - - - - - - - - - - - - -
Tabelle
ohneRahmen
jedochmit
Streifen
- 
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
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.
BezeichnungMengeWert
Alpha18990
Bravo101
Charlie11
Summe9001
-
-
-
+
+
+

Übersicht aller Elemente

+

Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (www.w3.org/TR/2017/REC-html52-20171214/index.html#contents) verwendet.

+

Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.

+
+ 
article>h1+p{Elemente:}+pre+h4{Varianten}
+
+

Bereiche

+

Elemente:

+ 
// body
// article
// section
// nav
// aside
// h1-h6
// header
// footer
+

<body>

+

Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.

+

<article>

+

Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.

+

<section>

+

Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.

+

Varianten

+ 
section.sec_main_center
+ 
section.sec_main_status
+

<h3>

+

<h4>

+
+
+

Gruppierung

+

Elemente:

+ 
// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div
+

<p>

+

Varianten

+ 
p.txt_center
+ 
p.txt_right
+ 
p.column_2
+ 
p.column_3.column_line
+

<hr>

+

Varianten

+ 
hr.hr_hidden
+ 
hr.hr_dotted
+ 
hr.space_even_half
+ 
hr.hr_dotted.space_even_fourth
+

<blockquote>

+ 
blockquote>p+p.quote_source
+

<figure>

+ 
figure>figcaption+{element}
+

<div>

+ 
div.div_info>p
+

Varianten

+
+
+

Tabellen

+

Elemente:

+ 
// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th
+

<table>

+

Varianten

+ 
table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KopfzeileAB
VorspalteEine
1erweiterte
2Tabelle
+ 
table.width_full.table_stripe.table_fix.table_free>tr>td*3
+ + + + + + + + + + + + + + + + + + + + + +
Tabelle
ohneRahmen
jedochmit
Streifen
+ 
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
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.
BezeichnungMengeWert
Alpha18990
Bravo101
Charlie11
Summe9001
+
+
+
{% endblock %} {% block script %} - {{ super() }} - - {{ log.asset(true) }} - {{ log.log('Assets loaded.', assetsLoaded) }} + {{ super() }} + + {{ log.asset(true) }} + {{ log.log('Assets loaded.', assetsLoaded) }} {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/portal.njk b/source/screens/demo/examples/portal.njk index 5b96681..8f949f2 100644 --- a/source/screens/demo/examples/portal.njk +++ b/source/screens/demo/examples/portal.njk @@ -9,32 +9,33 @@ tags: {% extends "demo/_default.njk" %} {% import "hippie/macros/_gate.njk" as gate %} -{% block title %}{{ title }}{% endblock %} +{% block title %}{{ title }} +{% endblock %} {% block head %} - {{ super() }} + {{ super() }} {% endblock %} {% block body %} - -
- {{ gate.list( - 'Tor mit Symbol und Liste', - '../demo', { - src: '/art/demo/flag_websafe_128x80.gif', - alt: 'Flag of Interaktionsweise' - }, [ - { - name: '1', - href: 'http://domain.tld', - img: '../art/bullet.gif' - }, { - name: 'Zwei', - href: 'http://domain.tld', - img: '../art/bullet.gif' - } - ] - ) }} - {{ gate.simple('Tor', '../demo') }} -
+ +
+ {{ gate.list( + 'Tor mit Symbol und Liste', + '../demo', { + src: '/art/demo/flag_websafe_128x80.gif', + alt: 'Flag of Interaktionsweise' + }, [ + { + name: '1', + href: 'http://domain.tld', + img: '../art/bullet.gif' + }, { + name: 'Zwei', + href: 'http://domain.tld', + img: '../art/bullet.gif' + } + ] + ) }} + {{ gate.simple('Tor', '../demo') }} +
{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/songbook.njk b/source/screens/demo/examples/songbook.njk index 0b91499..69f26b9 100755 --- a/source/screens/demo/examples/songbook.njk +++ b/source/screens/demo/examples/songbook.njk @@ -10,42 +10,43 @@ tags: {% import "hippie/macros/_placeholder.njk" as ph %} {% import "hippie/macros/_song.njk" as song %} -{% block title %}{{ title }}{% endblock %} +{% block title %}{{ title }} +{% endblock %} {% block head %} - {{ super() }} + {{ super() }} {% endblock %} {% block body %} - -
-
-

Titel

-

Jahr

-
- -

Vorwort

-

Liederbuch für - Name.

-

Gibt es gebunden und hier - {{ ph.link() }}.
- Bestellungen bitte an - {{ ph.name() }} - richten.

-
- {%- for piece in collections.song -%} - {{ song.simple(loop.index0, piece.data, piece.content) }} - {%- endfor -%} -
-
{{ ph.name() }}
-
+ +
+
+

Titel

+

Jahr

+
+ +

Vorwort

+

Liederbuch für + Name.

+

Gibt es gebunden und hier + {{ ph.link() }}.
+ Bestellungen bitte an + {{ ph.name() }} + richten.

+
+ {%- for piece in collections.song -%} + {{ song.simple(loop.index0, piece.data, piece.content) }} + {%- endfor -%} +
+
{{ ph.name() }}
+
{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/index.njk b/source/screens/demo/index.njk index 16ecac9..02b2677 100644 --- a/source/screens/demo/index.njk +++ b/source/screens/demo/index.njk @@ -12,74 +12,74 @@ tags: {% block title %}Index{% endblock %} {% block head %} - {{ super() }} + {{ super() }} {% endblock %} {% block body %} - -
-
-

This is - {{ hippie.brand | upper }}

-

You can start using it by replacing this file with your own index page.

-

To do this you need to create a file - /index.njk - inside the - source/screens - folder. You can also create a - data.json - file inside the - source/templates - folder as a data source for your nunjucks files.

-

For a very basic start you can make a copy of the demo page - blank.njk. You can find it at - /source/screens/demo.

-

The - source/demo - folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.
Follow the white rabbit.

-
- 
  ()()
  (..)
c(")(")
-

Overview

-
- -

Page

-
    - {% for link in collections.demoPage | sort(false, false, 'data.title') %} -
  • - {{ link.data.title }} -
    • - {% endfor %} -
-

Example

- -
-
+ +
+
+

This is + {{ hippie.brand | upper }}

+

You can start using it by replacing this file with your own index page.

+

To do this you need to create a file + /index.njk + inside the + source/screens + folder. You can also create a + data.json + file inside the + source/templates + folder as a data source for your nunjucks files.

+

For a very basic start you can make a copy of the demo page + blank.njk. You can find it at + /source/screens/demo.

+

The + source/demo + folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.
Follow the white rabbit.

+
+ 
  ()()
  (..)
c(")(")
+

Overview

+
+ +

Page

+
    + {% for link in collections.demoPage | sort(false, false, 'data.title') %} +
  • + {{ link.data.title }} +
    • + {% endfor %} +
+

Example

+ +
+
{% endblock %} {% block script %} - {{ super() }} - + {{ super() }} + {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/introduction.njk b/source/screens/demo/introduction.njk index d74be33..4fffb89 100644 --- a/source/screens/demo/introduction.njk +++ b/source/screens/demo/introduction.njk @@ -10,48 +10,50 @@ tags: {% block title %}Einführung{% endblock %} {% block head %} - {{ super() }} + {{ super() }} {% endblock %} {% block main %} - - {% include "hippie/partials/_body_nav.njk" %} + + {% include "hippie/partials/_body_nav.njk" %} -
-
-
-

Introduction to HIPPIE

-

Hippie interweaves preeminent personal interface elements.

-
-
-
-

…

-

Contact:

-

More: ,

-
-
+
+
+
+

Introduction to HIPPIE

+

Hippie interweaves preeminent personal interface elements.

+
+
+
+

…

+

Contact: +

+

More: , +

+
+
{% endblock %} {% block script %} - {{ super() }} - + $(document).scroll(function () { + scrollUi.check(); + }); + logPerf('Application ready... not.'); + {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk index 82d97e1..810c823 100644 --- a/source/screens/demo/layouts.njk +++ b/source/screens/demo/layouts.njk @@ -10,326 +10,326 @@ tags: {% block title %}Gestaltungen{% endblock %} {% block head %} - {{ super() }} + {{ super() }} {% endblock %} {% block main %} - -
- - {% include "hippie/partials/_body_nav.njk" %} -
-
-
-
-

Sammlung formatierter Elemente

-

Die Elemente werden fortlaufend komplexer

-
-
-

<h3>

-

Beispiele

- 
h3.txt_color_dark+p
-

Dunkle Überschrift

-

Mit normalem Textabsatz

-

<h4>

-

Beispiele

- 
a>h4
- -

Überschrift als Block-Verweis

- -

<section>

- 
section>div.float_space_left>img^p+p
-
-
Fahne von interaktionsweise
-

Vorname Name
Straße 1, 01234 Stadt

-

+49 (0)123 1337 0000
- name@domain.tld -

-
- 
div.space_left_fourth
-
-
-

Eingerückter Inhalt

-
-
- 
nav>ul>(li>a.a_button{punkt $})*4nav>ul>(li>a.a_button_border{stufe $})*4
-
- - -
- 
nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{typ $})*4
- -
- -
- 
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
-
-

Aufmacher

-

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.

- - -
- 
header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4
-
-
- -
-
- 
footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

- Show me a - - Sorted by - - - - Matching - - -

-
+ +
+ + {% include "hippie/partials/_body_nav.njk" %} +
+
+
+
+

Sammlung formatierter Elemente

+

Die Elemente werden fortlaufend komplexer

+
+
+

<h3>

+

Beispiele

+ 
h3.txt_color_dark+p
+

Dunkle Überschrift

+

Mit normalem Textabsatz

+

<h4>

+

Beispiele

+ 
a>h4
+ +

Überschrift als Block-Verweis

+ +

<section>

+ 
section>div.float_space_left>img^p+p
+
+
Fahne von interaktionsweise
+

Vorname Name
Straße 1, 01234 Stadt

+

+49 (0)123 1337 0000
+ name@domain.tld +

+
+ 
div.space_left_fourth
+
+
+

Eingerückter Inhalt

+
+
+ 
nav>ul>(li>a.a_button{punkt $})*4nav>ul>(li>a.a_button_border{stufe $})*4
+
+ + +
+ 
nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{typ $})*4
+ +
+ +
+ 
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
+
+

Aufmacher

+

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.

+ + +
+ 
header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4
+
+
+ +
+
+ 
footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+ Show me a + + Sorted by + + + + Matching + + +

+
-

Gruppierung

- 
ul.list_link>(li>a>img)*2+li>a
- +

Gruppierung

+ 
ul.list_link>(li>a>img)*2+li>a
+ -

Tabellen

- 
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
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 Ab / ZyNeu / Alt
- Name - URL - YYYY-MM-DD
-
Beschreibung
-
- Name - URL - YYYY-MM-DD
-
Beschreibung
-
-

Eingebettet

-
- - Background flag - - - - - - - - - - -
-
-
-
+

Tabellen

+ 
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
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Ab / ZyNeu / Alt
+ Name + URL + YYYY-MM-DD
+
Beschreibung
+
+ Name + URL + YYYY-MM-DD
+
Beschreibung
+
+

Eingebettet

+
+ + Background flag + + + + + + + + + + +
+
+
+
{% endblock %} {% block script %} - {{ super() }} - - {{ log.asset(true) }} - {{ log.log('Assets loaded.', assetsLoaded) }} - + {{ super() }} + + {{ log.asset(true) }} + {{ log.log('Assets loaded.', assetsLoaded) }} + {% endblock %} \ No newline at end of file diff --git a/source/templates/demo/_app.njk b/source/templates/demo/_app.njk index ca7a37c..1d948a2 100755 --- a/source/templates/demo/_app.njk +++ b/source/templates/demo/_app.njk @@ -1,31 +1,30 @@ - - + + - {% block head %} - {{ hippie.titlePrefix }} - {%- block title %}{% endblock %}{{ hippie.titlePostfix }} + {% block head %} + {{ hippie.titlePrefix }} + {%- block title %}{% endblock %}{{ hippie.titlePostfix }} - {% block meta %} - {% include "demo/partials/_meta.njk" %} - - {% endblock %} + {% block meta %} + {% include "demo/partials/_meta.njk" %} + + {% endblock %} - {% block links %} - {% endblock %} + {% block links %}{% endblock %} - {% endblock %} - + {% endblock %} + - - {% block body %}{% endblock %} + + {% block body %}{% endblock %} - {% block script %} - - - {% endblock %} + {% block script %} + + + {% endblock %} - + \ No newline at end of file diff --git a/source/templates/demo/_default.njk b/source/templates/demo/_default.njk index 3801125..c8aeed3 100644 --- a/source/templates/demo/_default.njk +++ b/source/templates/demo/_default.njk @@ -2,18 +2,18 @@ {% extends "hippie/_default.njk" %} {% block meta %} - {% include "demo/partials/_meta.njk" %} - + {% include "demo/partials/_meta.njk" %} + {% endblock %} {% block links %} - {{ super() }} - - {# #} - {# #} + {{ super() }} + + {# #} + {# #} {% endblock %} {% block script %} - {{ super() }} - + {{ super() }} + {% endblock %} \ No newline at end of file diff --git a/source/templates/demo/_main.njk b/source/templates/demo/_main.njk index 10bde89..c2797e8 100644 --- a/source/templates/demo/_main.njk +++ b/source/templates/demo/_main.njk @@ -2,20 +2,20 @@ {% extends "hippie/_main.njk" %} {% block meta %} - {% include "demo/partials/_meta.njk" %} - + {% include "demo/partials/_meta.njk" %} + {% endblock %} {% block links %} - {{ super() }} - {% if hippie.legacyMode %} - - - - - {% endif %} + {{ super() }} + {% if hippie.legacyMode %} + + + + + {% endif %} - - - -{% endblock %} + + + +{% endblock %} \ No newline at end of file diff --git a/source/templates/demo/_maintenance.njk b/source/templates/demo/_maintenance.njk index 539b432..da94505 100644 --- a/source/templates/demo/_maintenance.njk +++ b/source/templates/demo/_maintenance.njk @@ -2,11 +2,11 @@ {% extends "hippie/_maintenance.njk" %} {% block meta %} - {% include "demo/partials/_meta.njk" %} - + {% include "demo/partials/_meta.njk" %} + {% endblock %} {% block links %} - {{ super() }} - + {{ super() }} + {% endblock %} \ No newline at end of file From 4fcd7742a854a30c599e25086220e65ea2e95777 Mon Sep 17 00:00:00 2001 From: sthag Date: Wed, 18 Jun 2025 19:31:37 +0200 Subject: [PATCH 12/17] feat: Consolidate body navigation - Update html spec in components page - Add form components - Add JS for components which is not globally available - Move body navigation to main template - Reformat main template --- source/screens/demo/basics.njk | 26 +----- source/screens/demo/components.njk | 120 ++++++++++++++++++++++++--- source/screens/demo/index.njk | 5 +- source/screens/demo/introduction.njk | 16 +--- source/screens/demo/layouts.njk | 4 - source/templates/hippie/_main.njk | 92 +++++++++++--------- 6 files changed, 167 insertions(+), 96 deletions(-) diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk index 2d962aa..3df91dd 100644 --- a/source/screens/demo/basics.njk +++ b/source/screens/demo/basics.njk @@ -15,8 +15,6 @@ tags: {% block main %} - {% include "hippie/partials/_body_nav.njk" %} -
Dies ist einfach nur Text.
Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.
Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.

@@ -647,6 +645,7 @@ tags: nur lesbar gemacht werden oder mittels disabled gänzlich deaktiviert werden.

+ {# // TODO: Abstände, besonders margin generell überarbeiten #}

@@ -867,27 +866,4 @@ tags:
- -{% endblock %} - -{% block script %} - {{ super() }} - {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk index b4d27f5..443999b 100644 --- a/source/screens/demo/components.njk +++ b/source/screens/demo/components.njk @@ -15,10 +15,6 @@ tags: {% block main %} -
- - {% include "hippie/partials/_body_nav.njk" %} -
@@ -43,10 +39,10 @@ tags:

Übersicht aller Elemente

-

Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (www.w3.org/TR/2017/REC-html52-20171214/index.html#contents) verwendet.

+

Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (html.spec.whatwg.org/multipage/#toc-semantics) verwendet.

Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.

- 
article>h1+p{Elemente:}+pre+h4{Varianten}
+ 
article>h1+p{Elemente:}+pre+h2{<tag>}+h4{Varianten}

Bereiche

Elemente:

@@ -94,7 +90,7 @@ tags:

<table>

Varianten

table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3
- +
@@ -182,13 +178,117 @@ tags:
+
+

Formulare

+

Elemente:

+ 
// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend
+

<input>

+
+
+
+
+
+
+
+

Varianten

+
+
+ + + + Caps Lock is ON. +
+
+

<select>

+ +
{% endblock %} {% block script %} {{ super() }} - - {{ log.asset(true) }} - {{ log.log('Assets loaded.', assetsLoaded) }} + {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/index.njk b/source/screens/demo/index.njk index 02b2677..c50c516 100644 --- a/source/screens/demo/index.njk +++ b/source/screens/demo/index.njk @@ -74,12 +74,9 @@ tags: {{ super() }} {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/introduction.njk b/source/screens/demo/introduction.njk index 4fffb89..f1a9752 100644 --- a/source/screens/demo/introduction.njk +++ b/source/screens/demo/introduction.njk @@ -15,8 +15,6 @@ tags: {% block main %} - {% include "hippie/partials/_body_nav.njk" %} -
@@ -41,19 +39,9 @@ tags: 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')); + composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE') + composeMail('.general', 'name', 'domain', 'tld', '', '') - $(document).ready(function () { - logPerf('JQ document ready event fired.'); - composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE') - composeMail('.general', 'name', 'domain', 'tld', '', '') - }); - - $(document).scroll(function () { - scrollUi.check(); - }); logPerf('Application ready... not.'); {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk index 810c823..9672ea8 100644 --- a/source/screens/demo/layouts.njk +++ b/source/screens/demo/layouts.njk @@ -15,10 +15,6 @@ tags: {% block main %} -
- - {% include "hippie/partials/_body_nav.njk" %} -
diff --git a/source/templates/hippie/_main.njk b/source/templates/hippie/_main.njk index b7d305a..443b555 100644 --- a/source/templates/hippie/_main.njk +++ b/source/templates/hippie/_main.njk @@ -3,53 +3,67 @@ - - + + - {% block head %} - {{ hippie.titlePrefix }} - {%- block title %}{% endblock %}{{ hippie.titlePostfix }} + {% block head %} + {{ hippie.titlePrefix }} + {%- block title %}{% endblock %}{{ hippie.titlePostfix }} - {% block meta %} - {% include "hippie/partials/_head_meta.njk" %} - {% endblock %} + {% block meta %} + {% include "hippie/partials/_head_meta.njk" %} + {% endblock %} - {% include "hippie/partials/_head_script.njk" %} - {{ log.debug(hippie.debugMode, true) }} - {{ log.start() }} + {% include "hippie/partials/_head_script.njk" %} + {{ log.debug(hippie.debugMode, true) }} + {{ log.start() }} - {% block links %} - {% include "hippie/partials/_head_links.njk" %} - {% endblock %} + {% block links %} + {% include "hippie/partials/_head_links.njk" %} + {% endblock %} - {{ log.log('HEAD end :: Links parsed, starting to load.') }} - {% endblock %} - + {{ log.log('HEAD end :: Links parsed, starting to load.') }} + {% endblock %} + - - {{ log.log('BODY start') }} - {% include "hippie/partials/_body_hover.njk" %} -
- {% include "hippie/partials/_header.njk" %} + + {{ log.log('BODY start') }} + {% include "hippie/partials/_body_hover.njk" %} + {% include "hippie/partials/_body_nav.njk" %} +
+ {% include "hippie/partials/_header.njk" %} -
- {% block main %}{% endblock %} -
+
+ {% block main %}{% endblock %} +
- {% include "hippie/partials/_footer.njk" %} -
+ {% include "hippie/partials/_footer.njk" %} +
- {% block script %} - {{ log.log('BODY :: Loading script assets...') }} - {# #} - - {# // TODO: Remove dependecy to jQuery; at least maek it optional #} - - - - - {% endblock %} + {% block script %} + {{ log.log('BODY :: Loading script assets...') }} + {# #} + + {# // TODO: Remove dependecy to jQuery; at least maek it optional #} + + + + + + {% endblock %} + + {{ log.log('BODY end :: Page script might still be loading.') }} + \ No newline at end of file From 7f84235f0828cdb18f3db8fe514794e01eff186a Mon Sep 17 00:00:00 2001 From: sthag Date: Thu, 19 Jun 2025 11:07:54 +0200 Subject: [PATCH 13/17] fix: Clean up small things - Rename footer macro - Remove unnecessary div in components page - Rename file comments --- source/screens/demo/components.njk | 2 -- source/templates/hippie/_maintenance.njk | 2 +- .../templates/hippie/macros/footer-status.njk | 17 ----------------- .../templates/hippie/partials/_body_hover.njk | 2 +- source/templates/hippie/partials/_body_nav.njk | 2 +- .../templates/hippie/partials/_head_links.njk | 2 +- source/templates/hippie/partials/_head_meta.njk | 2 +- .../templates/hippie/partials/_head_script.njk | 2 +- 8 files changed, 6 insertions(+), 25 deletions(-) delete mode 100644 source/templates/hippie/macros/footer-status.njk diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk index 443999b..e6ad058 100644 --- a/source/screens/demo/components.njk +++ b/source/screens/demo/components.njk @@ -15,7 +15,6 @@ tags: {% block main %} -

Medienformat Abfragen

@@ -210,7 +209,6 @@ tags:
-
{% endblock %} {% block script %} diff --git a/source/templates/hippie/_maintenance.njk b/source/templates/hippie/_maintenance.njk index 975874b..2bbc5e6 100644 --- a/source/templates/hippie/_maintenance.njk +++ b/source/templates/hippie/_maintenance.njk @@ -1,5 +1,5 @@ -{% import "hippie/macros/footer-status.njk" as status %} +{% import "hippie/macros/_footer.njk" as status %} diff --git a/source/templates/hippie/macros/footer-status.njk b/source/templates/hippie/macros/footer-status.njk deleted file mode 100644 index 6668607..0000000 --- a/source/templates/hippie/macros/footer-status.njk +++ /dev/null @@ -1,17 +0,0 @@ -{% 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' %} -
-
Kontakt: - {{ email }} - * Server: - {{ app }}/{{ version }} - ({{ system }}) * Domain: - {{ domain }}
-
- {% else %} -
-

Platzhalter unten fixiert

-
- {% endif %} -{% endmacro %} \ No newline at end of file diff --git a/source/templates/hippie/partials/_body_hover.njk b/source/templates/hippie/partials/_body_hover.njk index b76167d..08311a3 100644 --- a/source/templates/hippie/partials/_body_hover.njk +++ b/source/templates/hippie/partials/_body_hover.njk @@ -1,2 +1,2 @@ - +
\ No newline at end of file diff --git a/source/templates/hippie/partials/_body_nav.njk b/source/templates/hippie/partials/_body_nav.njk index 58fed6d..632054f 100644 --- a/source/templates/hippie/partials/_body_nav.njk +++ b/source/templates/hippie/partials/_body_nav.njk @@ -1,4 +1,4 @@ - +
{% endmacro %} \ No newline at end of file diff --git a/source/templates/hippie/macros/_song.njk b/source/templates/hippie/macros/_song.njk index 79083c0..28c83d4 100644 --- a/source/templates/hippie/macros/_song.njk +++ b/source/templates/hippie/macros/_song.njk @@ -1,12 +1,12 @@ {% macro simple(index, data, content) %} -
-
-

{{ data.title }}

-
{{ data.releaseDate }}
-

{{ data.description }}

-
- {# 
{{ content }}
#} - {{ content | safe }} -
{{ index }}
-
+
+
+

{{ data.title }}

+
{{ data.releaseDate }}
+

{{ data.description }}

+
+ {# 
{{ content }}
#} + {{ content | safe }} +
{{ index }}
+
{% endmacro %} \ No newline at end of file diff --git a/source/templates/hippie/macros/_state.njk b/source/templates/hippie/macros/_state.njk index 3b3a333..63671d4 100644 --- a/source/templates/hippie/macros/_state.njk +++ b/source/templates/hippie/macros/_state.njk @@ -1,15 +1,14 @@ - -{% macro coord(id, text='X: #, Y: ##') %} - {{ text }} +{% macro coord(id, text = 'X: #, Y: ##') %} + {{ text }} {% endmacro %} -{% macro time(id, text='00:00:00', postfix=' Uhr') %} - {{ text }}{{ postfix }} +{% macro time(id, text = '00:00:00', postfix = ' Uhr') %} + {{ text }}{{ postfix }} {% endmacro %} {% macro date() %} - - Wochentag, - ##. - Monat - #### - + + Wochentag, + ##. + Monat + #### + {% endmacro %} \ No newline at end of file From 4d00d34d630d56d90edbedd14f30f06b023fb7ff Mon Sep 17 00:00:00 2001 From: sthag Date: Thu, 19 Jun 2025 12:36:56 +0200 Subject: [PATCH 16/17] feat: Add content for components page - New elements in sections part - Reindent --- source/screens/demo/basics.njk | 4 +- source/screens/demo/components.njk | 394 +++++++++++----------- source/screens/demo/layouts.njk | 515 ++++++++++++++--------------- 3 files changed, 461 insertions(+), 452 deletions(-) diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk index 3df91dd..d8cf064 100644 --- a/source/screens/demo/basics.njk +++ b/source/screens/demo/basics.njk @@ -15,7 +15,7 @@ tags: {% block main %} -
+
Dies ist einfach nur Text.
Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.
Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.

Es wirken nur die Eigenschaften des @@ -243,7 +243,7 @@ tags:

↥ (Zum Anfang des Abschnitts springen) - ⇫ + ⇫ (Zum Anfang der Seite springen)

+
+
+
+
+
+

Varianten

+
+
+ + + + Caps Lock is ON. +
+
+

<select>

+ - -
+ + +
{% endblock %} {% block script %} @@ -243,7 +265,7 @@ tags: .visibility = 'hidden'; } } - + function capsDetect() { const body = document.getElementsByTagName('body')[0]; const capsWarning = document.getElementById('error'); diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk index 9672ea8..ab80554 100644 --- a/source/screens/demo/layouts.njk +++ b/source/screens/demo/layouts.njk @@ -15,304 +15,291 @@ tags: {% block main %} -
-
-
-

Sammlung formatierter Elemente

-

Die Elemente werden fortlaufend komplexer

-
-
-

<h3>

-

Beispiele

- 
h3.txt_color_dark+p
-

Dunkle Überschrift

-

Mit normalem Textabsatz

-

<h4>

-

Beispiele

- 
a>h4
- -

Überschrift als Block-Verweis

- -

<section>

- 
section>div.float_space_left>img^p+p
-
-
Fahne von interaktionsweise
-

Vorname Name
Straße 1, 01234 Stadt

-

+49 (0)123 1337 0000
- name@domain.tld -

-
- 
div.space_left_fourth
-
-
-

Eingerückter Inhalt

-
-
- 
nav>ul>(li>a.a_button{punkt $})*4nav>ul>(li>a.a_button_border{stufe $})*4
-
- - -
- 
nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{typ $})*4
-
+

Tabellen

+ 
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
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Ab / ZyNeu / Alt
+ Name + URL + YYYY-MM-DD
+
Beschreibung
+
+ Name + URL + YYYY-MM-DD
+
Beschreibung
+
+

Eingebettet

+
+ + Background flag + + + + + + + + + + +
+ + {% endblock %} {% block script %} From 7950d23b145b4dffe5a11fbc7ea660f3456f919b Mon Sep 17 00:00:00 2001 From: sthag Date: Thu, 19 Jun 2025 14:20:56 +0200 Subject: [PATCH 17/17] feat: More content for components and layouts - Update hippie styles - Add demo images - New components content - New layout structure and content --- source/art/images/demo/bullet.gif | Bin 0 -> 67 bytes source/art/images/demo/letter.gif | Bin 0 -> 77 bytes source/screens/demo/components.njk | 83 ++++++++++++++++++++++++++--- source/screens/demo/layouts.njk | 55 ++++++++++++------- source/style/hippie-style | 2 +- 5 files changed, 112 insertions(+), 28 deletions(-) create mode 100644 source/art/images/demo/bullet.gif create mode 100644 source/art/images/demo/letter.gif diff --git a/source/art/images/demo/bullet.gif b/source/art/images/demo/bullet.gif new file mode 100644 index 0000000000000000000000000000000000000000..55a84abda4f23c8a666c7407220b5d6c3d29b233 GIT binary patch literal 67 zcmZ?wbhEHb6krfwXkcWJmzQT?U{L(Y!pOkD$e;sc1H}ax7?`Ab`d6NQo8K^JQeako VY}IPMlvx!MC0dqgMKLf~0|2-%5Q+c* literal 0 HcmV?d00001 diff --git a/source/art/images/demo/letter.gif b/source/art/images/demo/letter.gif new file mode 100644 index 0000000000000000000000000000000000000000..60aac08875a890ca2123c56ff6c0187c3a02f6ca GIT binary patch literal 77 zcmZ?wbhEHb6krfwXkcW30L7myKqe!D4u}hqVPI0}>0f#JEkEy!En%E@rYNp|)7o`I YR<3>C(^+cLPFXANM1GT&Wo57i0C18ONdN!< literal 0 HcmV?d00001 diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk index 87c7a3c..5890112 100644 --- a/source/screens/demo/components.njk +++ b/source/screens/demo/components.njk @@ -80,7 +80,17 @@ tags:
Überschrift 6

Mit Absatz innerhalb von <hgroup>.

+

<header>

+
Kopfbereich
+ 
header.header_page
+ 
header.header_txt>h1
+
+

Überschrift 1

+

Innerhalb eines <header>.

+

<footer>

+

Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.

+
Fußbereich
{{ footer.pinned() }}
@@ -90,24 +100,81 @@ tags:

Elemente:

// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div

<p>

+

Ein Absatz. Ein code Element innerhalb wird besonders behandelt.

Varianten

- 
p.txt_center
- 
p.txt_right
p.column_2
+

Spalten können angegeben werden.

p.column_3.column_line
+

Spalten können angegeben werden.

+

<address>

+
Anschrift, mit bestimmtem, ##### Format.

<hr>

+

Varianten

- 
hr.hr_hidden
- 
hr.hr_dotted
- 
hr.space_even_half
- 
hr.hr_dotted.space_even_fourth
+ 
hr.hr_hidden+hr.hr_dotted+hr.hr_double
+
+
+
+

<pre>

+ 
Vorformatierter Text.
+	erhält Umbrüche und Einrückung.
+
+ 
pre.pre_code>code*2
+ 
let variable = true;
+()(){}

<blockquote>

- 
blockquote>p+p.quote_source
+
Ein Zitat ist eingerückt.
+ 
blockquote.quote_mark>p+p.quote_source
+
+

Zitat mit automatischen Anführungszeichen

+

und Quellenangabe.

+
+

<dl>, <ol>, <ul>

+
+
Begriff
+
Definition
+
+
    +
  1. Eins
    2. +
  2. Zwei
    3. +
+
    +
  • Obst
    • +
  • Gemüse
    • +
+

Varianten

+ 
ul.list_basic.list_dash>li*2
+
    +
  • Mehr Abstand und
    • +
  • mit Unterstrichen.
    • +
+ 
ul.list_link>(li>a)*2
+

<figure>

figure>figcaption+{element}
+
+
Bezeichnung
+ Grafisches Element. +
+

<main>

+
Hauptbereich

<div>

- 
div.div_info>p

Varianten

+ 
div.div_info>p
+
+

Absatz in Informationsbox.

+
+ 
div.box_space>div.box_cube>span
+
+
Text
+
+ 
div.box_placeholder+hr+div.box_placeholder_bkg
+
+
+

Tabellen

diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk index ab80554..a45a817 100644 --- a/source/screens/demo/layouts.njk +++ b/source/screens/demo/layouts.njk @@ -21,19 +21,9 @@ tags:

Die Elemente werden fortlaufend komplexer

-

<h3>

-

Beispiele

- 
h3.txt_color_dark+p
-

Dunkle Überschrift

-

Mit normalem Textabsatz

-

<h4>

-

Beispiele

- 
a>h4
- -

Überschrift als Block-Verweis

- -

<section>

- 
section>div.float_space_left>img^p+p
+

Bereiche

+

section

+ 
section.overflow>div.float_space_left>img^p+p>br+a.lineLink
Fahne von interaktionsweise

Vorname Name
Straße 1, 01234 Stadt

@@ -41,13 +31,13 @@ tags: name@domain.tld

- 
div.space_left_fourth
+ 
div.space_left_fourth>(hr+p+hr)

Eingerückter Inhalt

- 
nav>ul>(li>a.a_button{punkt $})*4nav>ul>(li>a.a_button_border{stufe $})*4
+ 
div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)
- 
nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{typ $})*4
+ 
nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4
+ 
div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4
+

Show me a @@ -229,10 +221,34 @@ tags:

Gruppierung

+

p

+ 
p.txt_right+p.txt_center+p.txt_left
+

Rechts

+

Mittig

+

Links

+

h*

+ 
h3.txt_color_dark+p.txt_tiny
+

Dunkle Überschrift

+

Mit winzigem Textabsatz

+ 
a>h4
+ +

Überschrift als Block-Verweis

+ +

Überschrift 1

+

Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.

+

Überschrift 2

+

kann das ebenso.

+ +

hr

+ 
hr.space_even_half
+
+ 
hr.hr_dotted.space_even_fourth
+
+

ul

ul.list_link>(li>a>img)*2+li>a
  • - name@domain.tld + name@domain.tld
  • Work @@ -254,7 +270,7 @@ tags: - + Name URL @@ -269,7 +285,7 @@ tags: - + Name URL @@ -283,6 +299,7 @@ tags: +

    Eingebettet

    diff --git a/source/style/hippie-style b/source/style/hippie-style index d17f966..a1a4bd4 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit d17f9667943a2f525707b1dc77d2d9bf95814e71 +Subproject commit a1a4bd408bedaa11f5e1aacca630d0b1bbbe7aa2