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

theme switcher

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
docs/css/styles.css
View File

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

11
docs/index.html
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 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
@ -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>

22
docs/js/dom-scripts.js
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();
}
});
}());

11
docs/patterns/coding/code-blocks/index.html
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 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>

11
docs/patterns/coding/color-palettes/index.html
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 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>

11
docs/patterns/coding/command-line/index.html
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 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>

11
docs/patterns/coding/demo-embedding/index.html
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 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>

11
docs/patterns/coding/file-trees/index.html
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 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>

11
docs/patterns/coding/index.html
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 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>

11
docs/patterns/coding/tested/index.html
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 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>

11
docs/patterns/coding/writing-inline-demos/index.html
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 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>

11
docs/patterns/index.html
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 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>

11
docs/patterns/installation/index.html
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 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>

11
docs/patterns/library-setup/index.html
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 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>

11
docs/patterns/media/including-images/index.html
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 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>

11
docs/patterns/media/including-videos/index.html
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 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>

11
docs/patterns/media/index.html
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 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>

11
docs/patterns/printing/index.html
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 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>

11
docs/patterns/serving/index.html
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 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>

11
docs/patterns/writing/expandable-sections/index.html
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 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>

11
docs/patterns/writing/index.html
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 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>

11
docs/patterns/writing/library-structure/index.html
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 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 = &quot;Popups&quot;
</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>

11
docs/patterns/writing/markdown-and-metadata/index.html
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 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 &amp; 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>

11
docs/patterns/writing/notes-and-warnings/index.html
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 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 &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>
<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>

11
docs/patterns/writing/references/index.html
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 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 &#x7b;{% 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>

11
docs/patterns/writing/snippets/index.html
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 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>

11
docs/patterns/writing/tables-of-contents/index.html
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 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>

11
docs/print-version/index.html
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 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>

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

11
docs/tags/markdown/index.html
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 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>

11
docs/tags/metadata/index.html
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 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>

11
themes/infusion/layouts/_default/baseof.html
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 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>

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

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

22
themes/infusion/static/js/dom-scripts.js
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();
}
});
}());