diff --git a/assets/sass/_theme/blocks/posts.sass b/assets/sass/_theme/blocks/posts.sass index 70de4eab1b449b2b3adc49804010fe3f5bcbd727..25bfafd717cc7d2e1534129fd505b13b166806bf 100644 --- a/assets/sass/_theme/blocks/posts.sass +++ b/assets/sass/_theme/blocks/posts.sass @@ -285,6 +285,45 @@ margin-right: auto .post width: columns(4) + &--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 diff --git a/layouts/partials/blocks/templates/posts/scrollable.html b/layouts/partials/blocks/templates/posts/scrollable.html new file mode 100644 index 0000000000000000000000000000000000000000..73d64d02d244d1164bb171a35978b6c769341399 --- /dev/null +++ b/layouts/partials/blocks/templates/posts/scrollable.html @@ -0,0 +1,12 @@ +{{ $heading_level := .heading_level | default 3 }} +{{ $heading := printf "h%d" $heading_level }} + +<div class="scrollable"> + {{ range $post := .posts -}} + {{ with site.GetPage (printf "/posts/%s" $post) }} + {{ partial "posts/post.html" (dict + "post" . + "heading" $heading) }} + {{ end }} + {{ end }} +</div>