Merge pull request #3 from ThePacielloGroup/snippets

snippets and flexbox testing tables

content/patterns/writing/snippets.md

@@ -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>}}
+&#x7b;{% 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 %}}

docs/css/styles.css

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

docs/index.html

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

docs/index.xml

@@ -202,6 +202,16 @@ Notes You may wish to pick out some content in your pattern’s document
 I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} 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&amp;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>

docs/js/dom-scripts.js

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

docs/patterns/coding/code-blocks/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/coding/color-palettes/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/coding/command-line/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/coding/demo-embedding/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/coding/file-trees/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/coding/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

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

docs/patterns/coding/writing-inline-demos/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/installation/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/library-setup/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/media/including-images/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/media/including-videos/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/media/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/printing/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/serving/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/writing/expandable-sections/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

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

docs/patterns/writing/index.xml

@@ -61,6 +61,16 @@ Notes You may wish to pick out some content in your pattern’s document
 I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} 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&amp;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>

docs/patterns/writing/library-structure/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/writing/markdown-and-metadata/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/writing/notes-and-warnings/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/writing/references/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/patterns/writing/snippets/index.html

@@ -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 &amp; 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 &amp; 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&rsquo;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>
+&#x7b;{% 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>

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

docs/print-version/index.html

@@ -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 &#x7b;{% 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&rsquo;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>
+&#x7b;{% 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>
         

docs/sitemap.xml

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

docs/tags/markdown/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

docs/tags/metadata/index.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/" >
                                 <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">

snippets/visually-hidden.md

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

themes/infusion/layouts/partials/svg.html

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

themes/infusion/layouts/shortcodes/snippet.html

@@ -0,0 +1,4 @@
+{{$file := .Get "file"}}
+{{ $contents := (printf "/snippets/%s" $file) | readFile }}
+{{ $commented := add "<!-- snippet -->\r\n" $contents }}
+{{ $commented | markdownify }}

themes/infusion/layouts/shortcodes/tested.html

@@ -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 . "+" }}

themes/infusion/static/css/styles.css

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

themes/infusion/static/js/dom-scripts.js

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