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

rejigged figure for caption

Browse Source
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
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.

2
docs/css/styles.css
View File

@ -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;

6
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-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>

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

@ -1665,7 +1665,10 @@ toggle.addEventListener('click', (e) => {
<div class="demo-container">
<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>

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

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

@ -3,7 +3,10 @@
{{ if .Get "caption" }}
<figure role="group" aria-labelledby="caption-{{ $uniq }}">
{{ end }}
<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 }}');

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

@ -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;