theme switcher

This commit is contained in:
Heydon Pickering 2017-08-17 17:21:19 +01:00
parent 5cfde5966c
commit 251af208ed
34 changed files with 440 additions and 75 deletions

View File

@ -9,6 +9,7 @@
*::before, *::before,
*::after { *::after {
font-family: inherit; font-family: inherit;
background-color: inherit;
color: inherit; color: inherit;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -19,6 +20,7 @@ html {
font-family: PT Sans, sans-serif; font-family: PT Sans, sans-serif;
line-height: 1.5; line-height: 1.5;
color: #111; color: #111;
background-color: #fefefe;
} }
* + * { * + * {
margin-top: 2.25rem; margin-top: 2.25rem;
@ -58,8 +60,9 @@ figure p img {
} }
:focus:not([tabindex="-1"]), :focus:not([tabindex="-1"]),
[data-expands]:focus svg, [data-expands]:focus svg,
.patterns a:focus .text { .patterns a:focus .text,
outline: 3px solid #ccc; [for="themer"] :focus + [aria-hidden] {
outline: 3px solid #888;
outline-offset: 2px; outline-offset: 2px;
} }
/* fix for IE :( */ /* fix for IE :( */
@ -86,7 +89,6 @@ div:not([tabindex]):focus {
outline: none; outline: none;
} }
/* text styles */ /* text styles */
h1, h1,
h2, h2,
h3, h3,
@ -160,6 +162,7 @@ main ul ul {
button { button {
font-size: 1.25rem; font-size: 1.25rem;
border-radius: 0.125em;
font-family: inherit; font-family: inherit;
background: #111; background: #111;
color: #fff; color: #fff;
@ -171,6 +174,28 @@ button {
margin-top: 0.75rem; margin-top: 0.75rem;
padding: 0.5rem; 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 */ /* Tables */
table { table {
@ -466,6 +491,7 @@ pre[class*=language-] {
} }
code[class*="language-"], pre[class*="language-"] { code[class*="language-"], pre[class*="language-"] {
text-shadow: none; text-shadow: none;
filter: grayscale(100%);
} }
pre[class*=language-][data-line] { pre[class*=language-][data-line] {
padding: 1em 0 0 2.25rem; padding: 1em 0 0 2.25rem;
@ -477,40 +503,6 @@ pre[class*=language-] code * {
display: inline-block; display: inline-block;
margin-top: -1rem; 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 { .line-numbers code {
padding-left: 3rem; padding-left: 3rem;
margin-top: -1rem; margin-top: -1rem;
@ -768,6 +760,15 @@ h1 svg {
.pattern-section h1 { .pattern-section h1 {
padding: 0 !important; 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) { @media screen and (max-width: 45em) {
[role="banner"] { [role="banner"] {
position: static; position: static;

View File

@ -25,6 +25,11 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Infusion Infusion
@ -392,6 +397,12 @@
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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();
}
});
}());

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Code blocks | Infusion Code blocks | Infusion
@ -441,6 +446,12 @@ toggle.addEventListener('click', (e) => {
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Color palettes | Infusion Color palettes | Infusion
@ -423,6 +428,12 @@
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Command line | Infusion Command line | Infusion
@ -409,6 +414,12 @@ npm run start
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Demo embedding | Infusion Demo embedding | Infusion
@ -479,6 +484,12 @@
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
File trees | Infusion File trees | Infusion
@ -459,6 +464,12 @@
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Coding | Infusion Coding | Infusion
@ -460,6 +465,12 @@
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Tested using... | Infusion Tested using... | Infusion
@ -467,6 +472,12 @@
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Writing inline demos | Infusion Writing inline demos | Infusion
@ -539,6 +544,12 @@ toggle.addEventListener('click', (e) => {
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Patterns | Infusion Patterns | Infusion
@ -424,6 +429,12 @@
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Installation | Infusion Installation | Infusion
@ -474,6 +479,12 @@
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Library setup | Infusion Library setup | Infusion
@ -504,6 +509,12 @@ theme = "infusion"
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Including images | Infusion Including images | Infusion
@ -453,6 +458,12 @@
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Including videos | Infusion Including videos | Infusion
@ -389,6 +394,12 @@
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Media | Infusion Media | Infusion
@ -400,6 +405,12 @@
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Printing | Infusion Printing | Infusion
@ -398,6 +403,12 @@
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Serving | Infusion Serving | Infusion
@ -439,6 +444,12 @@
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Expandable sections | Infusion Expandable sections | Infusion
@ -494,6 +499,12 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Writing | Infusion Writing | Infusion
@ -460,6 +465,12 @@
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Library structure | Infusion Library structure | Infusion
@ -463,6 +468,12 @@ title = &quot;Popups&quot;
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Markdown &amp; metadata | Infusion Markdown &amp; metadata | Infusion
@ -460,6 +465,12 @@ weight = 1
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Notes &amp; warnings | Infusion Notes &amp; warnings | Infusion
@ -453,6 +458,12 @@ This is a warning! It's about something the reader should be careful to do or to
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
References | Infusion References | Infusion
@ -838,6 +843,12 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Snippets | Infusion Snippets | Infusion
@ -402,6 +407,12 @@
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Tables of contents | Infusion Tables of contents | Infusion
@ -411,6 +416,12 @@ toc = false
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Infusion Infusion
@ -2115,6 +2120,12 @@ npm run start
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

File diff suppressed because one or more lines are too long

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Patterns tagged Markdown | Infusion Patterns tagged Markdown | Infusion
@ -391,6 +396,12 @@
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.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> <title>
Patterns tagged Metadata | Infusion Patterns tagged Metadata | Infusion
@ -391,6 +396,12 @@
</main> </main>
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -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 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" href="{{ "css/prism.css" | absURL }}">
<link rel="stylesheet" type="text/css" href="{{ "css/styles.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> <title>
{{ block "title" . }} {{ block "title" . }}
{{ .Title }} | {{ .Site.Title }} {{ .Title }} | {{ .Site.Title }}
@ -108,6 +113,12 @@
{{ block "main" . }} {{ block "main" . }}
{{ end }} {{ end }}
<footer role="contentinfo"> <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> Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com. For general enquiries, contact us on info@paciellogroup.com.
</footer> </footer>

View File

@ -9,6 +9,7 @@
*::before, *::before,
*::after { *::after {
font-family: inherit; font-family: inherit;
background-color: inherit;
color: inherit; color: inherit;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -19,6 +20,7 @@ html {
font-family: PT Sans, sans-serif; font-family: PT Sans, sans-serif;
line-height: 1.5; line-height: 1.5;
color: #111; color: #111;
background-color: #fefefe;
} }
* + * { * + * {
margin-top: 2.25rem; margin-top: 2.25rem;
@ -58,8 +60,9 @@ figure p img {
} }
:focus:not([tabindex="-1"]), :focus:not([tabindex="-1"]),
[data-expands]:focus svg, [data-expands]:focus svg,
.patterns a:focus .text { .patterns a:focus .text,
outline: 3px solid #ccc; [for="themer"] :focus + [aria-hidden] {
outline: 3px solid #888;
outline-offset: 2px; outline-offset: 2px;
} }
/* fix for IE :( */ /* fix for IE :( */
@ -86,7 +89,6 @@ div:not([tabindex]):focus {
outline: none; outline: none;
} }
/* text styles */ /* text styles */
h1, h1,
h2, h2,
h3, h3,
@ -160,6 +162,7 @@ main ul ul {
button { button {
font-size: 1.25rem; font-size: 1.25rem;
border-radius: 0.125em;
font-family: inherit; font-family: inherit;
background: #111; background: #111;
color: #fff; color: #fff;
@ -171,6 +174,28 @@ button {
margin-top: 0.75rem; margin-top: 0.75rem;
padding: 0.5rem; 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 */ /* Tables */
table { table {
@ -466,6 +491,7 @@ pre[class*=language-] {
} }
code[class*="language-"], pre[class*="language-"] { code[class*="language-"], pre[class*="language-"] {
text-shadow: none; text-shadow: none;
filter: grayscale(100%);
} }
pre[class*=language-][data-line] { pre[class*=language-][data-line] {
padding: 1em 0 0 2.25rem; padding: 1em 0 0 2.25rem;
@ -477,40 +503,6 @@ pre[class*=language-] code * {
display: inline-block; display: inline-block;
margin-top: -1rem; 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 { .line-numbers code {
padding-left: 3rem; padding-left: 3rem;
margin-top: -1rem; margin-top: -1rem;
@ -768,6 +760,15 @@ h1 svg {
.pattern-section h1 { .pattern-section h1 {
padding: 0 !important; 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) { @media screen and (max-width: 45em) {
[role="banner"] { [role="banner"] {
position: static; position: static;

View File

@ -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();
}
});
}());