profitlich-template-toolkit 0.1.0

package/components/menu-toggle/MenuToggle.js

@@ -0,0 +1,124 @@
+import './menu-toggle.scss';
+
+export class MenuToggle {
+    static #instance;
+    #menuButton;
+    #menu;
+    #menuLinkClass;
+    #menuItemClass;
+    #scrollbarWidth;
+    #shiftElement;
+    #y;
+    #bodyClickHandler;
+    #resizeHandler;
+    #escapeHandler;
+    isActive;
+
+    constructor(menuButtonId, menuId, menuLinkClass, menuItemClass, shiftElementId) {
+        this.#menuButton = document.getElementById(menuButtonId);
+        this.#menu = document.getElementById(menuId);
+        this.#menuLinkClass = menuLinkClass;
+        this.#menuItemClass = menuItemClass;
+        this.#shiftElement = shiftElementId ? document.getElementById(shiftElementId) : null;
+        this.#scrollbarWidth = 0;
+        this.isActive = false;
+        this.#y = 0;
+
+        this.#bodyClickHandler = this.#onBodyClick.bind(this);
+        this.#resizeHandler = this.#onResize.bind(this);
+        this.#escapeHandler = this.#onEscape.bind(this);
+
+        this.#menuButton.addEventListener('click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.#toggleMenu();
+        });
+
+        this.#menu.addEventListener('click', (event) => {
+            if (this.isActive && event.target.matches(this.#menuLinkClass)) {
+                this.#toggleMenu();
+            }
+        });
+    }
+
+    static getInstance(menuButtonId, menuId, menuLinkClass, menuItemClass, shiftElementId) {
+        if (!MenuToggle.#instance) {
+            if (!menuButtonId || !menuId || !menuLinkClass || !menuItemClass) {
+                throw new Error("MenuToggle muss beim ersten Aufruf mit menuButtonId, menuId, menuLinkClass und menuItemClass initialisiert werden.");
+            }
+            MenuToggle.#instance = new MenuToggle(menuButtonId, menuId, menuLinkClass, menuItemClass, shiftElementId);
+        }
+        return MenuToggle.#instance;
+    }
+
+    #toggleMenu() {
+        if (this.isActive) {
+            this.isActive = false;
+            document.body.removeEventListener('click', this.#bodyClickHandler);
+            window.removeEventListener('resize', this.#resizeHandler);
+            this.#setBodyAttribute('data-menu-active', 'false');
+            if (this.#shiftElement) {
+                this.#shiftElement.style.marginRight = '';
+                this.#shiftElement.style.width = '';
+            }
+            document.body.style.paddingRight = '';
+            document.body.style.top = '';
+            window.scrollTo(0, this.#y);
+            this.#toggleEscape(false);
+        } else {
+            this.isActive = true;
+            document.body.addEventListener('click', this.#bodyClickHandler);
+            window.addEventListener('resize', this.#resizeHandler);
+            this.#scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+            this.#y = window.scrollY;
+            this.#setBodyAttribute('data-menu-active', 'true');
+            document.body.style.paddingRight = `${this.#scrollbarWidth}px`;
+            document.body.style.top = `-${this.#y}px`;
+            if (this.#shiftElement) {
+                const marginOriginal = parseFloat(window.getComputedStyle(this.#menuButton).marginRight);
+                this.#shiftElement.style.marginRight = `${marginOriginal + this.#scrollbarWidth}px`;
+                this.#adjustShiftElementWidth();
+            }
+            this.#toggleEscape(true);
+        }
+        const event = new CustomEvent('eventMenuestatus', {
+            detail: { menueStatus: this.isActive }
+        });
+        document.dispatchEvent(event);
+    }
+
+    #adjustShiftElementWidth() {
+        const contentWidth = document.documentElement.clientWidth;
+        this.#shiftElement.style.width = `${contentWidth - this.#scrollbarWidth}px`;
+    }
+
+    #onBodyClick(event) {
+        if (this.isActive && !event.target.closest('.' + this.#menuItemClass)) {
+            this.#toggleMenu();
+        }
+    }
+
+    #onResize() {
+        if (this.#shiftElement) {
+            this.#adjustShiftElementWidth();
+        }
+    }
+
+    #setBodyAttribute(attr, value) {
+        document.body.setAttribute(attr, value);
+    }
+
+    #toggleEscape(status) {
+        if (status) {
+            document.addEventListener('keydown', this.#escapeHandler);
+        } else {
+            document.removeEventListener('keydown', this.#escapeHandler);
+        }
+    }
+
+    #onEscape(event) {
+        if (event.key === 'Escape') {
+            this.#toggleMenu();
+        }
+    }
+}

package/components/menu-toggle/menu-toggle.scss

@@ -0,0 +1,14 @@
+body {
+
+    &[data-menu-active="true"] {
+        position: fixed;
+        width: 100%;
+
+        // Bedeckt das Menü nur einen Teil der Seite, ist also ein Teil der Seite weiterhin zu sehen,
+        // soll die Maus Interaktionen ausserhalb des Menüs ignorieren
+        .main {
+            pointer-events: none;
+        }
+    }
+
+}

package/components/mux-player/MuxPlayer.js

@@ -0,0 +1,106 @@
+import '@mux/mux-player';
+import './mux-player.scss';
+
+export class MuxPlayer {
+    #lazyLoadObserver;
+    #playPauseObserver;
+
+    constructor() {
+        this.#lazyLoadObserver = new IntersectionObserver(this.#handleLazyLoad.bind(this));
+        this.#playPauseObserver = new IntersectionObserver(this.#handlePlayPause.bind(this));
+    }
+
+    observeLazyElements() {
+        document.querySelectorAll('.mux-player').forEach(el => {
+            this.#lazyLoadObserver.observe(el);
+        });
+    }
+
+    #handleLazyLoad(entries) {
+        for (const entry of entries) {
+            if (entry.isIntersecting) {
+                this.#lazyLoadObserver.unobserve(entry.target);
+                const container = entry.target;
+                const playbackId = container.dataset.playbackId;
+                const aspectRatio = container.dataset.aspectRatio || '16 / 9';
+                const autoplay = container.dataset.autoplay === "true";
+
+                const player = document.createElement('mux-player');
+                player.playbackId = playbackId;
+                player.streamType = 'on-demand';
+                player.playsInline = true;
+                player.style.aspectRatio = aspectRatio;
+
+                // Autoplay-Attribut am Player-Element setzen, damit es später gefunden werden kann
+                if (autoplay) {
+                    player.setAttribute('data-autoplay', 'true');
+                }
+
+                const wrapper = container.closest('[data-video-wrapper]');
+
+                // Wenn ein Wrapper gefunden wird, richte den MutationObserver ein
+                if (wrapper) {
+                    const visibilityObserver = new MutationObserver(() => {
+                        this.#handleVisibilityChange(player);
+                    });
+
+                    // Beobachte den gefundenen Wrapper
+                    visibilityObserver.observe(wrapper, { attributes: true, childList: true, subtree: true });
+
+                    // Container durch Player ersetzen BEVOR die Sichtbarkeitsprüfung
+                    container.replaceWith(player);
+
+                    // Führe eine initiale Prüfung durch, falls es schon sichtbar ist
+                    this.#handleVisibilityChange(player);
+                } else if (autoplay) {
+                    // Fallback für normale Autoplay-Videos ohne speziellen Wrapper
+                    player.muted = true;
+                    player.style.setProperty('--controls', 'none');
+                    container.replaceWith(player);
+
+                    player.addEventListener('loadeddata', () => {
+                        this.#playPauseObserver.observe(player);
+                    });
+                } else {
+                    // Für Videos ohne Autoplay
+                    container.replaceWith(player);
+                }
+            }
+        }
+    }
+
+    #handleVisibilityChange(player) {
+        // Prüfe direkt am Player, ob er durch CSS sichtbar ist
+        const isVisible = window.getComputedStyle(player).display !== 'none';
+
+        if (isVisible && player.hasAttribute('data-autoplay')) {
+            // Wenn der Player sichtbar ist und Autoplay haben soll
+            player.muted = true;
+            player.style.setProperty('--controls', 'none');
+
+            // Warte auf loadeddata bevor der IntersectionObserver aktiviert wird
+            if (player.readyState >= 2) { // HAVE_CURRENT_DATA oder höher
+                this.#playPauseObserver.observe(player);
+            } else {
+                player.addEventListener('loadeddata', () => {
+                    this.#playPauseObserver.observe(player);
+                }, { once: true });
+            }
+        } else if (!isVisible) {
+            // Wenn der Player unsichtbar wird, pausiere ihn und stoppe die Beobachtung
+            this.#playPauseObserver.unobserve(player);
+            player.pause();
+        }
+    }
+
+    #handlePlayPause(entries) {
+        for (const entry of entries) {
+            const player = entry.target;
+            if (entry.isIntersecting) {
+                player.play().catch(e => console.error("Player-Fehler:", e));
+            } else {
+                player.pause();
+            }
+        }
+    }
+}

package/components/mux-player/mux-player.scss

@@ -0,0 +1,3 @@
+mux-player {
+    display: block;
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "profitlich-template-toolkit",
+    "version": "0.1.0",
+    "description": "Shared SCSS layout system, JS utilities and components for profitlich template repos",
+    "type": "module",
+    "exports": {
+        "./scss/core/layout": "./scss/core/layout.scss",
+        "./scss/core/mediaqueries": "./scss/core/mediaqueries.scss",
+        "./scss/core/hamburger": "./scss/core/hamburger.scss",
+        "./utils/MediaQueries": "./utils/MediaQueries.js",
+        "./utils/Vh100": "./utils/Vh100.js",
+        "./utils/BodyScrolled": "./utils/BodyScrolled.js",
+        "./components/menu-toggle/MenuToggle": "./components/menu-toggle/MenuToggle.js",
+        "./components/mux-player/MuxPlayer": "./components/mux-player/MuxPlayer.js"
+    },
+    "files": [
+        "scss/",
+        "utils/",
+        "components/"
+    ],
+    "peerDependencies": {
+        "@mux/mux-player": ">=3.0.0"
+    },
+    "peerDependenciesMeta": {
+        "@mux/mux-player": {
+            "optional": true
+        }
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/profitlich-ch/profitlich-template-toolkit"
+    },
+    "license": "MIT"
+}

package/scss/core/hamburger.scss

@@ -0,0 +1,153 @@
+@mixin hamburger($hamburger-breite, $hamburger-hoehe, $hamburger-line-width, $hamburger-color, $hamburger-color-active) {
+
+    // Settings
+    // ==================================================
+    $hamburger-padding-x           : 15px !default;
+    $hamburger-padding-y           : 15px !default;
+    $hamburger-line-gap            : calc(($hamburger-hoehe - 3 * $hamburger-line-width) / 2) !default;
+    $hamburger-color               : #000 !default;
+    $hamburger-layer-border-radius : 0 !default;
+    $hamburger-hover-opacity       : 1 !default;
+    $hamburger-active-layer-color  : $hamburger-color-active !default;
+    $hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
+    $hamburger-animation-timing: 0.195s;
+    $hamburger-compression-speed: 0.12s;
+    $hamburger-turn-speed: $hamburger-animation-timing - $hamburger-compression-speed;
+
+    // To use CSS filters as the hover effect instead of opacity,
+    // set $hamburger-hover-use-filter as true and
+    // change the value of $hamburger-hover-filter accordingly.
+    $hamburger-hover-use-filter   : false !default;
+    $hamburger-hover-filter       : opacity(50%) !default;
+    $hamburger-active-hover-filter: $hamburger-hover-filter !default;
+
+
+    // padding: $hamburger-padding-y $hamburger-padding-x;
+
+
+    &:hover {
+        @if $hamburger-hover-use-filter==true {
+            filter: $hamburger-hover-filter;
+        }
+
+        @else {
+            opacity: $hamburger-hover-opacity;
+        }
+    }
+
+    body[data-menu-active='true'] & {
+        &:hover {
+            @if $hamburger-hover-use-filter==true {
+                filter: $hamburger-active-hover-filter;
+            }
+
+            @else {
+                opacity: $hamburger-active-hover-opacity;
+            }
+        }
+
+        .hamburger-inner,
+        .hamburger-inner::before,
+        .hamburger-inner::after {
+            background-color: $hamburger-active-layer-color;
+            transition: 0s $hamburger-compression-speed linear;
+        }
+    }
+
+    .hamburger-box {
+        width: $hamburger-breite;
+        height: calc($hamburger-line-width * 3 + $hamburger-line-gap * 2);
+        display: inline-block;
+        position: relative;
+    }
+
+    .hamburger-inner {
+        display: block;
+        top: 50%;
+        margin-top: calc($hamburger-line-width / -2);
+
+        &,
+        &::before,
+        &::after {
+            width: $hamburger-breite;
+            height: $hamburger-line-width;
+            background-color: $hamburger-color;
+            border-radius: $hamburger-layer-border-radius;
+            position: absolute;
+            transition-property: transform;
+            transition-duration: 0.15s;
+            transition-timing-function: ease;
+        }
+
+        &::before,
+        &::after {
+            content: "";
+            display: block;
+        }
+
+        &::before {
+            top: calc(($hamburger-line-gap + $hamburger-line-width) * -1);
+        }
+
+        &::after {
+            bottom: calc(($hamburger-line-gap + $hamburger-line-width) * -1);
+        }
+    }
+
+
+
+    // Aus Basis
+    display: block;
+    cursor: pointer;
+
+    transition-property: opacity, filter;
+    transition-duration: 0.15s;
+    transition-timing-function: linear;
+
+    // Normalize (<button>)
+    font: inherit;
+    color: inherit;
+    text-transform: none;
+    background-color: transparent;
+    border: 0;
+    margin: 0;
+    overflow: visible;
+    line-height: 0;
+
+    .hamburger-inner {
+        transition-duration: $hamburger-turn-speed;
+        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+        &::before {
+            transition: top $hamburger-turn-speed $hamburger-compression-speed ease,
+                opacity $hamburger-turn-speed ease;
+        }
+
+        &::after {
+            transition: bottom $hamburger-turn-speed $hamburger-compression-speed ease,
+                transform $hamburger-turn-speed cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        }
+    }
+
+    body[data-menu-active='true'] & {
+        .hamburger-inner {
+            transform: rotate(45deg);
+            transition-delay: $hamburger-compression-speed;
+            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+            &::before {
+                top: 0;
+                opacity: 0;
+                transition: top $hamburger-turn-speed ease,
+                    opacity $hamburger-turn-speed $hamburger-compression-speed ease;
+            }
+
+            &::after {
+                bottom: 0;
+                transform: rotate(-90deg);
+                transition: bottom $hamburger-turn-speed ease,
+                    transform $hamburger-turn-speed $hamburger-compression-speed cubic-bezier(0.215, 0.61, 0.355, 1);
+            }
+        }
+    }
+}

package/scss/core/layout.scss

@@ -0,0 +1,239 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:math";
+
+@use "config";
+
+// Media queries get the breakpoints
+// Breakpints get the layouts
+// Depending on the project, only a part of the layout names are used,
+// so there needs to be an intervention in the breakpoints to deliver a number even if a layout is not present.
+// Example: There are only the layouts smartphone, tablet and desktop.
+// Then tabletPortrait must deliver the value of tablet
+
+$tabletPortrait: null;
+@if map.get(config.$layouts, tabletPortrait) {
+    $tabletPortrait: tabletPortrait;
+// no tabletPortrait size is defined
+} @else {
+    @if map.get(config.$layouts, tablet) {
+        $tabletPortrait: tablet;
+    // neither tablet size is defined
+    } @else {
+        $tabletPortrait: desktop;
+    }
+}
+
+$bigFrom: null;
+@if map.get(config.$layouts, big) {
+    $bigFrom: big;
+} @else {
+    $bigFrom: 999999px;
+}
+
+$breakpointsVariables: (
+    smartphoneTo:       map.get(config.$breakpoints, $tabletPortrait) - 1px,
+    tabletPortraitFrom: map.get(config.$breakpoints, $tabletPortrait) + 0px,
+    tabletPortraitTo:   map.get(config.$breakpoints, tabletLandscape) - 1px,
+    tabletLandscapeFrom:map.get(config.$breakpoints, tabletLandscape) + 0px,
+    tabletLandscapeTo:  map.get(config.$breakpoints, desktop) - 1px,
+    desktopFrom:        map.get(config.$breakpoints, desktop) + 0px,
+    desktopTo:          map.get(config.$breakpoints, big) - 1px,
+    bigFrom:            map.get(config.$breakpoints, big) + 0px,
+);
+
+// Gibt es kein Layout big, soll die media query desktop keine max-width haben
+$mediaqueryDesktop: null;
+@if map.get(config.$layouts, big) {
+    $mediaqueryDesktop: (min-width: map.get($breakpointsVariables, desktopFrom), max-width: map.get($breakpointsVariables, desktopTo));
+} @else {
+    $mediaqueryDesktop: (min-width: map.get($breakpointsVariables, desktopFrom));
+}
+
+$mediaqueries: (
+	smartphone:         (max-width: map.get($breakpointsVariables, smartphoneTo)),
+	tablet:             (min-width: map.get($breakpointsVariables, tabletPortraitFrom), max-width: map.get($breakpointsVariables, tabletLandscapeTo)),
+	tabletFrom:         (min-width: map.get($breakpointsVariables, tabletPortraitFrom)),
+    tabletTo:           (max-width: map.get($breakpointsVariables, tabletLandscapeTo)),
+	tabletPortraitFrom: (min-width: map.get($breakpointsVariables, tabletPortraitFrom)),
+	tabletPortrait:     (min-width: map.get($breakpointsVariables, tabletPortraitFrom), max-width: map.get($breakpointsVariables, tabletPortraitTo)),
+	tabletPortraitTo:   (max-width: map.get($breakpointsVariables, tabletPortraitTo)),
+	tabletLandscapeFrom:(min-width: map.get($breakpointsVariables, tabletLandscapeFrom)),
+	tabletLandscape:    (min-width: map.get($breakpointsVariables, tabletLandscapeFrom), max-width: map.get($breakpointsVariables, tabletLandscapeTo)),
+	tabletLandscapeTo:  (max-width: map.get($breakpointsVariables, tabletLandscapeTo)),
+	desktopFrom:        (min-width: map.get($breakpointsVariables, desktopFrom)),
+	desktop:            $mediaqueryDesktop,
+	desktopTo:          (max-width: map.get($breakpointsVariables, desktopTo)),
+	big:                (min-width: map.get($breakpointsVariables, bigFrom)),
+);
+
+
+// Font
+@mixin font($layout, $fontSize, $lineHeight, $bold:'false') {
+
+    font-size: size($layout, $fontSize);
+    line-height: size($layout, $lineHeight);
+
+    @if ($bold != 'false') {
+        font-weight: $bold;
+    }
+
+}
+
+
+// columns
+// Calculates the width (as a fraction of 100%)
+// Per default the function assumes that the given space does not contain column gaps;
+// with the variable $columnGapsAddedBasis they can be specified.
+// $columnGapsAddedBasis is to be used when the space to be calculated contains additional column gaps outside the $columnsBasis.
+// $columnGapsAdditional is to be used when additionally to the $columns column gaps are to be added (e.g left and/or right).
+// $shift is for adding a value to the result, for example a margin
+// $inverse is for calculating the width as a negative number, for example for a negative shift in a stage system
+@function columns($layout, $columns, $columnsBasis, $columnGapsAddedBasis:0, $columnGapsAdditional:0, $margin:0, $shift:0, $invers:false) {
+    $columnGap: size($layout, map.get(config.$gutter, $layout) );
+    $margin: size($layout, $margin);
+    $shift: size($layout, $shift);
+    @if ( $invers == false ) {
+        $invers: 1;
+    } @else {
+        $invers: -1;
+    }
+
+    // available space
+    // minus column gaps within the space
+    // equals space for content
+    // divided by number of columns in space
+    // equals width of each column
+    // times number of desired columns
+    // equals width of desired columns
+    // plus column gaps between desired columns
+    // equals width of desired columns including gaps
+    // plus additional column gaps
+    @return calc(
+        (
+            (
+                // available space
+                100%
+                // all column gaps in the given space
+                - $margin - $columnGap * ($columnsBasis + $columnGapsAddedBasis - 1)
+            )
+            // number of columns in the given space
+            / $columnsBasis
+            // desired columns
+            * ($columns * $invers)
+            // columns gaps between desired columns plus additional column gaps
+            // inverse to get a negative value
+            + ($columnGap * ($columns - 1 + $columnGapsAdditional) * $invers)
+            // Shift
+            + ($shift * $invers)
+        )
+    );
+}
+
+
+
+// Size
+// converts a number to a size in px or vw
+// depending on the unit set for the layout
+// accepts single value or a list of values
+@function size($layout, $numbers) {
+    // Check whether second argument is a number or a list
+    @if (meta.type-of($numbers) == 'list') {
+        $result-list: (); // Empty list to store results
+
+        // Iterate over each element in the list
+        @each $number in $numbers {
+            // Test if the current element is a number
+            @if (meta.type-of($number) == 'number') {
+                // add calculated value to the result list
+                $result-list: list.append($result-list, _calculate-single-size($number, $layout));
+            } @else {
+                // Error if the current element is not a number
+                @error "Listenelement '#{$number}' übergeben an size() ist keine Zahl. Alle Elemente müssen Zahlen sein.";
+            }
+        }
+        @return $result-list; // Return the list of calculated sizes
+    } @else if (meta.type-of($numbers) == 'number') {
+        // If second argument is a single number, calculate and return the size
+        @return _calculate-single-size($numbers, $layout);
+    } @else {
+        // Error if the second argument is neither a number nor a list
+        @error "Das zweite Argument der Funktion size() muss eine Zahl oder eine Liste von Zahlen sein. Empfangen: #{type-of($numbers)} '#{$numbers}'.";
+    }
+}
+
+// Round a number to specified decimal places
+@function _decimal-round($number, $digits: 0) {
+    $n: math.pow(10, $digits);
+    @return math.div(math.round($number * $n), $n);
+}
+
+// Helper function to calculate a single size value (px or vw)
+// This function is used by the main size() function
+@function _calculate-single-size($number, $layout) {
+    // Get the width and unit type from the config
+    $width: map.get(config.$layouts, $layout);
+    $unit-type: map.get(config.$units, $layout);
+
+    // Error handling for missing width or unit type
+    @if ($width == null) {
+        @error "Layout '#{$layout}' ist nicht in 'config.$layouts' definiert.";
+    }
+    @if ($unit-type == null) {
+        @error "Der Einheitentyp für Layout '#{$layout}' ist nicht in 'config.$units' definiert.";
+    }
+
+
+    @if ($unit-type == 'px') {
+        @return $number * 1px;
+    } @else if ($unit-type == 'vw') {
+        @return _decimal-round(math.div($number, $width) * 100, 2) * 1vw;
+    } @else {
+        @error "Nicht unterstützter Einheitstyp '#{$unit-type}' für Layout '#{$layout}'. Nur 'px' oder 'vw' werden unterstützt.";
+    }
+}
+
+
+// Distance
+@mixin marginPadding($layout, $mode, $position, $top: 0, $right: 0, $bottom: 0, $left: 0) {
+
+    // @include mode($layout, padding/margin, all/top/right/bottom/left, 0, 0, 0, 0)
+
+    @if ( map.get(config.$units, $layout) == 'px' ) {
+        $top: $top + px;
+        $right: $right + px;
+        $bottom: $bottom + px;
+        $left: $left + px;
+    } @else {
+
+        @if meta.type-of($top) == 'number'{
+            $top: size($layout, $top);
+        }
+        @if meta.type-of($right) == 'number'{
+            $right: size($layout, $right);
+        }
+        @if meta.type-of($bottom) == 'number'{
+            $bottom: size($layout, $bottom);
+        }
+        @if meta.type-of($left) == 'number'{
+            $left: size($layout, $left);
+        }
+    }
+
+    @if $position == all {
+        #{$mode}: $top $right $bottom $left;
+    }
+    @if $position == top {
+        #{$mode}-top: $top;
+    }
+    @if $position == right {
+        #{$mode}-right: $right;
+    }
+    @if $position == bottom {
+        #{$mode}-bottom: $bottom;
+    }
+    @if $position == left {
+        #{$mode}-left: $left;
+    }
+}

package/scss/core/mediaqueries.scss

@@ -0,0 +1,42 @@
+@use "layout";
+
+@use "sass:map";
+@use "sass:list";
+
+// Zusammenlegen aller Meda Queries in eine
+// https://www.sitepoint.com/sass-mixin-media-merging
+
+@mixin mediaquery($mediaquery) {
+    // Hole die map $mediaquery aus der map $mediaqueries
+    $queries: map.get(layout.$mediaqueries, $mediaquery);
+
+    // Wenn es keine $mediaquery in der map gibt, gebe einen Fehler aus
+    @if not $queries {
+        @error "No value could be retrieved from `#{$mediaquery}`. "
+        + "Please make sure it is defined in `$mediaqueries` map.";
+    }
+
+    // Include the media mixin with $queries
+    @include media($queries) {
+        @content($mediaquery);
+    }
+}
+
+@mixin media($queries) {
+    // Erst wenn alle mediaqueries geschachtelt geschrieben sind,
+    // wird der @content ausgegeben
+    @if list.length($queries) == 0 {
+        @content;
+    } @else {
+        $first-key: list.nth(map.keys($queries), 1);
+
+        // Schreibt nur die mediaquery, nicht den Inhalt
+        @media ($first-key: map.get($queries, $first-key)) {
+            $queries: map.remove($queries, $first-key);
+
+            @include media($queries) {
+                @content;
+            }
+        }
+    }
+}

package/utils/BodyScrolled.js

@@ -0,0 +1,31 @@
+/**
+ * after scroll set body attribute data-scrolled to true
+ */
+
+export class BodyScrolled {
+    static #instance;
+
+    constructor() {
+        document.addEventListener('scroll', function setScrolled() {
+            document.body.setAttribute('data-body-scrolled', 'true');
+            this.removeEventListener('scroll', setScrolled);
+
+            // create event
+            let event = new CustomEvent('eventBodyScrolled', {
+                detail: {
+                    scrolled: true
+                }
+            });
+            // dispatch the event
+            window.dispatchEvent(event);
+        });
+
+    }
+
+    static getInstance() {
+        if (!BodyScrolled.#instance) {
+            BodyScrolled.#instance = new BodyScrolled();
+        }
+        return BodyScrolled.#instance;
+    }
+}

package/utils/MediaQueries.js

@@ -0,0 +1,56 @@
+/**Media queries
+ * https://kinsta.com/blog/javamediaqueryipt-media-query/
+ * option 3 on the linked page
+ */
+
+export class MediaQueries {
+    static #instance;
+    layout = 'desktop';
+    #breakpoints;
+
+    constructor(breakpoints) {
+        this.#breakpoints = breakpoints;
+        this.layout = 'desktop';
+        this.changeLayout();
+        this.#matchmedia();
+    }
+
+    static getInstance(breakpoints) {
+        if (!MediaQueries.#instance) {
+            if (!breakpoints) {
+                throw new Error("MediaQueries muss beim ersten Aufruf mit breakpoints initialisiert werden.");
+            }
+            MediaQueries.#instance = new MediaQueries(breakpoints);
+        }
+        return MediaQueries.#instance;
+    }
+
+    #matchmedia() {
+        for (let [layout, minSize] of Object.entries(this.#breakpoints)) {
+            if (minSize) {
+                var matchmedia = window.matchMedia('(min-width: ' + minSize + 'px)');
+                matchmedia.addEventListener('change', (e) => this.changeLayout());
+            }
+        }
+    }
+
+    // media query handler function
+    changeLayout() {
+        for (let [layout, minSize] of Object.entries(this.#breakpoints)) {
+            var matchmedia = window.matchMedia('(min-width: ' + minSize + 'px)');
+            if (!matchmedia || matchmedia.matches) {
+                this.layout = layout;
+            }
+        }
+        document.body.setAttribute('data-layout', this.layout);
+
+        // create event
+        let event = new CustomEvent('eventLayoutchange', {
+            detail: {
+                layout: this.layout
+            }
+        });
+        // dispatch the event
+        window.dispatchEvent(event);
+    }
+}

package/utils/Vh100.js

@@ -0,0 +1,31 @@
+/**
+ * 100vh problem
+ * https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+ */
+
+export class Vh100 {
+    static #instance;
+    vh = 0;
+
+    constructor() {
+        this.#calculate();
+        // We listen to the resize event
+        window.addEventListener('resize', () => {
+            this.#calculate();
+        });
+    }
+
+    #calculate() {
+        // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
+        this.vh = window.innerHeight * 0.01;
+        // Then we set the value in the --vh custom property to the root of the document
+        document.documentElement.style.setProperty('--vh', `${this.vh}px`);
+    }
+
+    static getInstance() {
+        if (!Vh100.#instance) {
+            Vh100.#instance = new Vh100();
+        }
+        return Vh100.#instance;
+    }
+}