duckquill/sass/_comments.scss

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;
        display: block;
        background-color: var(--fg05);
        border-radius: var(--rounded-corner);
        box-shadow: var(--shadow);
        height: 100%;
        width: 100%;
      }

      &.op::after {
        background-color: var(--primary-color);
        border-radius: 50%;
        bottom: -0.25rem;
        color: var(--light2);
        content: "✓";
        display: block;
        font-size: 1.25rem;
        font-weight: bold;
        height: 1.5rem;
        line-height: 1.5rem;
        position: absolute;
        right: -0.25rem;
        text-align: center;
        width: 1.5rem;
      }
    }

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

      .instance {
        background-color: var(--fg05);
        border-radius: 9999px;
        color: var(--fg-color);
        font-size: 0.8rem;
        font-weight: normal;
        padding: 0.25rem 0.75rem;

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

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

          &::before {
            content: "✓";
            font-weight: bold;
            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;

      &:hover {
        text-decoration: none;
      }

      figure {
        border-radius: var(--rounded-corner);
        background-color: var(--fg05);
        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;

        * {
          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 {
      @extend small;

      display: flex;
      gap: 0.4rem;
      grid-area: interactions;
      margin-top: 0.925rem;

      .boosts {
        cursor: default;
        font-weight: 600;
        font-size: 0.9rem;
        padding: 0.4rem 1rem;
        border-radius: var(--rounded-corner);
        background-color: var(--orange-bg);
        color: var(--orange-fg);

        &::before {
          color: var(--orange2);
          content: "🔁";
          margin-inline-end: 0.25rem;
        }
      }

      .faves {
        cursor: default;
        font-weight: 600;
        font-size: 0.9rem;
        padding: 0.4rem 1rem;
        border-radius: var(--rounded-corner);
        background-color: var(--red-bg);
        color: var(--red-fg);

        &::before {
          color: var(--red2);
          content: "❤️";
          margin-inline-end: 0.25rem;
        }
      }
    }

    .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);
    }
  }
}