@use "blog.variable.module.scss" as blog;

$blog-content-list-item-height: 38vh;
$blog-content-title-font-size: 1.6rem;
$hr-color: #CFCFCF;

.blog-content-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5vh;
  padding: 10vh 2vw 2vh 2vw;
  position: relative;

  .blog-content {
    width: 100%;
    height: $blog-content-list-item-height;
    padding: 4vh 1vw;

    border: 1px solid blog.$border-color;
    border-radius: 15px;
    box-shadow: 0 0 5px blog.$border-color;
  }

  .blog-content-empty {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .blog-content-summary {
    display: grid;
    grid-template-rows: 1fr 1fr 8vh 1fr 1fr;
    justify-items: center;
    align-items: center;
    gap: 2vh;

    .title {
      font-size: $blog-content-title-font-size;
      font-family: "华文楷体", serif;
      font-weight: bolder;
      position: relative;
    }

    // 自动展开下划线
    .title:after {
      content: "";
      width: 0;
      height: 2px;
      background: blog.$theme-color;
      // 初始位置在底部中间
      position: absolute;
      top: 100%;
      left: 50%;
      // 动画时间
      transition: all .8s;
    }

    // 悬浮式展开到100%
    .title:hover::after {
      width: 100%;
      left: 0;
    }

    .content {
      font-size: blog.$normal-font-size;
      line-height: 150%;
    }

    hr {
      width: 10%;
      height: 1px;
      background-color: $hr-color;
      border: none;
    }

    span, p {
      font-family: '华为行楷',serif;
    }
  }
}

@media screen and (max-width: 768px) {
  .blog-content-list {
    padding: 10px;
  }
}