print.scss

/**
 * Princss
 *
 * Author: Marian Friedmann
 * Version: 1.0.0
 * License: MIT
 *
 * 👸 Princss aims to provide simple print styles to existing projects.
 * Elements such as header, footer, sidebars are simply removed so that
 * only the relevant content is printed.
 *
 * Usage:
 *
 * Make sure to add `media="screen"` to your existing stylesheet. This
 * prevents the screen styles from 'spilling' into the print styles.
 *
 * Add the following line right below:
 *
 *   <link rel="stylesheet" href="path/to/print.css" media="print">
 *
 * Either use the '.unprintable' class to hide elements from print layout,
 * or hide the elements in your styles; e.g.:
 *
 * @media print {
 *   .site-header,
 *   .main-nav,
 *   .footer-nav {
 *     display: none !important;
 *   }
 * }
 */

/* Variables */

$princssFontPrimary: "Georgia", serif!default;
$princssFontSecondary: "Helvetica Neue", sans-serif!default;
$princssFontCode: "Menlo", monospace!default;

$princssBaseUnit: 16px!default;

$princssFontSize: (
  base: $princssBaseUnit,
  bigger: 21px,
  h6: $princssBaseUnit,
  h5: $princssBaseUnit,
  h4: $princssBaseUnit,
  h3: 21px,
  h2: 28px,
  h1: 37px
)!default;

$princssColorMain: #000!default;
$princssColorLight: #999!default;

/**
 * General adjustments
 */

/* Adjust default margin */

@page {
  size: auto;
  margin: 20mm;
}

/* Remove margin/padding from body */

body {
  margin: 0;
  padding: 0;
}

/* The `.unprintable` class is used to hide
   elements from print layout. */

.unprintable {
  display: none;
}

/**
 * Fonts & font sizes
 */

/* Set fonts and base line-height */

html {
  font-family: $princssFontSecondary;
  line-height: 1.5;
  color: $princssColorMain;
}

ul, ol, p, blockquote {
  font-family: $princssFontPrimary;
}

code {
  font-family: $princssFontCode;
}

/* Set font sizes */

body       { font-size: map-get($princssFontSize, base); }
h1         { font-size: map-get($princssFontSize, h1); }
h2         { font-size: map-get($princssFontSize, h2); }
h3         { font-size: map-get($princssFontSize, h3); }
h4         { font-size: map-get($princssFontSize, h4); }
h5         { font-size: map-get($princssFontSize, h5); }
h6         { font-size: map-get($princssFontSize, h6); }

/* Add bottom margin to common block level elements */

h1, h2, h3, h4, h5, h6, ul, ol, p, blockquote, pre {
  margin-bottom: $princssBaseUnit;
}

/* Add top space to heading levels 1 - 3 in order
   to make them stand out more */

h1, h2, h3 {
  margin-top: $princssBaseUnit * 2;
}

/**
 * Code & codeblocks
 */

code {
  color: $princssColorLight;
  font-size: ceil(map-get($princssFontSize, base) / 8 * 7);
}

pre {
  border: 1px solid $princssColorLight;
  padding: 10px;
  display: block;
}

pre code {
  white-space: pre-line;
  word-break: break-all;
}

/**
 * Blockquotes
 */

blockquote {
  font-style: italic;
  margin-left: 1em;
  font-size: map-get($princssFontSize, bigger);
}

/**
 * Images
 */

img {
  max-width: 100%;
  margin: 0 auto;
}

/**
 * Abbreviations
 */

abbr[title]:after {
  content: " [" attr(title) "] ";
}

/**
 * Tables
 */

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

table,
tr,
td,
th {
  border: 1px solid $princssColorLight;
}

th {
  color: $princssColorMain;
  border-bottom: 1px solid $princssColorMain;
  font-weight: bold;
}

td, th {
  vertical-align: top;
  width: 100%;
  padding: ceil($princssBaseUnit/2) $princssBaseUnit;
}

/**
 * Links
 */

a {
  background: transparent;
  text-decoration:none;
  color: blue;
  &[href^="http://"]:after,
  &[href^="https://"]:after {
    content: "\a0[" attr(href) "] ";
    color: $princssColorLight;
    font-size: small;
    word-break: break-word;
  }
}

/**
 * Pagination
 */

/* Avoid page breaks after headings */

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

/* Avoid orphans and widows */

p {
  orphans: 3;
  widows: 2;
}

/* Avoid page breaks inside and before code blocks */

pre {
  page-break-before: avoid;
  page-break-inside: avoid;
}

hr {
  background-color: transparent;
  border: none;
  border-top: 1px solid $princssColorLight;
  margin: $princssBaseUnit*2 0;
}