blog/sass/_comments.scss

.avatar-link.op::after,
.instance.op::before,
.reblogs::before,
.favourites::before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-variant: normal;
  font-weight: normal !important;
  line-height: 1;
  text-transform: none;
  vertical-align: -0.125em;
}

section#comments {
  .comment {
    display: grid;
    column-gap: 1rem;
    grid-template-areas:
      "avatar name"
      "avatar time"
      "avatar post"
      "...... card"
      "...... interactions";
    grid-template-columns: min-content;
    justify-items: start;
    margin: 2rem auto 2rem -1rem;
    padding: 1rem;

    .avatar-link {
      grid-area: avatar;
      width: 4rem;
      height: 4rem;
      position: relative;

      .avatar {
        all: unset;
        background-color: var(--fg-muted-1);
        border-radius: var(--rounded-corner);
        box-shadow: var(--shadow);
        display: block;
        height: 100%;
        transition: var(--transition);
        width: 100%;

        &:hover {
          box-shadow: var(--shadow-raised);
          transform: rotate(10deg) scale(1.1);
        }

        &:active {
          box-shadow: var(--shadow);
          transform: scale(var(--active));
        }
      }

      &.op::after {
        background-color: var(--primary-color);
        border-radius: 50%;
        bottom: -0.25rem;
        color: var(--light2);
        display: flex;
        position: absolute;
        right: -0.25rem;
        padding: 0.25rem;
        content: "\F4B5";
      }
    }

    .author {
      align-items: center;
      cursor: default;
      display: flex;
      font-weight: bold;
      gap: 0.5rem;
      grid-area: name;

      .instance {
        background-color: var(--fg-muted-1);
        border-radius: 999px;
        color: var(--fg-color);
        font-size: 0.8rem;
        font-weight: 600;
        padding: 0.25rem 0.75rem;
        text-decoration: none;
        transition: var(--transition);

        &:hover {
          opacity: 0.8;
          text-decoration: none;
        }

        &.op {
          background-color: var(--primary-color);
          color: var(--light2);

          &::before {
            content: "\F4B5";
            display: inline-block;
            margin-inline-end: 0.25rem;
            margin-inline-start: -0.25rem;
          }
        }
      }
    }

    time {
      @extend small;

      font-size: 0.8rem;
      grid-area: time;

      &.edited::after {
        content: " *";
      }
    }

    main {
      grid-area: post;
      justify-self: stretch;

      p:first-child {
        margin-top: 0.25rem;
      }

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

    .card {
      color: inherit;
      grid-area: card;
      max-width: 400px;
      text-decoration: none;

      &:hover {
        text-decoration: none;
      }

      figure {
        border-radius: var(--rounded-corner);
        background-color: var(--fg-muted-1);
        box-shadow: var(--shadow);
        margin-left: 0;
        margin-right: 0;
        overflow: hidden;
        transition: var(--transition);

        img {
          all: unset;
          display: block;
          max-width: 100%;
        }

        &:hover {
          transform: translateY(-0.5rem);
        }
      }

      figcaption {
        color: var(--fg-color);
        display: grid;
        gap: 0.5rem;
        margin: 0;
        padding: 1rem;
        text-align: left;

        h5 {
          font-weight: 600;
          all: unset;
          font-size: 1rem;
        }

        p {
          font-weight: 400;
          color: var(--fg-muted-5);
          font-size: 0.8rem;
        }

        * {
          display: inline-block;
          margin: 0;
          padding: 0;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }

    // Hide the card from the shared post
    &:first-of-type .card {
      display: none;
    }

    footer {
      display: flex;
      gap: 0.5rem;
      grid-area: interactions;
      margin-top: 1rem;

      .reblogs,
      .favourites {
        border-radius: var(--rounded-corner);
        font-size: 1rem;
        font-variant-numeric: tabular-nums;
        font-weight: 400;
        padding: 0.5rem 1rem;
        text-decoration: none;
        transition: var(--transition);

        &:hover {
          text-decoration: none;
        }

        &:active {
          transform: scale(var(--active));
        }

        &::before {
          margin-inline-end: 0.25rem;
        }
      }

      .reblogs {
        color: var(--orange-fg);

        &:hover {
          background-color: var(--orange-bg);
        }

        &::before {
          content: "\F813";
        }
      }

      .favourites {
        color: var(--red-fg);

        &:hover {
          background-color: var(--red-bg);
        }

        &::before {
          content: "\F417";
        }
      }
    }

    .emoji {
      all: unset;
      display: inline;
      width: 1.25rem;
      height: 1.25rem;
      vertical-align: middle;
    }

    .invisible {
      display: none;
    }

    .ellipsis::after {
      content: "…";
    }

    details {
      summary {
        color: var(--yellow-fg);
      }

      margin-top: 1rem;
      background-color: var(--yellow-bg);
    }
  }
}