mypgs 1.1.5 → 1.3.3

package/assets/scss/layout/_pageShell.scss

@@ -1,68 +1,43 @@
 //# pageShell
+$aside-size: 400px;
+$content-size: 500px;
+$pageShell-test-gap: 4rem;
+
+@mixin pageShell-aside-flow() {
+    position: relative;
+    top: auto;
+    max-height: none;
+    overflow: visible;
+    scrollbar-gutter: auto;
+    width: 100%;
+    min-width: 100%;
+}
 
 [pgs~="pageShell"] {
-    --pageShell-aside-left-width: 400px;
-    --pageShell-aside-right-width: 400px;
-    --pageShell-aside-width-total: 0px;
-    --pageShell-content-min-width: 500px;
-    --pageShell-content-max-width: var(--page-width);
+    --pageShell-aside-sticky-top: 0;
+    --pageShell-asideLeft-width: #{$aside-size};
+    --pageShell-asideRight-width: #{$aside-size};
+    --pageShell-content-width: 500px;
     --pageShell-gap: var(--gap-elements);
-    --pageShell-aside-sticky-top: 10svh;
-    --pageShell-aside-sticky-bottom: var(--pageShell-gap);
-    --pageShell-aside-count: 0;
-    --pageShell-gap-count: 0;
-    --pageShell-max-width: calc(
-        var(--pageShell-content-max-width) +
-        var(--pageShell-aside-width-total) +
-        (var(--pageShell-gap) * var(--pageShell-gap-count))
-    );
-
-    display: grid;
-    grid-template-columns: minmax(0, var(--pageShell-content-max-width));
-    grid-template-areas: "content";
+    display: flex;
+    flex-wrap: wrap;
     gap: var(--pageShell-gap);
-    padding-inline: var(--padding-page);
     margin-inline: auto;
     align-items: start;
     justify-content: center;
     width: 100%;
-    max-width: calc(var(--pageShell-max-width) + (var(--padding-page) * 2));
-
-    &:has(> [pgs~="pageShell-asideLeft"]) {
-        --pageShell-aside-width-total: var(--pageShell-aside-left-width);
-        --pageShell-aside-count: 1;
-        --pageShell-gap-count: 1;
-        grid-template-columns:
-            var(--pageShell-aside-left-width)
-            minmax(var(--pageShell-content-min-width), var(--pageShell-content-max-width));
-        grid-template-areas: "aside-left content";
-    }
-
-    &:has(> [pgs~="pageShell-asideRight"]) {
-        --pageShell-aside-width-total: var(--pageShell-aside-right-width);
-        --pageShell-aside-count: 1;
-        --pageShell-gap-count: 1;
-        grid-template-columns:
-            minmax(var(--pageShell-content-min-width), var(--pageShell-content-max-width))
-            var(--pageShell-aside-right-width);
-        grid-template-areas: "content aside-right";
-    }
+    max-width: calc(var(--page-width) + (var(--padding-page) * 2));
+    padding-bottom: var(--page-top);
+    padding-inline: var(--padding-page);
+    container-type: inline-size;
 
-    &:has(> [pgs~="pageShell-asideLeft"]):has(> [pgs~="pageShell-asideRight"]) {
-        --pageShell-aside-width-total: calc(var(--pageShell-aside-left-width) + var(--pageShell-aside-right-width));
-        --pageShell-aside-count: 2;
-        --pageShell-gap-count: 2;
-        grid-template-columns:
-            var(--pageShell-aside-left-width)
-            minmax(var(--pageShell-content-min-width), var(--pageShell-content-max-width))
-            var(--pageShell-aside-right-width);
-        grid-template-areas: "aside-left content aside-right";
-    }
-    
     [pgs~="pageShell-content"] {
         grid-area: content;
-        width: 100%;
-        min-width: 0;
+        flex: 999 1 var(--pageShell-content-width);
+        min-width: min(100%, var(--pageShell-content-width));
+        width: min(100%, var(--page-width));
+        max-width: var(--page-width);
+        padding-top: var(--page-top);
     }
 
     [pgs~="pageShell-asideLeft"],
@@ -73,11 +48,12 @@
         position: sticky;
         top: var(--pageShell-aside-sticky-top);
         width: 100%;
-        max-height: calc(100svh - var(--pageShell-aside-sticky-top) - var(--pageShell-aside-sticky-bottom));
+        max-height: 100svh;
         overflow-y: auto;
         overscroll-behavior: contain;
         scrollbar-gutter: stable;
         scrollbar-width: none;
+        padding-top: var(--page-top);
 
         &::-webkit-scrollbar {
             display: none;
@@ -86,86 +62,104 @@
         >* {
             width: 100%;
         }
+
+        &:is([pgs~="pageShell-asideLeft"]) {
+            grid-area: asideLeft;
+            flex: 1 1 var(--pageShell-asideLeft-width);
+            min-width: min(100%, var(--pageShell-asideLeft-width));
+            max-width: var(--pageShell-asideLeft-width);
+        }
+
+        &:is([pgs~="pageShell-asideRight"]) {
+            grid-area: asideRight;
+            flex: 1 1 var(--pageShell-asideRight-width);
+            min-width: min(100%, var(--pageShell-asideRight-width));
+            max-width: var(--pageShell-asideRight-width);
+        }
     }
 
+    &:has(> [pgs~="pageShell-asideLeft"]) {
+        max-width: calc(var(--page-width) + var(--pageShell-asideLeft-width) + var(--pageShell-gap) + (var(--padding-page) * 2));
+    }
 
-    [pgs~="pageShell-asideLeft"] {
-        grid-area: aside-left;
-        max-width: var(--pageShell-aside-left-width);
+    &:has(> [pgs~="pageShell-asideRight"]) {
+        max-width: calc(var(--page-width) + var(--pageShell-asideRight-width) + var(--pageShell-gap) + (var(--padding-page) * 2));
     }
 
-    [pgs~="pageShell-asideRight"] {
-        grid-area: aside-right;
-        max-width: var(--pageShell-aside-right-width);
+    &:has(> [pgs~="pageShell-asideLeft"]):has(> [pgs~="pageShell-asideRight"]) {
+        max-width: calc(var(--page-width) + var(--pageShell-asideLeft-width) + var(--pageShell-asideRight-width) + (var(--pageShell-gap) * 2) + (var(--padding-page) * 2));
     }
 
-    @media (max-width: 1500px) {
-        &:has(> [pgs~="pageShell-asideLeft"]):has(> [pgs~="pageShell-asideRight"]) {
-            grid-template-columns: minmax(0, var(--pageShell-content-max-width));
-            grid-template-areas:
-                "aside-left"
-                "content"
-                "aside-right";
+    //== RESPONSIVE ==//
 
-            [pgs~="pageShell-asideLeft"],
-            [pgs~="pageShell-asideRight"] {
-                position: relative;
-                top: auto;
-                max-height: none;
-                max-width: none;
-                overflow: visible;
+    &:has(> [pgs~="pageShell-asideLeft"]) {
+        @container (max-width: calc(#{$aside-size} + #{$content-size} + #{$pageShell-test-gap})) {
+            [pgs~="pageShell-asideLeft"] {
+                @include pageShell-aside-flow;
+            }
+
+            [pgs~="pageShell-content"] {
+                padding-top: 0;
+                min-width: 100%;
             }
         }
     }
 
-    //- laptop 
-    @media (max-width: $laptop){
-        &:has(> [pgs~="pageShell-asideLeft"]):has(> [pgs~="pageShell-asideRight"]) {
-            grid-template-columns: minmax(0, var(--pageShell-content-max-width));
-            grid-template-areas:
-                "aside-left"
-                "content"
-                "aside-right";
+    &:has(> [pgs~="pageShell-asideRight"]) {
+        @container (max-width: calc(#{$content-size} + #{$aside-size} + #{$pageShell-test-gap})) {
+            [pgs~="pageShell-asideRight"] {
+                @include pageShell-aside-flow;
+                padding-top: 0;
+                min-width: 100%;
+            }
         }
+    }
 
-        &:has(> [pgs~="pageShell-asideLeft"]):not(:has(> [pgs~="pageShell-asideRight"])) {
-            grid-template-columns: minmax(0, var(--pageShell-content-max-width));
+    &:has(> [pgs~="pageShell-asideLeft"]):has(> [pgs~="pageShell-asideRight"]) {
+        @container (max-width: calc(#{$aside-size} + #{$content-size} + #{$aside-size} + (#{$pageShell-test-gap} * 2))) {
+            display: grid;
+            grid-template-columns: var(--pageShell-asideLeft-width) minmax(0, var(--page-width));
             grid-template-areas:
-                "aside-left"
-                "content";
-        }
+                "asideLeft content"
+                "asideLeft asideRight";
+            justify-content: center;
 
-        &:has(> [pgs~="pageShell-asideRight"]):not(:has(> [pgs~="pageShell-asideLeft"])) {
-            grid-template-columns: minmax(0, var(--pageShell-content-max-width));
-            grid-template-areas:
-                "content"
-                "aside-right";
+            [pgs~="pageShell-asideRight"] {
+                @include pageShell-aside-flow;
+                padding-top: 0;
+                min-width: min(100%, var(--pageShell-asideRight-width));
+            }
         }
 
-        [pgs~="pageShell-asideLeft"],
-        [pgs~="pageShell-asideRight"] {
-            position: relative;
-            top: auto;
-            max-height: none;
-            max-width: none;
-            overflow: visible;
+        @container (max-width: calc(#{$aside-size} + #{$content-size} + #{$pageShell-test-gap})) {
+            display: flex;
+
+            [pgs~="pageShell-asideLeft"],
+            [pgs~="pageShell-asideRight"] {
+                @include pageShell-aside-flow;
+            }
+
+            [pgs~="pageShell-content"],
+            [pgs~="pageShell-asideRight"] {
+                padding-top: 0;
+                min-width: 100%;
+            }
         }
     }
 
-    @media (max-width: $tablet) {
+    @container (max-width: #{$content-size}) {
+        padding-top: var(--page-top);
+
+        [pgs~="pageShell-content"],
         [pgs~="pageShell-asideLeft"],
-        [pgs~="pageShell-asideRight"],
-        [pgs~="pageShell-content"] {
-            width: 100%;
-            max-width: none;
+        [pgs~="pageShell-asideRight"] {
+            padding-top: 0;
+            min-width: 100% !important;
         }
 
         [pgs~="pageShell-asideLeft"],
         [pgs~="pageShell-asideRight"] {
-            position: relative;
-            top: auto;
-            max-height: none;
-            overflow: visible;
+            @include pageShell-aside-flow;
         }
     }
 }

package/assets/scss/mixin/_mx-form.scss

@@ -453,9 +453,7 @@
     input[disabled],
     input[disabled]:is([type="checkbox"], [type="radio"])+label,
     label:has(+ input[disabled]:not([type="checkbox"], [type="radio"])),
-    label:has(+ :is(textarea[disabled], select[disabled])),
-    label.disabled,
-    .disabled {
+    label:has(+ :is(textarea[disabled], select[disabled])) {
         @include disabled();
     }
 

package/assets/scss/mixin/_mx-responsive.scss

@@ -19,11 +19,11 @@
 }
 
 //== row
-@mixin flexRow() {
+@mixin flexRow($wrap: wrap) {
     display: flex;
     gap: var(--gap-texts);
     flex-direction: row;
-    flex-wrap: wrap;
+    flex-wrap: $wrap;
 }
 
 @mixin flexRowElements() {

package/assets/scss/mixin/_mx-semantic.scss

@@ -83,65 +83,5 @@
     // }
 }
 
-//=  ASIDE 
-//== SECTION ASIDE
-@mixin sectionAside {
-    @include sectionNoPadding();
-}
-
-//== CONTAINER ASIDE
-@mixin containerAside() {
-    --aside-width: 400px;
-    width: 100%;
-    max-width: calc(var(--section-width) + var(--aside-width));
-
-    //+ tablet 
-    @media (min-width: $tablet) {
-        padding-inline: var(--padding-page);
-        margin-inline: auto;
-        @include flexRowElements();
-        flex-wrap: nowrap;
-    }
-
-    //- tablet 
-    @media (max-width: $tablet) {
-        @include flexColumnElements();
-        padding-inline: var(--padding-page);
-    }
-}
-
-//== ASIDE 
-@mixin aside($sticky: false) {
-    @include flexColumn;
-    align-items: flex-start;
-    isolation: isolate;
-    border-radius: var(--border-radius);
-    width: 100%;
-
-    @if($sticky ==true) {
-        position: sticky;
-        top: var(--page-top);
-    }
-
-    >* {
-        width: 100%;
-    }
 
-    @at-root body:has(header[data-header-scroll=true]) #{&} {
 
-        //+ tablet 
-        @media (min-width: $tablet) {
-            top: 10svh !important;
-        }
-    }
-
-    //+ tablet 
-    @media (min-width: $tablet) {
-        max-width: var(--aside-width, 400px);
-    }
-
-    //- tablet 
-    @media (max-width: $tablet) {
-        position: static;
-    }
-}

package/assets/scss/mixin/mixin.scss

@@ -25,7 +25,6 @@ $h5: fibonacci(8) * $base-fibonacci-size;  // 1.68rem
 //= IMPORT ADVANCED
 @import "mx-base";
 @import "mx-responsive";
-@import "mx-menu";
 @import "mx-form";
 @import "mx-form-addon";
 @import "mx-button";

package/assets/scss/patterns/_footer.scss

@@ -9,6 +9,7 @@
     container-type: inline-size;
     color-scheme: dark;
     position: relative;
+    isolation: isolate;
 
     //= DARKMODE
     [pgs~="toggleDarkmode"] {

package/assets/scss/patterns/_header.scss

@@ -29,7 +29,7 @@
         padding-inline: var(--header-padding-inline);
         color: var(--header-color);
         pointer-events: auto;
-        
+
         //== ALL
         >* {
             display: contents;
@@ -54,29 +54,44 @@
                 gap: 5px;
                 justify-content: center;
                 aspect-ratio: 1;
+                position: relative;
 
                 &::before,
                 &::after {
                     content: "";
                     width: 20px;
-                    height: 0;
-                    border: 2px solid var(--header-color);
+                    height: 4px;
+                    background-color: var(--header-color);
                     display: block;
                     border-radius: 20px;
                     transition: transform 300ms;
                     position: relative;
                 }
 
+                &::before {
+                    opacity: 0.6;
+                }
+
                 //=== OPEN
                 &[aria-expanded="true"] {
                     gap: 0px;
 
+                    &::before,
+                    &::after {
+                        position: absolute;
+                        inset: 0;
+                        top: 50%;
+                        left: 50%;
+                        translate: -50% -50%;
+                    }
+
                     &::before {
-                        transform: rotate(45deg);
+                        transform: rotate(-45deg);
+                        opacity: 0.6;
                     }
 
                     &::after {
-                        transform: rotate(-45deg) translate(3px, -2px);
+                        transform: rotate(45deg);
                     }
                 }
             }
@@ -127,17 +142,4 @@
             padding-inline: var(--header-padding-block);
         }
     }
-
-    //= LINK ADMIN WORDPRESS
-    .wordpressMyMenu {
-        display: flex;
-        gap: var(--gap-texts);
-
-        a {
-            --button-background: #3a70ac;
-            // --button-color: var(--color-whiteFixed);
-            padding: var(--button-size);
-            max-width: max-content;
-        }
-    }
 }