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

.blog-archive {
  display: flex;
  flex-direction: column;
  gap: 3vh;
  padding: 10vh 2vw;

  ::v-deep(.el-date-editor) {
    align-self: center;
  }

  .total {
    align-self: center;
    font-size: blog.$normal-font-size;
    color: blog.$normal-text-color;
  }

  .time-line {
    height: 100%;
    padding: 10px;
    overflow: auto;

    .item {
      height: 5vh;

      .date {
        color: blog.$normal-text-color;
        margin-right: 5px;
      }

      .title {
        font-size: blog.$normal-font-size;
        color: blog.$normal-text-color;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 0.2rem;
      }

      .title:hover {
        color: blog.$hover-text-color;
      }
    }
  }
}

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