Updated web script

Used emoji for clipboard icons, added persistent scroll to top button with proper smooth scrolling.

docs/mini/flavor.scss

@@ -437,3 +437,20 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection {
 .token.entity {
   cursor: help;
 }
+
+button.scroll-to-top {
+  border-radius: 100%;
+  font-size: 1.5rem;
+  line-height: 1;
+  box-sizing: border-box;
+  width: 2.75rem;
+  height: 2.75rem;
+  position: fixed;
+  bottom: 1rem;
+  right: 2rem;
+  background: var(#{$back-color-var});
+  box-shadow: 0 .25rem .25rem 0 rgba(0,0,0,0.125),0 .125rem .125rem -.125rem rgba(0,0,0,0.25);
+  &:hover, &:focus {
+    background: var(#{$secondary-back-color-var});
+  }
+}

scripts/web.js

@@ -169,7 +169,7 @@ try {
             .replace(/<\/h3>/g, `${taggedSnippet[1].includes('advanced')?'<mark class="tag">advanced</mark>':''}</h3>`)
             .replace(/<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm, (match, p1) => `<pre class="language-js">${Prism.highlight(unescapeHTML(p1), Prism.languages.javascript)}</pre>`)
             .replace(/<\/pre>\s+<pre/g, '</pre><label class="collapse">Show examples</label><pre') +
-          '<button class="primary clipboard-copy"><img src="clipboard.svg" alt="clipboard">&nbsp;Copy to clipboard</button>' +
+          '<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button>' +
           '</div></div>';
     } else {
       output += md
@@ -185,7 +185,7 @@ try {
             .replace(/<\/h3>/g, '</h3><div class="section double-padded">')
             .replace(/<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm, (match, p1) => `<pre class="language-js">${Prism.highlight(unescapeHTML(p1), Prism.languages.javascript)}</pre>`)
             .replace(/<\/pre>\s+<pre/g, '</pre><label class="collapse">Show examples</label><pre') +
-          '<button class="primary clipboard-copy"><img src="clipboard.svg" alt="clipboard">&nbsp;Copy to clipboard</button>' +
+          '<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button>' +
           '</div></div>';
     }
   }

static-parts/index-end.html

@@ -1,6 +1,6 @@
+        <button class="scroll-to-top">&uarr;</button>
         <footer>
           <p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br/>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.<br/>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a><br/>Built with the <a href="https://minicss.org">mini.css framework</a>.</p>
-          <a href="#top"><span style="display: inline-block;float: right;padding-right: 2em;">Back to top</span></a>
         </footer>
       </main>
     </div>

static-parts/index-start.html

@@ -27,6 +27,13 @@
           x.style.display = matchingTags.includes(x.innerText.toLowerCase()) ? '' : 'none';
         })
       }
+      function scrollToTop(){
+        const c = document.querySelector('main').scrollTop;
+        if (c > 0) {
+          window.requestAnimationFrame(scrollToTop);
+          document.querySelector('main').scrollTo(0, c - c / 4);
+        }
+      };
       function loader() {
         registerClickListener();
       }
@@ -54,6 +61,9 @@
               },300);
             },1700);
           }
+          else if (event.target.classList.contains('scroll-to-top')){
+            scrollToTop();
+          }
         }, false);
       }
     </script>