mypgs 1.0.0

package/assets/scss/patterns/_footer.scss

@@ -0,0 +1,180 @@
+[pgs~="footer"] {
+    --footer-color: var(--color-whiteFixed);
+    --footer-background: var(--color-blackFixed);
+    background: var(--footer-background);
+    color: var(--footer-color);
+    background-size: cover;
+    background-attachment: fixed;
+    background-position: top;
+    container-type: inline-size;
+    color-scheme: dark;
+    position: relative;
+
+    //= DARKMODE
+    [pgs~="toggleDarkmode"] {
+        position: absolute;
+        right: calc(20px + 5vw);
+        top: 0;
+        translate: 0 -50%;
+        z-index: 1;
+        --button-background: var(--color-primary);
+        --button-color: var(--color-whiteFixed);
+
+        &:has(i.fa-sun) {
+            &::after {
+                content: "Attiva Light Mode";
+            }
+        }
+
+        &:has(i.fa-moon) {
+            &::after {
+                content: "Attiva Dark Mode";
+            }
+        }
+    }
+
+    //= TOP
+    [pgs~="footer-top"] {
+        color: var(--color-whiteFixed);
+        padding-block: calc(var(--gap-sections)/3);
+
+        &::after {
+            content: unset;
+        }
+
+        h2 {
+            --heading-size: 2.0rem;
+        }
+
+        h3 {
+            --heading-size: 1.6rem;
+        }
+
+        p {
+            color: var(--footer-color);
+        }
+
+        a {
+            text-decoration: none;
+            font-weight: 700;
+            color: var(--color-primary-strong);
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+
+        [pgs~="footer-brand"] {
+            @include flexColumn();
+
+            [pgs~="logo-image"] {
+                max-width: 250px;
+                max-height: 100px;
+                object-fit: contain;
+                object-position: left center;
+            }
+
+            [pgs~="logo-text"] {
+                font-size: 4.0rem;
+                font-weight: 700;
+                color: var(--color-whiteFixed);
+            }
+        }
+
+        [pgs~="footer-content"] {
+            nav {
+                li {
+                    margin-top: 5px;
+
+                    a {
+                        color: var(--footer-color);
+                        display: flex;
+                        align-items: center;
+
+                        i {
+                            order: -1;
+                            margin-right: 10px;
+                            display: block;
+                            width: 18px;
+                            color: var(--color-white);
+                            text-align: center;
+                            font-size: 15px;
+
+                            &::before {
+                                color: var(--color-whiteFixed);
+                            }
+
+                            &::after {
+                                color: var(--color-whiteFixed);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    //= LEGAL
+    [pgs~="footer-legal"] {
+        width: 100%;
+
+        [pgs~="footer-legal-content"] {
+            border-top: var(--border) var(--color-boxDark-transparent);
+            padding-block: 60px;
+            display: flex;
+            flex-direction: row;
+            gap: calc(var(--gap-texts)*2);
+            flex-wrap: wrap;
+            justify-content: center;
+            align-items: center;
+
+            [pgs~="logo"] {
+                margin-right: auto;
+                justify-content: center;
+            }
+
+            //- tablet 
+            @media (max-width: $tablet) {
+                [pgs~="logo"] {
+                    width: 100%;
+                }
+            }
+        }
+
+        i {
+            font-size: 0.8rem;
+            color: var(--color-text);
+        }
+
+        p {
+            font-size: 1.3rem;
+            color: var(--footer-color);
+            text-align: center;
+
+            a {
+                color: var(--color-whiteFixed);
+                text-decoration: none;
+            }
+        }
+
+        button {
+            font-size: 1.3rem;
+            color: var(--color-whiteFixed);
+            outline: none;
+            padding: 1rem 1.2rem;
+            font-weight: initial;
+        }
+    }
+
+    //- mobile 
+    @media (max-width: $mobile) {
+        background-image: unset;
+        padding-top: calc(var(--padding-page) * 2);
+    }
+
+    [pgs~="toggleDarkmode"] {
+        margin-top: 10px;
+        margin-left: 0;
+        border-radius: var(--border-radius-input);
+    }
+}

package/assets/scss/patterns/_header.scss

@@ -0,0 +1,143 @@
+[pgs~="header"] {
+    --header-padding-inline: 30px;
+    --header-padding-block: 10px;
+    --header-gap: var(--gap-elements);
+    --header-borderRadius: var(--border-radius-input);
+    --header-size: 4.4rem;
+    --header-background: transparent;
+    --header-color: var(--color-black);
+    --header-color-hover: var(--color-black);
+    z-index: 100;
+    position: fixed;
+    isolation: isolate;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    pointer-events: auto;
+    background: var(--header-background);
+    color: var(--header-color);
+    transition: padding 300ms, transform 300ms, background-color 1000ms;
+
+    //= HEADER TOP
+    [pgs~="header-element"] {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--header-gap);
+        width: 100%;
+        padding-block: var(--header-padding-block);
+        padding-inline: var(--header-padding-inline);
+        color: var(--header-color);
+        pointer-events: auto;
+        
+        //== ALL
+        >* {
+            display: contents;
+        }
+
+        [pgs~=button],
+        [pgs~=buttonIcon] {
+            @include button_header();
+        }
+
+        [pgs~="header-element-onlyMobile"] {
+            display: none;
+            gap: var(--header-gap);
+        }
+
+        //== HAMBURGER 
+        [pgs~="header-element-hamburger"] {
+            display: none;
+
+            [pgs~="header-element-hamburger-button"] {
+                flex-direction: column;
+                gap: 5px;
+                justify-content: center;
+                aspect-ratio: 1;
+
+                &::before,
+                &::after {
+                    content: "";
+                    width: 20px;
+                    height: 0;
+                    border: 2px solid var(--header-color);
+                    display: block;
+                    border-radius: 20px;
+                    transition: transform 300ms;
+                    position: relative;
+                }
+
+                //=== OPEN
+                &[aria-expanded="true"] {
+                    gap: 0px;
+
+                    &::before {
+                        transform: rotate(45deg);
+                    }
+
+                    &::after {
+                        transform: rotate(-45deg) translate(3px, -2px);
+                    }
+                }
+            }
+        }
+    }
+
+    //= DIALOG 
+    dialog[pgs~="modal-dialogpopover"],
+    dialog[pgs~="modal-dialog"] {
+        padding: 2rem;
+        padding-top: calc(var(--heightOfHeader) + var(--padding));
+        --modal-background: color-mix(in srgb, var(--color-primary-soft) 50%, var(--color-white) 50%);
+
+        dialog[pgs~="modal-dialog-content"] {}
+
+        &[open] {
+            display: flex;
+            flex-direction: column;
+            gap: var(--gap-elements);
+            z-index: -1;
+            overflow: auto;
+            max-height: 100svh;
+        }
+    }
+
+    //- mobile 
+    &[data-header-mobileActive=true] {
+        --header-gap: var(--gap-texts);
+
+        [pgs~="header-element-onlyDesktop"] {
+            display: none !important;
+        }
+
+        [pgs~="header-element-onlyMobile"] {
+            display: flex !important;
+            margin-left: auto;
+            align-items: center;
+        }
+
+        [pgs~="header-element-hamburger"] {
+            display: flex !important;
+        }
+    }
+
+    //- mobile 
+    @media (max-width: $mobile) {
+        [pgs~="header-element"] {
+            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;
+        }
+    }
+}