dda-masto-embed/public/post.css

.section.account-mode {
  --large: 1em;
  --medium: 0.5em;
  --small: 0.25em;
  margin-bottom: var(--large);
  
  display: grid;
  grid: ". post ." / auto auto auto;

  .mastodon-post {
    grid-area: post;
    justify-self: center;
    display: grid;
    grid: 
      "header"
      "content"
      "image"
      "link-preview"
      "footer" /
      minmax(380px, 450px);
    border: 1px solid #ccc;
    padding: var(--small);

    .mastodon-post-header {
      grid-area: header;
      justify-self: stretch;
      display: grid;
      grid:  "avatar names . date" / max-content max-content auto 20%;
      margin: var(--medium);
  
      .mastodon-post-avatar {
        grid-area: avatar;
        width: auto;
        max-height: 60px;
        object-fit: contain;
        align-self: center;
      }
  
      .mastodon-post-names {
        grid-area: names;
        display: grid;
        grid: 
          "dp-name"
          "ac-name" /
          auto;
        justify-self: start;
        margin-left: var(--medium);
  
        .display-name {
          grid-area: dp-name;
          align-self: end;
          text-decoration: none;
          color: inherit;
        }
      
        .account-name {
          grid-area: ac-name;
          align-self: start;
          text-decoration: none;
          color: inherit;
        }
      }

      .mastodon-post-date {
        font-size: 85%;
        grid-area: date;
        justify-self: end;
        align-self: center;
        margin-right: 1em;
      }  
    }

    .mastodon-post-content {
      grid-area: content;
      display: grid;
      grid: 
        "text"
        "image" / 100%;
      padding: var(--medium);

      .mastodon-post-text {
        grid-area: text;
      }
  
      .mastodon-post-image {
        grid-area: image;
        max-width: 100%; 
        height: auto;
        align-self: center;
        justify-self: center;
        border-radius: 1em;
      }
    }

    .mastodon-post-link-preview {
      grid-area: link-preview;
      justify-self: center;
      display: grid;
      grid:
        "image"
        "info" / 100%;
      text-decoration: none;
      border: 1px solid #ccc;
      border-radius: var(--small);
      margin: var(--medium);

      .mastodon-post-link-image{
        grid-area: image;
        justify-self: center;
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius:var(--small);
        margin-bottom: var(--small);
      }

      .mastodon-post-link-info {
        grid-area: info;
        grid: 
        "." "link-title" "."
        "." "link-description" "."
        "." "link-url" "." / auto auto auto;
        padding: var(--small);
        
        .mastodon-post-link-title {
          grid-area: link-title;
          color: #383838;
          font-weight: bold;
        }
      
        .mastodon-post-link-description {
          color: #383838;
          grid-area: link-description;
        }
      
        .mastodon-post-link-url {
          grid-area: link-url;
          color: #666;
        }
      }
    }

    .mastodon-post-footer {
      margin-right: var(--medium);
      margin-left:  var(--medium);
      grid-area: footer;
      display: grid;
      justify-content: space-between;
      grid:
        "replies retoots likes" 
        / auto auto auto;
      padding-top: var(--small);

      .footer-button {
        background: none;
        border: none;
        display: flex;
        svg {
          width: 24px;
          height: 24px;
          margin-right: var(--small);
        }
      }

      .replies {
        justify-self: center;
        grid-area: replies;
      }

      .retoots {
        justify-self: center;
        grid-area: retoots;    
      }

      .likes {
        justify-self: center;
        grid-area: likes;
      }

      .like-count {
        justify-self: center;
        grid-area: like-count;
      }

      .retoot-count {
        justify-self: center;
        grid-area: retoot-count;
      }

      .reply-count {
        justify-self: center;
        grid-area: reply-count;
      }
    }
  }

  @media screen and (max-width: 575px) {
    font-size: 2.1vw;
  }
  
  @media screen and (min-width: 576px) {
    font-size: 2vw;
  }
  
  @media screen and (min-width: 768px) {
    font-size: 2vw;
  }
  
  @media screen and (min-width: 992px) {
    font-size: 1.5vw;
  }
  
  @media screen and (min-width: 1200px) {
    font-size: 1.25vw;
  }
  
  @media screen and (min-width: 1400px) {
    font-size: 1.1vw;
  }
  
  @media screen and (min-width: 2004px) {
    font-size: 1vw;
  }

}

.section.replies-mode {
  --large: 1em;
  --medium: 0.5em;
  --small: 0.25em;
  margin-bottom: var(--large);
  
  display: grid;
  grid: ". post ." / auto auto auto;

  .mastodon-post {
    grid-area: post;
    justify-self: center;
    align-self: start;
    display: grid;
    grid: 
      "header"
      "content"
      "image"
      "link-preview"
      "footer" /
      minmax(380px, 450px);
    border: 1px solid #ccc;
    padding: var(--small);

    .mastodon-post-header {
      grid-area: header;
      justify-self: stretch;
      display: grid;
      grid:  "avatar names . date" / max-content max-content auto 20%;
      margin: var(--medium);
  
      .mastodon-post-avatar {
        grid-area: avatar;
        width: auto;
        max-height: 60px;
        object-fit: contain;
        align-self: center;
      }
  
      .mastodon-post-names {
        grid-area: names;
        display: grid;
        grid: 
          "dp-name"
          "ac-name" /
          auto;
        justify-self: start;
        margin-left: var(--medium);
  
        .display-name {
          grid-area: dp-name;
          align-self: end;
          text-decoration: none;
          color: inherit;
        }
      
        .account-name {
          grid-area: ac-name;
          align-self: start;
          text-decoration: none;
          color: inherit;
        }
      }

      .mastodon-post-date {
        font-size: 85%;
        grid-area: date;
        justify-self: end;
        align-self: center;
        margin-right: 1em;
      }   
    }

    .mastodon-post-content {
      grid-area: content;
      display: grid;
      grid: 
      "image text" / auto;
      padding: var(--medium);

      .mastodon-post-text {
        grid-area: text;
        align-self: center;
        padding: var(--medium);
      }
  
      .mastodon-post-image {
        grid-area: image;
        max-width: 100%;
        height: auto;
        align-self: center;
        justify-self: center;
        border-radius: 1em;
      }
    }

    .mastodon-post-link-preview {
      grid-area: link-preview;
      justify-self: center;
      display: grid;
      grid:
        "image"
        "info" / 100%;
      text-decoration: none;
      border: 1px solid #ccc;
      border-radius: var(--small);
      margin: var(--medium);

      .mastodon-post-link-image{
        grid-area: image;
        justify-self: center;
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: var(--small);
        margin-bottom: var(--small);
      }

      .mastodon-post-link-info {
        grid-area: info;
        grid: 
        "." "link-title" "."
        "." "link-description" "."
        "." "link-url" "." / auto auto auto;
        padding: var(--small);
        
        .mastodon-post-link-title {
          grid-area: link-title;
          color: #383838;
          font-weight: bold;
        }
      
        .mastodon-post-link-description {
          color: #383838;
          grid-area: link-description;
        }
      
        .mastodon-post-link-url {
          grid-area: link-url;
          color: #666;
        }
      }
    }

    .mastodon-post-footer {
      display: none;
    }
  }

  @media screen and (max-width: 575px) {
    font-size: 2.1vw;
  }
  
  @media screen and (min-width: 576px) {
    font-size: 2vw;
  }
  
  @media screen and (min-width: 768px) {
    font-size: 2vw;
  }
  
  @media screen and (min-width: 992px) {
    font-size: 1.5vw;
  }
  
  @media screen and (min-width: 1200px) {
    font-size: 1.25vw;
  }
  
  @media screen and (min-width: 1400px) {
    font-size: 1.1vw;
  }
  
  @media screen and (min-width: 2004px) {
    font-size: 1vw;
  }

}