Skip to content
Snippets Groups Projects
posts.sass 2.77 KiB
Newer Older
alexisben's avatar
alexisben committed
.post
alexisben's avatar
alexisben committed
    .post-title
        @include h3
        a
            @include stretched-link
            display: block
            text-decoration: none
alexisben's avatar
alexisben committed
    time
        color: $post-time-color
alexisben's avatar
alexisben committed
        display: inline-block
        vertical-align: middle
    .post-author
        @include meta
alexisben's avatar
alexisben committed
        color: var(--color-text-alt)
Olivia206's avatar
Olivia206 committed
.posts__section,
alexisben's avatar
alexisben committed
.authors__term,
alexisben's avatar
alexisben committed
.posts_categories__term,
alexisben's avatar
alexisben committed
.persons__page
alexisben's avatar
alexisben committed
    .posts--list
        article
alexisben's avatar
alexisben committed
            border-bottom: 1px solid var(--color-border)
alexisben's avatar
alexisben committed
            display: flex
            margin-bottom: $spacing-3
            padding-bottom: $spacing-3
alexisben's avatar
alexisben committed
            flex-direction: row
alexisben's avatar
alexisben committed
            .post-title + p
alexisben's avatar
alexisben committed
            @include media-breakpoint-up(desktop)
                @include grid
                margin-bottom: $spacing-5
                padding-bottom: $spacing-5
alexisben's avatar
alexisben committed
            .post-content
alexisben's avatar
alexisben committed
                grid-column: 4/13
                @include media-breakpoint-down(desktop)
                    flex: 1
alexisben's avatar
alexisben committed
                p:not(.title)
                    @include media-breakpoint-down(desktop)
alexisben's avatar
alexisben committed
                        display: none
            .media
                background: none
                margin: 0
                @include media-breakpoint-down(desktop)
                    width: 33.33333%
                @include media-breakpoint-up(desktop)
alexisben's avatar
alexisben committed
                    grid-column: 1/4
                &, img
                    aspect-ratio: auto
            @include media-breakpoint-up(desktop)
alexisben's avatar
alexisben committed
                .post-meta
alexisben's avatar
alexisben committed
                    position: absolute
                    right: 0
alexisben's avatar
alexisben committed
                    text-align: right
alexisben's avatar
alexisben committed
                    top: 0
alexisben's avatar
alexisben committed
                    time
                        font-size: $h5-size
                .post-content
alexisben's avatar
alexisben committed
                    .post-title,
alexisben's avatar
alexisben committed
                    > p
alexisben's avatar
alexisben committed
                        max-width: columns(6)
alexisben's avatar
alexisben committed
    .posts--grid
        @include grid(1)
        @include grid(2, desktop)
        @include grid($posts-grid-columns, xxl)
alexisben's avatar
alexisben committed
        .post
            @include author-and-time-side-to-side
alexisben's avatar
alexisben committed
            .post-meta
alexisben's avatar
alexisben committed

alexisben's avatar
alexisben committed
.posts__page
alexisben's avatar
alexisben committed
    .lead
        @include h3
alexisben's avatar
alexisben committed
        // Safe spacing if post is empty
    .document-content
        min-height: 350px
        // Add after element to avoid "min-height" to ignore the last block's margin-bottom
        &::after
            content: ''
            display: block
            height: 1px
alexisben's avatar
alexisben committed
    &:not(.full-width)
        .post-sidebar
            @include sidebar
alexisben's avatar
alexisben committed

.post-infos
alexisben's avatar
alexisben committed

.related
alexisben's avatar
alexisben committed
    .posts
alexisben's avatar
alexisben committed
        @include grid(2, desktop)
alexisben's avatar
alexisben committed
        margin-bottom: 0
    .link
        @extend .link-more

alexisben's avatar
alexisben committed
.authors__term
    .blocks + .container