diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/related-posts/style.scss')
-rw-r--r-- | plugins/jetpack/extensions/blocks/related-posts/style.scss | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/related-posts/style.scss b/plugins/jetpack/extensions/blocks/related-posts/style.scss new file mode 100644 index 00000000..bc753513 --- /dev/null +++ b/plugins/jetpack/extensions/blocks/related-posts/style.scss @@ -0,0 +1,85 @@ +.jp-related-posts-i2 { + &__row { + display: flex; + margin-top: 1.5rem; + + &:first-child { + margin-top: 0; + } + + &[data-post-count='3'] .jp-related-posts-i2__post { + max-width: calc( 33% - 20px ); + } + + &[data-post-count='2'] .jp-related-posts-i2__post, + &[data-post-count='1'] .jp-related-posts-i2__post { + max-width: calc( 50% - 20px ); + } + } + + &__post { + flex-grow: 1; + flex-basis: 0; + margin: 0 10px; + display: flex; + flex-direction: column; + } + + &__post-heading, &__post-img-link, &__post-date, &__post-context { + flex-direction: row; + } + + &__post-img-link, &__post-image-placeholder { + order: -1; + } + + &__post-heading { + margin: 0.5rem 0; + font-size: 1rem; + line-height: 1.2em; + } + + &__post-link { + display: block; + width: 100%; + line-height: 1.2em; + margin: 0.2em 0; + } + + &__post-img { + width: 100%; + } + + &__post-image-placeholder { + display: block; + position: relative; + margin: 0 auto; + max-width: 350px; + &-icon { + position: absolute; + top: calc( 50% - 12px ); + left: calc( 50% - 12px ); + } + } +} + +/* List view */ + +.jp-relatedposts-i2[data-layout='list'] { + .jp-related-posts-i2__row { + margin-top: 0; + display: block; + } + .jp-related-posts-i2__post { + max-width: none; + margin: 0; + margin-top: 1rem; + } + .jp-related-posts-i2__post-image-placeholder { + max-width: 350px; + margin: 0; + } + .jp-related-posts-i2__post-img-link { + margin-top: 1rem; + } +} |