threads/templates/card.html

<style>
  .card_content {

    & .invisible {
      display: none;
    }

    & .emoji {
      display: inline;
      height: calc(1rem + 6px);
      margin-bottom: -4px;
    }

    & .ellipsis::after {
      content: '...'
    }

    & .body {

      .hashtag:not(.pill),
      .mention:not(.pill) {
        color: var(--text-color-dark-faded);
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      & code {
        font-size: var(--font-size-sm);
        background: rgb(245, 242, 240);
        padding: 0.25em 0.3em;
        border-radius: 5px;
        display: inline-block;
        vertical-align: text-bottom;
      }

      & a:has(.link_card) {
        text-decoration: none
      }

      & .media,
      & .link_card {
        border: 1px solid rgba(34, 34, 34, 0.15);
        border-radius: 5px;
        box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15);
        max-width: 100%;
        margin: 15px 0 1em;
        object-fit: contain;
        height: auto;
        text-decoration: none;
        text-wrap: balance;
      }

      & .media:hover,
      & .link_card:hover {
        color: var(--color-link);
        text-decoration-color: var(--color-link);
        border-color: var(--color-link);
      }

      & p {
        margin-bottom: 1em;
      }
    }

    & .heading {

      display: grid;
      grid-template-columns: auto auto;
      gap: 5px;
      height: 20px;

      & .author {
        font-size: var(--font-size-lg)
      }

      & .right_menu {
        font-size: var(--font-size-sm);
        text-align: right;

        & a,
        & span {
          line-height: 36px;
        }

        & a {
          color: var(--text-color-dark);

          &:hover {
            color: var(--color-link);
          }
        }
      }

    }

    & .link_card {
      color: var(--text-color-dark-faded);
      text-decoration: underline;
      text-decoration-color: var(--text-color-light-faded);

      & strong,
      & small {
        text-decoration-thickness: 1px;
        display: block;
      }

      padding: 1rem;
    }
  }

  @media (prefers-color-scheme: dark) {
    .card_content {

      & .action {
        color: var(--color-brand-complement);
      }

      & .heading .right_menu a {
        color: var(--text-color-light);

        &:hover {
          color: var(--color-brand-complement);
        }
      }

      & .body {

        .hashtag:not(.pill),
        .mention:not(.pill) {
          color: var(--text-color-light-faded);
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }

        code {
          background: rgb(45, 51, 59);
          color: rgb(197, 209, 222);
        }

        & .media,
        & .link_card {
          border: 1px solid rgba(197, 209, 222, 0.15);
          color: var(--text-color-light-faded);
          background: var(--bg-dark);
        }

        & .media:hover,
        & .link_card:hover {
          color: var(--color-brand-complement);
          text-decoration-color: var(--color-brand-complement);
          border-color: var(--color-brand-complement);
        }
      }
    }
  }
</style>
<article class="card">
  <div class="card_avatar">
    {% if thread.account.avatar is defined %}
    <img class="avatar" src="{{ thread.account.avatar }}" alt="avatar of {{ thread.account.display_name }}"
      title="avatar of {{ thread.account.display_name }}" />
    {% endif %}
  </div>

  <div class="card_content" id="{{ thread.id }}">
    <div class="heading">
      <h3 class="author" rel="author">
        {{thread.account.display_name | safe}}
      </h3>

      <div class="right_menu">
        <a href="{{ thread.url }}" title="{{ thread.created_at }}">
          <relative-time datetime="{{ thread.created_at }}" precision="day">{{ thread.created_at }}</relative-time>
        </a>
        {% if not is_tag %}
        <span>&middot;</span>
        <a href="{{ url_for('threads.thread', id=parent_id) + '#' + thread['id'] }}">Anchor</a>
        {% endif %}
      </div>
    </div>

    <div class="body">

      <enhance-content data-server={{server}} data-tag-url={{url_for('threads.tag', id='' )}}>
        {{thread.content | safe}}
      </enhance-content>
      {% for media in thread.media_attachments %}
      {% if media.type == 'image'%}
      <a href="{{ media.url }}">
        <img class="media" width="{{ media.meta.small.width }}" height="{{ media.meta.small.height }}"
          src="{{media.preview_url}}" alt="{{ media.description or 'media attachment' }}"
          title="{{ media.description or 'media attachment' }}" />
      </a>
      {% elif media.type == 'gifv' %}
      <video class="media" controls autoplay="autoplay" muted loop alt="{{ media.description or 'media attachment' }}"
        title="{{ media.description or 'media attachment' }}">
        <source src="{{media.url}}" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      {% endif %}
      {% endfor %}
      {% if thread.media_attachments|length <= 0 and thread.card %} <a href="{{ thread.card.url }}">
        <div class="link_card">
          <small>
            {{ thread.card.provider_name or
            thread.card.provider_url }}
          </small>
          <strong>{{ thread.card.title }}</strong>
          <small>{{thread.card.description}}</small>
        </div>
        </a>
        {% endif %}

    </div>
    {% if is_thread and not is_tag %}
    <a href="{{ url_for('threads.thread', id=thread.id) }}">Read full thread</a>
    {% endif %}
</article>