rejigged figure for caption

content/patterns/coding/writing-inline-demos.md

@@ -76,7 +76,7 @@ toggle.addEventListener('click', (e) => {
 
 ## Launch in a separate window
 
-The "Launch in separate window" takes the demo code and pushes it to a new browser window. This serves two purposes:
+The "Launch in separate window" button takes the demo code and pushes it to a new browser window. This serves two purposes:
 
 * It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).
 * It creates an isolated test case for the demo, allowing you to run browser extensions and bookmarklets on the the demo code and _just_ the demo code.

docs/css/styles.css

@@ -687,7 +687,7 @@ h1 svg {
 }
 /* inline demos */
 
-.demo-container {
+.demo-inner {
   border-top: 1px solid;
   border-bottom: 1px solid;
   padding: 1.5rem 0 0;

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

@@ -425,7 +425,10 @@ toggle.addEventListener('click', (e) => {
 
 <div class="demo-container">
   
-      <div class="demo" id="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
+      <div class="demo-inner">
+        <div class="demo" id="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
+        <button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
+      </div>
       
   
   <template id="template-414e06a48e755bf9e43e5e2596f9ea7a">
@@ -459,7 +462,6 @@ toggle.addEventListener('click', (e) => {
 </script>
 
   </template>
-  <button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
   <script>
     (function() {
       var root = document.getElementById('js-demo-414e06a48e755bf9e43e5e2596f9ea7a');
@@ -494,7 +496,7 @@ toggle.addEventListener('click', (e) => {
 
 <h2 id="launch-in-a-separate-window">Launch in a separate window</h2>
 
-<p>The &ldquo;Launch in separate window&rdquo; takes the demo code and pushes it to a new browser window. This serves two purposes:</p>
+<p>The &ldquo;Launch in separate window&rdquo; button takes the demo code and pushes it to a new browser window. This serves two purposes:</p>
 
 <ul>
 <li>It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).</li>

docs/print-version/index.html

@@ -1665,7 +1665,10 @@ toggle.addEventListener('click', (e) => {
 
 <div class="demo-container">
   
-      <div class="demo" id="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
+      <div class="demo-inner">
+        <div class="demo" id="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
+        <button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
+      </div>
       
   
   <template id="template-414e06a48e755bf9e43e5e2596f9ea7a">
@@ -1699,7 +1702,6 @@ toggle.addEventListener('click', (e) => {
 </script>
 
   </template>
-  <button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
   <script>
     (function() {
       var root = document.getElementById('js-demo-414e06a48e755bf9e43e5e2596f9ea7a');
@@ -1734,7 +1736,7 @@ toggle.addEventListener('click', (e) => {
 
 <h2 id="launch-in-a-separate-window">Launch in a separate window</h2>
 
-<p>The &ldquo;Launch in separate window&rdquo; takes the demo code and pushes it to a new browser window. This serves two purposes:</p>
+<p>The &ldquo;Launch in separate window&rdquo; button takes the demo code and pushes it to a new browser window. This serves two purposes:</p>
 
 <ul>
 <li>It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).</li>

themes/infusion/layouts/shortcodes/demo.html

@@ -3,7 +3,10 @@
   {{ if .Get "caption" }}
   <figure role="group" aria-labelledby="caption-{{ $uniq }}">
   {{ end }}
-      <div class="demo" id="js-demo-{{ $uniq }}"></div>
+      <div class="demo-inner">
+        <div class="demo" id="js-demo-{{ $uniq }}"></div>
+        <button data-launch="js-demo-{{ $uniq }}">Launch in separate window</button>
+      </div>
       {{ if .Get "caption" }}
           <figcaption id="caption-{{ $uniq }}">{{ .Get "caption" | markdownify }}</figcaption>
       {{ end }}
@@ -13,7 +16,6 @@
   <template id="template-{{ $uniq }}">
       {{ .Inner }}
   </template>
-  <button data-launch="js-demo-{{ $uniq }}">Launch in separate window</button>
   <script>
     (function() {
       var root = document.getElementById('js-demo-{{ $uniq }}');

themes/infusion/static/css/styles.css

@@ -687,7 +687,7 @@ h1 svg {
 }
 /* inline demos */
 
-.demo-container {
+.demo-inner {
   border-top: 1px solid;
   border-bottom: 1px solid;
   padding: 1.5rem 0 0;