skip link

public/css/styles.css

@@ -53,7 +53,7 @@ figure p img {
 
 :focus:not([tabindex="-1"]),
 [data-expands]:focus svg,
-.patterns a:focus span {
+.patterns a:focus .text {
   outline: 3px solid #ccc;
   outline-offset: 2px;
 }
@@ -148,9 +148,13 @@ main ul ul {
 /* Buttons */
 
 button {
-  font-size: inherit;
+  font-size: 1.25rem;
   font-family: inherit;
   font-weight: inherit;
+  background: #111;
+  color: #fff;
+  padding: 0.75rem;
+  border: 0;
 }
 
 /* Tables */
@@ -210,6 +214,9 @@ th:empty {
 .library-desc {
   font-style: italic;
   margin-top: 0.25rem;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 30rem;
 }
 
 .main-and-footer {
@@ -279,6 +286,19 @@ th:empty {
   text-decoration-skip: ink;
 }
 
+/* menu button */
+
+#menu-button {
+  display: none;
+  width: 100%;
+  text-align: center;
+}
+
+#menu-button:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 0.25rem #ccc;
+}
+
 /* Pattern lists */
 
 .patterns-list {
@@ -629,10 +649,41 @@ a .balloon {
 
   .patterns h3 {
     font-size: 1.125rem;
+    border-top: 4px solid;
+    border-bottom: 4px solid;
+    padding: 0.75rem 0;
+  }
+
+  .patterns ul ul {
+    margin: 0;
+  }
+
+  .patterns li {
+    margin-top: 0;
   }
 
   .pattern {
     font-size: 1rem;
   }
 
+  .pattern a {
+    padding: 0.75rem 0;
+  }
+
+  .pattern + .pattern {
+    border-top: 1px solid;
+  }
+
+  #menu-button {
+    display: block;
+  }
+
+  #patterns-list {
+    display: none;
+  }
+
+  [aria-expanded="true"] + #patterns-list {
+    display: block;
+  }
+
 }

public/index.html

@@ -63,33 +63,31 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             
             
-              <ul>
+              <ul id="patterns-list">
                 
                   <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>
-                      <span>Installation</span>
+                      <span class="text">Installation</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Library setup</span>
+                      <span class="text">Library setup</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Serving</span>
+                      <span class="text">Serving</span>
                     </a>
                   </li>
-                  </li>
                 
                 
                   <li>
@@ -99,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>
-                            <span>Library structure</span>
+                            <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>
-                            <span>Markdown &amp; metadata</span>
+                            <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>
-                            <span>Expandable sections</span>
+                            <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>
-                            <span>Including images</span>
+                            <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>
-                            <span>Notes &amp; warnings</span>
+                            <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>
-                            <span>References</span>
+                            <span class="text">References</span>
                           </a>
                         </li>
                       
@@ -148,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>
-                            <span>Code blocks</span>
+                            <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>
-                            <span>CodePen embedding</span>
+                            <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>
-                            <span>Writing inline demos</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       

public/js/dom-scripts.js

@@ -1,7 +1,7 @@
 /* expandable sections */
 (function () {
   function toggle (button, target) {
-    var expanded = button.getAttribute('aria-expanded') === 'true' || false
+    var expanded = button.getAttribute('aria-expanded') === 'true'
     button.setAttribute('aria-expanded', !expanded)
     target.hidden = !target.hidden
   }
@@ -15,16 +15,26 @@
       toggle(expander, target)
     })
   })
+}());
 
-}())
+/* menu button */
+(function () {
+  var button = document.getElementById('menu-button')
+  var menu = document.getElementById('patterns-list')
+  button.addEventListener('click', function() {
+    var expanded = this.getAttribute('aria-expanded') === 'true'
+    this.setAttribute('aria-expanded', !expanded)
+  })
+}());
 
 /* persist navigation scroll point */
-window.addEventListener('unload', function() {
-  var scrollPoint = document.getElementById('patterns-nav').scrollTop
-  localStorage.setItem('scrollPoint', scrollPoint)
-  console.log('scrollPoint:', localStorage.getItem('scrollPoint'))
-})
+(function () {
+  window.addEventListener('unload', function() {
+    var scrollPoint = document.getElementById('patterns-nav').scrollTop
+    localStorage.setItem('scrollPoint', scrollPoint)
+  })
 
-window.addEventListener('load', function() {
-  document.getElementById('patterns-nav').scrollTop = parseInt(localStorage.getItem('scrollPoint'))
-})
+  window.addEventListener('load', function() {
+    document.getElementById('patterns-nav').scrollTop = parseInt(localStorage.getItem('scrollPoint'))
+  })
+}());

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

@@ -62,33 +62,31 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             
             
-              <ul>
+              <ul id="patterns-list">
                 
                   <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>
-                      <span>Installation</span>
+                      <span class="text">Installation</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Library setup</span>
+                      <span class="text">Library setup</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Serving</span>
+                      <span class="text">Serving</span>
                     </a>
                   </li>
-                  </li>
                 
                 
                   <li>
@@ -98,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>
-                            <span>Library structure</span>
+                            <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>
-                            <span>Markdown &amp; metadata</span>
+                            <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>
-                            <span>Expandable sections</span>
+                            <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>
-                            <span>Including images</span>
+                            <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>
-                            <span>Notes &amp; warnings</span>
+                            <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>
-                            <span>References</span>
+                            <span class="text">References</span>
                           </a>
                         </li>
                       
@@ -147,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>
-                            <span>Code blocks</span>
+                            <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>
-                            <span>CodePen embedding</span>
+                            <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>
-                            <span>Writing inline demos</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       

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

@@ -62,33 +62,31 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             
             
-              <ul>
+              <ul id="patterns-list">
                 
                   <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>
-                      <span>Installation</span>
+                      <span class="text">Installation</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Library setup</span>
+                      <span class="text">Library setup</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Serving</span>
+                      <span class="text">Serving</span>
                     </a>
                   </li>
-                  </li>
                 
                 
                   <li>
@@ -98,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>
-                            <span>Library structure</span>
+                            <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>
-                            <span>Markdown &amp; metadata</span>
+                            <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>
-                            <span>Expandable sections</span>
+                            <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>
-                            <span>Including images</span>
+                            <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>
-                            <span>Notes &amp; warnings</span>
+                            <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>
-                            <span>References</span>
+                            <span class="text">References</span>
                           </a>
                         </li>
                       
@@ -147,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>
-                            <span>Code blocks</span>
+                            <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>
-                            <span>CodePen embedding</span>
+                            <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>
-                            <span>Writing inline demos</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       

public/patterns/code/index.html

@@ -62,33 +62,31 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             
             
-              <ul>
+              <ul id="patterns-list">
                 
                   <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>
-                      <span>Installation</span>
+                      <span class="text">Installation</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Library setup</span>
+                      <span class="text">Library setup</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Serving</span>
+                      <span class="text">Serving</span>
                     </a>
                   </li>
-                  </li>
                 
                 
                   <li>
@@ -98,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>
-                            <span>Library structure</span>
+                            <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>
-                            <span>Markdown &amp; metadata</span>
+                            <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>
-                            <span>Expandable sections</span>
+                            <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>
-                            <span>Including images</span>
+                            <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>
-                            <span>Notes &amp; warnings</span>
+                            <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>
-                            <span>References</span>
+                            <span class="text">References</span>
                           </a>
                         </li>
                       
@@ -147,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>
-                            <span>Code blocks</span>
+                            <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>
-                            <span>CodePen embedding</span>
+                            <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>
-                            <span>Writing inline demos</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       

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

@@ -62,33 +62,31 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             
             
-              <ul>
+              <ul id="patterns-list">
                 
                   <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>
-                      <span>Installation</span>
+                      <span class="text">Installation</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Library setup</span>
+                      <span class="text">Library setup</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Serving</span>
+                      <span class="text">Serving</span>
                     </a>
                   </li>
-                  </li>
                 
                 
                   <li>
@@ -98,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>
-                            <span>Library structure</span>
+                            <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>
-                            <span>Markdown &amp; metadata</span>
+                            <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>
-                            <span>Expandable sections</span>
+                            <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>
-                            <span>Including images</span>
+                            <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>
-                            <span>Notes &amp; warnings</span>
+                            <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>
-                            <span>References</span>
+                            <span class="text">References</span>
                           </a>
                         </li>
                       
@@ -147,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>
-                            <span>Code blocks</span>
+                            <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>
-                            <span>CodePen embedding</span>
+                            <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>
-                            <span>Writing inline demos</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       

public/patterns/index.html

@@ -62,33 +62,31 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             
             
-              <ul>
+              <ul id="patterns-list">
                 
                   <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>
-                      <span>Installation</span>
+                      <span class="text">Installation</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Library setup</span>
+                      <span class="text">Library setup</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Serving</span>
+                      <span class="text">Serving</span>
                     </a>
                   </li>
-                  </li>
                 
                 
                   <li>
@@ -98,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>
-                            <span>Library structure</span>
+                            <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>
-                            <span>Markdown &amp; metadata</span>
+                            <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>
-                            <span>Expandable sections</span>
+                            <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>
-                            <span>Including images</span>
+                            <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>
-                            <span>Notes &amp; warnings</span>
+                            <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>
-                            <span>References</span>
+                            <span class="text">References</span>
                           </a>
                         </li>
                       
@@ -147,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>
-                            <span>Code blocks</span>
+                            <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>
-                            <span>CodePen embedding</span>
+                            <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>
-                            <span>Writing inline demos</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       

public/patterns/installation/index.html

@@ -62,33 +62,31 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             
             
-              <ul>
+              <ul id="patterns-list">
                 
                   <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>
-                      <span>Installation</span>
+                      <span class="text">Installation</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Library setup</span>
+                      <span class="text">Library setup</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Serving</span>
+                      <span class="text">Serving</span>
                     </a>
                   </li>
-                  </li>
                 
                 
                   <li>
@@ -98,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>
-                            <span>Library structure</span>
+                            <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>
-                            <span>Markdown &amp; metadata</span>
+                            <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>
-                            <span>Expandable sections</span>
+                            <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>
-                            <span>Including images</span>
+                            <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>
-                            <span>Notes &amp; warnings</span>
+                            <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>
-                            <span>References</span>
+                            <span class="text">References</span>
                           </a>
                         </li>
                       
@@ -147,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>
-                            <span>Code blocks</span>
+                            <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>
-                            <span>CodePen embedding</span>
+                            <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>
-                            <span>Writing inline demos</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
@@ -211,7 +209,7 @@
 
 <p><strong>Infusion</strong> is hosted on Github. To start using it, you&rsquo;ll need to get the files from there. If you are comfortable with the command line, just fork the <a href="https://github.com/heydon/inclusive-pattern-library">github.com/heydon/inclusive-pattern-library</a> repository, then do a <code>git clone</code> to your local system. Replace <code>[your username]</code> in the following:</p>
 
-<pre class="cmd"><code>git clone https://github.com/[your username]/infusion-builder.git</code></pre>
+<pre class="cmd"><code>git clone https://github.com/[your username]/infusion.git</code></pre>
 
 
 <p>If the command line is not your thing, fork  <a href="https://github.com/heydon/inclusive-pattern-library">github.com/heydon/inclusive-pattern-library</a> and choose <strong>Open in Desktop</strong> from <strong>Clone or download</strong> (see figure 1, below).</p>

public/patterns/library-setup/index.html

@@ -62,33 +62,31 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             
             
-              <ul>
+              <ul id="patterns-list">
                 
                   <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>
-                      <span>Installation</span>
+                      <span class="text">Installation</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Library setup</span>
+                      <span class="text">Library setup</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Serving</span>
+                      <span class="text">Serving</span>
                     </a>
                   </li>
-                  </li>
                 
                 
                   <li>
@@ -98,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>
-                            <span>Library structure</span>
+                            <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>
-                            <span>Markdown &amp; metadata</span>
+                            <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>
-                            <span>Expandable sections</span>
+                            <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>
-                            <span>Including images</span>
+                            <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>
-                            <span>Notes &amp; warnings</span>
+                            <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>
-                            <span>References</span>
+                            <span class="text">References</span>
                           </a>
                         </li>
                       
@@ -147,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>
-                            <span>Code blocks</span>
+                            <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>
-                            <span>CodePen embedding</span>
+                            <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>
-                            <span>Writing inline demos</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       

public/patterns/serving/index.html

@@ -62,33 +62,31 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             
             
-              <ul>
+              <ul id="patterns-list">
                 
                   <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>
-                      <span>Installation</span>
+                      <span class="text">Installation</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Library setup</span>
+                      <span class="text">Library setup</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Serving</span>
+                      <span class="text">Serving</span>
                     </a>
                   </li>
-                  </li>
                 
                 
                   <li>
@@ -98,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>
-                            <span>Library structure</span>
+                            <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>
-                            <span>Markdown &amp; metadata</span>
+                            <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>
-                            <span>Expandable sections</span>
+                            <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>
-                            <span>Including images</span>
+                            <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>
-                            <span>Notes &amp; warnings</span>
+                            <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>
-                            <span>References</span>
+                            <span class="text">References</span>
                           </a>
                         </li>
                       
@@ -147,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>
-                            <span>Code blocks</span>
+                            <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>
-                            <span>CodePen embedding</span>
+                            <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>
-                            <span>Writing inline demos</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       

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

@@ -62,33 +62,31 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             
             
-              <ul>
+              <ul id="patterns-list">
                 
                   <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>
-                      <span>Installation</span>
+                      <span class="text">Installation</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Library setup</span>
+                      <span class="text">Library setup</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Serving</span>
+                      <span class="text">Serving</span>
                     </a>
                   </li>
-                  </li>
                 
                 
                   <li>
@@ -98,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>
-                            <span>Library structure</span>
+                            <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>
-                            <span>Markdown &amp; metadata</span>
+                            <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>
-                            <span>Expandable sections</span>
+                            <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>
-                            <span>Including images</span>
+                            <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>
-                            <span>Notes &amp; warnings</span>
+                            <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>
-                            <span>References</span>
+                            <span class="text">References</span>
                           </a>
                         </li>
                       
@@ -147,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>
-                            <span>Code blocks</span>
+                            <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>
-                            <span>CodePen embedding</span>
+                            <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>
-                            <span>Writing inline demos</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       

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

@@ -62,33 +62,31 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             
             
-              <ul>
+              <ul id="patterns-list">
                 
                   <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>
-                      <span>Installation</span>
+                      <span class="text">Installation</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Library setup</span>
+                      <span class="text">Library setup</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Serving</span>
+                      <span class="text">Serving</span>
                     </a>
                   </li>
-                  </li>
                 
                 
                   <li>
@@ -98,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>
-                            <span>Library structure</span>
+                            <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>
-                            <span>Markdown &amp; metadata</span>
+                            <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>
-                            <span>Expandable sections</span>
+                            <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>
-                            <span>Including images</span>
+                            <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>
-                            <span>Notes &amp; warnings</span>
+                            <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>
-                            <span>References</span>
+                            <span class="text">References</span>
                           </a>
                         </li>
                       
@@ -147,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>
-                            <span>Code blocks</span>
+                            <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>
-                            <span>CodePen embedding</span>
+                            <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>
-                            <span>Writing inline demos</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       

public/patterns/writing/index.html

@@ -62,33 +62,31 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             
             
-              <ul>
+              <ul id="patterns-list">
                 
                   <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>
-                      <span>Installation</span>
+                      <span class="text">Installation</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Library setup</span>
+                      <span class="text">Library setup</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Serving</span>
+                      <span class="text">Serving</span>
                     </a>
                   </li>
-                  </li>
                 
                 
                   <li>
@@ -98,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>
-                            <span>Library structure</span>
+                            <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>
-                            <span>Markdown &amp; metadata</span>
+                            <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>
-                            <span>Expandable sections</span>
+                            <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>
-                            <span>Including images</span>
+                            <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>
-                            <span>Notes &amp; warnings</span>
+                            <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>
-                            <span>References</span>
+                            <span class="text">References</span>
                           </a>
                         </li>
                       
@@ -147,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>
-                            <span>Code blocks</span>
+                            <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>
-                            <span>CodePen embedding</span>
+                            <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>
-                            <span>Writing inline demos</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       

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

@@ -62,33 +62,31 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             
             
-              <ul>
+              <ul id="patterns-list">
                 
                   <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>
-                      <span>Installation</span>
+                      <span class="text">Installation</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Library setup</span>
+                      <span class="text">Library setup</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Serving</span>
+                      <span class="text">Serving</span>
                     </a>
                   </li>
-                  </li>
                 
                 
                   <li>
@@ -98,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>
-                            <span>Library structure</span>
+                            <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>
-                            <span>Markdown &amp; metadata</span>
+                            <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>
-                            <span>Expandable sections</span>
+                            <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>
-                            <span>Including images</span>
+                            <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>
-                            <span>Notes &amp; warnings</span>
+                            <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>
-                            <span>References</span>
+                            <span class="text">References</span>
                           </a>
                         </li>
                       
@@ -147,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>
-                            <span>Code blocks</span>
+                            <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>
-                            <span>CodePen embedding</span>
+                            <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>
-                            <span>Writing inline demos</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       

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

@@ -62,33 +62,31 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             
             
-              <ul>
+              <ul id="patterns-list">
                 
                   <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>
-                      <span>Installation</span>
+                      <span class="text">Installation</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Library setup</span>
+                      <span class="text">Library setup</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Serving</span>
+                      <span class="text">Serving</span>
                     </a>
                   </li>
-                  </li>
                 
                 
                   <li>
@@ -98,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>
-                            <span>Library structure</span>
+                            <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>
-                            <span>Markdown &amp; metadata</span>
+                            <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>
-                            <span>Expandable sections</span>
+                            <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>
-                            <span>Including images</span>
+                            <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>
-                            <span>Notes &amp; warnings</span>
+                            <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>
-                            <span>References</span>
+                            <span class="text">References</span>
                           </a>
                         </li>
                       
@@ -147,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>
-                            <span>Code blocks</span>
+                            <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>
-                            <span>CodePen embedding</span>
+                            <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>
-                            <span>Writing inline demos</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       

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

@@ -62,33 +62,31 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             
             
-              <ul>
+              <ul id="patterns-list">
                 
                   <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>
-                      <span>Installation</span>
+                      <span class="text">Installation</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Library setup</span>
+                      <span class="text">Library setup</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Serving</span>
+                      <span class="text">Serving</span>
                     </a>
                   </li>
-                  </li>
                 
                 
                   <li>
@@ -98,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>
-                            <span>Library structure</span>
+                            <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>
-                            <span>Markdown &amp; metadata</span>
+                            <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>
-                            <span>Expandable sections</span>
+                            <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>
-                            <span>Including images</span>
+                            <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>
-                            <span>Notes &amp; warnings</span>
+                            <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>
-                            <span>References</span>
+                            <span class="text">References</span>
                           </a>
                         </li>
                       
@@ -147,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>
-                            <span>Code blocks</span>
+                            <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>
-                            <span>CodePen embedding</span>
+                            <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>
-                            <span>Writing inline demos</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       

public/patterns/writing/references/index.html

@@ -62,33 +62,31 @@
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             
             
-              <ul>
+              <ul id="patterns-list">
                 
                   <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>
-                      <span>Installation</span>
+                      <span class="text">Installation</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Library setup</span>
+                      <span class="text">Library setup</span>
                     </a>
                   </li>
-                  </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>
-                      <span>Serving</span>
+                      <span class="text">Serving</span>
                     </a>
                   </li>
-                  </li>
                 
                 
                   <li>
@@ -98,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>
-                            <span>Library structure</span>
+                            <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>
-                            <span>Markdown &amp; metadata</span>
+                            <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>
-                            <span>Expandable sections</span>
+                            <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>
-                            <span>Including images</span>
+                            <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>
-                            <span>Notes &amp; warnings</span>
+                            <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>
-                            <span>References</span>
+                            <span class="text">References</span>
                           </a>
                         </li>
                       
@@ -147,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>
-                            <span>Code blocks</span>
+                            <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>
-                            <span>CodePen embedding</span>
+                            <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>
-                            <span>Writing inline demos</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       

themes/infusion/layouts/_default/baseof.html

@@ -16,6 +16,7 @@
     </title>
   </head>
   <body>
+    <a href="#main">skip to content</a>
     {{ partial "svg.html" . }}
     <div class="wrapper">
       <header class="intro-and-nav" role="banner">

themes/infusion/static/css/styles.css

@@ -63,6 +63,27 @@ div:not([tabindex]):focus {
   outline: none;
 }
 
+/* skip link */
+
+[href="#main"] {
+  display: block;
+  width: 100%;
+  padding: 0.75rem;
+  color: #fff;
+  background: #000;
+  position: absolute;
+  top: -3rem;
+  text-align: center;
+  z-index: 1;
+}
+
+[href="#main"]:focus {
+  top: 0;
+  outline: none;
+}
+
+/* text styles */
+
 h1, h2, h3, h4 {
   font-family: Miriam Libre, serif;
   line-height: 1.125;