posts.sass 5.47 KiB
.block-posts
.top
margin-bottom: $spacing2
a
@include icon("arrow-right", "after", px2rem(16), true)
text-decoration: none
.posts
@include grid(1)
@include grid(3, md)
article
h1
a
@include stretched-link
text-decoration: none
.post-content
> * + *
margin-top: $spacing0
.media
margin-top: 0
&--grid
@include media-breakpoint-down(md)
article + article
margin-top: $spacing3
@include media-breakpoint-up(md)
@include in-page-with-sidebar
.grid
@include grid(2, md, $grid-gutter, half($grid-gutter))
@include in-page-without-sidebar
.grid
@include grid(3)
&--list
article
border-bottom: 1px solid $color-border
.media
background: none
margin: 0
&, img
aspect-ratio: auto
@include media-breakpoint-down(md)
article
position: relative
padding-bottom: half($spacing3)
// display: flex
// flex-direction: row
+ article
margin-top: half($spacing3)
.post-content
display: flex
flex-direction: column
// width: 70%
h1
margin-bottom: 0
time
margin-top: half($spacing0)
order: 2
p
margin-top: half($spacing0)
order: 4
// h1, time, p
// padding-right: calc(30% + #{$spacing1})
.media
display: none
order: 3
// position: absolute
// width: 30%
// top: 0
// right: 0
@include media-breakpoint-up(md)
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
article
padding-bottom: $spacing3
border-bottom: 1px solid $color-border
position: relative
.media
width: col(3)
.post-content
width: col(6)
margin-left: $grid-gutter
+ article
margin-top: $spacing3
time
position: absolute
right: 0
top: 0
margin-top: 0.3em
&--highlight
.highlight-post
h1
margin-bottom: $spacing0
.media
margin-bottom: $spacing0
background: none
&, img
aspect-ratio: auto
.list
margin-top: half($spacing3)
border-top: 1px solid $color-border
article
@include 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(md)
.list
border-top: 1px solid $color-border
@include media-breakpoint-up(md)
.highlight
h1
@include h2
.list
article
h1
@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, md, 0, 0)
h1
grid-column: 1 / 7
time
grid-column: 7 / 9
text-align: right
order: 2
margin-top: 0
p
grid-column: 1 / 7
order: 3
@include in-page-without-sidebar
.highlight
@include grid(2)
.list
border-top: 0
margin-top: 0
article:first-child
margin-top: 0