Newer
Older
a
@include stretched-link
text-decoration: none
.post-content
> * + *
margin-top: $spacing0
.media
margin-top: 0
@include media-breakpoint-down(desktop)
@include in-page-with-sidebar
.grid
@include grid(2, desktop, $grid-gutter, half($grid-gutter))
@include in-page-without-sidebar
.grid
@include grid($block-posts-grid-columns)
.media picture img
width: 100%
@include media-breakpoint-up(sm)
article
.post-meta
display: inline
.post
.more
@include icon(arrow-right, after, true)
@include media-breakpoint-down(desktop)
+ .post
margin-top: $spacing2
&-meta
.post-author
display: inline-flex
&::after
content: '—'
margin: 0 half($spacing0)
.post-categories
display: flex
p[itemprop="articleBody"]
margin-top: 0
@include media-breakpoint-up(desktop)
.large
.post
flex-direction: row
gap: half($grid-gutter)
+ .post
margin-top: $spacing2
.post-meta
> *
display: inline
&:not(:first-child)::before
content: '—'
margin-right: half($spacing0)
> time
display: inline-block
margin-top: -2px
.post-author
p
display: inline
li
margin-right: $spacing0
.post-categories
li
display: inline-flex
margin-right: $spacing0
padding-bottom: 3px
&:not(:last-child)::after
content: ','
@include in-page-with-sidebar
.large
.post
@include media-breakpoint-down(xl)
flex-direction: column
gap: unset
@include media-breakpoint-up(xl)
.media,
.post-content
width: calc(#{col(4, 8)} + #{half($grid-gutter)})
@include in-page-without-sidebar
.large
.post
gap: $grid-gutter
.media
width: col(6)
.post-content
width: col(5)
p[itemprop="articleBody"]
margin-top: calc(#{$spacing1} + #{$spacing0})
&--list
article
border-bottom: 1px solid $color-border
.media
background: none
margin: 0
&, img
aspect-ratio: auto
@include media-breakpoint-down(desktop)
article
position: relative
padding-bottom: half($spacing3)
+ article
margin-top: half($spacing3)
.post-content
display: flex
flex-direction: column
.post-categories
margin-bottom: 0
p[itemprop="articleBody"]
@include media-breakpoint-up(desktop)
article
display: flex
flex-direction: row
@include in-page-with-sidebar
article
padding-bottom: $spacing1
+ article
margin-top: $spacing1
.media
width: calc(#{col(2, 8)} + #{half($grid-gutter)})
.post-content
width: col(6, 8)
margin-left: half($grid-gutter)
@include in-page-without-sidebar
border-bottom: 1px solid $color-border
gap: $grid-gutter
padding-bottom: $spacing3
position: relative
.media
width: col(3)
.post-content
width: col(6)
+ article
margin-top: $spacing3
.post-meta
position: absolute
right: 0
top: 0
margin-top: 0.3em
margin-bottom: $spacing0
.media
margin-bottom: $spacing0
background: none
.list
margin-top: half($spacing3)
border-top: 1px solid $color-border
article
border-bottom: 1px solid $color-border
position: relative
padding-bottom: half($spacing3)
margin-top: half($spacing3)
article
> * + *
margin-top: $spacing0
.media
margin-top: 0
@include media-breakpoint-down(desktop)
.list
border-top: 1px solid $color-border
p[itemprop="articleBody"]
margin-top: 0
@include media-breakpoint-up(desktop)
.highlight
@include h2
.list
article
@include h4
@include in-page-with-sidebar
.highlight-post
.post
flex-direction: row
.media
width: calc(#{col(3, 8)} + #{half($grid-gutter)})
margin-bottom: 0
.post-content
width: col(5, 8)
margin-left: half($grid-gutter)
.list
article
@include grid(8, desktop, 0, 0)
grid-column: 7 / 9
text-align: right
order: 2
.post-author p::before
content: ''
p[itemprop="articleBody"]
@include in-page-without-sidebar
@include grid(2)
border-top: 0
margin-top: 0
article:first-child
.post .media img
aspect-ratio: unset
@include media-breakpoint-up(desktop)
.post
&.right
margin-left: auto
+ .post:not(.portrait, .square, .landscape)
@include media-breakpoint-down(desktop)
.post
.post-meta
margin-top: half($spacing0)
.media
margin-bottom: $spacing0
+ .post
margin-top: $spacing3
@include in-page-without-sidebar
width: col(10)
margin-left: auto
margin-right: auto
.post
width: col(4, 10)
// Move this part to blocks/categories when categories block is ready
.block-posts
.categories--grid
li
background: $color-background-alt
padding: $spacing1
position: relative
a
@include h3
font-weight: bold
text-decoration: none
@include stretched-link
p
display: block