hexo-theme-butterfly/source/css/_layout/relatedposts.styl

54 lines
1023 B
Stylus

.relatedPosts
margin-top: 1rem
.relatedPosts_headline
margin-bottom: 5px
font-weight: 700
font-size: 20px
.relatedPosts_item
position: relative
display: inline-block
overflow: hidden
margin: 3px
width: calc(33.333% - 6px)
height: 200px
background: $dark-black
vertical-align: bottom
&:hover
.relatedPosts_cover
opacity: .8
transform: scale(1.1)
@media screen and (max-width: 768px)
margin: 2px
width: calc(50% - 4px)
height: 150px
@media screen and (max-width: 480px)
width: calc(100% - 4px)
.relatedPosts_cover
width: 100%
height: 100%
opacity: .4
transition: all .6s
object-fit: cover
.relatedPosts_main
position: absolute
top: 50%
padding: 0 1rem
width: 100%
color: $white
transform: translate(0, -50%)
.relatedPosts_date
color: $light-grey
font-size: 90%
.relatedPosts_title
@extend .limit-more-line
-webkit-line-clamp: 2