gitbook-html2print/assets/css/dist/styles.css

<style type="text/css">
/* the geometry of the page */
/* the size of the crop marks*/
/* the size of bleed */
/**
 * Computation
 */
/* EXTRA SPACE AROUND THE PAGE: BLEED + CROP */
/* GEOMETRY OF THE PAPER SHEET */
/* SIZE OF SPREAD */
/**
 * DEFINITION OF THE PAPER SHEET
 */
@page {
  size: 210mm 291mm;
  margin: 0; }

/**
 * CANVAS
 */
@media all {
  body {
    margin: 0; }
  .paper {
    width: 210mm;
    height: 290mm;
    box-sizing: border-box;
    counter-increment: page-counter;
    page-break-inside: avoid;
    page-break-after: always;
    overflow: hidden; }
  .page {
    width: 210mm;
    height: 290mm;
    position: relative; } }

@media print {
  html {
    width: 210mm; }
  body {
    /* Allows printing of background colors */
    background-color: white;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    /* Activate opentype features and kernings */
    -webkit-font-feature-settings: "liga", "dlig", "clig", "kern";
    text-rendering: optimizeLegibility; } }

/**
 * Helpers
 */
.page-break {
  /* Apply this class to an element to put it on a new region.
     * Hint:
     * You can also use an empty <div class="page-break"></div>
     * if you want to put manual page breaks without attaching it to an HTML element
     */
  break-after: region; }

/* __________________________________ LAYOUT __________________________________ */
.header,
.body,
.footer {
  box-sizing: border-box; }

/* __________________________________ HEADER __________________________________ */
.header {
  top: 0;
  margin: 0;
  padding-top: 8mm;
  width: 100%;
  height: 10mm;
  text-align: left; }
  .header:after {
    content: "Ethica Lectures"; }

/* __________________________________ MAIN SECTION __________________________________ */
.body {
  height: 270mm;
  width: 210mm;
  margin-bottom: 12mm;
  padding-top: 18mm;
  padding-bottom: 12mm;
  position: absolute; }

.recipient {
  -webkit-flow-from: contentFlow;
  flow-from: contentFlow; }

#content > * {
  -webkit-flow-into: contentFlow;
  flow-into: contentFlow contents; }

/* __________________________________ FOOTER __________________________________ */
.footer {
  position: absolute;
  bottom: 0;
  margin: 0;
  width: 100%;
  height: 10mm;
  text-align: center; }
  .footer:after {
    content: counter(page-counter); }

/* mirrored pages */
.paper:nth-child(odd) .header,
.paper:nth-child(odd) .body,
.paper:nth-child(odd) .footer {
  padding-left: 20mm;
  padding-right: 20mm; }

.paper:nth-child(even) .header,
.paper:nth-child(even) .body,
.paper:nth-child(even) .footer {
  padding-left: 20mm;
  padding-right: 20mm; }

img {
  max-width: 100%; }

h1,
h2,
h3,
h4,
h5,
h6 {
  /* Avoids headings to be cut or to be orphans.
     * But it doesn't seem to work
     * if the element after has a page-break-inside avoid. It tries its best! */
  -webkit-region-break-inside: avoid;
  -webkit-region-break-after: avoid;
  break-inside: avoid;
  break-after: avoid; }

/* AN EXAMPLE TO AVOID PAGE BREAK INSIDE,
 * HERE NO PARAGRAPH WILL BE CUT,
 * BUT YOU MIGHT WANT TO DEACTIVATE THIS */
p {
  /*-webkit-region-break-inside: avoid;*/ }

/**
 * DEBUG STYLES
 */
.debug .paper {
  outline: 1px solid blue; }

.debug .page {
  outline: 1px solid green; }

.debug .header {
  outline: 1px solid pink; }

.debug .body {
  outline: 1px solid purple; }

.debug .footer {
  outline: 1px solid pink; }

.debug .region-break {
  border-top: 1px dashed blue;
  box-sizing: border-box; }

.debug img {
  outline: 1px solid blue; }

/**
 * Style
 */
@media screen {
  body {
    background-color: #EEE; }
  .paper {
    background-color: #fff;
    box-shadow: 0 0 10px 7px #AAA;
    margin: 20px; } }

h1 {
  font-family: "amiri", serif;
  font-weight: bold; }

h2 {
  font-family: "amiri", serif;
  font-weight: 500; }

h3,
h4,
h5,
h6 {
  font-family: 'Open Sans', sans-serif; }

h1 {
  font-size: 42pt; }

h2 {
  font-size: 32pt; }

h3 {
  font-size: 14pt; }

h4 {
  font-size: 11pt; }

h5 {
  font-size: 11pt; }

h6 {
  font-size: 11pt; }

h2 {
  margin: 0.2em 0 0.4em 0; }

p, table, li, figcaption {
  font-family: 'Open Sans', sans-serif;
  font-size: 10pt; }

figure {
  display: inline-block;
  vertical-align: top;
  margin: 4mm 0 0; }
  figure img {
    border: 1px solid #ccc; }
  figure figcaption {
    font-size: 8pt; }

img[alt="logo"] {
  max-height: 0.9cm;
  display: inline-block;
  vertical-align: top;
  margin: 5mm 5mm 0 0; }
  img[alt="logo"] + br {
    display: none; }

img[alt~="visuel"] {
  margin: 0 4mm 0 0; }
  img[alt~="visuel"] + figcaption {
    display: none; }
  img[alt~="visuel"]:not([alt~="full"]) {
    max-height: 6.5cm; }
  img[alt~="visuel"][alt~="full"] {
    max-width: 85%; }

a {
  color: inherit; }

.header:after {
  font-family: "amiri", serif;
  font-weight: normal;
  font-size: 9pt; }

.footer {
  text-align: left; }
  .footer:after {
    font-family: "amiri", serif;
    font-weight: bold;
    font-size: 10pt; }

</style>