hexo-theme-stellar/source/css/_layout/list.styl

186 lines
3.9 KiB
Stylus

// list
.l_main .post-list
margin: 1rem
.post-title:first-child
margin-top: .5rem
.l_main .post-list
.post-title
font-weight: 500
margin: 1.25rem 0 .75rem 0
line-height: 1.2
font-size: $fsh4
border-bottom: none
color: var(--text)
trans1 color
@media screen and (max-width: $device-mobile)
font-size: $fsh5
margin: 0.5rem 0
.wiki .post-title
margin-top: 0.5rem
// card
.post-list .post-card
display: block
margin: 1rem 0
border-radius: $border-card
background: var(--card)
@media (prefers-color-scheme: dark)
&:hover
box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -8px $color-theme
@media (prefers-color-scheme: light)
box-shadow: $boxshadow-card
hover-float()
trans1 all
overflow: hidden
z-index: 0
position: relative
.excerpt
margin: 1rem 0
@media screen and (max-width: $device-mobile)
margin: 0.5rem 0
>p
margin: 1rem 0
@media screen and (max-width: $device-mobile)
margin: 0.5rem 0
line-height: 1.5
.meta.cap
&,span
display: flex
align-items: center
flex-wrap: wrap
margin: 0
line-height: 2
--fsp: $fsp1
font-size: var(--fsp)
svg
height: 1em
width: auto
line-height: 0
transform: scale(1.2)
margin-right: 8px
>span+span
margin-left: 1.5rem
span.pin
img
object-fit: contain
svg
color: $c-red
.post-list.post .post-card:hover
img
filter: brightness(50%)
// common article
.post-list .md-text
padding: 1rem
@media screen and (max-width: $device-mobile)
padding: 0.5rem 1rem
p
color: var(--text-p2)
font-size: $fs-14
// posts
.post-list .post-card .post-cover
overflow: hidden
width: 'calc(100% + 2 * %s)' % 1rem
border-radius: 0
margin-left: -1rem
margin-top: -1rem
margin-right: -1rem
background: var(--block)
&:not(.lazy)
trans1: transform 1s
img
object-fit: cover
width: 100%
border-radius: 0
aspect-ratio: hexo-config('article.cover_ratio')
.post-list .post-card.post.photo
.cover
position: relative
line-height: 0
img
width: 100%
object-fit: cover
aspect-ratio: hexo-config('article.cover_ratio')
.cover-info
padding: 1.5rem 1rem
position: absolute
line-height: 1.2
width: 'calc(100% - %s * 2)' % 1rem
--text-banner: white
color: var(--text-banner)
&[position=top]
top: 0
background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0))
&[position=bottom]
bottom: 0
background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2))
div+div
margin-top: 4px
.cap
font-size: $fs-13
color: unset
.title
font-weight: 500
font-size: $fsh3
@media screen and (max-width: $device-mobile)
padding: 1rem
div+div
margin-top: 2px
.title
font-size: $fsh4
.cap
font-size: $fs-12
h2
margin: .25rem 0
font-size: $fsh4
// wiki
.post-list .post-card.wiki article
display: flex
flex-wrap: wrap
trans1 box-shadow
justify-content: center
padding: 1rem .5rem
.post-list .post-card.wiki article .preview
display: flex
margin: 1rem 3rem
align-items: center
img
width: 96px
max-height: 96px
object-fit: contain
&:not(.lazy)
trans1: transform 0.75s
.post-list .post-card.wiki article .excerpt
margin: 1rem .5rem
@media screen and (min-width: 950px)
margin-right: 2rem
min-width: 280px
flex: 1
overflow: hidden
word-wrap: break-word
.caps
line-height: 1
margin-bottom: 0.75rem
.cap
--theme-block: var(--block)
background: var(--theme-block)
padding: 2px 4px
border-radius: 2px
p:last-child
margin-bottom: 0
.cap+.cap
margin-left: 4px
.post-list.archives
@media screen and (max-width: $device-mobile)
margin: 1rem 0