.post-list #archive
  padding: 1rem
  .archive-header
    display: inline-block
    font-family: $ff-code
    font-weight: 700
    line-height: 1.2
    margin-bottom: .5em
    position: relative
    padding: 4px 0
    color: var(--text-p3)
    &:after
      content: ""
      position: absolute
      height: 4px
      bottom: 0
      left: 0
      right: 0
      z-index: -1
      border-radius: 4px
      background: var(--block-border)
  a.post
    display: inline-flex
    align-items: baseline
    margin: 0.25rem 0
    color: var(--text-p1)
    &:hover
      color: $color-hover
    time
      font-family: $ff-code
      margin-right: 1em
      font-weight: 700
      flex-shrink: 0
      opacity .5
  &:hover
    .archive-header
      color: var(--text-p1)
      &:after
        background: $color-theme



.post-list #cats
  padding: 0
  a.cat
    display: flex
    &.child
      padding-left: 2rem
    padding: .5em 1rem
    border-radius: $border-bar
    color: var(--text-p2)
    align-items: center
    justify-content: space-between
    font-weight: 500
    font-size: $fs-14
    .badge
      font-weight: 700
      font-family: $ff-code
      opacity: .5
      font-size: $fs-12
    &:hover
      background: var(--block-hover)
      color: var(--text-p0)
      .badge
        opacity: 1
        color: $color-theme

.post-list #tags
  display: flex
  flex-wrap: wrap
  padding: 0
  margin: 0 -4px
  a.tag
    display: inline-flex
    align-items: center
    position: relative
    color: var(--text-p2)
    margin: 4px
    padding: .5em .75rem
    border-radius: 4px
    background: var(--block)
    font-size: $fs-13
    font-weight: 500
    &:before
      content: "#"
      margin-left: -2px
      margin-right: 2px
      opacity: .4
    &:hover
      &:before
        color $color-theme
        opacity: 1
      color: var(--text-p0)
      background: var(--block-hover)