Newer
Older
margin-bottom: $spacing-4
a
@include stretched-link
text-decoration: none
.post-content
> * + *
margin-top: $spacing-2
@include media-breakpoint-down(desktop)
margin-top: $spacing-5
@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)
margin-top: $spacing-4
&-meta
.post-author
display: inline-flex
&::after
content: '—'
margin: 0 $spacing-1
.post-categories
display: flex
p[itemprop="articleBody"]
margin-top: 0
@include media-breakpoint-up(desktop)
.large
.post
flex-direction: row
margin-top: $spacing-4
margin-top: $spacing-3
.post-meta
> *
display: inline
&:not(:first-child)::before
content: '—'
margin-right: $spacing-1
> time
display: inline-block
margin-top: -2px
.post-author
p
display: inline
li
margin-right: $spacing-2
margin-right: $spacing-2
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
margin-top: $spacing-2
@include media-breakpoint-up(xl)
.media,
.post-content
@include in-page-without-sidebar
.large
.post
p[itemprop="articleBody"]
margin-top: calc(#{$spacing-3} + #{$spacing-2})
.media
background: none
margin: 0
&, img
aspect-ratio: auto
@include media-breakpoint-down(desktop)
padding-top: $spacing-2
.post-categories
margin-bottom: 0
p[itemprop="articleBody"]
margin-top: $spacing-1
@include media-breakpoint-up(desktop)
article
display: flex
flex-direction: row
padding-bottom: $spacing-3
margin-top: $spacing-3
@include in-page-without-sidebar
padding-bottom: $spacing-5
position: relative
.media
.post-content
margin-top: $spacing-5
.post-meta
position: absolute
right: 0
top: 0
margin-top: 0.3em
margin-bottom: $spacing-2
margin-bottom: $spacing-2
margin-top: $spacing-2
@include media-breakpoint-down(desktop)
.list
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
.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: $spacing-1
margin-bottom: $spacing-2
margin-top: $spacing-5
@include in-page-without-sidebar
margin-left: auto
margin-right: auto
.post
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
&--scrollable
.container
padding-right: 0
.scrollable
display: flex
gap: var(--grid-gutter)
overflow-x: auto
padding-bottom: $spacing-3
scroll-snap-type: x mandatory
.post
display: inline-flex
scroll-snap-align: start
&:last-of-type
margin-right: var(--grid-gutter)
@include media-breakpoint-down(desktop)
.top
margin-right: half(var(--grid-gutter))
.scrollable
gap: half(var(--grid-gutter))
.post
min-width: columns(10)
&:last-of-type
margin-right: half(var(--grid-gutter))
@include in-page-with-sidebar
&.block
.block-content
padding-left: calc((100% / 12 * (4 / 12 * 12) ))
.post
min-width: columns(3)
@include in-page-without-sidebar
.block-content
display: flex
gap: var(--grid-gutter)
.top
width: columns(3)
.scrollable
flex: 1
.post
min-width: columns(4)
// Move this part to blocks/categories when categories block is ready
.block-posts
.categories--grid
li
padding: $spacing-3