hugopoi
/
cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rejigged figure for caption

This commit is contained in:
Heydon Pickering 2017-08-06 11:02:44 +01:00
parent faf62f0940
commit 8ada5d9c6f
7 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/patterns/coding/writing-inline-demos.md
View File

@ -76,7 +76,7 @@ toggle.addEventListener('click', (e) => {
## Launch in a separate window ## 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 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. * 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.

2
docs/css/styles.css
View File

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

8
docs/patterns/coding/writing-inline-demos/index.html
View File

@ -425,7 +425,10 @@ toggle.addEventListener('click', (e) => {
<div class="demo-container"> <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"> <template id="template-414e06a48e755bf9e43e5e2596f9ea7a">
@ -459,7 +462,6 @@ toggle.addEventListener('click', (e) => {
</script> </script>
</template> </template>
<button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
<script> <script>
(function() { (function() {
var root = document.getElementById('js-demo-414e06a48e755bf9e43e5e2596f9ea7a'); 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> <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> <ul>
<li>It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).</li> <li>It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).</li>

8
docs/print-version/index.html
View File

@ -1665,7 +1665,10 @@ toggle.addEventListener('click', (e) => {
<div class="demo-container"> <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"> <template id="template-414e06a48e755bf9e43e5e2596f9ea7a">
@ -1699,7 +1702,6 @@ toggle.addEventListener('click', (e) => {
</script> </script>
</template> </template>
<button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
<script> <script>
(function() { (function() {
var root = document.getElementById('js-demo-414e06a48e755bf9e43e5e2596f9ea7a'); 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> <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> <ul>
<li>It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).</li> <li>It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).</li>

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

6
themes/infusion/layouts/shortcodes/demo.html
View File

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

2
themes/infusion/static/css/styles.css
View File

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