website/src/styles/main.scss

$screen-desktop-min: 1024px;

:root {
    --palette-black: #222;
    --border-large: 4px solid var(--palette-black);

    --header-bg: #fff;

    --footer-bg: #444;
    --footer-fg: #fdfdfd;

    --homepage-principal-bg: #ecffe3;
    --homepage-whatsphc-bg: #e4c5ff;
    --homepage-news-bg: #c2a8eb;
    --homepage-projects-bg: #f5f2cc;
    --homepage-macchinisti-bg: #888;

    --project-card-bg: #a2d4f3;

    --font-primary: 'Open Sans', sans-serif;
    --font-display: 'Iosevka', monospace;
    --font-mono: 'Source Code Pro', monospace;
    --font-secondary: 'Source Sans Pro', sans-serif;
}

@layer common, typography, component, page;

@import './mixins.scss';
@import './typography.scss';

@layer common {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        font: inherit;
        margin: 0;
    }

    html {
        height: 100%;
    }

    html,
    body {
        min-height: 100%;
        margin: 0;

        font-family: var(--font-primary);
        font-size: 18px;
        color: #222;
    }

    // html {
    //     scroll-snap-type: y mandatory;
    //     scroll-padding-top: 4rem;
    // }

    img {
        display: block;
    }

    a {
        color: inherit;
        text-decoration: none;
    }
}

//
// Typography
//

@import './controls.scss';
@import './components.scss';

//
// Custom Page Styles
//

body {
    // for the header spacing
    // padding-top: 6rem;

    display: grid;
    grid-template-rows: auto 1fr auto;

    header {
        z-index: 10;

        height: 6rem;
        border-bottom: var(--border-large);
        background: var(--header-bg);

        grid-column: 1 / -1;

        top: 0;
        position: sticky;
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: space-between;

        .logo {
            padding-left: 1rem;

            img {
                height: 3.5rem;
            }
        }

        .links {
            display: flex;
            align-items: center;
            gap: 1.5rem;

            padding: 0 1.5rem;

            a {
                font-family: var(--font-display);
                font-size: 18px;
                font-weight: 500;
                letter-spacing: 1px;
                color: #333;
            }

            @media screen and (max-width: $screen-desktop-min) {
                flex-direction: column;
            }
        }

        .side-menu {
            position: fixed;

            // top: 0;
            // right: 0;
            // bottom: 0;
            // left: 3rem;

            top: 5rem;
            right: 0;
            bottom: 0;
            left: 0;

            background: #f0f0f0;

            display: grid;
            // grid-template-rows: auto 1fr;
            grid-template-rows: 1fr;

            gap: 1.5rem;
            padding: 1.5rem;

            justify-content: center;

            // & > :first-child {
            //     justify-self: end;
            // }

            .links {
                display: grid;
                grid-template-columns: 1fr;

                align-content: start;

                width: calc(100vw - 3rem);
                max-width: 100%;

                gap: 1.5rem;

                padding: 0;
            }
        }

        #header-menu-toggle {
            display: none;

            &:not(:checked) ~ .side-menu {
                display: none;
            }
        }

        &:has(#header-menu-toggle:checked) #header-menu-toggle-menu {
            display: none;
        }

        &:has(#header-menu-toggle:not(:checked)) #header-menu-toggle-close {
            display: none;
        }

        @media screen and (max-width: $screen-desktop-min) {
            height: 5rem;
            padding: 0 0.5rem;

            .logo {
                padding-left: 0;

                img {
                    height: 3rem;
                }
            }
        }
    }

    main {
        width: 100%;

        @media screen and (max-width: $screen-desktop-min) {
            padding: 3rem 1rem;
            gap: 3rem;

            .card {
                width: 100%;
            }
        }
    }

    footer {
        z-index: 10;
        padding: 1rem 0;
        --paragraph-margin: 0.5rem;
        --zone-color: #aaa;

        min-height: 6rem;
        border-top: var(--border-large);
        background: var(--footer-bg);
        color: var(--footer-fg);

        display: grid;
        place-content: center;

        font-family: var(--font-secondary);
        font-size: 18px;

        scroll-snap-align: end;

        @media screen and (max-width: $screen-desktop-min) {
            min-height: 5rem;
            font-size: 18px;
        }
    }
}

@import './pages.scss';

//
// Misc
//

::-webkit-scrollbar-track:vertical {
    background-color: #f0f0f0;
    border-left: 2px solid #222;
    border-top: 2px solid #222;
    border-bottom: 2px solid #222;
}

::-webkit-scrollbar-track:horizontal {
    background-color: #f0f0f0;
    border-top: 2px solid #222;
    border-left: 2px solid #222;
    border-right: 2px solid #222;
}

::-webkit-scrollbar-thumb {
    background-color: #1e6733;
    border: 2px solid #222;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #2b8b47;
}

::-webkit-scrollbar-corner {
    background-color: #f0f0f0;
    // border-left: 2px solid #222;
    // border-top: 2px solid #222;
}

::-webkit-scrollbar {
    width: 15px;
}

::selection {
    background: #0002;
}

body:has(#header-menu-toggle:checked) {
    overflow: hidden;
}

//
// Utility Classes
//

.hide {
    display: none !important;
}

.invisible {
    opacity: 0 !important;
}

@media screen and (min-width: $screen-desktop-min) {
    .mobile-only {
        display: none !important;
    }
}

@media screen and (max-width: $screen-desktop-min) {
    .desktop-only {
        display: none !important;
    }
}