frontpage.scss

---
---

@import "boilerplate/colors";
@import "boilerplate/mixins";
@import "common/article";

#title {

    h1 {
        margin-bottom: 0;
    }

    h2 {
        a {
            vertical-align:     middle;
        }
    }

    p {
        margin-top: 0;
    }
}

.info-col {
    display: grid;
    grid-template-columns: 1fr 1fr;

    @include medium-is-phone {
        grid-template-columns: 1fr;
    }

    .info-box {
        padding: 1rem;
    }
}

.frontpage-card {
    @include drop-shadow;

    width:      15rem;
    max-width:  15rem;

    margin: 1rem;

    color: black;

    .card-body {
        display:    flex;
        flex-flow:  column nowrap;

        .badge {
            margin: 0.1rem;
        }

        a {
            margin-top: auto;
        }
    }
}

.frontpage-image-card {
    @extend .frontpage-card;

    @include drop-shadow(
        $color: rgba(black, 0.5)
    );

    color:              white;
    background-color:   black;
}

.frontpage-jumbotron {
    padding-right:  0;
    padding-left:   0;
    border-radius:  0;

    margin-top:     0;
    margin-bottom:  0;

    background-position:    center;
    background-size:        cover;

    background-color:   $color-content-light-gray;
    color:              $color-helmholtz-blue;

    text-align: center;

    h1, h2, h3 {
        @include font-heading;

        margin-top:     0.50rem;
        margin-bottom:  0.25rem;
    }

    /* NOTE consider moving this to common/_general.scss and fix the articles */
    section > * {
        margin-left:    auto;
        margin-right:   auto;
        max-width:      60rem;
    }

    .flex-content-wrapper {
        display:            flex;
        flex-flow:          wrap;
        justify-content:    center;
    }

    .toast {
        color: black;
    }
}

.frontpage-mission-jumbotron {
    @extend .frontpage-jumbotron;

    padding-top:    1rem;
    padding-bottom: 1rem;

    position:           relative;
    background-color:   $color-helmholtz-blue;
    color:              white;
}

.btn-logo {
    display: flex;
    align-items: center;

    width:15rem;
    height:10rem;

    margin: 0.5rem;
}