blog/src/theme/BlogPosts/style.module.scss

/* stylelint-disable no-descending-specificity, scss/at-extend-no-missing-placeholder */
@import "../../css/util";

@mixin bigSize {
  grid-column: 1 / 3;
  display: flex;
  filter: none;
  margin-top: 0;
  align-items: center;

  & > a {
    border-radius: 1rem;
    width: fit-content;
    flex-shrink: 0;

    span {
      display: block !important;
      width: fit-content !important;
      height: fit-content !important;
    }

    img {
      display: block;
      width: 605px;
      height: auto;
      transition: all 0.25s ease-in-out;
    }
  }

  .content {
    padding: 1rem 2rem;

    header {
      &::before {
        content: "FEATURED POST";
        font-size: 0.7rem;
        font-weight: 800;
      }

      & .tags > a {
        font-size: 0.8rem;
      }

      h2 {
        font-size: 2.55rem;
      }

      p {
        font-size: 1.2rem;
      }
    }
  }

  &:hover {
    border-color: transparent;
    transform: none;

    & > a {
      img {
        transform: scale3d(1.2, 1.2, 1) rotate3d(0, 0, 1, -2deg);
      }
    }
  }
}

.normalPage {
  $width: 430px;

  width: fit-content;
  display: grid;
  grid-template-columns: repeat(3, min($width, 30%));
  margin: 5rem auto 0;
  align-items: start;
  font-family: apple-system, system-ui, sans-serif;
  row-gap: 3rem;
  justify-content: space-between;

  article {
    border-radius: 1rem;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s ease-in-out;

    & > a {
      width: 100%;
      height: 100%;
      overflow: hidden;

      span {
        width: fit-content !important;
      }

      img {
        object-fit: cover;
        max-width: 100%;
        width: $width !important;
        transform-origin: center center;
        transition: all 0.3s ease-in-out !important;

        html[data-theme="dark"] & {
          filter: brightness(0.85);
        }
      }
    }

    & .content {
      padding: 0 1rem 1rem;

      header {
        & .tags {
          display: flex;
          justify-content: flex-start;
          overflow: hidden;
          text-overflow: ellipsis;
          margin: 0.8rem 0;

          & > a {
            color: var(--ifm-link-color);
            margin-right: 0.5rem;
            text-transform: uppercase;
            font-size: 0.66rem;

            &:hover {
              opacity: 0.6;
            }
          }
        }

        h2 {
          font-size: 1.375rem;
          line-height: 1.2em;
          margin-top: 0.8rem;
          margin-bottom: 0.5em;
          transition: all 0.3s ease-in-out;
        }

        p {
          max-height: #{1.7 * 3}em;
          overflow-y: hidden;
          text-overflow: ellipsis;
          font-weight: 300;
          margin-bottom: 2rem;
        }
      }

      & .footer {
        display: flex;
        align-items: center;

        & > time {
          opacity: 0.9;
        }
      }

      & .authors {
        display: flex;

        html[data-theme="dark"] & img {
          filter: brightness(0.85);
        }

        & .author {
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }

        & > .author,
        & > span {
          margin-left: -1rem;

          &:first-child {
            margin-left: 0;
            z-index: 3;
          }

          &:nth-child(2) {
            z-index: 2;
          }

          &:nth-child(3) {
            z-index: 1;
          }
        }
      }

      & .divider {
        margin: 0 0.5rem;
      }
    }

    &:hover {
      border-color: var(--ifm-color-primary);

      @include respond-above(sm) {
        transform: translateY(-20px);
      }

      & > a {
        img {
          transform: scale3d(1.05, 1.05, 1);
        }
      }

      h2 {
        opacity: 0.8;
      }

      & .tags:hover + a > h2 {
        opacity: 1;
      }
    }
  }
}

.sec {
  margin: 0 0 1rem;

  h2 {
    font-size: 2.25rem;
    margin: 2rem 0;
    margin-left: 1px;
  }
}

@include respond-above(lg) {
  .firstPage {
    grid-template-columns: repeat(2, 645px);

    > article {
      & > a {
        img {
          width: 605px !important;
          max-width: unset;
        }
      }
    }
  }
}

@include respond-above(sm) {
  .firstPage {
    grid-template-columns: repeat(2, min(645px, 50%));

    > article {
      & > a {
        img {
          // width: min(605px, 50%) !important;
          max-width: unset;
        }
      }

      .content {
        padding: 0 1.875rem 1.875rem;
      }

      &:first-of-type {
        @include bigSize;
      }
    }
  }

  .sec {
    margin: 0 0 6rem;

    h2 {
      font-size: 2.25rem;
      margin: 5rem 0;
      margin-left: 1px;
    }
  }
}

article.pickedPosts {
  $bg-color: #f5f5f7;

  // border-color: $bg-color;
  grid-column: initial;
  position: relative;

  & .featuredPost {
    background-color: $bg-color;
    display: block;
    width: fit-content;
    padding: 2px 10px 4px;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 0.8rem;
    font-size: 0.666rem;
    color: #1d1d1f;
    z-index: 1;
    transition: all 0.3s ease-in-out;
  }

  &:hover {
    border-color: var(--ifm-color-primary);

    & .featuredPost {
      background-color: var(--ifm-color-primary);
      color: #fff;
    }
  }
}

@include respond-below(sm) {
  %mobile-posts {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
  }

  .normalPage {
    @extend %mobile-posts;

    article {
      margin: 0 0 2.5rem;
    }
  }
}