diff --git a/static/css/hugo-theme.css b/static/css/hugo-theme.css
index ae1fe79c27..fd6a32943a 100644
--- a/static/css/hugo-theme.css
+++ b/static/css/hugo-theme.css
@@ -3,6 +3,13 @@
 
 /* Table of contents */
 
+@media print {
+  /* we don't need this while printing */
+  .progress {
+    display: none !important;
+  }
+}
+
 .progress ul {
   list-style: none;
   margin: 0;
@@ -48,6 +55,16 @@ body {
 #body a.highlight:hover:after, #body a.highlight:focus:after {
     width: 100%;
 }
+@media print {
+  #body #body-inner a {
+    /* in print we want to distinguish links in our content from
+    normal text even if printed black/white;
+    don't use a.highlight in selector to also get links that are
+    put as HTML into markdown */
+    text-decoration-line: underline;
+  }
+}
+
 .progress {
     position:absolute;
     background-color: rgba(246, 246, 246, 0.97);
@@ -62,12 +79,24 @@ body {
   padding-right: 1rem !important;
   margin-right: 0.5rem !important;
 }
+@media print {
+  /* we don't need this while printing */
+  #toc-menu {
+    display: none;
+  }
+}
 
 #sidebar-toggle-span {
   border-right: thin solid #DAD8D8 !important;
   padding-right: 0.5rem !important;
   margin-right: 1rem !important;
 }
+@media print {
+  /* we don't need this while printing */
+  #sidebar-toggle-span {
+    display: none;
+  }
+}
 
 .btn {
   display: inline-block !important;
@@ -235,7 +264,24 @@ figcaption h4 {
       display: none;
   }
 }
+@media print {
+  #breadcrumbs .links {
+      display: inline;
+  }
+}
 
 .is-sticky #top-bar {
   box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1); 
-}
\ No newline at end of file
+}
+@media print {
+  /* the header is sticky which is not suited for print;
+  because there are inline styles set, we have to use !important here
+  to remove those styles in print;
+  chrome will repeat the header otherwise if you've already
+  scrolled the page before printing */
+  .is-sticky #top-bar{
+    position: inherit !important; /* IE11 doesn't know "initial" here */
+    width: inherit !important;
+    box-shadow: initial;
+  }
+}
diff --git a/static/css/theme.css b/static/css/theme.css
index f52e0140f8..4d57769aad 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -366,6 +366,11 @@ textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[typ
         display: table;
     }
 }
+@media print {
+    #body #navigation {
+        display: none;
+    }
+}
 #body .nav {
     position: fixed;
     top: 0;
@@ -406,9 +411,6 @@ textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[typ
 #body .nav.nav-next {
     right: 0;
 }
-#body-inner {
-    margin-bottom: 5rem;
-}
 #chapter {
     display: flex;
     align-items: center;
@@ -417,7 +419,6 @@ textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[typ
     padding: 2rem 0;
 }
 #chapter #body-inner {
-    padding-bottom: 3rem;
     max-width: 80%;
 }
 #chapter h3 {
@@ -988,12 +989,27 @@ td {
     height: 0;
     min-height: 3rem;
 }
+@media print {
+    #body #top-bar{
+        background-color: #fff; /* avoid background bleeding*/
+        border-bottom: 1px solid #ddd;
+        border-radius: 0;
+        padding-left: 0; /* for print, we want to align with the footer to ease the layout */
+        color: #777;
+    }
+}
 #top-github-link {
     position: relative;
     z-index: 1;
     float: right;
     display: block;
 }
+@media print {
+    /* we don't need this while printing */
+    #top-github-link {
+        display: none;
+    }
+}
 #body #breadcrumbs {
     height: auto;
     margin-bottom: 0;
@@ -1144,3 +1160,14 @@ option {
     font-size: x-small;
     width: 8px;
 }
+
+@media print {
+    /* in print mode show footer line to signal reader
+    the end of document */
+    .footline {
+        border-top: 1px solid #ddd;
+        color: #777;
+        margin-top: 1.5rem;
+        padding-top: .75rem;
+    }
+}