@profitlich/template-toolkit 3.0.1 → 3.1.0

package/dev/toolbar/toolbar.scss

@@ -17,7 +17,7 @@ $color--dev-grid-center: rgba(0, 0, 0, 0.2);
         // the grid is made through repition
         // 'important' because background settings are more specific than the grid settings
         background-size: calc((100% - ($columns * $gutter)) * calc(1 / $columns) + $gutter) 1px !important;
-        margin: 0 ($margin-right - calc($gutter / 2)) 0 ($margin-left - calc($gutter / 2));
+        margin: 0 calc($margin-right - calc($gutter / 2)) 0 calc($margin-left - calc($gutter / 2));
         // The grid is calculated starting from the middle
         // Thats why its necessary to add the half of the column gap to the left and right side
         width: calc(100% - $margin-right + calc($gutter / 2) - $margin-left + calc($gutter / 2));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@profitlich/template-toolkit",
-    "version": "3.0.1",
+    "version": "3.1.0",
     "description": "Shared SCSS layout system, JS utilities, components and build scripts for profitlich template repos",
     "type": "module",
     "exports": {
@@ -16,6 +16,7 @@
         "./utils/MailAdresses": "./utils/MailAdresses.js",
         "./utils/MediaQueries": "./utils/MediaQueries.js",
         "./utils/Vh100": "./utils/Vh100.js",
+        "./utils/VwBody": "./utils/VwBody.js",
         "./utils/ImagesLoaded": "./utils/images-loaded/ImagesLoaded.js",
         "./scripts/copy-files": "./scripts/copy-files.js",
         "./scripts/deploy": "./scripts/deploy.js",

package/scss/core/layout.scss

@@ -4,6 +4,18 @@
 @use "sass:meta";
 @use "sass:math";
 
+// Liest das optionale Top-Level Feld `vwBasis` aus der Konsumenten-config.
+// Default 'viewport' = bisheriges Verhalten (raw vw).
+// 'body' = calc(var(--vw-body, 1vw) * X) — skaliert mit scrollbar-freier Body-Breite.
+@function _vw-basis() {
+    $vars: meta.module-variables('config');
+    $value: map.get($vars, 'vwBasis');
+    @if $value {
+        @return $value;
+    }
+    @return 'viewport';
+}
+
 // Media queries get the breakpoints
 // Breakpints get the layouts
 // Depending on the project, only a part of the layout names are used,
@@ -187,7 +199,12 @@ $mediaqueries: (
     @if ($unit-type == 'px') {
         @return $number * 1px;
     } @else if ($unit-type == 'vw') {
-        @return _decimal-round(math.div($number, $width) * 100, 2) * 1vw;
+        $factor: math.div($number, $width) * 100;
+        @if (_vw-basis() == 'body') {
+            @return calc(var(--vw-body, 1vw) * #{$factor});
+        } @else {
+            @return _decimal-round($factor, 2) * 1vw;
+        }
     } @else {
         @error "Nicht unterstützter Einheitstyp '#{$unit-type}' für Layout '#{$layout}'. Nur 'px' oder 'vw' werden unterstützt.";
     }

package/utils/VwBody.js

@@ -0,0 +1,27 @@
+/**
+ * Setzt --vw-body als 1% der scrollbar-freien Body-Breite.
+ * Wird benötigt, wenn config.json vwBasis: "body" gesetzt hat.
+ */
+export class VwBody {
+    static #instance;
+    vw = 0;
+
+    constructor() {
+        this.#calculate();
+        window.addEventListener('resize', () => {
+            this.#calculate();
+        });
+    }
+
+    #calculate() {
+        this.vw = document.documentElement.clientWidth * 0.01;
+        document.documentElement.style.setProperty('--vw-body', `${this.vw}px`);
+    }
+
+    static getInstance() {
+        if (!VwBody.#instance) {
+            VwBody.#instance = new VwBody();
+        }
+        return VwBody.#instance;
+    }
+}