Fix to banner, print styles

components/styles-article.css

@@ -5,6 +5,7 @@ dt-article {
   padding-bottom: 72px;
   overflow: hidden;
   background: white;
+  min-height: calc(100vh - 70px - 182px);
 }
 
 @media(min-width: 1024px) {

components/styles-print.css

@@ -0,0 +1,20 @@
+
+@media print {
+  @page {
+    size: 8in 11in;
+  }
+  html {
+  }
+  p, code {
+    page-break-inside: avoid;
+  }
+  h2, h3 {
+    page-break-after: avoid;
+  }
+  dt-header {
+    visibility: hidden;
+  }
+  dt-footer {
+    display: none!important;
+  }
+}

components/styles.js

@@ -2,9 +2,10 @@ import base from './styles-base.css';
 import layout from './styles-layout.css';
 import article from './styles-article.css';
 import code from './styles-code.css';
+import print from './styles-print.css';
 
 export default function(dom) {
   let s = dom.createElement("style");
-  s.textContent = base + layout + article + code;
+  s.textContent = base + layout + article + code + print;
   dom.querySelector("head").appendChild(s);
 }

index.js

@@ -44,7 +44,7 @@ if(window && window.document) {
   window.document.addEventListener("DOMContentLoaded", (event) => {
     renderOnLoad(window.document, data);
     // Add a banner if we're not on localhost.
-    if (window.location.hostname !== "localhost") {
+    if (window.location.hostname !== "localhost" && window.location.origin !== "file://") {
       banner(window.document, data);
     }
     generateCrossref(data);