open-consul/website/pages/print.css

256 lines
4.1 KiB
CSS

/* Print Styles - Hide Elements */
@media print {
iframe,
.g-footer,
.g-mega-nav,
.g-product-subnav,
.g-subnav,
[aria-hidden='true'],
[id='__next-build-watcher'],
[id='edit-this-page'],
[id='jump-to-section'],
[id='sidebar'] {
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;
}
}
}
/* @todo: remove when working on website/components/docs-page/style.css */
@media print {
#p-docs {
& #inner {
overflow: visible;
width: auto;
& pre,
& code {
font-size: 0.844rem;
}
}
}
}