From 251af208ed36b3bfaa96fa4014f7e2e1a0bc6fd8 Mon Sep 17 00:00:00 2001 From: Heydon Pickering Date: Thu, 17 Aug 2017 17:21:19 +0100 Subject: [PATCH] theme switcher --- docs/css/styles.css | 75 ++++++++++--------- docs/index.html | 11 +++ docs/js/dom-scripts.js | 22 ++++++ docs/patterns/coding/code-blocks/index.html | 11 +++ .../patterns/coding/color-palettes/index.html | 11 +++ docs/patterns/coding/command-line/index.html | 11 +++ .../patterns/coding/demo-embedding/index.html | 11 +++ docs/patterns/coding/file-trees/index.html | 11 +++ docs/patterns/coding/index.html | 11 +++ docs/patterns/coding/tested/index.html | 11 +++ .../coding/writing-inline-demos/index.html | 11 +++ docs/patterns/index.html | 11 +++ docs/patterns/installation/index.html | 11 +++ docs/patterns/library-setup/index.html | 11 +++ .../media/including-images/index.html | 11 +++ .../media/including-videos/index.html | 11 +++ docs/patterns/media/index.html | 11 +++ docs/patterns/printing/index.html | 11 +++ docs/patterns/serving/index.html | 11 +++ .../writing/expandable-sections/index.html | 11 +++ docs/patterns/writing/index.html | 11 +++ .../writing/library-structure/index.html | 11 +++ .../writing/markdown-and-metadata/index.html | 11 +++ .../writing/notes-and-warnings/index.html | 11 +++ docs/patterns/writing/references/index.html | 11 +++ docs/patterns/writing/snippets/index.html | 11 +++ .../writing/tables-of-contents/index.html | 11 +++ docs/print-version/index.html | 11 +++ docs/service-worker.js | 2 +- docs/tags/markdown/index.html | 11 +++ docs/tags/metadata/index.html | 11 +++ themes/infusion/layouts/_default/baseof.html | 11 +++ themes/infusion/static/css/styles.css | 75 ++++++++++--------- themes/infusion/static/js/dom-scripts.js | 22 ++++++ 34 files changed, 440 insertions(+), 75 deletions(-) diff --git a/docs/css/styles.css b/docs/css/styles.css index 3cc58c6..79f00f3 100644 --- a/docs/css/styles.css +++ b/docs/css/styles.css @@ -9,6 +9,7 @@ *::before, *::after { font-family: inherit; + background-color: inherit; color: inherit; margin: 0; padding: 0; @@ -19,6 +20,7 @@ html { font-family: PT Sans, sans-serif; line-height: 1.5; color: #111; + background-color: #fefefe; } * + * { margin-top: 2.25rem; @@ -58,8 +60,9 @@ figure p img { } :focus:not([tabindex="-1"]), [data-expands]:focus svg, -.patterns a:focus .text { - outline: 3px solid #ccc; +.patterns a:focus .text, +[for="themer"] :focus + [aria-hidden] { + outline: 3px solid #888; outline-offset: 2px; } /* fix for IE :( */ @@ -86,7 +89,6 @@ div:not([tabindex]):focus { outline: none; } /* text styles */ - h1, h2, h3, @@ -160,6 +162,7 @@ main ul ul { button { font-size: 1.25rem; + border-radius: 0.125em; font-family: inherit; background: #111; color: #fff; @@ -171,6 +174,28 @@ button { margin-top: 0.75rem; padding: 0.5rem; } + +/* Forms */ +label { + display: inline-block; + font-weight: bold; +} + +[for="themer"] { + background: #111; + border-radius: 0.125em; + color: #fff; + padding: 0.25em 0.75em; + margin: 0.5rem; +} + +[for="themer"] [aria-hidden]::before { + content: 'off'; +} + +[for="themer"] :checked + [aria-hidden]::before { + content: 'on'; +} /* Tables */ table { @@ -466,6 +491,7 @@ pre[class*=language-] { } code[class*="language-"], pre[class*="language-"] { text-shadow: none; + filter: grayscale(100%); } pre[class*=language-][data-line] { padding: 1em 0 0 2.25rem; @@ -477,40 +503,6 @@ pre[class*=language-] code * { display: inline-block; margin-top: -1rem; } -.token.property, -.token.tag, -.token.boolean, -.token.number, -.token.constant, -.token.symbol, -.token.deleted { - color: #888; -} -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted, -.token.important { - color: #111; -} -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string { - color: #333; - background: none; -} -.token.atrule, -.token.attr-value, -.token.keyword { - color: #666; -} -.token.function { - color: #888; -} .line-numbers code { padding-left: 3rem; margin-top: -1rem; @@ -768,6 +760,15 @@ h1 svg { .pattern-section h1 { padding: 0 !important; } +/* Utilities */ +.vh { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} @media screen and (max-width: 45em) { [role="banner"] { position: static; diff --git a/docs/index.html b/docs/index.html index 7327ffe..add7c28 100644 --- a/docs/index.html +++ b/docs/index.html @@ -25,6 +25,11 @@ + Infusion @@ -392,6 +397,12 @@ </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/js/dom-scripts.js b/docs/js/dom-scripts.js index ee21490..7bd933c 100644 --- a/docs/js/dom-scripts.js +++ b/docs/js/dom-scripts.js @@ -122,3 +122,25 @@ } }); }()); + +/* Switch and persist theme */ +(function () { + var checkbox = document.getElementById('themer'); + var invertor = document.getElementById('inverter'); + + function darkTheme(media) { + invertor.setAttribute('media', media); + invertor.textContent = invertor.textContent.trim(); + localStorage.setItem('darkTheme', media); + } + + checkbox.addEventListener('change', function () { + darkTheme(this.checked ? 'screen' : 'none'); + }); + + window.addEventListener('DOMContentLoaded', function () { + if (localStorage.getItem('darkTheme') === 'screen') { + checkbox.click(); + } + }); +}()); diff --git a/docs/patterns/coding/code-blocks/index.html b/docs/patterns/coding/code-blocks/index.html index fa277f1..c326a7b 100644 --- a/docs/patterns/coding/code-blocks/index.html +++ b/docs/patterns/coding/code-blocks/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Code blocks | Infusion @@ -441,6 +446,12 @@ toggle.addEventListener('click', (e) => { </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/coding/color-palettes/index.html b/docs/patterns/coding/color-palettes/index.html index f9d2af4..2d10e63 100644 --- a/docs/patterns/coding/color-palettes/index.html +++ b/docs/patterns/coding/color-palettes/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Color palettes | Infusion @@ -423,6 +428,12 @@ </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/coding/command-line/index.html b/docs/patterns/coding/command-line/index.html index 93bcc44..bafbf32 100644 --- a/docs/patterns/coding/command-line/index.html +++ b/docs/patterns/coding/command-line/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Command line | Infusion @@ -409,6 +414,12 @@ npm run start </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/coding/demo-embedding/index.html b/docs/patterns/coding/demo-embedding/index.html index 9ef99d2..eeb2833 100644 --- a/docs/patterns/coding/demo-embedding/index.html +++ b/docs/patterns/coding/demo-embedding/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Demo embedding | Infusion @@ -479,6 +484,12 @@ </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/coding/file-trees/index.html b/docs/patterns/coding/file-trees/index.html index 77f71d2..dd57360 100644 --- a/docs/patterns/coding/file-trees/index.html +++ b/docs/patterns/coding/file-trees/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> File trees | Infusion @@ -459,6 +464,12 @@ </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/coding/index.html b/docs/patterns/coding/index.html index 226768c..96449d2 100644 --- a/docs/patterns/coding/index.html +++ b/docs/patterns/coding/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Coding | Infusion @@ -460,6 +465,12 @@ </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/coding/tested/index.html b/docs/patterns/coding/tested/index.html index adfcdfc..a282961 100644 --- a/docs/patterns/coding/tested/index.html +++ b/docs/patterns/coding/tested/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Tested using... | Infusion @@ -467,6 +472,12 @@ </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/coding/writing-inline-demos/index.html b/docs/patterns/coding/writing-inline-demos/index.html index c8cf9de..8304903 100644 --- a/docs/patterns/coding/writing-inline-demos/index.html +++ b/docs/patterns/coding/writing-inline-demos/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Writing inline demos | Infusion @@ -539,6 +544,12 @@ toggle.addEventListener('click', (e) => { </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/index.html b/docs/patterns/index.html index 3db0b80..73bef1c 100644 --- a/docs/patterns/index.html +++ b/docs/patterns/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Patterns | Infusion @@ -424,6 +429,12 @@ </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/installation/index.html b/docs/patterns/installation/index.html index e8b6de7..b73e03b 100644 --- a/docs/patterns/installation/index.html +++ b/docs/patterns/installation/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Installation | Infusion @@ -474,6 +479,12 @@ </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/library-setup/index.html b/docs/patterns/library-setup/index.html index 57e65c1..58e268f 100644 --- a/docs/patterns/library-setup/index.html +++ b/docs/patterns/library-setup/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Library setup | Infusion @@ -504,6 +509,12 @@ theme = "infusion" </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/media/including-images/index.html b/docs/patterns/media/including-images/index.html index 371ecfc..c45001c 100644 --- a/docs/patterns/media/including-images/index.html +++ b/docs/patterns/media/including-images/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Including images | Infusion @@ -453,6 +458,12 @@ </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/media/including-videos/index.html b/docs/patterns/media/including-videos/index.html index 0fb0713..828f075 100644 --- a/docs/patterns/media/including-videos/index.html +++ b/docs/patterns/media/including-videos/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Including videos | Infusion @@ -389,6 +394,12 @@ </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/media/index.html b/docs/patterns/media/index.html index 9a5b2cd..7c23031 100644 --- a/docs/patterns/media/index.html +++ b/docs/patterns/media/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Media | Infusion @@ -400,6 +405,12 @@ </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/printing/index.html b/docs/patterns/printing/index.html index ad98b56..0e05bd1 100644 --- a/docs/patterns/printing/index.html +++ b/docs/patterns/printing/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Printing | Infusion @@ -398,6 +403,12 @@ </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/serving/index.html b/docs/patterns/serving/index.html index dd5a512..fca6041 100644 --- a/docs/patterns/serving/index.html +++ b/docs/patterns/serving/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Serving | Infusion @@ -439,6 +444,12 @@ </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/writing/expandable-sections/index.html b/docs/patterns/writing/expandable-sections/index.html index 51031eb..3916c97 100644 --- a/docs/patterns/writing/expandable-sections/index.html +++ b/docs/patterns/writing/expandable-sections/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Expandable sections | Infusion @@ -494,6 +499,12 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/writing/index.html b/docs/patterns/writing/index.html index 0e45a7b..6afca7f 100644 --- a/docs/patterns/writing/index.html +++ b/docs/patterns/writing/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Writing | Infusion @@ -460,6 +465,12 @@ </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/writing/library-structure/index.html b/docs/patterns/writing/library-structure/index.html index e93e136..8d8fd80 100644 --- a/docs/patterns/writing/library-structure/index.html +++ b/docs/patterns/writing/library-structure/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Library structure | Infusion @@ -463,6 +468,12 @@ title = "Popups" </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/writing/markdown-and-metadata/index.html b/docs/patterns/writing/markdown-and-metadata/index.html index d5f8a31..6473fe9 100644 --- a/docs/patterns/writing/markdown-and-metadata/index.html +++ b/docs/patterns/writing/markdown-and-metadata/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Markdown & metadata | Infusion @@ -460,6 +465,12 @@ weight = 1 </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/writing/notes-and-warnings/index.html b/docs/patterns/writing/notes-and-warnings/index.html index bb78b24..4ef4236 100644 --- a/docs/patterns/writing/notes-and-warnings/index.html +++ b/docs/patterns/writing/notes-and-warnings/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Notes & warnings | Infusion @@ -453,6 +458,12 @@ This is a warning! It's about something the reader should be careful to do or to </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/writing/references/index.html b/docs/patterns/writing/references/index.html index 84d5282..5a4f5a5 100644 --- a/docs/patterns/writing/references/index.html +++ b/docs/patterns/writing/references/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> References | Infusion @@ -838,6 +843,12 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here. </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/writing/snippets/index.html b/docs/patterns/writing/snippets/index.html index cdc6c78..2d94bb6 100644 --- a/docs/patterns/writing/snippets/index.html +++ b/docs/patterns/writing/snippets/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Snippets | Infusion @@ -402,6 +407,12 @@ </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/patterns/writing/tables-of-contents/index.html b/docs/patterns/writing/tables-of-contents/index.html index 7c7f04b..7a16442 100644 --- a/docs/patterns/writing/tables-of-contents/index.html +++ b/docs/patterns/writing/tables-of-contents/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Tables of contents | Infusion @@ -411,6 +416,12 @@ toc = false </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/print-version/index.html b/docs/print-version/index.html index 5a466c7..47af6e6 100644 --- a/docs/print-version/index.html +++ b/docs/print-version/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Infusion @@ -2115,6 +2120,12 @@ npm run start </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/service-worker.js b/docs/service-worker.js index f95e08a..d63c428 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","1c183b48cab635f689386c900b9dc4aa"],["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","33339e2ff9c2cfa63168272165e94a0f"],["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","50293a256b796b9a737f1969d511a98e"],["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/samsung_homescreen.png","5ef40e64a18f966ce5c9084a024256db"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["index.html","124e8f24e34b3a1d95ab22efadd4cbfb"],["index.xml","27a8de47bc71ed57817e33a1a52a192d"],["js/dom-scripts.js","664894bfd23d4962ad84b6d0c74c9f47"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["manifest.json","a5b36b0278884dc524eac11896806bb2"],["patterns/coding/code-blocks/index.html","68c08a7b966c4cb729540b722db4270b"],["patterns/coding/color-palettes/index.html","aeee2f5b94e2fc6de21db391f5dceb22"],["patterns/coding/command-line/index.html","63296d35816d2d88d33c8ac9597cdb4e"],["patterns/coding/demo-embedding/index.html","54ff4658d32863b9889a9e7f49796ab6"],["patterns/coding/file-trees/index.html","b17896a6c0fa82ad7d682964379736a8"],["patterns/coding/index.html","e3db23fa9d9912a0c013a65b7d84346f"],["patterns/coding/index.xml","9103e9b80e3ea47df0759c7646b4b174"],["patterns/coding/tested/index.html","a8af8709c686f253fc33f745b562b788"],["patterns/coding/writing-inline-demos/index.html","60b729739c723144be17ff8ea1bf877b"],["patterns/index.html","6c60fbecaaf6ef38025940285f27f2bc"],["patterns/index.xml","001756a56c7778509768d8d71ca43a91"],["patterns/installation/index.html","82f1de678c6802aad3b264540346740c"],["patterns/library-setup/index.html","0c1e76b6c48d7a3516ff2054263bb471"],["patterns/media/including-images/index.html","05652693e7388f2b8cf0852ac152f08a"],["patterns/media/including-videos/index.html","a6769adc9adde7d76ddc455c606b0319"],["patterns/media/index.html","50d75869f7b8364d76d0a399e6bc1f6d"],["patterns/media/index.xml","69e133cec08e19eeb33cb005e90590e3"],["patterns/printing/index.html","cf8d46a3f58869ed329b5ba84a44ebb1"],["patterns/serving/index.html","35113dd460f055aaa8d8ee0a0c45e1da"],["patterns/writing/expandable-sections/index.html","62e714305b27a13625d6213d97b2e74e"],["patterns/writing/index.html","fc6faeed8c0d5488779b51b07d57112b"],["patterns/writing/index.xml","691ef930c108f300ab46d63e88be2b55"],["patterns/writing/library-structure/index.html","e8b436e8798188498c56d5d5e526675f"],["patterns/writing/markdown-and-metadata/index.html","bd01f8fd4239c35d62fd3753a4b2e085"],["patterns/writing/notes-and-warnings/index.html","acd8c7e9ed1af6e2fdff487d2edaf6a8"],["patterns/writing/references/index.html","996c1dbc169c5adb88d75e517d906dc7"],["patterns/writing/snippets/index.html","718ad3055cd5d7d36b575d6e8e005595"],["patterns/writing/tables-of-contents/index.html","e14e97e0ba72aecb592c9a1bbb3a8df3"],["print-version/index.html","7a12c8973bd4ff2cc925e7ad5d0732d5"],["sitemap.xml","5e45bc70692bcb388496bd4831d6431b"],["tags/index.xml","7445f2e8ccc722d44e7533263233d2df"],["tags/markdown/index.html","cf5dc153f8501850c872eef9ddabad62"],["tags/markdown/index.xml","7df48ac337fc803de40eec42599a31cd"],["tags/metadata/index.html","36add4244f679859b493910ca961a43b"],["tags/metadata/index.xml","eca9cfe9cd6561660ff341d5ded73b06"]]; +var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","1c183b48cab635f689386c900b9dc4aa"],["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","4f89ac9e13121b50a1a3e8951274dc07"],["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","50293a256b796b9a737f1969d511a98e"],["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/samsung_homescreen.png","5ef40e64a18f966ce5c9084a024256db"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["index.html","df7e43eb1d140d6945df9bc684aa561a"],["index.xml","27a8de47bc71ed57817e33a1a52a192d"],["js/dom-scripts.js","889648e073014262cdc7e6caac8867b7"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["manifest.json","a5b36b0278884dc524eac11896806bb2"],["patterns/coding/code-blocks/index.html","34932fb6ed4ea9f043892751e3016257"],["patterns/coding/color-palettes/index.html","aebf7b13099486edfca20650d7fe4c1f"],["patterns/coding/command-line/index.html","a0113d3a842ba1374a8dfbc3cd3c2959"],["patterns/coding/demo-embedding/index.html","5bf7d644a08686edc01a254993873f8f"],["patterns/coding/file-trees/index.html","317a284b54ca4dd184d325334cd59dbb"],["patterns/coding/index.html","0442c041e382ebdb9c2709c78fec3ccb"],["patterns/coding/index.xml","9103e9b80e3ea47df0759c7646b4b174"],["patterns/coding/tested/index.html","bb122f0d997f0b45c7e9d815b65201ec"],["patterns/coding/writing-inline-demos/index.html","db2d4bb65d40c9c00bac2b02cedce3a1"],["patterns/index.html","77eae3c2c51e47c722726440b2928285"],["patterns/index.xml","001756a56c7778509768d8d71ca43a91"],["patterns/installation/index.html","c46b9caeebcbad507b254c75716132a3"],["patterns/library-setup/index.html","31149cc7b39961aee3aa2c429b593f53"],["patterns/media/including-images/index.html","5fd50ba826f2d4e1427fec0fbdccb580"],["patterns/media/including-videos/index.html","e5c2350941df7d4afa520f04ee33adab"],["patterns/media/index.html","992ab94f6bc5b00c12ca7dc965c93e93"],["patterns/media/index.xml","69e133cec08e19eeb33cb005e90590e3"],["patterns/printing/index.html","7501c2bab714471fdea56e3afe5d5042"],["patterns/serving/index.html","4be1d712c26fa047e28797d236d24f72"],["patterns/writing/expandable-sections/index.html","51d505bef4426e9020587e2680391e32"],["patterns/writing/index.html","7e0d1e2461d0bcd1e27c0c79f158d205"],["patterns/writing/index.xml","691ef930c108f300ab46d63e88be2b55"],["patterns/writing/library-structure/index.html","1f6ba4e53e212b6d8865caa4304ec4eb"],["patterns/writing/markdown-and-metadata/index.html","d218b283b1297d074b4fbd45f8537d19"],["patterns/writing/notes-and-warnings/index.html","b0610d3e76ea58cf920c90bc0debbaee"],["patterns/writing/references/index.html","9d14b3f9577b38406d7d7a956e0087d5"],["patterns/writing/snippets/index.html","b7c65080078bd1bb22ba9b5a6be33e6c"],["patterns/writing/tables-of-contents/index.html","25267ef06a7fedd577baf211e13ef400"],["print-version/index.html","2ba9bf157ed78529b10934d6c00eaa3a"],["sitemap.xml","5e45bc70692bcb388496bd4831d6431b"],["tags/index.xml","7445f2e8ccc722d44e7533263233d2df"],["tags/markdown/index.html","adc3aca819192c36f91fa4500b190a6e"],["tags/markdown/index.xml","7df48ac337fc803de40eec42599a31cd"],["tags/metadata/index.html","39d72c846656744d59ed0bf7b336858f"],["tags/metadata/index.xml","eca9cfe9cd6561660ff341d5ded73b06"]]; var cacheName = 'sw-precache-v3-sw-precache-' + (self.registration ? self.registration.scope : ''); diff --git a/docs/tags/markdown/index.html b/docs/tags/markdown/index.html index 9a63cc3..53ec50a 100644 --- a/docs/tags/markdown/index.html +++ b/docs/tags/markdown/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Patterns tagged Markdown | Infusion @@ -391,6 +396,12 @@ </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/docs/tags/metadata/index.html b/docs/tags/metadata/index.html index a544405..04daf89 100644 --- a/docs/tags/metadata/index.html +++ b/docs/tags/metadata/index.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> Patterns tagged Metadata | Infusion @@ -391,6 +396,12 @@ </main> <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/themes/infusion/layouts/_default/baseof.html b/themes/infusion/layouts/_default/baseof.html index e654933..3b46ac1 100644 --- a/themes/infusion/layouts/_default/baseof.html +++ b/themes/infusion/layouts/_default/baseof.html @@ -24,6 +24,11 @@ <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link rel="stylesheet" href="{{ "css/prism.css" | absURL }}"> <link rel="stylesheet" type="text/css" href="{{ "css/styles.css" | absURL }}"> + <style id="inverter" media="none"> + html { filter: invert(100%) } + * { background-color: inherit } + img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } + </style> <title> {{ block "title" . }} {{ .Title }} | {{ .Site.Title }} @@ -108,6 +113,12 @@ {{ block "main" . }} {{ end }} <footer role="contentinfo"> + <div> + <label for="themer"> + dark theme: <input type="checkbox" id="themer" class="vh"> + <span aria-hidden="true"></span> + </label> + </div> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br> For general enquiries, contact us on info@paciellogroup.com. </footer> diff --git a/themes/infusion/static/css/styles.css b/themes/infusion/static/css/styles.css index 3cc58c6..79f00f3 100644 --- a/themes/infusion/static/css/styles.css +++ b/themes/infusion/static/css/styles.css @@ -9,6 +9,7 @@ *::before, *::after { font-family: inherit; + background-color: inherit; color: inherit; margin: 0; padding: 0; @@ -19,6 +20,7 @@ html { font-family: PT Sans, sans-serif; line-height: 1.5; color: #111; + background-color: #fefefe; } * + * { margin-top: 2.25rem; @@ -58,8 +60,9 @@ figure p img { } :focus:not([tabindex="-1"]), [data-expands]:focus svg, -.patterns a:focus .text { - outline: 3px solid #ccc; +.patterns a:focus .text, +[for="themer"] :focus + [aria-hidden] { + outline: 3px solid #888; outline-offset: 2px; } /* fix for IE :( */ @@ -86,7 +89,6 @@ div:not([tabindex]):focus { outline: none; } /* text styles */ - h1, h2, h3, @@ -160,6 +162,7 @@ main ul ul { button { font-size: 1.25rem; + border-radius: 0.125em; font-family: inherit; background: #111; color: #fff; @@ -171,6 +174,28 @@ button { margin-top: 0.75rem; padding: 0.5rem; } + +/* Forms */ +label { + display: inline-block; + font-weight: bold; +} + +[for="themer"] { + background: #111; + border-radius: 0.125em; + color: #fff; + padding: 0.25em 0.75em; + margin: 0.5rem; +} + +[for="themer"] [aria-hidden]::before { + content: 'off'; +} + +[for="themer"] :checked + [aria-hidden]::before { + content: 'on'; +} /* Tables */ table { @@ -466,6 +491,7 @@ pre[class*=language-] { } code[class*="language-"], pre[class*="language-"] { text-shadow: none; + filter: grayscale(100%); } pre[class*=language-][data-line] { padding: 1em 0 0 2.25rem; @@ -477,40 +503,6 @@ pre[class*=language-] code * { display: inline-block; margin-top: -1rem; } -.token.property, -.token.tag, -.token.boolean, -.token.number, -.token.constant, -.token.symbol, -.token.deleted { - color: #888; -} -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted, -.token.important { - color: #111; -} -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string { - color: #333; - background: none; -} -.token.atrule, -.token.attr-value, -.token.keyword { - color: #666; -} -.token.function { - color: #888; -} .line-numbers code { padding-left: 3rem; margin-top: -1rem; @@ -768,6 +760,15 @@ h1 svg { .pattern-section h1 { padding: 0 !important; } +/* Utilities */ +.vh { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} @media screen and (max-width: 45em) { [role="banner"] { position: static; diff --git a/themes/infusion/static/js/dom-scripts.js b/themes/infusion/static/js/dom-scripts.js index ee21490..7bd933c 100644 --- a/themes/infusion/static/js/dom-scripts.js +++ b/themes/infusion/static/js/dom-scripts.js @@ -122,3 +122,25 @@ } }); }()); + +/* Switch and persist theme */ +(function () { + var checkbox = document.getElementById('themer'); + var invertor = document.getElementById('inverter'); + + function darkTheme(media) { + invertor.setAttribute('media', media); + invertor.textContent = invertor.textContent.trim(); + localStorage.setItem('darkTheme', media); + } + + checkbox.addEventListener('change', function () { + darkTheme(this.checked ? 'screen' : 'none'); + }); + + window.addEventListener('DOMContentLoaded', function () { + if (localStorage.getItem('darkTheme') === 'screen') { + checkbox.click(); + } + }); +}());