// 文章和页面皆为markdown渲染而来，因此使用同一套css

.markdown-container
  display: flex
  flex-direction: row
  justify-content: space-between
  gap: 16px
  flex: 1
  overflow: auto
  width: 97%
  
  .article-container
    background-color: rgb(231, 225, 199)
    height: fit-content
    padding: 1em 40px
    display: flex
    flex-direction: column
    width: 100%
    overflow-x: hidden
    justify-content: space-between
    font-size: 18px

  .article-header
    display: flex
    flex-direction: row
    margin: 1em 0 1em
    gap: 2em

    $post-width = 384px
    $post-heigth = 216px
    img.post-cover
      width: $post-width
      height $post-heigth
      min-width: $post-width
      min-height $post-heigth
      max-width: $post-width
      max-height $post-heigth
      object-fit: cover
      transition: all 0.2s linear 0s

    .article-info
      display: flex
      flex-direction: column
      gap: 1em
      width: 100%
      .h-line
        margin-left: -2%
      .article-title
        font-size: 2.3em
        font-weight: bold
      .info-box
        line-height: 1.6em
        font-family: 'Consolas'
        .time-info, .stat-info
          font-size: 14px
        .big, bold
          font-size: 16px
        .author
          font-size: 16px
          font-weight: bold

  hr
    border: 1.3px solid rgba(0,0,0,0.16)
    width: 104%
    margin-left: -2%

  .side-information
    width: 24%
    position: sticky
    top: 16px
    align-self: flex-start