fixed print version dependencies

docs/css/styles.css

@@ -280,6 +280,7 @@ caption {
 .wrapper {
   position: relative;
   margin-top: 0;
+  overflow-x: hidden;
 }
 
 .intro-and-nav {
@@ -568,10 +569,6 @@ pre[class*=language-] code * {
   margin-top: -1rem;
 }
 
-*:not(pre) > code {
-  white-space: nowrap;
-}
-
 .token.property,
 .token.tag,
 .token.boolean,
@@ -635,9 +632,14 @@ pre[class*=language-] code * {
 
 /* file tree lists */
 
+.file-tree {
+  overflow-x: auto;
+}
+
 .file-tree ul {
-  font-family: courier;
+  font-family: Courier, monospace;
   margin: 0;
+  padding: 0;
   padding-left: 3rem;
   list-style: none;
   line-height: 1.25;
@@ -645,6 +647,10 @@ pre[class*=language-] code * {
   overflow: hidden;
 }
 
+.file-tree > ul {
+   padding-left: 0;
+}
+
 .file-tree li:not(:last-child) > ul::before {
   content: '\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020';
   position: absolute;
@@ -654,14 +660,10 @@ pre[class*=language-] code * {
   width: 1em;
 }
 
-.file-tree > ul {
-  margin: 0;
-  padding: 0;
-}
-
 .file-tree li {
   background: #fff;
   position: relative;
+  white-space: nowrap;
 }
 
 .file-tree li + li {
@@ -676,6 +678,11 @@ pre[class*=language-] code * {
   content: '\2514\2500\2500\0020';
 }
 
+.file-tree li::before,
+.file-tree ul::before {
+  white-space: normal;
+}
+
 /* Expandable sections */
 
 .expandable-section {

docs/index.html

@@ -25,7 +25,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
+    <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
     <title>
       
   Infusion
@@ -330,11 +330,9 @@
         </div>
       </div>
     </div>
-    
+    <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
       <script src="https://heydon.github.io/infusion/js/service-worker-registration.js"></script>
     
   </body>

docs/js/dom-scripts.js

@@ -20,25 +20,30 @@
 /* menu button */
 (function () {
   var button = document.getElementById('menu-button')
+  if (button) {
     var menu = document.getElementById('patterns-list')
     button.addEventListener('click', function() {
       var expanded = this.getAttribute('aria-expanded') === 'true'
       this.setAttribute('aria-expanded', !expanded)
     })
+  }
 }());
 
 /* persist navigation scroll point */
 (function () {
+  var patternsNav = document.getElementById('patterns-nav')
+  if (patternsNav) {
+    var scrollPoint = patternsNav.scrollTop
     window.onunload = function () {
-    var scrollPoint = document.getElementById('patterns-nav').scrollTop
       localStorage.setItem('scrollPoint', scrollPoint)
     }
+  }
 
   window.addEventListener('DOMContentLoaded', function () {
     if (window.location.href.indexOf('patterns/') !== -1) {
-      document.getElementById('patterns-nav').scrollTop = parseInt(localStorage.getItem('scrollPoint'))
+      scrollPoint = parseInt(localStorage.getItem('scrollPoint'))
     } else {
-      document.getElementById('patterns-nav').scrollTop = 0
+      scrollPoint = 0
     }
   })
 }());

docs/patterns/coding/code-blocks/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Code blocks | Infusion
@@ -371,12 +369,8 @@ toggle.addEventListener('click', (e) => {
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/coding/color-palettes/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Color palettes | Infusion
@@ -364,12 +362,8 @@
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/coding/command-line/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Command line | Infusion
@@ -350,12 +348,8 @@ npm run start
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/coding/demo-embedding/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Demo embedding | Infusion
@@ -420,12 +418,8 @@
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/coding/file-trees/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         File trees | Infusion
@@ -400,12 +398,8 @@
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/coding/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Coding | Infusion
@@ -389,12 +387,8 @@
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/coding/tested/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Tested using... | Infusion
@@ -403,12 +401,8 @@
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/coding/writing-inline-demos/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Writing inline demos | Infusion
@@ -423,12 +421,8 @@ toggle.addEventListener('click', (e) => {
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Patterns | Infusion
@@ -349,12 +347,8 @@
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/installation/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Installation | Infusion
@@ -413,12 +411,8 @@
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/library-setup/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Library setup | Infusion
@@ -402,12 +400,8 @@ theme = "infusion"
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/media/including-images/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Including images | Infusion
@@ -385,12 +383,8 @@
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/media/including-videos/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Including videos | Infusion
@@ -330,12 +328,8 @@
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/media/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Media | Infusion
@@ -339,12 +337,8 @@
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/serving/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Serving | Infusion
@@ -368,12 +366,8 @@
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/writing/expandable-sections/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Expandable sections | Infusion
@@ -435,12 +433,8 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/writing/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Writing | Infusion
@@ -379,12 +377,8 @@
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/writing/library-structure/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Library structure | Infusion
@@ -404,12 +402,8 @@ title = &quot;Popups&quot;
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/writing/markdown-and-metadata/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Markdown &amp; metadata | Infusion
@@ -401,12 +399,8 @@ weight = 1
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/writing/notes-and-warnings/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Notes &amp; warnings | Infusion
@@ -394,12 +392,8 @@ This is a warning! It's about something the reader should be careful to do or to
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/writing/references/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         References | Infusion
@@ -767,12 +765,8 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/patterns/writing/tables-of-contents/index.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
     <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
-    
     <title>
       
         Tables of contents | Infusion
@@ -352,12 +350,8 @@ toc = false
         </div>
       </div>
     </div>
-    
     <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/print-version/index.html

@@ -24,7 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
+    <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
     <title>
       
   Infusion
@@ -1838,8 +1838,8 @@ npm run start
         </div>
       </div>
     </div>
-    
+    <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
+    <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
   </body>
 </html>

docs/tags/markdown/index.html

@@ -24,7 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
+    <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
     <title>
       
   Patterns tagged Markdown | Infusion
@@ -330,10 +330,8 @@
         </div>
       </div>
     </div>
-    
+    <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

docs/tags/metadata/index.html

@@ -24,7 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
-    
+    <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
     <title>
       
   Patterns tagged Metadata | Infusion
@@ -330,10 +330,8 @@
         </div>
       </div>
     </div>
-    
+    <script src="https://heydon.github.io/infusion/js/prism.js"></script>
-    
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
     
-    
   </body>
 </html>

themes/infusion/layouts/_default/baseof.html

@@ -24,9 +24,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="{{ "css/prism.css" | absURL }}" />
     <link rel="stylesheet" type="text/css" href="{{ "css/styles.css" | absURL }}">
-    {{ if eq .Type "patterns" }}
     <script src="{{ "js/webcomponents.js" | absURL }}"></script>
-    {{ end }}
     <title>
       {{ block "title" . }}
         {{ .Title }} | {{ .Site.Title }}
@@ -112,12 +110,8 @@
         </div>
       </div>
     </div>
-    {{ if eq .Type "patterns" }}
     <script src="{{ "js/prism.js" | absURL }}"></script>
-    {{ end }}
-    {{ if ne .Type "print-version" }}
     <script src="{{ "js/dom-scripts.js" | absURL }}"></script>
-    {{ end }}
     {{ if .Page.IsHome }}
       <script src="{{ "js/service-worker-registration.js" | absURL }}"></script>
     {{ end }}

themes/infusion/static/css/styles.css

@@ -280,6 +280,7 @@ caption {
 .wrapper {
   position: relative;
   margin-top: 0;
+  overflow-x: hidden;
 }
 
 .intro-and-nav {
@@ -568,10 +569,6 @@ pre[class*=language-] code * {
   margin-top: -1rem;
 }
 
-*:not(pre) > code {
-  white-space: nowrap;
-}
-
 .token.property,
 .token.tag,
 .token.boolean,
@@ -635,9 +632,14 @@ pre[class*=language-] code * {
 
 /* file tree lists */
 
+.file-tree {
+  overflow-x: auto;
+}
+
 .file-tree ul {
-  font-family: courier;
+  font-family: Courier, monospace;
   margin: 0;
+  padding: 0;
   padding-left: 3rem;
   list-style: none;
   line-height: 1.25;
@@ -645,6 +647,10 @@ pre[class*=language-] code * {
   overflow: hidden;
 }
 
+.file-tree > ul {
+   padding-left: 0;
+}
+
 .file-tree li:not(:last-child) > ul::before {
   content: '\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020';
   position: absolute;
@@ -654,14 +660,10 @@ pre[class*=language-] code * {
   width: 1em;
 }
 
-.file-tree > ul {
-  margin: 0;
-  padding: 0;
-}
-
 .file-tree li {
   background: #fff;
   position: relative;
+  white-space: nowrap;
 }
 
 .file-tree li + li {
@@ -676,6 +678,11 @@ pre[class*=language-] code * {
   content: '\2514\2500\2500\0020';
 }
 
+.file-tree li::before,
+.file-tree ul::before {
+  white-space: normal;
+}
+
 /* Expandable sections */
 
 .expandable-section {

themes/infusion/static/js/dom-scripts.js

@@ -20,25 +20,30 @@
 /* menu button */
 (function () {
   var button = document.getElementById('menu-button')
+  if (button) {
     var menu = document.getElementById('patterns-list')
     button.addEventListener('click', function() {
       var expanded = this.getAttribute('aria-expanded') === 'true'
       this.setAttribute('aria-expanded', !expanded)
     })
+  }
 }());
 
 /* persist navigation scroll point */
 (function () {
+  var patternsNav = document.getElementById('patterns-nav')
+  if (patternsNav) {
+    var scrollPoint = patternsNav.scrollTop
     window.onunload = function () {
-    var scrollPoint = document.getElementById('patterns-nav').scrollTop
       localStorage.setItem('scrollPoint', scrollPoint)
     }
+  }
 
   window.addEventListener('DOMContentLoaded', function () {
     if (window.location.href.indexOf('patterns/') !== -1) {
-      document.getElementById('patterns-nav').scrollTop = parseInt(localStorage.getItem('scrollPoint'))
+      scrollPoint = parseInt(localStorage.getItem('scrollPoint'))
     } else {
-      document.getElementById('patterns-nav').scrollTop = 0
+      scrollPoint = 0
     }
   })
 }());