media/css/m24/springboard.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use 'vars/lib' as *;

$springboard-thumb-width: 32px;

.m24-c-springboard {
    margin: $spacer-xl 0;
    width: 100%;

    .m24-c-springboard-item:first-child {
        border-top: $border-width solid transparent; // accommodates negative margin needed for @include short-dividers();
    }

    .m24-c-content &:last-child {
        margin-bottom: 0;
    }
}

.m24-c-springboard-link {
    @include short-dividers($m24-color-light-gray);
    color: $m24-color-black;
    display: grid;
    gap: $spacer-lg;
    grid-template-areas:
        "type cat cat"
        "preview preview preview"
        "date author author";
    margin-left: calc($container-padding * -1);
    margin-right: calc($container-padding * -1);
    padding: $spacer-md $container-padding;
    transition: background-color $fast $bezier;

    &:link:hover,
    &:link:focus {
        background-color: $m24-color-light-gray;
        text-decoration: none;
        cursor: pointer;
    }

    &:link,
    &:link:visited {
        text-decoration: none;
    }
}

.m24-c-springboard-headings {
    display: none;
    font-size: 12px;

    .m24-c-springboard-link {
        border-top: none;
        padding-bottom: $spacer-xs;
        padding-top: $spacer-xs;

        > * {
            font-weight: normal;
        }
    }
}

.m24-c-springboard-type {
    grid-area: type;
    font-weight: bold;
}

.m24-c-springboard-icon {
    @include bidi(((margin-right, $spacer-xs, margin-left, 0),));
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    display: inline-block;
    height: 24px;
    vertical-align: middle;
    width: 24px;
}

.m24-c-springboard-topic {
    font-weight: bold;
    grid-area: cat;
    text-align: end;
}

.m24-c-springboard-preview {
    grid-area: preview;
}

.m24-c-springboard-author {
    grid-area: author;
    text-align: end;
}

.m24-c-springboard-thumb {
    display: none;
}

// icons
.m24-c-springboard-icon-article {
    background-image: url('/media/img/icons/m24-small/glasses.svg');
}

.m24-c-springboard-icon-podcast {
    background-image: url('/media/img/icons/m24-small/headphones.svg');
    background-size: 18px 18px;
}

.m24-c-springboard-icon-video {
    background-image: url('/media/img/icons/m24-small/arrow-right.svg');
    background-size: 16px 16px;
}


@media #{$mq-lg} {
    @supports (grid-template-columns: subgrid) {
        .m24-c-springboard {
            display: grid;
            grid-template-areas: none;
            grid-template-columns: repeat(5, auto);
            grid-template-rows: auto;
            position: relative;
        }

        .m24-c-springboard-item {
            display: grid;
            grid-column: 1/-1;
            grid-template-columns: subgrid;
            row-gap: 0;
        }

        .m24-c-springboard-link {
            align-items: center;
            display: grid;
            grid-column: 1/-1;
            grid-template-columns: subgrid;
            row-gap: 0;
            padding: $spacer-sm $container-padding;

            > * {
                grid-area: auto;
                text-wrap: nowrap;
            }
        }

        .m24-c-springboard-thumb {
            display: block;
            width: $springboard-thumb-width;

            img {
                display: block;
            }
        }

        .m24-c-springboard-preview {
            text-wrap: wrap;
        }

        .m24-c-springboard-author,
        .m24-c-springboard-topic {
            text-align: start;
        }
    }
}

@media #{$mq-max} {
    @supports (grid-template-columns: subgrid) {
        .m24-c-springboard-preview {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}