_header.scss

/*
 * Convenience mixin for the header only.
 * to generate the animation transitions and have one source from where to set
 * duration and mode.
 */
@mixin header-animate($property) {
    transition: $property 0.25s linear;
}

/*
    Following is the default setup for the header.
    Specific settings for smaller screens can be found below the
    default section.
*/
.header {
    @include width-full-viewport;
    @include drop-shadow(
        $color:     rgba($color-helmholtz-blue, 0.25)
    );

    position:   fixed;
    background: transparent;
    z-index:    1000;

    @include respond-to-medium(
        min-height, $header-min-height
    );

    #header-content-container {
        display:            flex;
        justify-content:    space-between;
        align-items:        center;
        background:         white;

        @include respond-to-medium(
            min-height,     $header-content-min-height
        );

        /*
            Use padding to enforce the distance between borders and content.
            Since Margins would not receive a background color.
        */
        padding-top:    $document-top-margin;
        padding-bottom: $document-top-margin;
        padding-left:   $document-side-margin;
        padding-right:  $document-side-margin;

        @include header-animate(padding);
    }

    .logo-link {
        /*
         * The logo is allowed to overlap the bottom content container padding
         * since there also is the transition below for padding.
         */
        margin-bottom: -$document-top-margin;

        @include header-animate(transform);

        .logo{
            padding:        0.5rem;

            @include header-animate(padding);
        }
    }

    /*
        IMPORTANT:
        Do not shuffle the .nav_toggle blocks around unless you know what you
        are doing. Potential results may include breaking the drop-down menu on
        mobile devices and loss of sanity.
    */
    .nav_toggle {
        /* Not displayed by default, only on smaller screens */
        display:                none;
    }

    /* Navigation on the right side */
    nav {
        @include font-bold;
        @include text-uppercase;

        display:            inline-flex;
        justify-content:    flex-end;

        /* Extend to at most half the screen if more is available */
        flex-grow:          0.5;

        color:      $color-helmholtz-blue;

        .btn-header {
            @include font-bold;

            color:              $color-helmholtz-blue;
            background-color:   white;
            border:             none;

            &:hover {
                background-color:   $color-content-light-gray;
            }

            &:focus {
                box-shadow: 0 0 0 0.2rem rgba($color-content-light-gray,0.5);
            }
        }

        /* Navigation items have both an icon and a title. */
        .navigation-entry {
            display:            inline-block;

            @include header-animate(font-size);

            .navigation-icon {
                display:        inline-block;
                margin-right:   0.25rem;
            }
        }
    }

    /* The transition element at the end of the header */
    .transition {
        color:      white;
        margin-top: -1px;
    }
}

/* On desktops and larger screens the header shrinking actually has an effect.
 * No header shrinking on mobile and below, otherwise it can not be reliably
 * interacted with anymore.
 */
@include medium-is-desktop-plus {
    .header.shrink {

        #header-content-container {
            padding-top:    calc(#{$document-top-margin} / 4);
            padding-bottom: calc(#{$document-top-margin} / 4);

            .btn-header {

                padding-top:    0.25rem;
                padding-bottom: 0.25rem;
                /* If hovering over the button, show the text again */
                &:hover,
                &:focus {
                    .navigation-text {
                        width:  auto;
                    }
                }
            }

            .logo-link {

                /*
                 *  CSS transformations are the best way to size down the logo.
                 * The translation keeps it close to the left border, otherwise
                 * it would be scaled areound the center.
                 */
                transform: translate(-25%, 0%) scale(0.5);

                .logo{
                    padding-top:    0.25rem;
                    padding-bottom: 0.25rem;
                    min-height:     1rem;
                }
            }

            .navigation-entry {
                font-size: 0.75rem;
            }
        }
    }
}

@include medium-is-tablet {
    .header {
        nav {
            /* Navigation items have an icon and no title. */
            .navigation-entry {
                display: block;
                @include font-extra-small;
                .navigation-icon {
                    width: 100%;
                    display: block;
                    @include font-normal;
                }
            }

            /* Reduce Pre-defined button padding on tablets */
            .btn-header {
                padding-left:   0.25rem;
                padding-right:  0.25rem;
                flex-grow:      1;
            }
        }
    }
}

@include medium-is-tablet-minus {
    .header{
        .nav_toggle {
            display:                block;
            height:                 1.5rem;
            width:                  1.5rem;
            border:                 none;
            background-color:       transparent;
            outline:                none;
            padding:                0;

            &:before {
                content:        "\f0c9";
                font-family:    "Font Awesome 5 Free";
                font-size:      1.5rem;
                font-weight:    900;
                color:          $color-helmholtz-blue;
            }
        }

        /*
        This SCSS part is used to mimic the behavior, previously implemented
        via Javascript, in pure CSS using a technique called "Checkbox Hack"
        https://css-tricks.com/the-checkbox-hack/. This works by connecting
        a <label> with <input type="checkbox"> and hiding the <label>.
        Clicking on the label toggles the :checked state of this ID and allows
        for applying different style.
        */
        #mobile_toggle:checked ~ .nav_toggle::before {
            content:        "\f00d";
            color:          $color-helmholtz-green;
        }

        #mobile_toggle:checked ~ nav {

            display:            flex;
            flex-direction:     column;
            justify-content:    flex-end;
            align-content:      center;

            position:           absolute;
            left:               $document-side-margin;
            right:              $document-side-margin;
            top:                0;

            font-size:          1rem;
            color:              white;
            background-color:   $color-helmholtz-green;
            margin-left:        auto;
            margin-right:       auto;
            padding-top:        1.5rem; /* Determined by eyeballing */
            padding-left:       0.5rem;
            padding-right:      0.5rem;
            padding-bottom:     0.5rem;
            border-radius:      0.5em;
            z-index:            -1; /* Go below the header */

            @include respond-to-medium(
                margin-top,     $header-min-height
            );

            a {
                width:      auto; /* Allow parent flexbox to determine */
            }
        }

        /*
            If on a small device, the navigation will not be displayed.
            The toggle button for the fold menu is used instead
        */
        nav {
            display:    none;

            .btn-header {
                @include font-bold;

                color:              white;
                background-color:   $color-helmholtz-green;
                border:             none;

                margin: 0.25rem;

                &:hover{
                    background-color:   $color-helmholtz-dark-green;
                }

                &:focus {
                    box-shadow: 0 0 0 0.2rem rgba($color-helmholtz-dark-green,0.5);
                }
            }

            /* Navigation items have a title and no icon. */
            .navigation-entry {
                display: inline-block;
                .navigation-icon {
                    display: inline-block;
                    margin-right: 0.5rem;
                }
            }

        }
    }
}