sito-poisson/src/main.css

:root {
    --font-corinthia: 'Corinthia', cursive;
    --font-patrik-hand: 'Patrick Hand', cursive;
    --font-indie-flower: 'Indie Flower', cursive;
    --font-berkshire-swash: 'Berkshire Swash', cursive;
}

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

html,
body {
    min-height: 100%;
    height: 100%;
}

img {
    display: block;
}

/* Components */

.pattern {
    background-image: url('./assets/pattern-arianna-right.png');
    /* background-repeat: no-repeat; */
    background-repeat: repeat-y;
    background-size: 400px;
}

.sidebar {
    background: #5f432f;
    color: #fde1c5;

    height: 100vh;
    max-height: 100vh;
    overflow: hidden;

    padding-top: 1rem;

    width: 20%;
    position: fixed;

    display: grid;
    grid-template-rows: minmax(auto, 10rem) 1fr minmax(auto, 10rem);
    /* place-content: center; */
    /* place-items: center; */

    box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.25);

    z-index: 1;

    & > .nav-top,
    & > .nav-bottom {
        width: 100%;
        height: 100%;

        & > a {
            width: 100%;
            height: 100%;
        }

        img {
            width: 100%;
            height: 100%;

            object-fit: contain;
        }
    }

    & > .nav-links {
        place-self: center;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 2rem;

        & > a {
            text-align: center;

            color: #fde1c5;
            text-decoration: none;

            font-family: var(--font-indie-flower);
            font-size: 32px;
            font-weight: 400;

            letter-spacing: 0.25rem;

            padding: 0.25rem 1rem;

            &:hover {
                background: rgba(255, 255, 255, 0.125);
            }
        }
    }

    #mobile-menu-toggle,
    label {
        display: none;
    }

    @media screen and (max-width: 768px) {
        padding: 0;

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

        & > .nav-top,
        & > .nav-bottom {
            display: none;
        }

        & > label {
            width: 3rem;
            min-height: 3rem;

            display: grid;
            place-content: center;

            align-self: start;
        }

        &:has(#mobile-menu-toggle:not(:checked)) {
            & > .nav-links {
                display: none;
            }
        }

        &:has(#mobile-menu-toggle:checked) {
            width: 100%;

            & > .nav-top,
            & > .nav-bottom {
                display: block;

                max-width: 5rem;
            }

            & > .nav-links {
                display: flex;
                gap: 1rem;
            }
        }
    }
}

.text {
    display: block;

    &.center {
        text-align: center;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    ul,
    ol {
        width: 100%;
        max-width: 42rem;
    }

    p + p {
        margin-top: 0.75rem;
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--font-berkshire-swash);
        font-weight: 400;

        padding: 2rem 0 1rem;
    }

    li {
        margin: 1rem 0;
    }

    a {
        color: gold;
        text-decoration: none;
        /* font-weight: 600; */

        &:hover {
            color: rgb(255, 225, 56);
            text-decoration: underline;
        }
    }

    p:has(> img) {
        max-width: 10rem;

        & > img {
            max-width: 10rem;
        }

        &:nth-child(even) {
            float: right;
            margin: 2rem -5rem 2rem 2rem;
        }

        &:nth-child(odd) {
            float: left;
            margin: 2rem 2rem 2rem -5rem;
        }
    }

    @media screen and (max-width: 768px) {
        font-size: 16px;

        p:has(> img) {
            max-width: 10rem;

            & > img {
                max-width: 10rem;
                margin: 1rem auto;
            }

            &:nth-child(even) {
                float: none !important;
                margin: 1rem auto;
            }

            &:nth-child(odd) {
                float: none !important;
                margin: 1rem auto;
            }
        }
    }
}

.photo-grid {
    width: 100%;
    padding: 0 3rem 0 6rem;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 3rem;

    img {
        transform: rotate(calc(5deg * sin(2 + var(--seed) * 80)));

        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    @media screen and (max-width: 768px) {
        padding: 0;

        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
}

/* Structure */

body {
    background: #c59f7c;
    color: #333;

    font-family: var(--font-patrik-hand);

    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.25rem;

    display: grid;
    grid-template-columns: 1fr 4fr 1fr;

    & > .sidebar {
        grid-column: 1 / 2;
    }

    & > main {
        grid-column: 2 / 3;

        display: flex;
        flex-direction: column;
        gap: 3rem;
        align-items: center;

        padding-bottom: 6rem;

        img {
            max-height: 50vh;
            max-width: 100%;
        }

        & > img {
            box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.25);
        }

        & > h1:first-child {
            font-family: var(--font-berkshire-swash);
            font-size: 80px;
            font-weight: 400;

            padding: 3rem 0 0;

            text-align: center;

            &.font-corinthia {
                font-family: var(--font-corinthia);
                font-weight: 800;
            }

            img {
                display: inline-block;
                vertical-align: middle;

                height: 8rem;
            }

            @media screen and (max-width: 768px) {
                padding: 2rem 0 0;
                font-size: 52px;

                img {
                    height: 4rem;
                }
            }
        }

        h1,
        h2,
        h3,
        h4,
        p,
        ul,
        ol {
            width: 100%;
            max-width: 42rem;
        }
    }

    & > .pattern {
        grid-column: 3 / 4;
    }

    @media screen and (max-width: 768px) {
        padding: 0;

        grid-template-columns: 3rem 1fr 3rem;

        & > .sidebar {
            /* display: none; */

            width: 3rem;
        }

        & > main {
            padding: 1rem 0 3rem 1rem;
        }

        & > .pattern {
            background-size: 200px;
        }
    }
}