hamburger icon and icon refactor

docs/css/styles.css

@@ -682,25 +682,12 @@ p:empty {
 
 /* SVG icons */
 
-a svg {
+a svg, button svg {
   height: 0.75em;
   width: auto;
   margin-right: 0.125rem;
 }
 
-a .bookmark-icon {
-  width: 0.75em;
-}
-
-a .balloon-icon {
-  height: 1.125em;
-  width: 0.85em;
-}
-
-a .wcag-icon {
-  width: 1.5em;
-}
-
 h1 svg {
   vertical-align: -0.5rem;
 }

docs/index.html

@@ -48,7 +48,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -77,15 +77,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -98,28 +104,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -131,35 +142,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -173,14 +184,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -194,35 +205,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -256,12 +267,12 @@
 </div>
 
 
-<p>To get started, take a look at <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a>.</p>
+<p>To get started, take a look at <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a>.</p>
 
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/coding/code-blocks/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" aria-current="page">
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -293,7 +304,7 @@ toggle.addEventListener('click', (e) => {
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/coding/codepen-embedding/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" aria-current="page">
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -273,12 +284,12 @@
 </aside>
 
 
-<p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Writing inline demos</a>.</p>
+<p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Writing inline demos</a>.</p>
 
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/coding/color-palettes/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" aria-current="page">
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -286,7 +297,7 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/coding/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -299,7 +310,7 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/coding/tested/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" aria-current="page">
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -325,7 +336,7 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/coding/writing-inline-demos/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" aria-current="page">
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -244,7 +255,7 @@
     
     
 
-<p>There are some issues with <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>CodePen embedding</a>, like them not working offline. They also come with CodePen branding, which will clash with the pattern you&rsquo;re trying to illustrate.</p>
+<p>There are some issues with <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>CodePen embedding</a>, like them not working offline. They also come with CodePen branding, which will clash with the pattern you&rsquo;re trying to illustrate.</p>
 
 <p><strong>Infusion</strong> offers another option: a special <code>demo</code> shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&rsquo;t have to worry about broken styles and global JS.</p>
 
@@ -339,12 +350,12 @@ toggle.addEventListener('click', (e) => {
 </code></pre>
 </p>
 
-<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
+<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
 
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -279,7 +290,7 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/installation/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" aria-current="page">
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -305,12 +316,12 @@
 <pre class="cmd"><code>npm install</code></pre>
 
 
-<p>Now it&rsquo;s time to consult the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library setup</a> pattern.</p>
+<p>Now it&rsquo;s time to consult the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library setup</a> pattern.</p>
 
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/library-setup/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" aria-current="page">
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -244,7 +255,7 @@
     
     
 
-<p>By now, you should have followed the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a> instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p>
+<p>By now, you should have followed the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a> instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p>
 
 <h2 id="cleaning-the-content-folder">&ldquo;Cleaning&rdquo; the content folder</h2>
 
@@ -264,7 +275,7 @@
 <pre class="cmd"><code>npm run clean</code></pre>
 
 
-<p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>.</p>
+<p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>.</p>
 
 <h2 id="the-setup-command">The <code>setup</code> command</h2>
 
@@ -301,12 +312,12 @@ theme = "infusion"
 
 <p>In the <code>images/static</code> folder, you&rsquo;ll find a <code>logo.png</code> file. Replace this file with your own company or project logo. Currently, only the PNG format is supported.</p>
 
-<p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a> to help you get writing, or find out how to serve the library locally and on Github Pages in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Serving</a>.</p>
+<p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a> to help you get writing, or find out how to serve the library locally and on Github Pages in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Serving</a>.</p>
 
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/media/including-images/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" aria-current="page">
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -307,7 +318,7 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/media/including-videos/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" aria-current="page">
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -252,7 +263,7 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/media/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -269,7 +280,7 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/serving/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" aria-current="page">
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -266,12 +277,12 @@
 <pre><code>[your user name].github.io/[your library repo name]
 </code></pre>
 
-<p>You&rsquo;ll also need to add it to your <code>config.toml</code> file. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library setup</a> for more information.</p>
+<p>You&rsquo;ll also need to add it to your <code>config.toml</code> file. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library setup</a> for more information.</p>
 
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/writing/expandable-sections/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" aria-current="page">
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -269,7 +280,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
   
     <button aria-expanded="false" data-expands="expandable-4ab31bdd2c2d9d4cac64804c775e2683">
       <span class="expandable-label">A section of dummy text</span>
-      <svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
+      <svg aria-hidden="true" focusable="false" viewBox="0 0 70.866142 70.866141">
         <g transform="translate(0 -981.5)">
           <rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
           <rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
@@ -294,7 +305,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
   
     <button aria-expanded="false" data-expands="expandable-ade9cd5456422b2a456101177ddc6f3f">
       <span class="expandable-label">A section of dummy text</span>
-      <svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
+      <svg aria-hidden="true" focusable="false" viewBox="0 0 70.866142 70.866141">
         <g transform="translate(0 -981.5)">
           <rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
           <rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
@@ -317,7 +328,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
   
     <button aria-expanded="true" data-expands="expandable-4d6feae4dfbb8614dd5fa6730b3dfa5e">
       <span class="expandable-label">Another dummy section</span>
-      <svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
+      <svg aria-hidden="true" focusable="false" viewBox="0 0 70.866142 70.866141">
         <g transform="translate(0 -981.5)">
           <rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
           <rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
@@ -346,7 +357,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/writing/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -299,7 +310,7 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/writing/library-structure/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" aria-current="page">
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -294,12 +305,12 @@ title = &quot;Popups&quot;
 </aside>
 
 
-<p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Markdown &amp; metadata</a>.</p>
+<p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Markdown &amp; metadata</a>.</p>
 
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/writing/markdown-and-metadata/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" aria-current="page">
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -294,7 +305,7 @@ weight = 1
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/writing/notes-and-warnings/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" aria-current="page">
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -297,7 +308,7 @@ This is a warning! It's about something the reader should be careful to do or to
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

docs/patterns/writing/references/index.html

@@ -49,7 +49,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -78,15 +78,21 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>
 
     <div class="wrapper">
@@ -99,28 +105,33 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             
             
               <ul id="patterns-list">
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Installation</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" 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://heydon.github.io/infusion/patterns/serving/" >
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -132,35 +143,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Library structure</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Markdown &amp; metadata</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Expandable sections</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Notes &amp; warnings</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" aria-current="page">
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -174,14 +185,14 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including images</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Including videos</span>
                           </a>
                         </li>
@@ -195,35 +206,35 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Tested using...</span>
                           </a>
                         </li>
@@ -246,7 +257,7 @@
 
 <h2 id="cross-references">Cross-references</h2>
 
-<p><strong>Infusion</strong> provides an easy mechanism to cross-reference patterns, by title, using the <code>pattern</code> shortcode. For example, I can reference the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Notes &amp; warnings</a> pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
+<p><strong>Infusion</strong> provides an easy mechanism to cross-reference patterns, by title, using the <code>pattern</code> shortcode. For example, I can reference the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Notes &amp; warnings</a> pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
 
 <pre class=" "><code  data-codeblock-shortcode>
 I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
@@ -332,7 +343,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
     
       <li>
         <strong><a href="https://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable">
-          <svg class="wcag-icon" height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
+          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
           2.1.1 Keyboard</a> (level A)
         </strong>
         
@@ -416,7 +427,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
     
       <li>
         <strong><a href="https://www.w3.org/TR/WCAG20/#ensure-compat-rsv">
-          <svg class="wcag-icon" height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
+          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
           4.1.2 Name, Role, Value</a> (level A)
         </strong>
         
@@ -501,7 +512,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
     
       <li>
         <strong><a href="https://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable">
-          <svg class="wcag-icon" height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
+          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
           2.1.1 Keyboard</a> (level A):
         </strong>
         
@@ -588,7 +599,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
     
       <li>
         <strong><a href="https://www.w3.org/TR/WCAG20/#ensure-compat-rsv">
-          <svg class="wcag-icon" height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
+          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
           4.1.2 Name, Role, Value</a> (level A):
         </strong>
         
@@ -626,7 +637,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
       <li>
         <strong>
           <a href="https://inclusivedesignprinciples.org#be-consistent">
-            <svg class="balloon-icon" height="177.17" width="141.73" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
+            <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
             Be consistent
           </a>:
         </strong>
@@ -647,7 +658,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
       <li>
         <strong>
           <a href="https://inclusivedesignprinciples.org#add-value">
-            <svg class="balloon-icon" height="177.17" width="141.73" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
+            <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
             Add value
           </a>:
         </strong>
@@ -664,7 +675,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

themes/infusion/layouts/_default/baseof.html

@@ -46,14 +46,19 @@
             <p class="library-desc">{{ .Site.Params.Description | markdownify }}</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
-            <button id="menu-button" aria-expanded="false">Menu</button>
+            <button id="menu-button" aria-expanded="false">
+              <svg viewBox="0 0 50 50">
+                <use xlink:href="#menu"></use>
+              </svg>
+              Menu
+            </button>
             {{ $current := . }}
             {{ range $.Site.Home.Sections }}
               <ul id="patterns-list">
                 {{ range .Pages.ByWeight }}
                   <li class="pattern">
                     <a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title  }}aria-current="page"{{ end }}>
-                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">{{ .Title }}</span>
                     </a>
                   </li>
@@ -65,7 +70,7 @@
                       {{ range .Pages.ByWeight }}
                         <li class="pattern">
                           <a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title  }}aria-current="page"{{ end }}>
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">{{ .Title }}</span>
                           </a>
                         </li>
@@ -83,7 +88,7 @@
           {{ block "main" . }}
           {{ end }}
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>

themes/infusion/layouts/_default/li.html

@@ -1,7 +1,7 @@
 <li>
   <h2>
     <a href="{{ .Permalink }}">
-      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
       {{ .Title }}
     </a>
   </h2>

themes/infusion/layouts/partials/svg.html

@@ -12,7 +12,7 @@
    <path style="fill:#111111;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:#111111;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:#111111;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>
 
   <symbol id="tag">
     <g transform="translate(0 -875.2)">
@@ -41,13 +41,19 @@
      <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>
 
- <symbol id="warning">
-  <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="warning">
+    <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">
+   <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>
 </svg>

themes/infusion/layouts/patterns/single.html

@@ -9,7 +9,7 @@
             {{ if ne . "example tag"}}
               {{ if ne . "another tag"}}
                 <li>
-                  <svg class="tag-icon" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
+                  <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535">
                     <use xlink:href="#tag"></use>
                   </svg>
                   <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>

themes/infusion/layouts/shortcodes/expandable.html

@@ -4,7 +4,7 @@
   {{ end }}
     <button aria-expanded="{{ with .Get "open" }}true{{ else }}false{{ end }}" data-expands="expandable-{{ .Inner | md5 }}">
       <span class="expandable-label">{{ .Get "label" | default "More info" }}</span>
-      <svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
+      <svg aria-hidden="true" focusable="false" viewBox="0 0 70.866142 70.866141">
         <g transform="translate(0 -981.5)">
           <rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
           <rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>

themes/infusion/layouts/shortcodes/pattern.html

@@ -1 +1 @@
-{{ $title := .Get 0 }}{{ range .Site.Pages }}{{ if eq .Title $title }}<a class="pattern-link" href="{{ .Permalink }}"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>{{ .Title }}</a>{{ end }}{{ end -}}
+{{ $title := .Get 0 }}{{ range .Site.Pages }}{{ if eq .Title $title }}<a class="pattern-link" href="{{ .Permalink }}"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>{{ .Title }}</a>{{ end }}{{ end -}}

themes/infusion/layouts/shortcodes/principles.html

@@ -8,7 +8,7 @@
       <li>
         <strong>
           <a href="https://inclusivedesignprinciples.org#{{ .title | urlize }}">
-            <svg class="balloon-icon" height="177.17" width="141.73" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
+            <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
             {{ .title }}
           </a>:
         </strong>

themes/infusion/layouts/shortcodes/wcag.html

@@ -7,7 +7,7 @@
     {{ if in $included .ref_id }}
       <li>
         <strong><a href="{{ .url }}">
-          <svg class="wcag-icon" height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
+          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
           {{ .ref_id }} {{ .title }}</a> (level {{ .level }}){{ if $descriptions }}:{{ end }}
         </strong>
         {{ if $descriptions }}

themes/infusion/layouts/taxonomy/tag.html

@@ -4,7 +4,7 @@
 {{ define "main" }}
   <main id="main">
     <h1>
-      <svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
+      <svg class="tag" aria-hidden="true" viewBox="0 0 177.16535 177.16535">
         <use xlink:href="#tag"></use>
       </svg>
       Tagged &#x201c;{{ .Title }}&#x201d;

themes/infusion/static/css/styles.css

@@ -682,25 +682,12 @@ p:empty {
 
 /* SVG icons */
 
-a svg {
+a svg, button svg {
   height: 0.75em;
   width: auto;
   margin-right: 0.125rem;
 }
 
-a .bookmark-icon {
-  width: 0.75em;
-}
-
-a .balloon-icon {
-  height: 1.125em;
-  width: 0.85em;
-}
-
-a .wcag-icon {
-  width: 1.5em;
-}
-
 h1 svg {
   vertical-align: -0.5rem;
 }