hexo-theme-stellar/source/css/_layout/partial/related_posts.styl

63 lines
1.5 KiB
Stylus
Raw Normal View History

2021-02-25 20:49:43 +08:00
.related-wrap#related-posts
2021-02-19 23:33:19 +08:00
.related-posts
width: 100%
display: flex
2021-03-05 21:37:28 +08:00
margin: 1rem 0
2021-02-19 23:33:19 +08:00
overflow-x: scroll
align-items: flex-start
scrollbar(8px, 4px)
2021-02-20 13:09:41 +08:00
padding-bottom: 8px
2021-02-25 13:12:04 +08:00
border-radius: $border-block
2021-02-19 23:33:19 +08:00
a
flex-grow: 0
flex-shrink: 0
background: var(--card)
2021-02-25 13:12:04 +08:00
border-radius: $border-block
2021-02-19 23:33:19 +08:00
padding-bottom: 1rem
line-height: 1.2
display: flex
flex-direction: column
overflow: hidden
2021-02-24 22:52:46 +08:00
min-width: 280px
width: 40vw
max-width: 460px
2021-02-19 23:33:19 +08:00
border: 1px solid var(--hover-block)
.img
2021-02-24 22:52:46 +08:00
min-width: 100%
min-height: 140px
height: "calc(%s * 0.5)" % @width
max-height: 230px
2021-02-19 23:33:19 +08:00
overflow: hidden
img
width: 100%
height: 100%
object-fit: cover
2021-03-04 23:38:41 +08:00
&:not(.lazy)
2021-02-24 22:07:32 +08:00
trans1: transform 1s
2021-02-19 23:33:19 +08:00
@media screen and (max-width: $device-tablet)
2021-02-24 22:52:46 +08:00
width: 70vw
2021-02-19 23:33:19 +08:00
.img
2021-02-24 22:52:46 +08:00
height: "calc(%s * 0.5)" % @width
2021-02-19 23:33:19 +08:00
.title
color: var(--text-p1)
font-weight: 500
2021-03-05 21:37:28 +08:00
font-size: $fs-15
2021-02-19 23:33:19 +08:00
margin: 1rem 1rem 0 1rem
display: -webkit-box
-webkit-box-orient: vertical
overflow: hidden
-webkit-line-clamp: 2
.excerpt
color: var(--text-p2)
2021-03-05 21:37:28 +08:00
font-size: $fs-13
2021-02-19 23:33:19 +08:00
margin: 0.4rem 1rem 0 1rem
display: -webkit-box
-webkit-box-orient: vertical
overflow: hidden
-webkit-line-clamp: 3
&:hover
2021-02-24 00:32:07 +08:00
img
transform: scale(1.04)
2021-02-19 23:33:19 +08:00
a+a
2021-03-05 21:37:28 +08:00
margin-left: 1rem