snippets and flexbox testing tables
This commit is contained in:
Heydon Pickering
parent
9b063fcf25
commit
d2f98103c4
|
|
@ -0,0 +1,15 @@
|
|||
+++
|
||||
title = "Snippets"
|
||||
+++
|
||||
|
||||
A lot of the time, your larger patterns will share some common techniques and utilities. For this reason, **Infusion** lets you save snippets of markdown in a **snippets** folder, alongside the main content folder.
|
||||
|
||||
The example `visually-hidden.md` snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it's nice to be able to just drop a snippet into your markdown content. The `snippet` shortcode lets you do exactly that:
|
||||
|
||||
{{<codeBlock>}}
|
||||
{{% snippet file="visually-hidden.md" %}}
|
||||
{{</codeBlock>}}
|
||||
|
||||
{{% note %}}
|
||||
To make your snippets truly reusable, try to write them in such a way that they make sense independent of surrounding text, a little bit like this note does.
|
||||
{{% /note %}}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
/* fonts */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Miriam Libre';
|
||||
src: url('fonts/miriamlibre-bold.woff2') format('woff2'), url('fonts/miriamlibre-bold.woff') format('woff');
|
||||
|
|
@ -198,14 +197,23 @@ th:empty {
|
|||
.tested {
|
||||
text-align: center;
|
||||
}
|
||||
.tested td {
|
||||
vertical-align: top;
|
||||
.tested tr {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.tested td, .tested th {
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
flex: 1 0 auto;
|
||||
border: 0;
|
||||
outline: 2px solid;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
.tested th {
|
||||
width: 100%;
|
||||
background-color: #111;
|
||||
border-color: #111;
|
||||
color: #fff;
|
||||
outline-color: #111;
|
||||
}
|
||||
.tested img {
|
||||
max-width: 3rem;
|
||||
|
|
@ -484,7 +492,8 @@ pre[class*=language-] code * {
|
|||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
.token.inserted,
|
||||
.token.important {
|
||||
color: #111;
|
||||
}
|
||||
.token.operator,
|
||||
|
|
@ -636,7 +645,8 @@ p:empty {
|
|||
/* SVG icons */
|
||||
a svg,
|
||||
button svg,
|
||||
h1 svg {
|
||||
h1 svg,
|
||||
th svg {
|
||||
height: 0.75em;
|
||||
width: auto;
|
||||
margin-right: 0.25em;
|
||||
|
|
@ -645,6 +655,7 @@ h1 svg,
|
|||
li > svg,
|
||||
h2 a svg {
|
||||
height: 1em;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
h1 svg {
|
||||
|
|
@ -816,13 +827,6 @@ h1 svg {
|
|||
code {
|
||||
word-break: break-all;
|
||||
}
|
||||
.tested th,
|
||||
.tested td {
|
||||
display: block;
|
||||
}
|
||||
.tested td + td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
.wrapper:not(.print-version) .intro-and-nav,
|
||||
|
|
|
|||
|
|
@ -118,6 +118,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -237,6 +244,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -202,6 +202,16 @@ Notes You may wish to pick out some content in your pattern&rsquo;s document
|
|||
I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here. This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Snippets</title>
|
||||
<link>https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/</guid>
|
||||
<description>A lot of the time, your larger patterns will share some common techniques and utilities. For this reason, Infusion lets you save snippets of markdown in a snippets folder, alongside the main content folder.
|
||||
The example visually-hidden.md snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it&rsquo;s nice to be able to just drop a snippet into your markdown content.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Tables of contents</title>
|
||||
<link>https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/</link>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@
|
|||
(function () {
|
||||
if (window.matchMedia('(-ms-high-contrast: none), (-ms-high-contrast: active)').matches) {
|
||||
// Get all the SVGs on the page except the symbol defs
|
||||
var svgs = document.querySelectorAll('a svg, button svg, h1 svg, .tags svg');
|
||||
var svgs = document.querySelectorAll('a svg, button svg, h1 svg, .tags svg, th svg');
|
||||
// ... iterate over SVGs
|
||||
Array.prototype.forEach.call(svgs, function(svg) {
|
||||
// Set preserveAspectRatio to 'XMidYMin slice'
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
@ -379,7 +395,12 @@
|
|||
|
||||
<table class="tested">
|
||||
<tr>
|
||||
<th scope="row">Tested successfully using</th>
|
||||
<th scope="row">
|
||||
<svg viewBox="0 0 177.16535 177.16535" focusable="false" aria-hidden="true">
|
||||
<use xlink:href="#tick"></use>
|
||||
</svg>
|
||||
Tested using
|
||||
</th>
|
||||
|
||||
<td>
|
||||
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
@ -416,6 +432,18 @@
|
|||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/">
|
||||
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
Snippets
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/">
|
||||
|
|
|
|||
|
|
@ -61,6 +61,16 @@ Notes You may wish to pick out some content in your pattern&rsquo;s document
|
|||
I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here. This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Snippets</title>
|
||||
<link>https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/</guid>
|
||||
<description>A lot of the time, your larger patterns will share some common techniques and utilities. For this reason, Infusion lets you save snippets of markdown in a snippets folder, alongside the main content folder.
|
||||
The example visually-hidden.md snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it&rsquo;s nice to be able to just drop a snippet into your markdown content.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Tables of contents</title>
|
||||
<link>https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/</link>
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,415 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/">
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="msapplication-TileImage" content="https://thepaciellogroup.github.io/infusion/images/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<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">
|
||||
<title>
|
||||
|
||||
Snippets | Infusion
|
||||
|
||||
</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a href="#main">skip to content</a>
|
||||
|
||||
<svg style="display: none">
|
||||
<symbol id="bookmark" viewBox="0 0 40 50">
|
||||
<g transform="translate(2266 3206.2)">
|
||||
<path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="w3c" viewBox="0 0 127.09899 67.763">
|
||||
<text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
|
||||
<text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
|
||||
<path style="fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
|
||||
<path style="fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
|
||||
<path style="fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
|
||||
<path style="fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tag" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<path style="fill-rule:evenodd;stroke-width:0;fill:currentColor" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="balloon" viewBox="0 0 141.73228 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<g>
|
||||
<path style="fill:currentColor" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
|
||||
<path style="fill:currentColor" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
|
||||
<path style="fill:currentColor" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
|
||||
<path style="fill:currentColor" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
|
||||
<path style="fill:currentColor" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
|
||||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="info" viewBox="0 0 41.667 41.667">
|
||||
<g transform="translate(-37.035 -1004.6)">
|
||||
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
|
||||
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
|
||||
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
|
||||
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
|
||||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="warning" viewBox="0 0 48.430474 41.646302">
|
||||
<g transform="translate(-1.1273 -1010.2)">
|
||||
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
|
||||
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
|
||||
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="menu" viewBox="0 0 50 50">
|
||||
<rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="0" x="0"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="20" x="0"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="40" x="0"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="link" viewBox="0 0 50 50">
|
||||
<g transform="translate(0 -1002.4)">
|
||||
<g transform="matrix(.095670 0 0 .095670 2.3233 1004.9)">
|
||||
<g>
|
||||
<path style="stroke-width:0;fill:currentColor" d="m452.84 192.9-128.65 128.65c-35.535 35.54-93.108 35.54-128.65 0l-42.881-42.886 42.881-42.876 42.884 42.876c11.845 11.822 31.064 11.846 42.886 0l128.64-128.64c11.816-11.831 11.816-31.066 0-42.9l-42.881-42.881c-11.822-11.814-31.064-11.814-42.887 0l-45.928 45.936c-21.292-12.531-45.491-17.905-69.449-16.291l72.501-72.526c35.535-35.521 93.136-35.521 128.64 0l42.886 42.881c35.535 35.523 35.535 93.141-.001 128.66zm-254.28 168.51-45.903 45.9c-11.845 11.846-31.064 11.817-42.881 0l-42.884-42.881c-11.845-11.821-11.845-31.041 0-42.886l128.65-128.65c11.819-11.814 31.069-11.814 42.884 0l42.886 42.886 42.876-42.886-42.876-42.881c-35.54-35.521-93.113-35.521-128.65 0l-128.65 128.64c-35.538 35.545-35.538 93.146 0 128.65l42.883 42.882c35.51 35.54 93.11 35.54 128.65 0l72.496-72.499c-23.956 1.597-48.092-3.784-69.474-16.283z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="doc" viewBox="0 0 35 45">
|
||||
<g transform="translate(-147.53 -539.83)">
|
||||
<path style="stroke:currentColor;stroke-width:2.4501;fill:none" d="m149.38 542.67v39.194h31.354v-39.194z"/>
|
||||
<g style="stroke-width:25" transform="matrix(.098003 0 0 .098003 133.69 525.96)">
|
||||
<path d="m220 252.36h200" style="stroke:currentColor;stroke-width:25;fill:none"/>
|
||||
<path style="stroke:currentColor;stroke-width:25;fill:none" d="m220 409.95h200"/>
|
||||
<path d="m220 488.74h200" style="stroke:currentColor;stroke-width:25;fill:none"/>
|
||||
<path d="m220 331.15h200" style="stroke:currentColor;stroke-width:25;fill:none"/>
|
||||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
|
||||
</a>
|
||||
<p class="library-desc">
|
||||
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
|
||||
|
||||
<a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
|
||||
<svg viewBox="0 0 35 45" aria-hidden="true" focusable="false">
|
||||
<use xlink:href="#doc"></use>
|
||||
</svg>Print version
|
||||
|
||||
</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||
<button id="menu-button" aria-expanded="false">
|
||||
<svg viewBox="0 0 50 50" aria-hidden="true" focusable="false">
|
||||
<use xlink:href="#menu"></use>
|
||||
</svg>
|
||||
Menu
|
||||
</button>
|
||||
|
||||
|
||||
<ul id="patterns-list">
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Installation</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Library setup</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Serving</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Printing</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Writing</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Library structure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Markdown & metadata</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Expandable sections</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Notes & warnings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">References</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" aria-current="page">
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Tables of contents</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Media</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Including images</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Including videos</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Coding</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Code blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Demo embedding</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Writing inline demos</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Color palettes</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Command line</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">File trees</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Tested using...</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
Snippets
|
||||
</h1>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>A lot of the time, your larger patterns will share some common techniques and utilities. For this reason, <strong>Infusion</strong> lets you save snippets of markdown in a <strong>snippets</strong> folder, alongside the main content folder.</p>
|
||||
|
||||
<p>The example <code>visually-hidden.md</code> snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it’s nice to be able to just drop a snippet into your markdown content. The <code>snippet</code> shortcode lets you do exactly that:</p>
|
||||
|
||||
<pre class=" "><code data-codeblock-shortcode>
|
||||
{{% snippet file="visually-hidden.md" %}}
|
||||
</code></pre>
|
||||
|
||||
|
||||
<aside aria-label="note" class="note">
|
||||
<div>
|
||||
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
|
||||
<use xlink:href="#info"></use>
|
||||
</svg>
|
||||
<p>To make your snippets truly reusable, try to write them in such a way that they make sense independent of surrounding text, a little bit like this note does.</p>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
|
||||
For general enquiries, contact us on info@paciellogroup.com.
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
|
||||
<script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" aria-current="page">
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -113,6 +113,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper print-version">
|
||||
|
|
@ -232,6 +239,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="#snippets" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="#tables-of-contents" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
@ -1363,6 +1379,35 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here.
|
|||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="pattern-section">
|
||||
<h1 id="snippets" tabindex="-1">
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
Snippets
|
||||
</h1>
|
||||
<p>A lot of the time, your larger patterns will share some common techniques and utilities. For this reason, <strong>Infusion</strong> lets you save snippets of markdown in a <strong>snippets</strong> folder, alongside the main content folder.</p>
|
||||
|
||||
<p>The example <code>visually-hidden.md</code> snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it’s nice to be able to just drop a snippet into your markdown content. The <code>snippet</code> shortcode lets you do exactly that:</p>
|
||||
|
||||
<pre class=" "><code data-codeblock-shortcode>
|
||||
{{% snippet file="visually-hidden.md" %}}
|
||||
</code></pre>
|
||||
|
||||
|
||||
<aside aria-label="note" class="note">
|
||||
<div>
|
||||
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
|
||||
<use xlink:href="#info"></use>
|
||||
</svg>
|
||||
<p>To make your snippets truly reusable, try to write them in such a way that they make sense independent of surrounding text, a little bit like this note does.</p>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="pattern-section">
|
||||
|
|
@ -1994,7 +2039,12 @@ npm run start
|
|||
|
||||
<table class="tested">
|
||||
<tr>
|
||||
<th scope="row">Tested successfully using</th>
|
||||
<th scope="row">
|
||||
<svg viewBox="0 0 177.16535 177.16535" focusable="false" aria-hidden="true">
|
||||
<use xlink:href="#tick"></use>
|
||||
</svg>
|
||||
Tested using
|
||||
</th>
|
||||
|
||||
<td>
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -112,6 +112,10 @@
|
|||
<loc>https://thepaciellogroup.github.io/infusion/patterns/writing/references/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/</loc>
|
||||
</url>
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper ">
|
||||
|
|
@ -234,6 +241,15 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
<span class="text">Snippets</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
|
||||
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
The `visually-hidden` utility class uses a set of special properties to hide content visually without making it unavailable to screen readers and other non-visual user agents. The class is defined like this:
|
||||
|
||||
```CSS
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
padding:0 !important;
|
||||
border:0 !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
```
|
||||
|
||||
Use it sparingly since, in most cases, what is identified in screen readers should also be presented visually. Bear in mind that not all screen reader users are blind users.
|
||||
|
|
@ -78,4 +78,11 @@
|
|||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.5 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
{{$file := .Get "file"}}
|
||||
{{ $contents := (printf "/snippets/%s" $file) | readFile }}
|
||||
{{ $commented := add "<!-- snippet -->\r\n" $contents }}
|
||||
{{ $commented | markdownify }}
|
||||
|
|
@ -3,7 +3,12 @@
|
|||
{{ $tested := split $tested "," }}
|
||||
<table class="tested">
|
||||
<tr>
|
||||
<th scope="row">Tested successfully using</th>
|
||||
<th scope="row">
|
||||
<svg viewBox="0 0 177.16535 177.16535" focusable="false" aria-hidden="true">
|
||||
<use xlink:href="#tick"></use>
|
||||
</svg>
|
||||
Tested using
|
||||
</th>
|
||||
{{ range $tested }}
|
||||
<td>
|
||||
{{ if in . "+" }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
/* fonts */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Miriam Libre';
|
||||
src: url('fonts/miriamlibre-bold.woff2') format('woff2'), url('fonts/miriamlibre-bold.woff') format('woff');
|
||||
|
|
@ -198,14 +197,23 @@ th:empty {
|
|||
.tested {
|
||||
text-align: center;
|
||||
}
|
||||
.tested td {
|
||||
vertical-align: top;
|
||||
.tested tr {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.tested td, .tested th {
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
flex: 1 0 auto;
|
||||
border: 0;
|
||||
outline: 2px solid;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
.tested th {
|
||||
width: 100%;
|
||||
background-color: #111;
|
||||
border-color: #111;
|
||||
color: #fff;
|
||||
outline-color: #111;
|
||||
}
|
||||
.tested img {
|
||||
max-width: 3rem;
|
||||
|
|
@ -484,7 +492,8 @@ pre[class*=language-] code * {
|
|||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
.token.inserted,
|
||||
.token.important {
|
||||
color: #111;
|
||||
}
|
||||
.token.operator,
|
||||
|
|
@ -636,7 +645,8 @@ p:empty {
|
|||
/* SVG icons */
|
||||
a svg,
|
||||
button svg,
|
||||
h1 svg {
|
||||
h1 svg,
|
||||
th svg {
|
||||
height: 0.75em;
|
||||
width: auto;
|
||||
margin-right: 0.25em;
|
||||
|
|
@ -645,6 +655,7 @@ h1 svg,
|
|||
li > svg,
|
||||
h2 a svg {
|
||||
height: 1em;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
h1 svg {
|
||||
|
|
@ -816,13 +827,6 @@ h1 svg {
|
|||
code {
|
||||
word-break: break-all;
|
||||
}
|
||||
.tested th,
|
||||
.tested td {
|
||||
display: block;
|
||||
}
|
||||
.tested td + td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
.wrapper:not(.print-version) .intro-and-nav,
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@
|
|||
(function () {
|
||||
if (window.matchMedia('(-ms-high-contrast: none), (-ms-high-contrast: active)').matches) {
|
||||
// Get all the SVGs on the page except the symbol defs
|
||||
var svgs = document.querySelectorAll('a svg, button svg, h1 svg, .tags svg');
|
||||
var svgs = document.querySelectorAll('a svg, button svg, h1 svg, .tags svg, th svg');
|
||||
// ... iterate over SVGs
|
||||
Array.prototype.forEach.call(svgs, function(svg) {
|
||||
// Set preserveAspectRatio to 'XMidYMin slice'
|
||||
|
|
|
|||
Loading…
Reference in New Issue