duckquill/_sass/comments.scss

/* Comments */
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;
      height: 4rem;
      position: relative;
      width: 4rem;

      .avatar {
        margin: unset;
        background-color: var(--bg2);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow);
        height: 100%;
        width: 100%;
      }

      &.op::after {
        background-color: var(--accent-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(--text);
        font-size: smaller;
        font-weight: normal;
        padding: 0.25rem 0.75rem;

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

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

          &::before {
            content: "✓";
            font-weight: bold;
            margin-inline-end: 0.25rem;
            margin-inline-start: -0.25rem;
          }
        }
      }
    }

    time {
      @extend small;

      font-size: smaller;
      opacity: 0.9;
      grid-area: time;
      line-height: 1.5rem;

      &.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(--border-radius);
        background-color: var(--bg2);
        box-shadow: var(--shadow);
        margin-left: 0;
        margin-right: 0;
        overflow: hidden;
        transition: var(--transition);

        img {
          margin: unset;
        }

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

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

        * {
          display: inline-block;
          line-height: 1.25;
          margin: 0;
          overflow: hidden;
          padding: 0;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    // 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-variation-settings: "wght" 600; /* needed for webkit */
        font-size: 90%;
        padding: 0.4rem 1rem;
        border-radius: var(--border-radius);
        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-variation-settings: "wght" 600; /* needed for webkit */
        font-size: 90%;
        padding: 0.4rem 1rem;
        border-radius: var(--border-radius);
        background-color: var(--red-bg);
        color: var(--red-fg);

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

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

    .invisible {
      display: none;
    }

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

    details {
      summary {
        background-image: linear-gradient(
            90deg,
            transparent,
            transparent 0.4rem,
            var(--bg2) 0.4rem,
            var(--bg2) calc(100% - 0.4rem),
            transparent calc(100% - 0.4rem),
            transparent
          ),
          repeating-linear-gradient(
            45deg,
            var(--bg1),
            var(--bg1) 0.3rem,
            var(--accent-color) 0.3rem,
            var(--accent-color) 0.6rem
          );
        border-radius: var(--border-radius-small);
        color: inherit;
        cursor: pointer;
        box-shadow: var(--shadow);
        margin-top: 0.925rem;
        padding: 1rem;
      }
    }
  }
}