From e81399ec27ae61133cdcce3d2fc9b6e4ef8cf0c2 Mon Sep 17 00:00:00 2001
From: Heydon Pickering <heydon@heydonworks.com>
Date: Sun, 6 Aug 2017 09:19:38 +0100
Subject: [PATCH] error free standalone docs

---
 docs/css/styles.css                             | 12 ++++++++----
 .../coding/writing-inline-demos/index.html      | 17 ++++++++---------
 docs/print-version/index.html                   | 17 ++++++++---------
 docs/service-worker.js                          |  2 +-
 themes/infusion/layouts/shortcodes/demo.html    | 17 ++++++++---------
 themes/infusion/static/css/styles.css           | 12 ++++++++----
 6 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/docs/css/styles.css b/docs/css/styles.css
index 7a58fcb..8d9e1d8 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -162,7 +162,6 @@ main ul ul {
 button {
     font-size: 1.25rem;
     font-family: inherit;
-    font-weight: inherit;
     background: #111;
     color: #fff;
     padding: 0.75rem;
@@ -170,10 +169,8 @@ button {
 }
 [data-launch] {
   font-size: 0.75rem;
-  display: block;
-  margin-top: 0;
+  margin-top: 0.75rem;
   padding: 0.5rem;
-  width: 100%;
 }
 /* Tables */
 
@@ -690,6 +687,13 @@ h1 svg {
 }
 /* inline demos */
 
+.demo-container {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  padding: 1.5rem 0 0;
+  text-align: right;
+}
+
 [id^="js-demo-"] {
     all: initial;
     display: block;
diff --git a/docs/patterns/coding/writing-inline-demos/index.html b/docs/patterns/coding/writing-inline-demos/index.html
index c7d5934..838c784 100644
--- a/docs/patterns/coding/writing-inline-demos/index.html
+++ b/docs/patterns/coding/writing-inline-demos/index.html
@@ -406,7 +406,7 @@ toggle.addEventListener('click', (e) => {
 
 <div class="demo-container">
   
-      <div class="demo" id="demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
+      <div class="demo" id="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
       
   
   <template id="template-414e06a48e755bf9e43e5e2596f9ea7a">
@@ -440,16 +440,16 @@ toggle.addEventListener('click', (e) => {
 </script>
 
   </template>
-  <button data-launch="demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
+  <button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
   <script>
     (function() {
-      var root = document.getElementById('demo-414e06a48e755bf9e43e5e2596f9ea7a');
+      var root = document.getElementById('js-demo-414e06a48e755bf9e43e5e2596f9ea7a');
       var template = document.getElementById('template-414e06a48e755bf9e43e5e2596f9ea7a');
       var script = template.content.querySelector('script');
 
       if (script) {
-        var standaloneScript = '(function() { var demo = document; ' + script.textContent + ' })()';
-        var wrappedScript = '(function() { var demo = document.getElementById(\'demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
+        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
+        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
         script.textContent = wrappedScript;
       }
 
@@ -457,17 +457,16 @@ toggle.addEventListener('click', (e) => {
         root.attachShadow({mode: 'open'});
         root.shadowRoot.appendChild(document.importNode(template.content, true));
       } else {
-        root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
+        root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
       }
 
-      var launchButton = document.querySelector('[data-launch="demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
+      var launchButton = document.querySelector('[data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
       launchButton.addEventListener('click', function () {
-        
         var demoContent = template.content;
         var standalone = window.open();
-        
         script.textContent = standaloneScript;
         standalone.document.body.appendChild(document.importNode(template.content, true));
+        standalone.document.title = 'demo' + "414e06a48e755bf9e43e5e2596f9ea7a"
       });
     })();
   </script>
diff --git a/docs/print-version/index.html b/docs/print-version/index.html
index 54d95c0..2871b09 100644
--- a/docs/print-version/index.html
+++ b/docs/print-version/index.html
@@ -1665,7 +1665,7 @@ toggle.addEventListener('click', (e) => {
 
 <div class="demo-container">
   
-      <div class="demo" id="demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
+      <div class="demo" id="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
       
   
   <template id="template-414e06a48e755bf9e43e5e2596f9ea7a">
@@ -1699,16 +1699,16 @@ toggle.addEventListener('click', (e) => {
 </script>
 
   </template>
-  <button data-launch="demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
+  <button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
   <script>
     (function() {
-      var root = document.getElementById('demo-414e06a48e755bf9e43e5e2596f9ea7a');
+      var root = document.getElementById('js-demo-414e06a48e755bf9e43e5e2596f9ea7a');
       var template = document.getElementById('template-414e06a48e755bf9e43e5e2596f9ea7a');
       var script = template.content.querySelector('script');
 
       if (script) {
-        var standaloneScript = '(function() { var demo = document; ' + script.textContent + ' })()';
-        var wrappedScript = '(function() { var demo = document.getElementById(\'demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
+        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
+        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
         script.textContent = wrappedScript;
       }
 
@@ -1716,17 +1716,16 @@ toggle.addEventListener('click', (e) => {
         root.attachShadow({mode: 'open'});
         root.shadowRoot.appendChild(document.importNode(template.content, true));
       } else {
-        root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
+        root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
       }
 
-      var launchButton = document.querySelector('[data-launch="demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
+      var launchButton = document.querySelector('[data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
       launchButton.addEventListener('click', function () {
-        
         var demoContent = template.content;
         var standalone = window.open();
-        
         script.textContent = standaloneScript;
         standalone.document.body.appendChild(document.importNode(template.content, true));
+        standalone.document.title = 'demo' + "414e06a48e755bf9e43e5e2596f9ea7a"
       });
     })();
   </script>
diff --git a/docs/service-worker.js b/docs/service-worker.js
index b725fb0..3d99661 100644
--- a/docs/service-worker.js
+++ b/docs/service-worker.js
@@ -37,7 +37,7 @@
 /* eslint-disable indent, no-unused-vars, no-multiple-empty-lines, max-nested-callbacks, space-before-function-paren, quotes, comma-spacing */
 'use strict';
 
-var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/images/arrow_effect.svg","1434d178461f70c16b77acb4bdbc51e3"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","cff2f57bf3f13d761b3c497118dab42a"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/bad_design_system.png","9c0e87a34e7d842b0e2831dc947249aa"],["images/browser-Chrome-Android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-Chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-Edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-Firefox-Android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-Firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-IE.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-Opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-Safari-iOS.svg","f729e629ec998ec40d313495d7257741"],["images/browser-Safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.svg","9d455af53f9c02bc76abd2bb576c164d"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["index.html","4da73309917367004b857e69b5b479dc"],["index.xml","ef29de151434be9a3d87e43f15239ba3"],["js/dom-scripts.js","756aaf2b8c4434bcde01fe106c31e1ae"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["manifest.json","a5b36b0278884dc524eac11896806bb2"],["patterns/coding/code-blocks/index.html","cd1acd04ec8ee54c3c7851f2e933330d"],["patterns/coding/color-palettes/index.html","ed4e9dbb3ba5553fa1e7b0e4ba315f1a"],["patterns/coding/command-line/index.html","84bc5528a07dea5502d190e1b0469fc0"],["patterns/coding/demo-embedding/index.html","0cc8ce0eb1eb000c8e9b8a6c4f79d6bb"],["patterns/coding/file-trees/index.html","1d8cadc27bae62d5d3e12e98d8133266"],["patterns/coding/index.html","671954fc3bc18bec1d6a6c1662d7e984"],["patterns/coding/index.xml","c8141d2e5b185b41c7c2297cbe9761a9"],["patterns/coding/tested/index.html","ec55dad9e33271116c6c995fca36e7e2"],["patterns/coding/writing-inline-demos/index.html","20a3fb30fb062dc736f73c0d25e2c895"],["patterns/index.html","5bf0a6568a6c816e63cdb5c6f14c42ca"],["patterns/index.xml","9e80532fc90e93a802d19c126f144f36"],["patterns/installation/index.html","e9c186c7f8140dedeb0beb66443c1dd3"],["patterns/library-setup/index.html","46a3a1161ba1d19a4ad65bfce7ff936b"],["patterns/media/including-images/index.html","b3e25b893d9d78e96718d1885c0754df"],["patterns/media/including-videos/index.html","782b62da963ffab3dfc371ec6bdc5666"],["patterns/media/index.html","805159eb63c8bc352e9e657f9d7ec513"],["patterns/media/index.xml","38cdadb4cc97fb22238e2342ed8d4d31"],["patterns/printing/index.html","24d2a4048a1d738013a1f12106e2c6f6"],["patterns/serving/index.html","43027395464c5e4ca4e9f3d114b3f432"],["patterns/writing/expandable-sections/index.html","51a05acf0b677a357aff6407ab10570f"],["patterns/writing/index.html","07731802fd8e53e24b21576409686383"],["patterns/writing/index.xml","06262a6c511c5878cd393d5ef8d4c405"],["patterns/writing/library-structure/index.html","4a98370b2d88d17d23a6cef8143be9d6"],["patterns/writing/markdown-and-metadata/index.html","fc960ed6f3c80f4bfce1502c5130f57f"],["patterns/writing/notes-and-warnings/index.html","ea47c7e945aa1b19aef6749a38df0efd"],["patterns/writing/references/index.html","5f68fbf13a6af632b8873d3faf0e9c12"],["patterns/writing/tables-of-contents/index.html","9ee108d185d5432faba48f065a4c9230"],["print-version/index.html","46e3b21da54eb01536e4a5b63cc6bceb"],["sitemap.xml","001c1e642c492c18a637bccfcfc2fe9d"],["tags/index.xml","5af18d25fdcb072a78c1603adacee4f6"],["tags/markdown/index.html","335e196e067040dcd82f46367a232c01"],["tags/markdown/index.xml","757d307cdf85883859ac95ea20527f4a"],["tags/metadata/index.html","3ca1260f7742fa9a6ffd61a54e5be910"],["tags/metadata/index.xml","b6989e44540f4745072a2063369de173"]];
+var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/images/arrow_effect.svg","1434d178461f70c16b77acb4bdbc51e3"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","1adacee3e842f99705bafa93cf07ea10"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/bad_design_system.png","9c0e87a34e7d842b0e2831dc947249aa"],["images/browser-Chrome-Android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-Chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-Edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-Firefox-Android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-Firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-IE.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-Opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-Safari-iOS.svg","f729e629ec998ec40d313495d7257741"],["images/browser-Safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.svg","9d455af53f9c02bc76abd2bb576c164d"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["index.html","4da73309917367004b857e69b5b479dc"],["index.xml","ef29de151434be9a3d87e43f15239ba3"],["js/dom-scripts.js","756aaf2b8c4434bcde01fe106c31e1ae"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["manifest.json","a5b36b0278884dc524eac11896806bb2"],["patterns/coding/code-blocks/index.html","cd1acd04ec8ee54c3c7851f2e933330d"],["patterns/coding/color-palettes/index.html","ed4e9dbb3ba5553fa1e7b0e4ba315f1a"],["patterns/coding/command-line/index.html","84bc5528a07dea5502d190e1b0469fc0"],["patterns/coding/demo-embedding/index.html","0cc8ce0eb1eb000c8e9b8a6c4f79d6bb"],["patterns/coding/file-trees/index.html","1d8cadc27bae62d5d3e12e98d8133266"],["patterns/coding/index.html","671954fc3bc18bec1d6a6c1662d7e984"],["patterns/coding/index.xml","c8141d2e5b185b41c7c2297cbe9761a9"],["patterns/coding/tested/index.html","ec55dad9e33271116c6c995fca36e7e2"],["patterns/coding/writing-inline-demos/index.html","27bb78c59a09931066998653d280b95e"],["patterns/index.html","5bf0a6568a6c816e63cdb5c6f14c42ca"],["patterns/index.xml","9e80532fc90e93a802d19c126f144f36"],["patterns/installation/index.html","e9c186c7f8140dedeb0beb66443c1dd3"],["patterns/library-setup/index.html","46a3a1161ba1d19a4ad65bfce7ff936b"],["patterns/media/including-images/index.html","b3e25b893d9d78e96718d1885c0754df"],["patterns/media/including-videos/index.html","782b62da963ffab3dfc371ec6bdc5666"],["patterns/media/index.html","805159eb63c8bc352e9e657f9d7ec513"],["patterns/media/index.xml","38cdadb4cc97fb22238e2342ed8d4d31"],["patterns/printing/index.html","24d2a4048a1d738013a1f12106e2c6f6"],["patterns/serving/index.html","43027395464c5e4ca4e9f3d114b3f432"],["patterns/writing/expandable-sections/index.html","51a05acf0b677a357aff6407ab10570f"],["patterns/writing/index.html","07731802fd8e53e24b21576409686383"],["patterns/writing/index.xml","06262a6c511c5878cd393d5ef8d4c405"],["patterns/writing/library-structure/index.html","4a98370b2d88d17d23a6cef8143be9d6"],["patterns/writing/markdown-and-metadata/index.html","fc960ed6f3c80f4bfce1502c5130f57f"],["patterns/writing/notes-and-warnings/index.html","ea47c7e945aa1b19aef6749a38df0efd"],["patterns/writing/references/index.html","5f68fbf13a6af632b8873d3faf0e9c12"],["patterns/writing/tables-of-contents/index.html","9ee108d185d5432faba48f065a4c9230"],["print-version/index.html","c71afe06c5da4b1f93fb01ef91e579f4"],["sitemap.xml","001c1e642c492c18a637bccfcfc2fe9d"],["tags/index.xml","5af18d25fdcb072a78c1603adacee4f6"],["tags/markdown/index.html","335e196e067040dcd82f46367a232c01"],["tags/markdown/index.xml","757d307cdf85883859ac95ea20527f4a"],["tags/metadata/index.html","3ca1260f7742fa9a6ffd61a54e5be910"],["tags/metadata/index.xml","b6989e44540f4745072a2063369de173"]];
 var cacheName = 'sw-precache-v3-sw-precache-' + (self.registration ? self.registration.scope : '');
 
 
diff --git a/themes/infusion/layouts/shortcodes/demo.html b/themes/infusion/layouts/shortcodes/demo.html
index c066249..0f47535 100644
--- a/themes/infusion/layouts/shortcodes/demo.html
+++ b/themes/infusion/layouts/shortcodes/demo.html
@@ -3,7 +3,7 @@
   {{ if .Get "caption" }}
   <figure role="group" aria-labelledby="caption-{{ $uniq }}">
   {{ end }}
-      <div class="demo" id="demo-{{ $uniq }}"></div>
+      <div class="demo" id="js-demo-{{ $uniq }}"></div>
       {{ if .Get "caption" }}
           <figcaption id="caption-{{ $uniq }}">{{ .Get "caption" | markdownify }}</figcaption>
       {{ end }}
@@ -13,16 +13,16 @@
   <template id="template-{{ $uniq }}">
       {{ .Inner }}
   </template>
-  <button data-launch="demo-{{ $uniq }}">Launch in separate window</button>
+  <button data-launch="js-demo-{{ $uniq }}">Launch in separate window</button>
   <script>
     (function() {
-      var root = document.getElementById('demo-{{ $uniq }}');
+      var root = document.getElementById('js-demo-{{ $uniq }}');
       var template = document.getElementById('template-{{ $uniq }}');
       var script = template.content.querySelector('script');
 
       if (script) {
-        var standaloneScript = '(function() { var demo = document; ' + script.textContent + ' })()';
-        var wrappedScript = '(function() { var demo = document.getElementById(\'demo-{{ $uniq }}\').shadowRoot;' + script.textContent + '})()';
+        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
+        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-{{ $uniq }}\').shadowRoot;' + script.textContent + '})()';
         script.textContent = wrappedScript;
       }
 
@@ -30,17 +30,16 @@
         root.attachShadow({mode: 'open'});
         root.shadowRoot.appendChild(document.importNode(template.content, true));
       } else {
-        root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
+        root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
       }
 
-      var launchButton = document.querySelector('[data-launch="demo-{{ $uniq }}"]');
+      var launchButton = document.querySelector('[data-launch="js-demo-{{ $uniq }}"]');
       launchButton.addEventListener('click', function () {
-        //var wrap = '<!DOCTYPE html><html lang="en"><head><title>demo</title></head><body></body></html>';
         var demoContent = template.content;
         var standalone = window.open();
-        //standalone.document.write(wrap);
         script.textContent = standaloneScript;
         standalone.document.body.appendChild(document.importNode(template.content, true));
+        standalone.document.title = 'demo' + {{ $uniq }}
       });
     })();
   </script>
diff --git a/themes/infusion/static/css/styles.css b/themes/infusion/static/css/styles.css
index 7a58fcb..8d9e1d8 100644
--- a/themes/infusion/static/css/styles.css
+++ b/themes/infusion/static/css/styles.css
@@ -162,7 +162,6 @@ main ul ul {
 button {
     font-size: 1.25rem;
     font-family: inherit;
-    font-weight: inherit;
     background: #111;
     color: #fff;
     padding: 0.75rem;
@@ -170,10 +169,8 @@ button {
 }
 [data-launch] {
   font-size: 0.75rem;
-  display: block;
-  margin-top: 0;
+  margin-top: 0.75rem;
   padding: 0.5rem;
-  width: 100%;
 }
 /* Tables */
 
@@ -690,6 +687,13 @@ h1 svg {
 }
 /* inline demos */
 
+.demo-container {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  padding: 1.5rem 0 0;
+  text-align: right;
+}
+
 [id^="js-demo-"] {
     all: initial;
     display: block;