open-vault/website/pages/print.css

/* Print Styles - Hide Elements */
@media print {
  iframe,
  #__next > header,
  .g-product-subnav,
  .g-footer,
  .g-consent-manager,
  [aria-hidden='true'],
  [id='sidebar'],
  [id='edit-this-page'],
  [id='jump-to-section'],
  [id='__next-build-watcher'] {
    display: none !important;
  }
}

/* Print Styles - Page Spacing */
@media print {
  @page {
    margin: 2cm 0.5cm;
  }

  @page :first {
    margin-top: 0;
  }

  @page :last {
    margin-top: 0;
  }

  blockquote {
    break-inside: avoid;
  }

  body {
    margin-bottom: 2cm;
    margin-top: 2cm;
  }

  dl,
  ol,
  ul {
    break-before: avoid;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    break-after: avoid;
    break-inside: avoid;
  }

  img {
    break-inside: avoid;
    break-after: avoid;
  }

  pre,
  table {
    break-inside: avoid;
  }

  pre {
    white-space: pre-wrap;
  }
}

@media print {
  /* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/layout.css */
  .g-grid-container {
    /*
      * A “measure” is the number of characters in a line of text.
      * Long lines fatique readers as they find the start of a new line of text.
      * It seems widely accepted that an ideal measure is 66 characters per line.
      * An average character takes up .5em, and so we define a measure of 33em.
      * See: https://webtypography.net/2.1.2
      */
    max-width: 33em;
    padding-left: 0;
    padding-right: 0;
    word-break: break-word;
  }

  /* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/tables.css */
  table {
    margin-bottom: 0;
    margin-top: 20px;
  }
}

/* @todo: move print styles to @hashicorp/react-global-styles/global.css */
@media print {
  pre code,
  code,
  pre {
    font-weight: inherit;
  }

  pre {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    color: inherit;
    padding: 0.5em;

    & > code {
      white-space: inherit;
    }
  }
}

/* @todo: move print styles to @hashicorp/react-content/dist/style.css */
@media print {
  .g-content {
    & a {
      color: inherit;
      font-weight: 700;

      &:not(.anchor) {
        &::after {
          background-color: transparent;
          position: static;
          opacity: 1;
        }
      }

      &[href^='http'] {
        &::after {
          content: ' <' attr(href) '>';
          font-size: 0.8em;
          font-style: italic;
          letter-spacing: -0.01875em;
          vertical-align: top;
        }
      }

      &:not([href^='http']) {
        text-decoration: underline;
      }

      & > code {
        color: inherit;
        font-weight: 700;

        &::before,
        &::after {
          content: none;
        }
      }
    }

    & h1,
    & h2,
    & h3,
    & h4,
    & h5,
    & h6 {
      & code {
        background: none;
        font-size: 1em;
        padding: 0;
      }
    }

    & h2 {
      margin: 1em 0 0;
    }

    & h3 {
      margin: 1em 0 0;
      padding-bottom: 0.25em;
    }

    & img {
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
      margin: 1em 0 0;
    }

    & ol,
    & ul {
      margin: 1em 0 0;

      & li {
        margin-bottom: 0;
        margin-top: 0.5em;

        & p:first-child {
          margin-top: 0;
        }
      }
    }

    & p {
      margin: 1em 0 0;
    }

    & pre {
      background-color: transparent;
      border-radius: 0;
      margin: 1.5em 0 0;

      & code {
        background: transparent;
        color: inherit;
      }
    }

    & dd,
    & dt,
    & li,
    & p,
    & td,
    & th {
      & > :not(pre) code,
      & > code {
        background: transparent;
        font-weight: 700;
        padding: 0;
      }
    }

    & .alert.alert-danger,
    & .alert.alert-info,
    & .alert.alert-success,
    & .alert.alert-warning {
      background-color: transparent;
    }
  }
}

/* @todo: move print styles to @hashicorp/react-global-styles/code-highlighting.css */
@media print {
  .hljs {
    & * {
      color: inherit;
    }
  }
}