mypgs 1.0.0

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

@@ -0,0 +1,353 @@
+//= FLEX 
+//== column
+@mixin flexColumn() {
+    display: flex;
+    gap: var(--gap-texts);
+    flex-direction: column;
+}
+
+@mixin flexColumnElements() {
+    display: flex;
+    gap: var(--gap-elements);
+    flex-direction: column;
+}
+
+@mixin flexColumnSections() {
+    display: flex;
+    gap: var(--gap-sections);
+    flex-direction: column;
+}
+
+//== row
+@mixin flexRow() {
+    display: flex;
+    gap: var(--gap-texts);
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+@mixin flexRowElements() {
+    display: flex;
+    gap: var(--gap-elements);
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+@mixin flexRowSection() {
+    display: flex;
+    gap: var(--gap-sections);
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+//== center
+@mixin center($gap: var(--gap-texts)) {
+    display: flex;
+    gap: $gap;
+    align-items: center;
+    justify-content: center;
+}
+
+//= FLEX
+@function _basis($ratio, $gap, $columns) {
+    $cols: ceil($columns * $ratio);
+    @return calc((100% - ($gap * ($cols - 1))) / $cols);
+}
+
+//== responsive flex
+@mixin rFlex(
+    $columns: 4, 
+    $mobileTwoElements: false, 
+    $gap: var(--gap-elements)) 
+    {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+    gap: $gap;
+
+    >* {
+        flex: 1 0;
+        flex-basis:#{_basis(1, $gap, $columns)};
+    }
+
+    //-( laptop: ratio = 0.75
+    @container (max-width: #{$laptop}) {
+        >* {
+            flex-basis:#{_basis(0.75, $gap, $columns)};
+        }
+    }
+
+    //-( big-tablet: ratio = 0.5
+    @container (max-width: #{$big-tablet}) {
+        >* {
+            flex-basis:#{_basis(0.5, $gap, $columns)};
+        }
+    }
+
+    //-( tablet: ratio = 0.33
+    @container (max-width: #{$tablet}) {
+        >* {
+            flex-basis:#{_basis(0.33, $gap, $columns)};
+        }
+    }
+
+    //-( mobile: 1 o 2 colonne
+    @container (max-width: #{$mobile}) {
+        @if $mobileTwoElements {
+            >* {
+                flex-basis:#{_basis(0.33, $gap, $columns)};
+            }
+        }
+
+        @else {
+            >* {
+                flex-basis:#{_basis(0.15, $gap, $columns)};
+            }
+        }
+    }
+
+    //-( mobile small / watch: sempre 1 colonna
+    @container (max-width: #{$watch}) {
+        >* {
+            flex-basis:#{_basis(0.15, $gap, $columns)};
+        }
+    }
+}
+
+//== adaptive flex
+@mixin aFlex(
+    $columns: 4,
+    $start: var(--page-width),
+    $mobileTwoElements: false,
+    $gap: var(--gap-elements)) 
+    {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+    gap: $gap;
+
+    >* {
+        flex: 1 0;
+        flex-basis: #{_basis(1, $gap, $columns)};
+    }
+
+    // ↓ da start (es. 1500px): ratio = 0.75
+    @container (max-width: #{$start}) {
+        >* {
+            flex-basis: #{_basis(0.75, $gap, $columns)};
+        }
+    }
+
+    // ↓ ~ 75% di start: ratio = 0.5
+    @container (max-width: #{calc($start * 0.75)}) {
+        >* {
+            flex-basis: #{_basis(0.5, $gap, $columns)};
+        }
+    }
+
+    // ↓ ~ 50% di start: ratio = 0.33
+    @container (max-width: #{calc($start * 0.5)}) {
+        >* {
+            flex-basis: #{_basis(0.33, $gap, $columns)};
+        }
+    }
+
+    // ↓ ~ 33% di start: mobile (1 o 2 colonne)
+    @container (max-width: #{calc($start * 0.33)}) {
+        @if $mobileTwoElements ==true {
+            >* {
+                flex-basis: #{_basis(0.33, $gap, $columns)};
+            }
+        }
+
+        @else {
+            >* {
+                flex-basis: #{_basis(0.15, $gap, $columns)};
+            }
+        }
+    }
+
+    // ↓ ~ 20% di start: mobile small / watch (sempre 1 colonna)
+    @container (max-width: #{calc($start * 0.2)}) {
+        >* {
+            flex-basis: #{_basis(0.15, $gap, $columns)};
+        }
+    }
+}
+
+//= GRID 
+//== responsive grid
+@mixin rGrid(
+    $columns: 4, 
+    $mobileTwoElements: false, 
+    $gap: var(--gap-elements)) 
+    {
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat($columns, 1fr);
+    gap: $gap;
+
+    /// dispari
+    @if $columns % 2==1 {
+
+        //-( laptop 
+        @container (max-width: #{$laptop}) {
+            grid-template-columns: repeat(ceil($columns * 0.75), 1fr); // 75% delle colonne originali
+        }
+
+        //-( big-tablet 
+        @container (max-width: #{$big-tablet}) {
+            grid-template-columns: repeat(ceil($columns * 0.5), 1fr); // 50% delle colonne originali
+        }
+
+        //-( tablet 
+        @container (max-width: #{$tablet}) {
+            grid-template-columns: repeat(ceil($columns * 0.33), 1fr); // 33% delle colonne originali
+        }
+    }
+
+    @else {
+
+        //-( laptop 
+        @container (max-width: #{$laptop}) {
+            grid-template-columns: repeat(ceil($columns * 0.75), 1fr); // 75% delle colonne originali
+        }
+
+        //-( big-tablet 
+        @container (max-width: #{$big-tablet}) {
+            grid-template-columns: repeat(ceil($columns * 0.5), 1fr); // 50% delle colonne originali
+        }
+
+        //-( tablet 
+        @container (max-width: #{$tablet}) {
+            grid-template-columns: repeat(ceil($columns * 0.33), 1fr); // 33% delle colonne originali
+        }
+    }
+
+    //-( mobile 
+    @container (max-width: #{$mobile}) {
+        grid-template-columns: 1fr; // 1 colonna
+    }
+
+    @if $mobileTwoElements ==true {
+
+        //-( mobile 
+        @container (max-width: #{$mobile}) {
+            grid-template-columns: 1fr 1fr; // 2 colonne su mobile
+        }
+    }
+
+    //-( mobile small
+    @container (max-width: #{$watch}) {
+        grid-template-columns: 1fr; // 1 colonna su mobile small
+    }
+}
+
+//== adaptive Grid
+@mixin aGrid(
+    $columns: 4,
+    $start: var(--page-width),
+    $mobileTwoElements: false,
+    $gap: var(--gap-elements)) 
+    {
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat($columns, 1fr);
+    gap: $gap;
+
+    //-( da 1500px
+    @container (max-width: #{$start}) {
+        grid-template-columns: repeat(ceil($columns * 0.75), 1fr);
+    }
+
+    //-( circa tablet landscape
+    @container (max-width: #{calc($start * 0.75)}) {
+        grid-template-columns: repeat(ceil($columns * 0.5), 1fr);
+    }
+
+    //-( tablet
+    @container (max-width: #{calc($start * 0.5)}) {
+        grid-template-columns: repeat(ceil($columns * 0.33), 1fr);
+    }
+
+    //-( mobile
+    @container (max-width: #{calc($start * 0.33)}) {
+        grid-template-columns: 1fr;
+    }
+
+    @if $mobileTwoElements ==true {
+        @container (max-width: #{calc($start * 0.33)}) {
+            grid-template-columns: 1fr 1fr;
+        }
+    }
+
+    //-( mobile small / watch
+    @container (max-width: #{calc($start * 0.2)}) {
+        grid-template-columns: 1fr;
+    }
+}
+
+// //- laptop 
+// @media (max-width: $laptop) {
+//     * {
+//         outline: red solid 0.1px
+//     }
+// }
+
+// //- tablet 
+// @media (max-width: $tablet) {
+//     * {
+//         outline: green solid 0.1px
+//     }
+// }
+
+// //- mobile 
+// @media (max-width: $mobile) {
+//     * {
+//         outline: blue solid 0.1px
+//     }
+// }
+
+// //- mobile small
+// @media (max-width: $watch) {
+//     * {
+//         outline: yellow solid 0.1px
+//     }
+// }
+
+// //-( laptop 
+// @container (max-width: #{$laptop}) {
+//     * {
+//         outline: purple solid 0.1px
+//     }
+// }
+
+// //-( big-tablet 
+// @container (max-width: #{$big-tablet}) {
+//     * {
+//         outline: orange solid 0.1px
+//     }
+// }
+
+// //-( tablet 
+// @container (max-width: #{$tablet}) {
+//     * {
+//         outline: pink solid 0.1px
+//     }
+// }
+
+// //-( mobile 
+// @container (max-width: #{$mobile}) {
+//     * {
+//         outline: brown solid 0.1px
+//     }
+// }
+
+// //-( mobile small
+// @container (max-width: #{$watch}) {
+//     * {
+//         outline: gray solid 0.1px
+//     }
+// }

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

@@ -0,0 +1,147 @@
+//= MAIN 
+@mixin main($direction: column, $gap: var(--gap-sections)) {
+    display: flex;
+    flex-direction: $direction;
+    gap: $gap;
+    align-items: flex-start;
+    min-height: 100svh;
+    isolation: isolate;
+    padding-block: var(--page-top);
+    width: 100%;
+}
+
+//= SECTION 
+@mixin section {
+    --section-width: calc(var(--page-width) + (var(--padding-page) * 2));
+    margin-inline: auto;
+    max-width: var(--section-width);
+    padding-inline: var(--padding-page);
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-elements);
+}
+
+@mixin sectionSpecifity-child($child) {
+    --section-width: calc(var(--page-width) + (var(--padding-page) * 2));
+    width: 100%;
+
+    #{$child} {
+        container-type: inline-size;
+        margin-inline: auto;
+        max-width: var(--section-width);
+        padding-inline: var(--padding-page);
+        position: relative;
+        width: 100%;
+
+        #{$child} {
+            padding-inline: 0;
+        }
+    }
+}
+
+@mixin sectionMax() {
+    --section-width: calc(var(--page-width) + (var(--padding-page) * 2));
+    position: relative;
+    width: 100%;
+    padding-inline: var(--padding-page);
+    padding-block: calc((var(--gap-sections) /2));
+    margin-block: calc((var(--gap-sections) /2) * -1);
+
+    >* {
+        container-type: inline-size;
+        width: 100%;
+        max-width: calc(var(--section-width) - var(--padding-page)*2);
+        margin-inline: auto;
+    }
+}
+
+@mixin sectionFull() {
+    padding: var(--padding-page);
+    position: relative;
+    width: 100%;
+
+    >* {
+        container-type: inline-size;
+        width: 100%;
+    }
+}
+
+@mixin sectionNoPadding {
+    --section-width: var(--page-width);
+    margin-inline: auto;
+    max-width: var(--section-width);
+    width: 100%;
+    display: flex;
+    position: relative;
+    gap: var(--gap-texts);
+    flex-direction: column;
+    // //+ tablet 
+    // @media (min-width: $tablet) {
+    //     padding: var(--padding);
+    // }
+}
+
+//=  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

@@ -0,0 +1,36 @@
+//+ devices 
+$watch: 315px;
+$mobile: 430px;
+$big-mobile: 615px;
+$tablet: 800px;
+$big-tablet: 900px;
+$laptop: 1100px;
+
+@function fibonacci($n) {
+    $sequence: 0 1;
+    @for $_ from 1 through $n {
+        $new: nth($sequence, length($sequence)) + nth($sequence, length($sequence) - 1);
+        $sequence: append($sequence, $new);
+    }
+    @return nth($sequence, length($sequence));
+}
+
+$base-fibonacci-size: 0.05rem;
+$h1: fibonacci(11) * $base-fibonacci-size; // 7.12rem
+$h2: fibonacci(10) * $base-fibonacci-size; // 4.4rem
+$h3: fibonacci(9) * $base-fibonacci-size;  // 2.72rem
+$h4: fibonacci(8) * $base-fibonacci-size;  // 1.68rem
+$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";
+@import "mx-color";
+@import "mx-semantic";
+@import "mx-card";
+
+ 

package/assets/scss/patterns/_cookieConsent.scss

@@ -0,0 +1,101 @@
+[pgs~=cookieConsent] {
+    --cookie-bg: var(--color-box);
+    --cookie-color: var(--color-black);
+    --cookie-border: var(--border-complete);
+    position: fixed;
+    inset: auto 24px 24px auto;
+    width: min(480px, calc(100vw - 32px));
+    z-index: 999;
+    padding: var(--padding-2, 2rem);
+    border-radius: var(--border-radius, 16px);
+    border: var(--cookie-border);
+    background: var(--cookie-bg);
+    color: var(--cookie-color);
+    box-shadow: 0 25px 55px rgba(14, 32, 58, 0.25);
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-section, 1.25rem);
+    transition: transform 0.35s ease, opacity 0.35s ease;
+
+    &[hidden] {
+        display: none !important;
+    }
+
+    &[aria-hidden="true"] {
+        transform: translate3d(0, 30px, 0);
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &[aria-hidden="false"] {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+
+    //- mobile 
+    @media (max-width: $mobile) {
+        inset: auto 16px 16px 16px;
+        width: auto;
+        padding: var(--padding-2, 1.5rem);
+    }
+
+    i {
+        --fa-size: 2.5rem;
+        --fa-primary-color: var(--cookie-color);
+        --fa-secondary-color: var(--cookie-color);
+        --fa-secondary-opacity: 0.5;
+    }
+
+    h2 {
+        font-size: 1.45rem;
+        margin: 0;
+    }
+
+    p {
+        margin: 0;
+        line-height: 1.5;
+        font-size: 1.35rem;
+    }
+
+    button {
+        flex: 1;
+        min-width: 120px;
+        --button-background: color-mix(in srgb, var(--color-boxDark-transparent) 50%, var(--color-white) 50%);
+        border-width: 2px;
+        justify-content: center;
+        flex-basis: 200px;
+    }
+
+    label {
+        --toggle-color-thumb: var(--color-whiteFixed);
+        --toggle-color-rail: var(--color-blackFixed);
+        --toggle-color-rail-checked: var(--color-success);
+        align-items: center;
+    }
+
+    [pgs~=cookieConsent-panel] {
+        border: var(--border-complete);
+        border-radius: var(--border-radius-input, 16px);
+        padding: var(--padding-2, 1.5rem);
+        background-color: var(--color-primary-soft, rgba(0, 0, 0, 0.02));
+        margin-top: var(--gap-texts);
+
+        [pgs~=cookieConsent-panel-badge] {
+            font-size: 1.35rem;
+            border-radius: 999px;
+            padding: 0.25rem 0.75rem;
+            background: var(--color-success-background);
+            color: var(--color-success);
+            font-weight: 600;
+            overflow-wrap: normal;
+            width: max-content;
+            height: max-content;
+            margin-left: auto;
+        }
+    }
+
+    &[pgs~="cookieConsent-gaUnavailable"] [pgs~="cookieConsent-featureAnalytics"] label {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}