.post-list .post-card#archive
  .archive-year
    color: $color-theme
    opacity: .4
    font-family: $ff-code
    font-weight: 700
    line-height: 1.2
    padding-bottom: 0.5rem
    trans1 opacity
  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 .65
  &:hover .archive-year
    opacity: 1

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

.post-list .post-card#tags
  display: flex
  flex-wrap: wrap
  a.tag
    display: inline-flex
    align-items: center
    position: relative
    color: var(--text-p2)
    margin: 4px 8px
    padding: 4px 8px
    border-radius: 64px
    .badge
      color: $color-theme
      margin-left: 4px
      font-weight: 700
      font-family: $ff-code
      opacity: .75
      align-self: flex-start
    &:hover
      color: var(--text-p0)
      background: var(--block)
      .badge
        opacity: 1