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

// 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: $fs-h3
    border-bottom: none
    color: var(--text)
    trans1 color
    @media screen and (max-width: $device-mobile)
      font-size: $fs-h4
      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: var(--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: $fs-h3
      @media screen and (max-width: $device-mobile)
        padding: 1rem
        div+div
          margin-top: 2px
        .title
          font-size: $fs-h4
        .cap
          font-size: $fs-12
  h2
    margin: .25rem 0
    font-size: $fs-h4


// 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