Search results: Styles

_search-results.scss

/* ------------------------------------------------------------ *\
    Search results
\* ------------------------------------------------------------ */

.search-results__wrap {

    @include breakpoint-down(mobile) {
        margin-top: 15px;
    }

    .screen-reader-text {
        display: none;
    }

    .search-results__header {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        padding-bottom: 20px;

        @include breakpoint-down(mobile) {
            display: block;
        }
    }

    .search-results__summary {
        span {
            font-weight: bold;
        }

        @include breakpoint-down(mobile) {
            margin-bottom: 20px;
        }
    }

    .search-results__items {
        padding-top: 30px;
        padding-bottom: 40px;
        border-top: 3px solid #e4e2df;
        border-bottom: 3px solid #e4e2df;
    }

    .search-results__item {
        margin-bottom: 45px;

        @include breakpoint-down(mobile) {
            margin-bottom: 40px;
        }
    }

    .search-results__item-title-section {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .search-results__item-title {
        margin-bottom: 0; // reset
        text-decoration: none;
    }

    .search-results__item-type {
        margin-left: 20px;
        text-align: center;
        white-space: nowrap;
        width: min-content;

        @include breakpoint-down(mobile) {
            white-space: normal;
        }
    }

    .search-results__item-link {
        display: block;
    }

    .search-results__item-excerpt + .search-results__item-link {
        margin-top: 10px;
    }

    .search-results__footer {
        text-align: right;
        padding-top: 25px;
        
        @include breakpoint-down(mobile) {
            text-align: left;
        }
    }

}

// Fix content width page 2+ of results
// body.search-results .article__entry-full {
//     width: 100%;
// }