color palettes shortcode and pattern

public/css/styles.css

@@ -620,12 +620,17 @@ a svg {
   margin-right: 0.125rem;
 }
 
-a .bookmark {
+a .bookmark-icon {
   width: 0.75em;
 }
 
-a .balloon {
+a .balloon-icon {
   height: 1.125em;
+  width: 0.85em;
+}
+
+a .wcag-icon {
+  width: 1.5em;
 }
 
 /* cross references */

public/index.html

@@ -71,21 +71,21 @@
                 
                   <li class="pattern">
                     <a 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>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -97,42 +97,42 @@
                       
                         <li class="pattern">
                           <a 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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/including-images/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -146,21 +146,21 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/codepen-embedding/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/writing-inline-demos/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>

public/patterns/code/code-blocks/index.html

@@ -70,21 +70,21 @@
                 
                   <li class="pattern">
                     <a 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>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -96,42 +96,42 @@
                       
                         <li class="pattern">
                           <a 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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/including-images/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -145,21 +145,21 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" aria-current="page">
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/codepen-embedding/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/writing-inline-demos/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>

public/patterns/code/codepen-embedding/index.html

@@ -70,21 +70,21 @@
                 
                   <li class="pattern">
                     <a 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>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -96,42 +96,42 @@
                       
                         <li class="pattern">
                           <a 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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/including-images/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -145,21 +145,21 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/codepen-embedding/" aria-current="page">
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/writing-inline-demos/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>

public/patterns/code/index.html

@@ -70,21 +70,21 @@
                 
                   <li class="pattern">
                     <a 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>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -96,42 +96,42 @@
                       
                         <li class="pattern">
                           <a 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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/including-images/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -145,21 +145,21 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/codepen-embedding/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/writing-inline-demos/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>

public/patterns/code/writing-inline-demos/index.html

@@ -70,21 +70,21 @@
                 
                   <li class="pattern">
                     <a 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>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -96,42 +96,42 @@
                       
                         <li class="pattern">
                           <a 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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/including-images/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -145,21 +145,21 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/codepen-embedding/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/writing-inline-demos/" aria-current="page">
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>

public/patterns/index.html

@@ -70,21 +70,21 @@
                 
                   <li class="pattern">
                     <a 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>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -96,42 +96,42 @@
                       
                         <li class="pattern">
                           <a 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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/including-images/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -145,21 +145,21 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/codepen-embedding/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/writing-inline-demos/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>

public/patterns/installation/index.html

@@ -70,21 +70,21 @@
                 
                   <li class="pattern">
                     <a href="https://heydon.github.io/infusion/patterns/installation/" aria-current="page">
-                      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -96,42 +96,42 @@
                       
                         <li class="pattern">
                           <a 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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/including-images/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -145,21 +145,21 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/codepen-embedding/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/writing-inline-demos/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>

public/patterns/library-setup/index.html

@@ -70,21 +70,21 @@
                 
                   <li class="pattern">
                     <a 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>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -96,42 +96,42 @@
                       
                         <li class="pattern">
                           <a 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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/including-images/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -145,21 +145,21 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/codepen-embedding/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/writing-inline-demos/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>

public/patterns/serving/index.html

@@ -70,21 +70,21 @@
                 
                   <li class="pattern">
                     <a 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>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -96,42 +96,42 @@
                       
                         <li class="pattern">
                           <a 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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/including-images/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -145,21 +145,21 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/codepen-embedding/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/writing-inline-demos/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>

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

@@ -70,21 +70,21 @@
                 
                   <li class="pattern">
                     <a 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>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -96,42 +96,42 @@
                       
                         <li class="pattern">
                           <a 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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/including-images/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -145,21 +145,21 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/codepen-embedding/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/writing-inline-demos/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>

public/patterns/writing/including-images/index.html

@@ -70,21 +70,21 @@
                 
                   <li class="pattern">
                     <a 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>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -96,42 +96,42 @@
                       
                         <li class="pattern">
                           <a 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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/including-images/" aria-current="page">
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -145,21 +145,21 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/codepen-embedding/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/writing-inline-demos/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>

public/patterns/writing/index.html

@@ -70,21 +70,21 @@
                 
                   <li class="pattern">
                     <a 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>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -96,42 +96,42 @@
                       
                         <li class="pattern">
                           <a 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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/including-images/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -145,21 +145,21 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/codepen-embedding/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/writing-inline-demos/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>

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

@@ -70,21 +70,21 @@
                 
                   <li class="pattern">
                     <a 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>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -96,42 +96,42 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" aria-current="page">
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/including-images/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -145,21 +145,21 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/codepen-embedding/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/writing-inline-demos/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>

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

@@ -70,21 +70,21 @@
                 
                   <li class="pattern">
                     <a 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>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -96,42 +96,42 @@
                       
                         <li class="pattern">
                           <a 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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/including-images/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -145,21 +145,21 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/codepen-embedding/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/writing-inline-demos/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>

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

@@ -70,21 +70,21 @@
                 
                   <li class="pattern">
                     <a 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>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -96,42 +96,42 @@
                       
                         <li class="pattern">
                           <a 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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/including-images/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/writing/notes-and-warnings/" aria-current="page">
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -145,21 +145,21 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/codepen-embedding/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/writing-inline-demos/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>

public/patterns/writing/references/index.html

@@ -70,21 +70,21 @@
                 
                   <li class="pattern">
                     <a 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>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span class="text">Serving</span>
                     </a>
                   </li>
@@ -96,42 +96,42 @@
                       
                         <li class="pattern">
                           <a 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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/including-images/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/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>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">References</span>
                           </a>
                         </li>
@@ -145,21 +145,21 @@
                       
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/codepen-embedding/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" 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/code/writing-inline-demos/" >
-                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Writing inline demos</span>
                           </a>
                         </li>
@@ -306,7 +306,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 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" height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
           2.1.1 Keyboard</a> (level A)
         </strong>
         
@@ -390,7 +390,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 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" height="67.763" width="127.1" 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>
         
@@ -463,7 +463,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 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" height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
           2.1.1 Keyboard</a> (level A):
         </strong>
         
@@ -550,7 +550,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 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" height="67.763" width="127.1" 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>
         
@@ -588,7 +588,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
       <li>
         <strong>
           <a href="https://inclusivedesignprinciples.org#be-consistent">
-            <svg class="balloon" 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" height="177.17" width="141.73" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
             Be consistent
           </a>:
         </strong>
@@ -609,7 +609,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
       <li>
         <strong>
           <a href="https://inclusivedesignprinciples.org#add-value">
-            <svg class="balloon" 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" height="177.17" width="141.73" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
             Add value
           </a>:
         </strong>

themes/infusion/layouts/shortcodes/pattern.html

@@ -2,6 +2,8 @@
 {{ 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>
+      <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 }}

themes/infusion/static/css/styles.css

@@ -633,6 +633,33 @@ a .wcag-icon {
   width: 1.5em;
 }
 
+/* color palettes */
+
+.colors {
+  display: flex;
+  height: 5rem;
+  margin: -0.25rem;
+  list-style: none;
+  flex-wrap: nowrap;
+}
+
+.colors li {
+  margin: 0.25rem;
+  flex: 1 0 auto;
+  position: relative;
+}
+
+.colors span {
+  line-height: 1;
+  background-color: #111;
+  color: #fff;
+  font-size: 0.75rem;
+  padding: 0.25rem;
+  position: absolute;
+  bottom: 0.25rem;
+  right: 0.25rem;
+}
+
 /* cross references */
 
 .pattern-link {