🐘 Mastodon embed timeline

Local timeline (customized)

This example shows 42 posts from the following instance:
mastodon.social

Contains several CSS styles that change its appearance without the need to modify the original CSS file:

          
  .mt-container {
    font-family: monospace;
    background-color: transparent;
    border: 1px solid white;
  }
  .mt-container a,
  .mt-container a:active,
  .mt-container a:link {
    color: darkgreen;
  }
  .mt-post-header {
    margin-bottom: 0;
  }
  .mt-post-avatar-image-big img {
    border-radius: 0;
  }
  .mt-post-header-user {
    margin-right: auto;
  }
  .mt-post-header-date {
    position: absolute;
    bottom: 1rem;
    left: 3.5rem;
  }
  .mt-post {
    border-bottom: none;
    box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.25);
    margin-bottom: 1rem;
    padding-bottom: 2rem;
  }
  .mt-post-txt,
  .mt-post-media-wrapper,
  .mt-post-poll {
    width: calc(100% - 3rem);
    margin-left: auto;
  }
  .mt-post-media,
  .mt-post-media-spoiler > img,
  .mt-post-media-spoiler > audio,
  .mt-post-media > img,
  .mt-post-media > video {
    border-radius: 0;
  }
        
      

At JS level, it defaults to the light theme and the date is displayed in US format using digits only. In order to achieve a minimalist style, the following options have been changed at its initialization:

            
  <script>
    const myTimeline = new MastodonTimeline.Init({
      instanceUrl: "https://mastodon.online",
      defaultTheme: "light",
      maxNbPostFetch: "42",
      maxNbPostShow: "42",
      dateFormatLocale: "en-CA",
      dateFormatOptions: {
        day: "2-digit",
        month: "2-digit",
        year: "numeric",
      },
      hideReplies: true,
      hideUserAccount: true,
      hidePreviewLink: true,
      hideCounterBar: true,
      txtMaxLines: "3",
      disableCarousel: true,
      btnSeeMore: "",
      btnReload: ""
    });
  </script>