github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/website/pages/print.css (about)

     1  /* Print Styles - Hide Elements */
     2  @media print {
     3    iframe,
     4    .g-footer,
     5    .g-mega-nav,
     6    .g-product-subnav,
     7    .g-subnav,
     8    [aria-hidden='true'],
     9    [id='__next-build-watcher'],
    10    [id='edit-this-page'],
    11    [id='jump-to-section'],
    12    [id='sidebar'] {
    13      display: none !important;
    14    }
    15  }
    16  
    17  /* Print Styles - Page Spacing */
    18  @media print {
    19    @page {
    20      margin: 2cm 0.5cm;
    21    }
    22  
    23    @page :first {
    24      margin-top: 0;
    25    }
    26  
    27    @page :last {
    28      margin-top: 0;
    29    }
    30  
    31    blockquote {
    32      break-inside: avoid;
    33    }
    34  
    35    body {
    36      margin-bottom: 2cm;
    37      margin-top: 2cm;
    38    }
    39  
    40    dl,
    41    ol,
    42    ul {
    43      break-before: avoid;
    44    }
    45  
    46    h1,
    47    h2,
    48    h3,
    49    h4,
    50    h5,
    51    h6 {
    52      break-after: avoid;
    53      break-inside: avoid;
    54    }
    55  
    56    img {
    57      break-inside: avoid;
    58      break-after: avoid;
    59    }
    60  
    61    pre,
    62    table {
    63      break-inside: avoid;
    64    }
    65  
    66    pre {
    67      white-space: pre-wrap;
    68    }
    69  }
    70  
    71  @media print {
    72    /* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/layout.css */
    73    .g-container {
    74      /*
    75      * A “measure” is the number of characters in a line of text.
    76      * Long lines fatique readers as they find the start of a new line of text.
    77      * It seems widely accepted that an ideal measure is 66 characters per line.
    78      * An average character takes up .5em, and so we define a measure of 33em.
    79      * See: https://webtypography.net/2.1.2
    80      */
    81      max-width: 33em;
    82      padding-left: 0;
    83      padding-right: 0;
    84      word-break: break-word;
    85    }
    86  
    87    /* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/tables.css */
    88    table {
    89      margin-bottom: 0;
    90      margin-top: 20px;
    91    }
    92  }
    93  
    94  /* @todo: move print styles to @hashicorp/react-global-styles/global.css */
    95  @media print {
    96    pre code,
    97    code,
    98    pre {
    99      font-weight: inherit;
   100    }
   101  
   102    pre {
   103      background: transparent;
   104      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
   105      color: inherit;
   106      padding: 0.5em;
   107  
   108      & > code {
   109        white-space: inherit;
   110      }
   111    }
   112  }
   113  
   114  /* @todo: move print styles to @hashicorp/react-content/dist/style.css */
   115  @media print {
   116    .g-content {
   117      & a {
   118        color: inherit;
   119        font-weight: 700;
   120  
   121        &:not(.anchor) {
   122          &::after {
   123            background-color: transparent;
   124            position: static;
   125            opacity: 1;
   126          }
   127        }
   128  
   129        &[href^='http'] {
   130          &::after {
   131            content: ' <' attr(href) '>';
   132            font-size: 0.8em;
   133            font-style: italic;
   134            letter-spacing: -0.01875em;
   135            vertical-align: top;
   136          }
   137        }
   138  
   139        &:not([href^='http']) {
   140          text-decoration: underline;
   141        }
   142  
   143        & > code {
   144          color: inherit;
   145          font-weight: 700;
   146  
   147          &::before,
   148          &::after {
   149            content: none;
   150          }
   151        }
   152      }
   153  
   154      & h1,
   155      & h2,
   156      & h3,
   157      & h4,
   158      & h5,
   159      & h6 {
   160        & code {
   161          background: none;
   162          font-size: 1em;
   163          padding: 0;
   164        }
   165      }
   166  
   167      & h2 {
   168        margin: 1em 0 0;
   169      }
   170  
   171      & h3 {
   172        margin: 1em 0 0;
   173        padding-bottom: 0.25em;
   174      }
   175  
   176      & img {
   177        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
   178        margin: 1em 0 0;
   179      }
   180  
   181      & ol,
   182      & ul {
   183        margin: 1em 0 0;
   184  
   185        & li {
   186          margin-bottom: 0;
   187          margin-top: 0.5em;
   188  
   189          & p:first-child {
   190            margin-top: 0;
   191          }
   192        }
   193      }
   194  
   195      & p {
   196        margin: 1em 0 0;
   197      }
   198  
   199      & pre {
   200        background-color: transparent;
   201        border-radius: 0;
   202        margin: 1.5em 0 0;
   203  
   204        & code {
   205          background: transparent;
   206          color: inherit;
   207        }
   208      }
   209  
   210      & dd,
   211      & dt,
   212      & li,
   213      & p,
   214      & td,
   215      & th {
   216        & > :not(pre) code,
   217        & > code {
   218          background: transparent;
   219          font-weight: 700;
   220          padding: 0;
   221        }
   222      }
   223  
   224      & .alert.alert-danger,
   225      & .alert.alert-info,
   226      & .alert.alert-success,
   227      & .alert.alert-warning {
   228        background-color: transparent;
   229      }
   230    }
   231  }
   232  
   233  /* @todo: move print styles to @hashicorp/react-global-styles/code-highlighting.css */
   234  @media print {
   235    .hljs {
   236      & * {
   237        color: inherit;
   238      }
   239    }
   240  }
   241  
   242  /* @todo: remove when working on website/components/docs-page/style.css */
   243  @media print {
   244    #p-docs {
   245      & #inner {
   246        overflow: visible;
   247        width: auto;
   248  
   249        & pre,
   250        & code {
   251          font-size: 0.844rem;
   252        }
   253      }
   254    }
   255  }