Skip to content
Snippets Groups Projects
posts.sass 3.08 KiB
Newer Older
alexisben's avatar
alexisben committed
.post
alexisben's avatar
alexisben committed
    @include article($post-media-background)
alexisben's avatar
alexisben committed

sebousan's avatar
sebousan committed
    /* TODO toujours d'actualité ou propre à un site ?
alexisben's avatar
alexisben committed
    .author,
    .post-categories
        @extend .small
        &,
        a
alexisben's avatar
alexisben committed
            color: $post-categories-color

    time
        color: $post-time-color
        display: block
        font-size: px2rem(14)
alexisben's avatar
alexisben committed

Olivia206's avatar
Olivia206 committed
.posts__section,
.authors__term
Olivia206's avatar
Olivia206 committed
    .hero
        margin-bottom: $spacing4
Olivia206's avatar
Olivia206 committed
    
alexisben's avatar
alexisben committed
    @if $posts-layout-list
Olivia206's avatar
Olivia206 committed
        .posts 
            @include grid(1)
            grid-gap: 0
            > div 
                border-bottom: 1px solid $main-border-color
                margin-bottom: $spacing3
                padding-bottom: $spacing3
                .post
Olivia206's avatar
Olivia206 committed
                    display: flex
Olivia206's avatar
Olivia206 committed
                    flex-direction: row
Olivia206's avatar
Olivia206 committed
                    @include media-breakpoint-up(md)
alexisben's avatar
alexisben committed
                        @include grid
Olivia206's avatar
Olivia206 committed
                    div:not(.media)
                        grid-column: 4/13
Olivia206's avatar
Olivia206 committed
                        @include media-breakpoint-down(md)
                            flex: 1
                            margin-left: $spacing0
                        p:not(.title)
                            @include media-breakpoint-down(md)
                                display: none
Olivia206's avatar
Olivia206 committed
                    .media
Olivia206's avatar
Olivia206 committed
                        background: none
Olivia206's avatar
Olivia206 committed
                        margin: 0
alexisben's avatar
alexisben committed
                        @include media-breakpoint-down(md)
                            width: 33.33333%
Olivia206's avatar
Olivia206 committed
                        @include media-breakpoint-up(md)
                            grid-column: 1/4
                    @include media-breakpoint-up(md)
                        time 
                            font-size: $h5-size
                            position: absolute
                            right: 0
                            top: 0
                        div:not(.media)
alexisben's avatar
alexisben committed
                            h1,
Olivia206's avatar
Olivia206 committed
                            p,
                            a
alexisben's avatar
alexisben committed
                                max-width: col(6, 9)
alexisben's avatar
alexisben committed

Olivia206's avatar
Olivia206 committed
    @else 
        .posts
            @include grid(1)
            @include grid(2, md)
            @include grid(3, xl)
alexisben's avatar
alexisben committed

alexisben's avatar
alexisben committed
.posts__page
    aside
        @include container

alexisben's avatar
alexisben committed
.post-categories
alexisben's avatar
alexisben committed
    @include list-reset
alexisben's avatar
alexisben committed
    @extend .small
    margin: 0
    li
        display: inline-block
        vertical-align: middle
        margin-left: 10px
alexisben's avatar
alexisben committed
        &:last-child
            &::after
                content: none
alexisben's avatar
alexisben committed

.table-infos
    border-top: 1px solid $main-border-color
    margin-bottom: 0
Arnaud Levy's avatar
Arnaud Levy committed
    &, li
        font-size: $small-font-size    
alexisben's avatar
alexisben committed
    ul
        @include list-reset
    caption
        @include visually-hidden
        position: relative !important // Fix safari iOS border issue
    th
alexisben's avatar
alexisben committed
        color: color-contrast($main-color, 25%)
alexisben's avatar
alexisben committed
        font-weight: 400
        padding-left: 0
        white-space: nowrap
    tr
        border-color: $main-border-color
    td:last-of-type
        padding-right: 0
        text-align: right
    .share
        justify-content: flex-end
        li:last-child
            margin-right: -$spacing0
alexisben's avatar
alexisben committed

.related
    margin-top: $spacing1
    .posts
        @include grid(2, md)
        margin-bottom: 0
    .link
        @extend .link-more