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%
&--large
.post
.more
@include icon(arrow-right, after, true)
// Masquer le point entre l'auteur et la date (mixin author-and-time-side-to-side)
// Permet d'aligner correctement les différents line-height des différents composants du post meta
line-height: 0 // Hack pour que les enfants de post-meta soient correctement
> *
margin-right: $spacing-3
time
vertical-align: baseline
.post-author
display: inline
p
display: inline
.post-categories
*
display: inline-block
li
margin-right: $spacing-2
// Désactiver le ratio forcé de la configuration $article-media-aspect-ratio
@include media-breakpoint-down(desktop)
.post
margin-top: $spacing-4
@include media-breakpoint-up(desktop)
.large
.post
flex-direction: row
margin-top: $spacing-4
margin-top: $spacing-3
@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 media-breakpoint-up(xl)
&.without-images
.post
.post-content
width: columns(8)
@include in-page-without-sidebar
.large
.post
&.without-images
.post
@include media-breakpoint-up(xl)
margin-left: offset(4)
.post-content
width: columns(6)
@include media-breakpoint-down(xl)
.post-content
width: columns(8)
.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
gap: var(--grid-gutter) // gap plutôt que marge pour l'affichage avec ou sans image
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
gap: var(--grid-gutter) // pour le cas où on masque l'image
.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:not(.portrait, .square, .landscape)
margin-top: -3%
@include media-breakpoint-down(desktop)
.post
.post-meta
margin-top: $spacing-1
margin-bottom: $spacing-2
margin-top: $spacing-5
&:hover
cursor: grab
&.is-grabbing
cursor: grabbing
li
list-style: none
.posts
display: flex
gap: unset
.post
margin: 0 calc(var(--grid-gutter) / 2)
.actions-arrows
justify-content: space-between
@include media-breakpoint-down(desktop)
gap: half(var(--grid-gutter))
.post
width: columns(10)
.grab-item:last-of-type
margin-right: half(var(--grid-gutter))
.actions-arrows
margin-right: var(--grid-gutter)
@include media-breakpoint-up(desktop)
.next
margin-right: pxToRem(-27) // Marge négative pour aligner correctement le picto à la colonne
@include in-page-with-sidebar
.post
.carousel
.actions-arrows
width: offset(6)
@include in-page-without-sidebar
.block-content
display: flex
gap: var(--grid-gutter)
.top
width: columns(3)
.carousel
.actions-arrows
width: offset(8)
// Move this part to blocks/categories when categories block is ready
.block-posts
.categories--grid
li
padding: $spacing-3