@import "variables";

.index-content {
  margin-top: 10px;
}

.framed {
  border: 1px solid var(--red);
  color: var(--red);
  padding: 20px;

  *:first-child {
    margin-top: 0;
  }

  *:last-child {
    margin-bottom: 0;
  }
}

.posts {
  width: 100%;
  margin: 0 auto;
}

.post {
  position: relative;
  width: 100%;
  text-align: left;
  margin: 20px auto;
  padding: 20px 0;

  @media (max-width: $tablet-max-width) {
    max-width: 660px;
  }

  &:not(:last-of-type) {
    border-bottom: 1px solid var(--foreground);
  }

  %meta {
    display: flex;
    align-items: center;
    font-size: 1rem;
    margin-bottom: 10px;
    color: var(--brightBlue);
  }

  &-meta {
    @extend %meta;
  }

  &-meta-inline {
    @extend %meta;

    display: inline;
  }

  &-separator {
    position: relative;
    top: 1px;
    display: inline-grid;
    grid-template-columns: repeat(2, 3px);
    grid-template-rows: repeat(2, 3px);
    gap: 2px;
    margin: 0 6px;
    vertical-align: middle;

    span {
      width: 2px;
      height: 2px;
      background-color: var(--brightBlue);
      border-radius: 50%;
      opacity: 0.2;
    }

    // 每个点使用不同动画和时长，形成随机效果
    span:nth-child(1) { animation: dot-blink-1 2.8s ease-in-out infinite; }
    span:nth-child(2) { animation: dot-blink-2 2.2s ease-in-out infinite 0.4s; }
    span:nth-child(3) { animation: dot-blink-3 3.4s ease-in-out infinite 1s; }
    span:nth-child(4) { animation: dot-blink-4 2.6s ease-in-out infinite 0.2s; }
    span:nth-child(5) { animation: dot-blink-2 3s ease-in-out infinite 0.6s; }
    span:nth-child(6) { animation: dot-blink-1 2.4 ease-in-out infinite 0.8s; }
    span:nth-child(7) { animation: dot-blink-4 3.2s ease-in-out infinite 0.3s; }
    span:nth-child(8) { animation: dot-blink-3 2.7s ease-in-out infinite 0.5s; }
    span:nth-child(9) { animation: dot-blink-1 2.9s ease-in-out infinite 0.1s; }
  }

  &-title {
    --border: 3px dotted var(--blue);

    position: relative;
    color: var(--blue);
    margin: 0 0 15px;
    padding-bottom: 15px;
    font-weight: normal;
    border-bottom: var(--border);

    &::after {
      content: "";
      position: absolute;
      bottom: 2px;
      display: block;
      width: 100%;
      border-bottom: var(--border);
    }

    a {
      text-decoration: none;
    }
  }

  %tags {
    margin-left: 10px;
    font-size: 1rem;
  }

  &-tags {
    @extend %tags;

    display: block;
  }

  &-tag {
    color: var(--green);
  }

  &-tags-inline {
    @extend %tags;

    display: inline;

    @media (max-width: $phone-max-width) {
      display: block;
    }
  }

  &-body {
    position: relative;
    margin-top: 30px;
  }

  &-content {
    font-family: Hack, Monaco, Consolas, 'Ubuntu Mono', PingHei, 'PingFang SC', 'Microsoft YaHei', monospace;
    line-height: 1.54;
  }

  &-cover {
    border: 20px solid var(--foreground);
    background: transparent;
    margin: 40px 0;
    padding: 20px;

    @media (max-width: $phone-max-width) {
      padding: 10px;
      border-width: 10px;
    }
  }

  ul {
    list-style: none;

    li:before {
      content: '►';
      position: absolute;
      left: -20px;
      color: var(--foreground);
    }
  }
}

.post--regulation {
  h1 {
    justify-content: center;
  }

  h2 {
    justify-content: center;
    margin-bottom: 10px;

    & + h2 {
      margin-top: -10px;
      margin-bottom: 20px;
    }
  }
}

.post-list {

  padding: .25rem 0;

  .post-date {
    color: var(--foreground);
    text-decoration: none;
  }

  a {
    text-decoration: none;
  }

  .post-list-title {
    text-decoration: underline;
  }

  .post-tag {
    text-decoration: underline;
  }
}

.comment-wrap {
  position: relative;
  z-index: 2;
}

// 4个不同的随机动画模式
@keyframes dot-blink-1 {
  0%, 100% { opacity: 0.2; }
  25% { opacity: 1; }
  50% { opacity: 0.3; }
  75% { opacity: 0.8; }
}

@keyframes dot-blink-2 {
  0%, 100% { opacity: 0.3; }
  30% { opacity: 0.9; }
  60% { opacity: 0.2; }
  85% { opacity: 0.7; }
}

@keyframes dot-blink-3 {
  0%, 100% { opacity: 0.2; }
  20% { opacity: 0.6; }
  45% { opacity: 1; }
  70% { opacity: 0.4; }
}

@keyframes dot-blink-4 {
  0%, 100% { opacity: 0.4; }
  15% { opacity: 0.2; }
  40% { opacity: 0.8; }
  65% { opacity: 1; }
  90% { opacity: 0.3; }
}
