Takubeh/assets/styles/header.scss

.header {
    height: var(--header-height);
    /* background-image: url(https://source.unsplash.com/random/1080x720/?Kombucha); */
    background-image: url(/images/fond.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
    position: relative;

    a {
        text-decoration: none
    }

    .title {
        padding: calc(var(--h1-size) / 4 / 2);
        background-color: var(--color-red3);
        color: var(--color-white);
        line-height: .5;
        text-align: right;
        font-size: calc(var(--h1-size) / 2);
        font-family: 'Tox Typewriter';
        font-weight: normal;
        font-style: normal;
        margin-bottom: 2rem;

        small {
            color: var(--color-yellow2);
            font-size: calc(var(--h1-size) / 2 / 2);
        }
    }
}

.home .header {
    height: var(--header-home-height);

    .title {
        padding: calc(var(--h1-size) / 4);
        background-color: var(--color-red3);
        color: var(--color-white);
        line-height: .5;
        text-align: right;
        font-size: var(--h1-size);
        font-family: 'Tox Typewriter';
        font-weight: normal;
        font-style: normal;
        margin-bottom: 0;

        small {
            color: var(--color-yellow2);
            font-size: calc(var(--h1-size) / 2);
        }
    }
}

.menu {
    position: absolute;
    bottom: .6rem;
    font-family: 'Tox Typewriter';

    a {
        margin: .6rem;
        padding: .6rem;
        font-size: 1rem;
        box-shadow: 1px 1px var(--color-red3),-1px -1px var(--color-red3),1px -1px var(--color-red3),-1px 1px var(--color-red3);
    }

    h1 {
        font-size: 1rem;
        margin: 0;
        padding: 0;
    }

    a.active {
        text-decoration: underline;
        box-shadow: 1px 1px var(--color-yellow2),-1px -1px var(--color-yellow2),1px -1px var(--color-yellow2),-1px 1px var(--color-yellow2);
    }
}

@media screen and (max-width: 480px) {

    .header .menu {
        bottom: .3rem;
        a {
            margin: .3rem;
            padding: .3rem;
            font-size: .8rem;
        }

        h1 {
            font-size: .8rem;
        }
    }
}

@media screen and (max-height: 480px) and (orientation: landscape) {
    .home .header {
        height: 80vh;
    }
    .header {
        height: 40vh;
    }

    .header .menu {
        bottom: .3rem;
        a {
            margin: .3rem;
            padding: .3rem;
            font-size: .8rem;
        }

        h1 {
            font-size: .8rem;
        }
    }
}