content/assets/stylesheets/_typography.scss

@use 'variables' as *;
@use 'mixins/breakpoints';
@use 'mixins/md-typography';
@use 'mixins/spacing';

/*
 * Font-face declarations copied from GitLab:
 * https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/fonts.scss#L7
 */
@font-face {
  font-family: 'GitLab Sans';
  font-weight: 100 900;
  font-style: normal;
  /* stylelint-disable-next-line property-no-unknown */
  font-named-instance: 'Regular';
  src: url('../vendor/GitLabSans.woff2') format('woff2');
}

@font-face {
  font-family: 'GitLab Sans';
  font-weight: 100 900;
  font-style: italic;
  /* stylelint-disable-next-line property-no-unknown */
  font-named-instance: 'Regular';
  src: url('../vendor/GitLabSans-Italic.woff2') format('woff2');
}

@font-face {
  font-family: 'GitLab Mono';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('../vendor/GitLabMono.woff2') format('woff2');
}
@font-face {
  font-family: 'GitLab Mono';
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  src: url('../vendor/GitLabMono-Italic.woff2') format('woff2');
}

* {
  font-variant-ligatures: none;
}

.gl-docs {
  p,
  ul,
  ol,
  pre,
  blockquote {
    margin-top: 0;
    margin-bottom: 1.5em;
  }

  blockquote {
    background-color: $gds-gray-50;
    color: $gds-black;
    border: solid 1px $gray-100;
    border-radius: 0.313rem;
    margin: 1rem 0;
    padding: 1rem;

    ul {
      margin-bottom: 0;
    }
  }

  ul,
  ol {
    margin-top: 0.5rem;
    margin-left: 0;

    li {
      margin-bottom: 0.5rem;
    }
  }

  ol {
    ol {
      list-style-type: lower-alpha;
      ol {
        list-style-type: lower-roman;
      }
    }
  }


  ul ul,
  ol ol,
  ul ol,
  ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0;
  }

  b,
  strong,
  em,
  small {
    line-height: 1;
  }

  sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
  }

  sub {
    bottom: -0.25em;
  }

  // Keyboard input

  kbd {
    background-color: $gray-700;
    border-radius: 4px;
    color: $white;
    line-height: 1;
    overflow-wrap: break-word;
    padding: 2px 4px;
  }

  // Highlighted text

  mark {
    background-color: $blue-100;
  }

  // Code

  *:not(a):not(pre) > code {
    color: $accessible-code-color;
  }

  *:not(pre) > code {
    background-color: $gray-50;
    border-radius: 4px;
    line-height: 1;
    overflow-wrap: break-word;
    padding: 2px;
    transition: background-color 0.15s linear;
  }

  pre {
    background-color: $gray-50;
    border-radius: 4px;
    border: solid 1px $purple-100;
    color: $gray-800;
    padding: 1rem;
  }

  .clip-btn {
    background-color: $pre-code-color;
    border: 0;
    position: absolute;
    right: 0;
    top: 1px;
    svg {
      opacity: 0.5;
      transition: opacity 0.3s ease-in;
      pointer-events: none;
    }
    @media all and (max-width: $bp-sm) {
      display: none;
    }

    &:hover {
      svg {
        opacity: 1;
      }
    }
  }

  .introduced-in {
    color: $gray-700;
    border-left: 2px solid $color-tanuki-light;
    padding-left: 0.75rem;
    font-size: 0.875rem;

    ul,
    li {
      margin: 0;
      padding-bottom: 0;
      line-height: 1.65rem;
    }
  }

  hr {
    border: 0;
    border-top: 1px solid rgba($theme-indigo-900, 0.16);
    height: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;

    @include breakpoints.breakpoint(md) {
      margin-top: 2rem;
      margin-bottom: 2rem;
    }
  }

  & {
    @include md-typography.gl-font-size-markdown;
    @include md-typography.gl-line-height-24;
    @include md-typography.gl-font-regular;
    @include md-typography.gl-font-weight-normal;
  }


  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .gl-h1,
  .gl-h2,
  .gl-h3,
  .gl-h4,
  .gl-h5,
  .gl-h6 {
    @include md-typography.gl-font-weight-bold;
    @include spacing.gl-mb-3;

    code {
      font-size: inherit;
      line-height: 1.35;
    }
  }

  h2,
  h3,
  h4,
  h5,
  h6,
  .gl-h2,
  .gl-h3,
  .gl-h4,
  .gl-h5,
  .gl-h6 {

    // Permalinks on header elements.
    .anchor {
      transition: all 0.3s;
      background: url('/assets/images/icon_anchor.svg') center center / contain no-repeat;
      opacity: 0;
      display: inline-block;
      width: 1em;
      height: 1em;
      max-height: 2rem;
      vertical-align: middle;
      margin-left: 0.25rem;
      margin-top: -0.25rem;
      border-bottom: 0;
    }

    &:hover {
      .anchor {
        border-bottom: 0;
        opacity: 1;
      }
    }
  }

  h3,
  h4,
  h5,
  h6,
  .gl-h3,
  .gl-h4,
  .gl-h5,
  .gl-h6 {
    @include spacing.gl-mt-6;
    @include spacing.gl-mb-3;
  }

  h1,
  .gl-h1 {
    @include md-typography.gl-font-size-markdown-h1;
    @include md-typography.gl-line-height-32;
    @include gl-fluid-font-size(
      $min: $gl-font-size-markdown-h1-md,
      $max: $gl-font-size-markdown-h1-xl
    );
    @include gl-fluid-line-height($min: $gl-line-height-36, $max: $gl-line-height-52);
    @include spacing.gl-mt-0;
  }

  h2,
  .gl-h2 {
    @include md-typography.gl-font-size-markdown-h2;
    @include md-typography.gl-line-height-28;
    @include gl-fluid-font-size(
      $min: $gl-font-size-markdown-h2-md,
      $max: $gl-font-size-markdown-h2-xl
    );
    @include gl-fluid-line-height($min: $gl-line-height-28, $max: $gl-line-height-36);
    @include spacing.gl-mt-6;
  }

  h3,
  .gl-h3 {
    @include md-typography.gl-font-size-markdown-h3;
    @include md-typography.gl-line-height-24;
    @include gl-fluid-font-size(
      $min: $gl-font-size-markdown-h3-md,
      $max: $gl-font-size-markdown-h3-xl
    );
    @include gl-fluid-line-height($min: $gl-line-height-24, $max: $gl-line-height-28);
  }

  h4,
  .gl-h4 {
    @include md-typography.gl-font-size-markdown;
    @include md-typography.gl-line-height-20;
  }

  h5,
  .gl-h5,
  h6,
  .gl-h6 {
    @include md-typography.gl-font-size-markdown-sm;
    @include md-typography.gl-line-height-20;
  }

  h6,
  .gl-h6 {
    @include gl-text-gray-700;
  }

  p,
  .gl-paragraph {
    @include spacing.gl-mt-0;
    @include spacing.gl-mb-0;

    + p,
    + .gl-paragraph {
      @include spacing.gl-mt-5;
    }

    &.sm {
      @include md-typography.gl-font-size-markdown-sm;
      @include md-typography.gl-line-height-20;
    }
  }

  .monospace {
    @include md-typography.gl-font-monospace;
    @include md-typography.gl-font-size-monospace;
    @include md-typography.gl-line-height-24;

    &.sm {
      @include md-typography.gl-font-size-monospace-sm;
      @include md-typography.gl-line-height-20;
    }
  }

  // Links

  a {
    border-bottom: 1px solid rgba($purple-700, 0.24);
    color: $purple-700;
    text-decoration: none;
    transition: color 0.15s linear, border-bottom-color 0.15s linear;

    &:hover {
      border-bottom: 1px solid $purple-900;
      color: $purple-900;

      code {
        background-color: $theme-indigo-100;
      }
    }
  }

  // 	Headings
  // For the system of .h1-.h6 classes to properly overwrite the base tag, you must include all properties transformed
  // at every breakpoint, even if those properties are the default or assigned at an earlier breakpoint.

  // See the headings section in _scss for the responsive properties.
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    margin-top: 2.5rem;
    text-rendering: optimizelegibility;
  }

  // Responsive Headers

  h1 {
    color: $theme-indigo-900;
    font-weight: 600;
    text-transform: none;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 1.5rem;
  }
  @media screen and (min-width: $bp-sm) {
    h1 {
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    h1 {
      font-size: 2.5rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  h2 {
    color: $theme-indigo-900;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.25;
    margin-bottom: 1.5rem;
  }
  @media screen and (min-width: $bp-sm) {
    h2 {
      font-size: 1.5rem;
      line-height: 1.25;
      margin-bottom: 1.5rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    h2 {
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    h2 {
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  h3 {
    color: $theme-indigo-900;
    font-weight: 600;
    text-transform: none;
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 1rem;
  }
  @media screen and (min-width: $bp-sm) {
    h3 {
      font-size: 1.25rem;
      line-height: 1.4;
      margin-bottom: 1rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    h3 {
      font-size: 1.5rem;
      line-height: 1.273;
      margin-bottom: 1rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    h3 {
      font-size: 1.5rem;
      line-height: 1.273;
      margin-bottom: 1rem;
    }
  }
  h4 {
    color: $theme-indigo-900;
    text-transform: none;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
  }
  @media screen and (min-width: $bp-sm) {
    h4 {
      font-size: 1rem;
      line-height: 1.5;
      margin-bottom: 0.75rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    h4 {
      font-size: 1.125rem;
      line-height: 1.375;
      margin-bottom: 0.75rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    h4 {
      font-size: 1.125rem;
      line-height: 1.375;
      margin-bottom: 0.75rem;
    }
  }
  h5 {
    color: $theme-indigo-900;
    font-weight: 700;
    text-transform: none;
    font-size: 0.875rem;
    line-height: 1.429;
    margin-bottom: 0.5rem;
  }
  @media screen and (min-width: $bp-sm) {
    h5 {
      font-size: 0.875rem;
      line-height: 1.429;
      margin-bottom: 0.5rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    h5 {
      font-size: 1rem;
      line-height: 1.5;
      margin-bottom: 0.5rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    h5 {
      font-size: 1rem;
      line-height: 1.5;
      margin-bottom: 0.5rem;
    }
  }
  h6 {
    color: $theme-indigo-900;
    text-transform: none;
    font-size: 0.875rem;
    line-height: 1.25;
    margin-bottom: 0.25rem;
  }
  @media screen and (min-width: $bp-sm) {
    h6 {
      font-size: 0.875rem;
      line-height: 1.25;
      margin-bottom: 0.25rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    h6 {
      font-size: 0.875rem;
      line-height: 1.25;
      margin-bottom: 0.25rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    h6 {
      font-size: 0.875rem;
      line-height: 1.25;
      margin-bottom: 0.25rem;
    }
  }

  // These declarations are kept separate from and placed after
  // the previous tag-based declarations so that the classes beat the tags in
  // the CSS cascade, and thus <h1 class="h2"> will be styled like an h2.

  .h1 {
    color: $theme-indigo-900;
    font-weight: 600;
    margin-top: 0;
    text-transform: none;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 1.5rem;
  }
  @media screen and (min-width: $bp-sm) {
    .h1 {
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    .h1 {
      font-size: 2.5rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    .h1 {
      font-size: 2.5rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  .h2 {
    color: $theme-indigo-900;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.25;
    margin-bottom: 1.5rem;
  }
  @media screen and (min-width: $bp-sm) {
    .h2 {
      font-size: 1.5rem;
      line-height: 1.25;
      margin-bottom: 1.5rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    .h2 {
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    .h2 {
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
  }
  .h3 {
    color: $theme-indigo-900;
    font-weight: 600;
    text-transform: none;
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 1rem;
  }
  @media screen and (min-width: $bp-sm) {
    .h3 {
      font-size: 1.25rem;
      line-height: 1.4;
      margin-bottom: 1rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    .h3 {
      font-size: 1.5rem;
      line-height: 1.273;
      margin-bottom: 1rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    .h3 {
      font-size: 1.5rem;
      line-height: 1.273;
      margin-bottom: 1rem;
    }
  }
  .h4 {
    color: $theme-indigo-900;
    text-transform: none;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
  }
  @media screen and (min-width: $bp-sm) {
    .h4 {
      font-size: 1rem;
      line-height: 1.5;
      margin-bottom: 0.75rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    .h4 {
      font-size: 1.125rem;
      line-height: 1.375;
      margin-bottom: 0.75rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    .h4 {
      font-size: 1.125rem;
      line-height: 1.375;
      margin-bottom: 0.75rem;
    }
  }
  .h5 {
    color: $theme-indigo-900;
    font-weight: 700;
    text-transform: none;
    font-size: 0.875rem;
    line-height: 1.429;
    margin-bottom: 0.5rem;
  }
  @media screen and (min-width: $bp-sm) {
    .h5 {
      font-size: 0.875rem;
      line-height: 1.429;
      margin-bottom: 0.5rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    .h5 {
      font-size: 1rem;
      line-height: 1.5;
      margin-bottom: 0.5rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    .h5 {
      font-size: 1rem;
      line-height: 1.5;
      margin-bottom: 0.5rem;
    }
  }
  .h6 {
    color: $theme-indigo-900;
    text-transform: none;
    font-size: 0.875rem;
    line-height: 1.25;
    margin-bottom: 0.25rem;
  }
  @media screen and (min-width: $bp-sm) {
    .h6 {
      font-size: 0.875rem;
      line-height: 1.25;
      margin-bottom: 0.25rem;
    }
  }
  @media screen and (min-width: $bp-md) {
    .h6 {
      font-size: 0.875rem;
      line-height: 1.25;
      margin-bottom: 0.25rem;
    }
  }
  @media screen and (min-width: $bp-lg) {
    .h6 {
      font-size: 0.875rem;
      line-height: 1.25;
      margin-bottom: 0.25rem;
    }
  }
}