fleet/website/assets/styles/pages/articles/basic-article.less

#basic-article {
  padding: 0px 24px 0px 24px;
  h1 {
    font-size: 36px;
  }
  hr {
    margin-top: 40px;
    margin-bottom: 40px;
    border-top: 2px solid @core-vibrant-blue-15;
    width: 100%;
  }

  [purpose='article-title'] {
    padding-top: 80px;
    margin-bottom: 28px;
    h1 {
      margin-bottom: 4px;
      line-height: 38px;
    }
    h2 {
      font-size: 24px;
      font-weight: 400;
      line-height: 32px;
    }
  }

  [purpose='article-details'] {
    font-size: 14px;
    line-height: 20px;
    span {
      color: @core-fleet-black-50;
    }
    p {
      margin-block-end: 0px;
    }
    img {
      height: 28px;
    }
  }
  [purpose='article-content'] {
    padding-top: 24px;
    padding-bottom: 24px;
    h1:first-of-type {
      display: none;
    }
    h1:first-of-type + h2:first-of-type {
      display: none;
    }
    img {
      max-width: 100%;
      width: auto;
      height: auto;
      max-height: 100%;
      margin-left: auto;
      margin-right: auto;
      padding: 24px 0px 16px 0px;
    }
    a {
      color: @core-vibrant-blue;
      word-break: break-word;
    }
    h2 {
      font-size: 24px;
      margin-top: 40px;
      margin-bottom: 24px;
    }
    h3 {
      font-size: 20px;
      margin-top: 40px;
      margin-bottom: 24px;
    }
    h4 {
      font-size: 16px;
      margin-top: 24px;
      margin-bottom: 24px;
    }
    p {
      font-size: 16px;
      line-height: 28px;
      margin-bottom: 24px;
    }
    img + em { // Image captions
      position: relative;
      top: -12px;
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-bottom: 16px;
    }
    ul, ol {
      padding-left: 16px;
    }
    li {
      padding-bottom: 16px;
    }
    li::marker {
      color: @core-vibrant-blue;
    }
    code:not(.nohighlight) {
      background: #F1F0FF;
      padding: 4px 8px;
      font-family: @code-font;
      font-size: 13px;
      line-height: 16px;
      color: @core-fleet-black;
    }
    pre {
      code:not(.nohighlight) {
        background: none;
        padding: 0px;
        font-family: @code-font;
        font-size: 13px;
        line-height: 16px;
        color: @core-fleet-black;
      }
      padding: 24px;
      border: 1px solid #E2E4EA;
      border-radius: 6px;
      margin: 0px 0px 40px;
      font-family: @code-font;
      background: #F9FAFC;
      white-space: break-spaces;
    }
    blockquote {
      margin: 16px 0 32px;
      background: #F7F7FC;
      border: 1px solid @core-vibrant-blue-50;
      padding: 16px;
      border-radius: 8px;
      display: inline-flex;
      img {
        display: flex;
        margin: 4px 12px 0 0;
        height: 16px;
        width: 16px;
        padding: 0px;
      }
      p {
        display: block;
        margin-bottom: 0px;
        line-height: 24px;
        font-size: 16px;
      }
    }
    iframe {
      align-self: center;
    }
  }
  [purpose='bottom-cta'] {
    padding-bottom: 80px;
    [purpose='next-steps-button'] {
      padding: 16px 24px;
      line-height: 24px;
      font-size: 16px;
      img {
        height: 24px;
      }
      a {
        color: unset;
      }
    }
  }
  [purpose='large-button-text'] {
    display: block;
  }

  @media (max-width: 991px) {
    [purpose='article-title'] {
      padding-top: 60px;
    }
    [purpose='article-content'] {
      padding-bottom: 0px;
    }
  }

  @media (max-width: 769px) {
    [purpose='article-title'] {
      padding-top: 40px;
      margin-bottom: 8px;
      h1 {
        font-size: 28px;
        line-height: 38px;
      }
    }
    [purpose='article-content'] {
      img {
        padding-bottom: 0px;
      }
      img + em { // Image captions
        top: 4px;
        margin-bottom: 16px;
      }
    }
  }

  @media (max-width: 375px) {
    [purpose='large-button-text'] { // Changes the Slack call to action (Join the Fleet community on Slack -> Join Fleet on Slack)
      display: none;
    }
  }

}