/*******************************************************************************
 * Blog post and listing styles
 ******************************************************************************/

.header-bar {
  border-bottom: 1px solid var(--global-divider-color);
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 3rem;

  h1 {
    color: var(--global-theme-color);
    font-size: 5rem;
  }
}

.tag-category-list {
  border-bottom: 1px solid var(--global-divider-color);
  text-align: center;
  padding-top: 1rem;

  ul {
    justify-content: center;
    display: flow-root;

    p,
    li {
      list-style: none;
      display: inline-block;
      padding: 1rem 0.5rem;
      color: var(--global-text-color-light);
    }
  }
}

.post-title {
  mjx-container[jax="CHTML"][display="true"] {
    display: unset;
  }
}

.post-list {
  margin: 0;
  margin-bottom: 40px;
  padding: 0;

  li {
    border-bottom: 1px solid var(--global-divider-color);
    list-style: none;
    padding-top: 2rem;
    padding-bottom: 2rem;

    .post-meta {
      color: var(--global-text-color-light);
      font-size: 0.875rem;
      margin-bottom: 0;
    }

    .post-tags {
      color: var(--global-text-color-light);
      font-size: 0.875rem;
      padding-top: 0.25rem;
      padding-bottom: 0;
    }

    a {
      color: var(--global-text-color);
      text-decoration: none;

      &:hover {
        color: var(--global-theme-color);
      }
    }

    mjx-container[jax="CHTML"][display="true"] {
      display: unset;
    }
  }
}

.pagination {
  .page-item {
    .page-link {
      color: var(--global-text-color);
      padding: 0.75rem 1.15rem;

      &:hover {
        color: #000;
      }
    }

    &.active .page-link {
      color: #fff;
      background-color: var(--global-theme-color);

      &:hover {
        background-color: var(--global-theme-color);
      }
    }
  }
}

.post {
  .post-meta {
    color: var(--global-text-color-light);
    font-size: 0.875rem;
    margin-bottom: 0;
  }

  .post-tags {
    color: var(--global-text-color-light);
    font-size: 0.875rem;
    padding-top: 0.25rem;
    padding-bottom: 1rem;

    a {
      color: var(--global-text-color-light);
      text-decoration: none;

      &:hover {
        color: var(--global-theme-color);
      }
    }
  }
}

.featured-posts {
  a {
    color: var(--global-text-color-light);
    text-decoration: none;

    .card-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &:hover {
      color: var(--global-theme-color);

      .card-title {
        color: var(--global-theme-color);
      }
    }
  }

  .post-meta {
    color: var(--global-text-color-light);
    font-size: 0.875rem;
    margin-bottom: 0;
    padding-top: 0.5rem;
  }
}

.post-description {
  margin-bottom: 2rem;
  font-size: 0.875rem;

  a {
    color: inherit;

    &:hover {
      color: var(--global-theme-color);
      text-decoration: none;
    }
  }
}