_roadmap.scss

/* styles for roadmap page */

@import "boilerplate/_breakpoints";
@import "boilerplate/_colors";
@import "boilerplate/_mixins";
@import "boilerplate/_responsive";

/*
 * Variables used for the timeline layout
 */

$roadmap_timeline_thickness:    0.25rem;

div.timeline {
    @include use-margins-to-center;

    border-left:    $roadmap_timeline_thickness solid $color-helmholtz-blue;
    display:        flex;
    flex-flow:      column;
    max-width:      max-content;

    /*
     * Cancel section top/bottom padding to have the timeline go across all the
     * main height.
     * Re-apply the padding internally to keep the timeline content at a
     * reasonable distance between title and footer.
     */
    margin-top:     -$section-top-padding;
    padding-top:    $section-top-padding;
    margin-bottom:  -$section-bottom-padding - $transition-max-height;
    padding-bottom: $section-bottom-padding + $transition-max-height;
}

.roadmap-heading {
    @include font-very-large;
    @include font-bold;

    color:          $color-helmholtz-blue;
    margin-left:    4rem;
    margin-right:   auto;
    text-align:     center;
    width:          50%;
    left:           0rem;
}

.roadmap-item {
    display:    flex;
    flex-flow:  column nowrap;

    article {
        margin-left:    1rem;
        margin-right:   1rem;
        padding:        1rem;

        /*
        * Reduce font-sizes and spacings between elements to consume less
        * space in timeline by each roadmap item of the four services.
        */
        h1 {
            @include font-normal;

            margin-top:     0.25rem;
            margin-bottom:  0.25rem;
        }
        h2 {
            @include font-small;

            margin-top:     0.25rem;
            margin-bottom:  0.25rem;
        }
        p {
            @include font-small;

            margin-top:     0.25rem;
            margin-bottom:  0.25rem;
        }
        ul {
            margin:         0.25rem;
            li {
                @include font-small;
            }
        }
    }

    .service_name {
        float:          right;
        margin-top:     0.25rem;

        /*
         * Reserve a whole line for service on phone since there is not enough
         * horizontal space for the right floating solution.
         */
        @include medium-is-phone {
            float:      none;
        }
    }
}


section {
    h1 {
        @include font-very-large;
        @include font-bold;

        color:          $color-helmholtz-blue;
        text-align:     center;
    }

    h2 {
        @include font-large;
        @include font-bold;
    }
}

.roadmap-month {
    color:              $color-helmholtz-blue;
    display:            inline-flex;
    align-items:        center;
    gap:                1rem;
    margin-top:         1rem;

    .timeline-bubble {
        background-color:   $color-helmholtz-blue;

        width:              10*$roadmap_timeline_thickness;
        height:             $roadmap_timeline_thickness;
        flex-shrink:        0;

        /*
         * Round off the right side corners for a smoother visual appearance
         */
        border-top-right-radius:    0.5*$roadmap_timeline_thickness;
        border-bottom-right-radius: 0.5*$roadmap_timeline_thickness;
    }
}