diff --git a/TODO.md b/TODO.md index 01e9e26..b055503 100644 --- a/TODO.md +++ b/TODO.md @@ -21,10 +21,6 @@ - Move other things - Prevent styles to be global -# JS - -- Use delegation for action attributes like: https://javascript.info/event-delegation#delegation-example-actions-in-markup - # Content - *Intro* diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index d5f077f..81d2494 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -523,22 +523,6 @@ function capitalizeFirstLetter(text) { return text.charAt(0).toUpperCase() + text.slice(1); } -function mapRange(value, inMin, inMax, outMin, outMax, reverse = false, clamp = false) { - let min = outMin; - let max = outMax; - - if (reverse) { - [min, max] = [max, min]; - } - - const mapped = (value - inMin) * (max - min) / (inMax - inMin) + min; - - if (clamp) { - return Math.max(Math.min(min, max), Math.min(Math.max(min, max), mapped)); - } - return mapped; -} - // CONCEPTS // NOTE: Benutzt private Zuweisungen diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid index a300a21..6d190ec 100644 --- a/source/screens/demo/basics.liquid +++ b/source/screens/demo/basics.liquid @@ -495,7 +495,7 @@ tags: 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 😉.

+

Bei spiel zum markieren 😉.

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

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

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index 403926c..a4bd20d 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -8,453 +8,290 @@ tags: {% block body %}
- - + +
-
+
+
+ + +
+
{% endblock %} {% block script %} - - - - {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid index 8a9c65a..d8700cd 100644 --- a/source/screens/demo/examples/ui/windows.liquid +++ b/source/screens/demo/examples/ui/windows.liquid @@ -50,8 +50,9 @@ tags: {% endblock %} {%- block script %} -{{ block.super -}} - +{% comment %}{% endcomment %} + + +{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%} {% endblock %} \ No newline at end of file diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss index 0965587..4caa66e 100644 --- a/source/style/modules/_clock.scss +++ b/source/style/modules/_clock.scss @@ -1,12 +1,18 @@ @use "../hippie-style/hippie"; -@use "sass:map"; +:root { + --clock-color-yellow: rgb(250, 216, 3); + --clock-color-orange: rgb(242, 175, 19); + --clock-color-pink: rgb(211, 10, 81); + --clock-color-purple: rgb(142, 31, 104); + --clock-color-blue: rgb(39, 63, 139); + --clock-color-pblue: rgb(60, 87, 154); + --clock-color-lblue: rgb(183, 224, 240); + --clock-color-lcyan: rgb(107, 199, 217); + --clock-color-cyan: rgb(82, 190, 209); +} .body_clock { - header { - z-index: map.get(hippie.$z-indexes, "content-top"); - } - main { display: flex; flex-flow: column nowrap; @@ -16,4 +22,18 @@ width: 100%; overflow: hidden; } + + .wrap { + position: relative; + } + + canvas { + position: absolute; + top: 0; + left: 0; + } + + p { + text-align: center; + } } \ No newline at end of file diff --git a/source/templates/hippie/default.liquid b/source/templates/hippie/default.liquid index b8cdbfd..4cb653e 100644 --- a/source/templates/hippie/default.liquid +++ b/source/templates/hippie/default.liquid @@ -29,7 +29,7 @@ {%- block body %}{% endblock -%} {%- block script %}{% endblock -%} diff --git a/source/templates/hippie/full.liquid b/source/templates/hippie/full.liquid index d445469..5b22b17 100644 --- a/source/templates/hippie/full.liquid +++ b/source/templates/hippie/full.liquid @@ -37,12 +37,9 @@ {%- block body %}{% endblock -%} {% render 'hippie/partials/log-log' with 'BODY :: Loading script assets...' as msg -%} {%- block script %}{% endblock -%} -{% render 'hippie/partials/log-assets', state: true -%} -{% render 'hippie/partials/log-log', msg: 'BODY :: Assets loaded, running page specific script...', arg: true -%} {% render 'hippie/partials/log-log' with 'BODY end :: Page script might still be loading.' as msg -%} -{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%} \ No newline at end of file diff --git a/source/templates/hippie/page.liquid b/source/templates/hippie/page.liquid index dd6e6ed..b6edd40 100644 --- a/source/templates/hippie/page.liquid +++ b/source/templates/hippie/page.liquid @@ -59,4 +59,4 @@ logPerf('EVENT :: jQuery \'ready\' event fired.'); }); -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/source/templates/hippie/simple.liquid b/source/templates/hippie/simple.liquid index b888886..b711fe6 100644 --- a/source/templates/hippie/simple.liquid +++ b/source/templates/hippie/simple.liquid @@ -7,3 +7,9 @@ {{ block.super -}} {% endblock %} + +{% block script %} + + + +{% endblock %} \ No newline at end of file