_title.scss

/*
    This file contains the styling for the title image section that comes below
    the header and provides the page title on a fancy backdrop.
*/



div#title {
    position:               relative;
    min-height:             2rem;
    background-color:       $color-helmholtz-blue;

    .location-info {
        a {
            color: white;

            &:focus,
            &:hover {
                color:      $color-helmholtz-bright-blue;
            }
        }
    }

     /*
        Insert a blind space before the container that covers the area that
        disappears below the header. This makes it easier to configure the title
        image since one does not have to consider the overlapped space anymore.
    */
    .header-offset {
        width:      100%;

        content:    "";
        display:    block;

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

    img.bg-jumbotron {
        mix-blend-mode: soft-light;
        word-wrap:      break-word;
    }

    .title-content-container {
        display:            flex;
        flex-flow:          row nowrap;
        column-gap:         1rem;
        align-items:        flex-end;
        justify-content:    space-between;

        @include medium-is-tablet-minus {
            flex-flow:          column wrap;
            align-items:        center;
            row-gap:            1rem;
            justify-content:    space-around;
        }

        /*
            Place margins large enough to avoid the content hitting
            the transitions above and below.
        */
        padding-top:     3rem;
        padding-bottom:  3rem;
        padding-left:   $document-side-margin;
        padding-right:  $document-side-margin;

        background:     transparent;
        color:          white;

        /* Specify position attribute or the z-index doesn't work */
        position:   relative;
        z-index:    1;

        .alert {
            margin: 1rem;

            h2 {
                @include font-heading;
            }
        }
    }

    .title-map-container {
        @extend .title-content-container;

        padding:    0;
        @include respond-to-medium(height, 40vh, 50vh, 60vh);
    }

    h1 {
        @include font-heading;
        @include respond-to-medium(font-size,   $title-image-text-size);

        /* Make sure the heading gets enough space if the title box is shared */
        min-width:  40%;
    }

    a {
        color:      white;

        &:focus,
        &:hover {
            color:  $color-helmholtz-bright-blue;
        }
    }

    /*
        The transition element from the title image into the main body.
        NOTE Mirrored along the top line so it reaches into the title image and
        overlaps it instead of being placed below and going into the following
        main content.
    */
    .transition {
//        @include rotate-180-offset-top;
        @include rotate-180;

        color: $color-content-light-gray;
        position:   absolute;
        right:      -1px; /* (1) */
        bottom:     -1px; /* (1) */

        /* (1) Drag in the transition to avoid 1px wide border artifacts. */
    }
}