From d221819e31c364b20a63ac763010c6a569655ad4 Mon Sep 17 00:00:00 2001
From: Sven Ullmann <kontakt@sumedia-webdesign.de>
Date: Sun, 20 Jul 2025 03:14:41 +0200
Subject: [PATCH] fix

---
 lib/_defaults.scss        |  30 +++++-----
 lib/_theme.scss           |   1 +
 mixin/_layout.scss        | 120 ++++++++++++++++++++++++--------------
 theme/sumedia/_theme.scss |  31 +++++-----
 theme/vineae/_theme.scss  |  11 +++-
 5 files changed, 119 insertions(+), 74 deletions(-)

diff --git a/lib/_defaults.scss b/lib/_defaults.scss
index 5c0f53d..2e13ca6 100644
--- a/lib/_defaults.scss
+++ b/lib/_defaults.scss
@@ -2,6 +2,14 @@
   box-sizing: border-box;
 }
 
+.layout-row {
+  @include layout(row);
+}
+
+.layout-column {
+  @include layout(column);
+}
+
 html {
   height: 100vh;
 }
@@ -14,18 +22,14 @@ body {
   height: 100vh;
 }
 
-.section {
-  flex: 0 0 auto;
+.container {
+  margin: 0 auto;
+  width: 100%;
 
-  & > .container {
-    margin: 0 auto;
-    width: 100%;
-
-    @include breakpoint('screen', 'xs') { max-width: 100vw; }
-    @include breakpoint('screen', 's') { max-width: 100vw; }
-    @include breakpoint('screen', 'm') { max-width: 95vw; }
-    @include breakpoint('screen', 'l') { max-width: 90vw; }
-    @include breakpoint('screen', 'xl') { max-width: rem(1400); }
-    @include breakpoint('screen', 'xxl') { max-width: rem(1600); }
-  }
+  @include breakpoint('screen', 'xs') { max-width: 100vw; }
+  @include breakpoint('screen', 's') { max-width: 100vw; }
+  @include breakpoint('screen', 'm') { max-width: 95vw; }
+  @include breakpoint('screen', 'l') { max-width: 90vw; }
+  @include breakpoint('screen', 'xl') { max-width: rem(1400); }
+  @include breakpoint('screen', 'xxl') { max-width: rem(1600); }
 }
diff --git a/lib/_theme.scss b/lib/_theme.scss
index 919cb37..3e4a194 100644
--- a/lib/_theme.scss
+++ b/lib/_theme.scss
@@ -1,3 +1,4 @@
 body {
   background-color: var(--bg-color);
+  color: var(--fg-color);
 }
\ No newline at end of file
diff --git a/mixin/_layout.scss b/mixin/_layout.scss
index 8485c5e..bedd672 100644
--- a/mixin/_layout.scss
+++ b/mixin/_layout.scss
@@ -3,12 +3,20 @@
 
 /*
   @include layout(column, [
-    ("m" "full" ((0 0) (0 0) (1 1) (0 0)))
-  ]);
+    ("m" "full" (
+      ((0 0) (0 0) (1 1) (0 0)) (0 50%)
+    ),
+    (0 "m" (
+      ((0 0)) (100% 100%)
+    )
+  ], (1rem 1rem));
 
   @include layout($flex-direction, [
-    ($bpMinWidth $bpMaxWidth ((flex:), ...)))
-  ]);
+    ($bpMinWidth $bpMaxWidth (
+      ((flex:), ...))
+      ((minmax:))
+    )
+  ], (gapRow gapColumn);
 */
 @mixin layout($direction, $bpColumns: [], $gap: (0 0)) {
   display: flex;
@@ -27,62 +35,84 @@
   row-gap: $rowGap;
 
   & > * {
-    flex: 1 0 auto;
+    flex: 0 0 auto;
   }
 
   @if list.length($bpColumns) > 0 {
     @for $bpIndex from 1 through list.length($bpColumns) {
       $bp: list.nth($bpColumns, $bpIndex);
       @include breakpoint('screen', list.nth($bp, 1), list.nth($bp, 2)) {
-        $columns: list.nth($bp, 3);
-        @for $i from 1 through list.length($columns) {
 
-          $minmax: list.nth($columns, $i);
-          $min: list.nth($minmax, 1);
-          $max: $min;
-          @if list.length($minmax) == 2 {
+        @if list.length($bp) >= 3 {
+          $flex: list.nth($bp, 3);
+          @for $i from 1 through list.length($flex) {
+            $flexGrowShrink: list.nth($flex, $i);
+            $grow: 0;
+            $shrink: 0;
+            @if list.length($flexGrowShrink) >= 1 {
+              $grow: list.nth($flexGrowShrink, 1);
+            }
+            @if list.length($flexGrowShrink) == 2 {
+              $shrink: list.nth($flexGrowShrink, 2);
+            }
+            $length: list.length($flex);
+            $childs: $length + 'n+' + $i;
+
+            & > *:nth-child(#{$childs}) {
+              flex: $grow $shrink auto;
+            }
+          }
+        }
+
+        @if list.length($bp) == 4 {
+          $columns: list.nth($bp, 4);
+          @for $i from 1 through list.length($columns) {
+            $minmax: list.nth($columns, $i);
+            $min: list.nth($minmax, 1);
+            $max: $min;
+            @if list.length($minmax) == 2 {
               $max: list.nth($minmax, 2);
-          }
-          $length: list.length($columns);
-          $childs: $length + 'n+' + $i;
+            }
+            $length: list.length($columns);
+            $childs: $length + 'n+' + $i;
 
-          @if math.unit($min) != "" {
-            @if $direction == 'row' {
-              @if $rowGap > 0 {
-                $min: calc(#{$min} - #{math.div($rowGap, list.length($columns) - 1)});
+            @if math.unit($min) != "" {
+              @if $direction == 'row' {
+                @if $rowGap > 0 {
+                  $min: calc(#{$min} - (#{$rowGap} / #{$length}));
+                }
+              }
+              @if $direction == 'column' {
+                @if $columnGap > 0 {
+                  $min: calc(#{$min} - (#{$columnGap} / #{$length}));
+                }
               }
             }
-            @if $direction == 'column' {
-              @if $columnGap > 0 {
-                $min: calc(#{$min} - #{math.div($columnGap, list.length($columns) - 1)});
-              }
-            }
-          }
 
-          @if math.unit($max) != "" {
-            @if $direction == 'row' {
-              @if $rowGap > 0 {
-                $max: calc(#{$max} - #{math.div($rowGap, list.length($columns) - 1)});
+            @if math.unit($max) != "" {
+              @if $direction == 'row' {
+                @if $rowGap > 0 {
+                  $max: calc(#{$max} - (#{$rowGap} / #{$length}));
+                }
+              }
+              @if $direction == 'column' {
+                @if $columnGap > 0 {
+                  $max: calc(#{$max} - (#{$columnGap} / #{$length}));
+                }
               }
             }
-            @if $direction == 'column' {
-              @if $columnGap > 0 {
-                $max: calc(#{$max} - #{math.div($columnGap, list.length($columns) - 1)});
-              }
-            }
-          }
 
-          & > *:nth-child(#{$childs}) {
-            flex: $max $min auto;
-            @if $direction == 'row' and $min != 0 {
-              min-width: $min;
-            } @else if $min > 0 {
-              min-height: $min;
-            }
-            @if $direction == 'row' and $max != 0 {
-              max-width: $max;
-            } @else if $max > 0 {
-              max-height: $max;
+            & > *:nth-child(#{$childs}) {
+              @if $direction == 'row' and $min != 0 {
+                min-width: $min;
+              } @else if $min > 0 {
+                min-height: $min;
+              }
+              @if $direction == 'row' and $max != 0 {
+                max-width: $max;
+              } @else if $max > 0 {
+                max-height: $max;
+              }
             }
           }
         }
diff --git a/theme/sumedia/_theme.scss b/theme/sumedia/_theme.scss
index 25e3677..0cfca9a 100644
--- a/theme/sumedia/_theme.scss
+++ b/theme/sumedia/_theme.scss
@@ -1,28 +1,33 @@
 :root {
   --primary-color: #333;
   --primary-color-ligher: #444;
+  --primary-color-lighest: #555;
   --primary-color-darker: #252525;
+  --primary-color-darkest: #111;
   --secondary-color: #da0;
-  --secondary-color-lighter: #db0;
-  --secondary-color-darker: #c90;
+  --secondary-color-lighter: #c90;
+  --secondary-color-lightest: #fc0;
+  --secondary-color-darker: #960;
+  --secondary-color-darkest: #860;
   --tertiary-color: #460;
   --tertiary-color-ligher: #680;
+  --tertiary-color-lighest: #8a0;
   --tertiary-color-darker: #340;
+  --tertiary-color-darkest: #230;
   --quarternary-color: #146;
   --quarternary-color-lighter: #257;
+  --quarternary-color-lightest: #2368;
   --quarternary-color-darker: #035;
-  --bg-color: #fff;
-  --bg-color-inverted: #333;
-  --fg-color: #222;
-  --fg-color-inverted: #f5f5f5;
-  --link-color: #246;
-  --link-color-inverted: #da0;
-  --border-color: #222;
-  --border-color-inverted: #ccc;
+  --quarternary-color-darkest: #024;
+  --bg-color: #222;
+  --bg-color-inverted: #ccc;
+  --fg-color: #f0f0f0;
+  --fg-color-inverted: #212121;
+  --link-color: #da0;
+  --link-color-inverted: #246;
+  --border-color: #111;
+  --border-color-inverted: #aaa;
   --shadow-color: #333;
-  --primary-font: $primaryFont;
-  --heading-font: $headingFont;
-  --icon-font: $iconFont;
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/theme/vineae/_theme.scss b/theme/vineae/_theme.scss
index fddc50a..a200125 100644
--- a/theme/vineae/_theme.scss
+++ b/theme/vineae/_theme.scss
@@ -1,16 +1,24 @@
 :root {
   --primary-color: #333;
   --primary-color-ligher: #444;
+  --primary-color-lighest: #555;
   --primary-color-darker: #252525;
+  --primary-color-darkest: #111;
   --secondary-color: #da0;
   --secondary-color-lighter: #c90;
+  --secondary-color-lightest: #fc0;
   --secondary-color-darker: #960;
+  --secondary-color-darkest: #860;
   --tertiary-color: #460;
   --tertiary-color-ligher: #680;
+  --tertiary-color-lighest: #8a0;
   --tertiary-color-darker: #340;
+  --tertiary-color-darkest: #230;
   --quarternary-color: #146;
   --quarternary-color-lighter: #257;
+  --quarternary-color-lightest: #2368;
   --quarternary-color-darker: #035;
+  --quarternary-color-darkest: #024;
   --bg-color: #222;
   --bg-color-inverted: #ccc;
   --fg-color: #f0f0f0;
@@ -20,9 +28,6 @@
   --border-color: #111;
   --border-color-inverted: #aaa;
   --shadow-color: #333;
-    --primary-font: $primaryFont;
-    --heading-font: $headingFont;
-    --icon-font: $iconFont;
 }
 
 @media (prefers-color-scheme: dark) {