Rework header and footer for printing

All changes only apply to printing:
- Remove stickiness from header to avoid it been printed on every page
- Print breadcrumbs to header regardless of width
- Header and footer are now divided by a horizontal line from content
- Hamburger menu, toc button and github button/text are now hidden from header
- if toc is displayed on hover in screen mode, hide it if switched to printing

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;
@@ -75,12 +82,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;
@@ -248,7 +267,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); 
-}
+}
+@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;
+  }
+}

static/css/theme.css

@@ -995,12 +995,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;
@@ -1135,3 +1150,14 @@ pre .copy-to-clipboard:hover {
 option {
     color: initial;
 }
+
+@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;
+    }
+}